mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-12 22:13:08 +02:00
fix(client): Consider safe-area-inset-bottom on global widgets area
Fix #9052
This commit is contained in:
parent
567c66567e
commit
83bcdb8ede
3 changed files with 9 additions and 4 deletions
|
@ -250,6 +250,7 @@ onMounted(() => {
|
||||||
> .widgets {
|
> .widgets {
|
||||||
//--panelBorder: none;
|
//--panelBorder: none;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
|
padding-bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
|
||||||
|
|
||||||
@media (max-width: $widgets-hide-threshold) {
|
@media (max-width: $widgets-hide-threshold) {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -304,7 +305,7 @@ onMounted(() => {
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
height: 100dvh;
|
height: 100dvh;
|
||||||
padding: var(--margin);
|
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
|
|
|
@ -296,7 +296,7 @@ $widgets-hide-threshold: 1090px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.widgets {
|
.widgets {
|
||||||
padding: 0 var(--margin);
|
padding: 0 var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
|
||||||
border-left: solid 0.5px var(--divider);
|
border-left: solid 0.5px var(--divider);
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
|
|
||||||
|
@ -329,7 +329,7 @@ $widgets-hide-threshold: 1090px;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
height: 100dvh;
|
height: 100dvh;
|
||||||
padding: var(--margin) !important;
|
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px)) !important;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
overscroll-behavior: contain;
|
overscroll-behavior: contain;
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<XWidgets :class="$style.widgets" :edit="editMode" :widgets="widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
|
<XWidgets :class="$style.widgets" :edit="editMode" :widgets="widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
|
||||||
|
|
||||||
<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
|
<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
|
||||||
<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button>
|
<button v-else class="_textButton mk-widget-edit" :class="$style.edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -91,4 +91,8 @@ function updateWidgets(thisWidgets) {
|
||||||
.widgets {
|
.widgets {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.edit {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue