starred/audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2026-09-12 21:01:50 +02:00
Code Issues 454 Packages Projects Releases 10 Wiki Activity

Fix:Filter dialog clear filter button overflow notch on ios #999

Browse Source
This commit is contained in:
advplyr
2023-12-27 17:23:55 -06:00
parent d5496c2e9a
commit 017b6237ca
3 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/modals/FilterModal.vue
+3 -3
View File
@@ -1,12 +1,12 @@
<template> <template>
<modals-modal v-model="show" width="90%" height="100%"> <modals-modal v-model="show" width="90%" height="100%">
<template #outer> <template #outer>
<div v-show="selected !== 'all'" class="absolute top-10 left-4 z-40"> <div v-show="selected !== 'all'" class="absolute top-12 left-4 z-40">
<ui-btn class="text-lg border-yellow-400 border-opacity-40" @click="clearSelected">{{ $strings.ButtonClearFilter }}</ui-btn> <ui-btn class="text-lg border-yellow-400 border-opacity-40 h-10" :padding-y="0" @click="clearSelected">{{ $strings.ButtonClearFilter }}</ui-btn>
</div> </div>
</template> </template>
<div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false"> <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
<div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-fg/20" style="max-height: 75%" @click.stop> <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-fg/20 mt-8" style="max-height: 75%" @click.stop>
<ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label"> <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
<template v-for="item in items"> <template v-for="item in items">
<li :key="item.value" class="text-fg select-none relative py-4 pr-9 cursor-pointer" :class="item.value === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedOption(item)"> <li :key="item.value" class="text-fg select-none relative py-4 pr-9 cursor-pointer" :class="item.value === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
components/modals/Modal.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div ref="wrapper" class="modal modal-bg w-full h-full max-h-screen fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-50 opacity-0"> <div ref="wrapper" class="modal modal-bg w-full h-full max-h-screen fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-50 opacity-0">
<div class="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-black to-transparent opacity-90 pointer-events-none" /> <div class="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-black to-transparent opacity-90 pointer-events-none" />
<div class="absolute z-40 top-10 right-4 h-10 w-10 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false"> <div class="absolute z-40 top-11 right-4 h-10 w-10 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">
<span class="material-icons text-4xl">close</span> <span class="material-icons text-4xl">close</span>
</div> </div>
<slot name="outer" /> <slot name="outer" />
components/ui/Btn.vue
+6 -2
View File
@@ -30,6 +30,7 @@ export default {
default: '' default: ''
}, },
paddingX: Number, paddingX: Number,
paddingY: Number,
small: Boolean, small: Boolean,
loading: Boolean, loading: Boolean,
disabled: Boolean disabled: Boolean
@@ -48,14 +49,17 @@ export default {
if (this.small) { if (this.small) {
list.push('text-sm') list.push('text-sm')
if (this.paddingX === undefined) list.push('px-4') if (this.paddingX === undefined) list.push('px-4')
list.push('py-1') if (this.paddingY === undefined) list.push('py-1')
} else { } else {
if (this.paddingX === undefined) list.push('px-8') if (this.paddingX === undefined) list.push('px-8')
list.push('py-2') if (this.paddingY === undefined) list.push('py-2')
} }
if (this.paddingX !== undefined) { if (this.paddingX !== undefined) {
list.push(`px-${this.paddingX}`) list.push(`px-${this.paddingX}`)
} }
if (this.paddingY !== undefined) {
list.push(`py-${this.paddingY}`)
}
if (this.disabled) { if (this.disabled) {
list.push('cursor-not-allowed') list.push('cursor-not-allowed')
} }