amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(client): Consider safe-area-inset-bottom on global widgets area

Browse Source 
Fix #9052
This commit is contained in:
tamaina 2023-04-10 17:11:44 +00:00
parent 567c66567e
commit 83bcdb8ede
3 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/src/ui/classic.vue
View File

@ -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);

4
packages/frontend/src/ui/universal.vue
View File

@ -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;

6
packages/frontend/src/ui/universal.widgets.vue
View File

@ -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>