Cutlery/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-05-24 01:13:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix:Home page always showing horizontal scrollbar

Browse Source
This commit is contained in:
advplyr 2024-04-21 15:36:01 -05:00
parent 359a2752d8
commit aae8e7535a
6 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/assets/app.css
View File

@ -30,8 +30,7 @@
} }
.bookshelf-row { .bookshelf-row {
/* Sidebar width + scrollbar width */ width: calc(100vw - (100vw - 100%));
width: calc(100vw - 88px);
} }
@media (max-width: 768px) { @media (max-width: 768px) {

6
client/components/widgets/AuthorsSlider.vue
View File

@ -10,10 +10,10 @@
<span class="material-icons text-2xl">chevron_right</span> <span class="material-icons text-2xl">chevron_right</span>
</button> </button>
</div> </div>
<div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled"> <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
<div class="flex" :style="{ height: height + 'px' }"> <div class="flex space-x-4" :style="{ height: height + 'px' }">
<template v-for="(item, index) in items"> <template v-for="(item, index) in items">
<cards-author-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :author="item" :height="cardHeight" :width="cardWidth" class="relative mx-2" @edit="editAuthor" @hook:updated="setScrollVars" /> <cards-author-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :author="item" :height="cardHeight" :width="cardWidth" class="relative" @edit="editAuthor" @hook:updated="setScrollVars" />
</template> </template>
</div> </div>
</div> </div>

6
client/components/widgets/EpisodeSlider.vue
View File

@ -10,8 +10,8 @@
<span class="material-icons text-2xl">chevron_right</span> <span class="material-icons text-2xl">chevron_right</span>
</button> </button>
</div> </div>
<div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled"> <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
<div class="flex" :style="{ height: height + 'px' }"> <div class="flex space-x-4" :style="{ height: height + 'px' }">
<template v-for="(item, index) in items"> <template v-for="(item, index) in items">
<cards-lazy-book-card <cards-lazy-book-card
:key="item.recentEpisode.id" :key="item.recentEpisode.id"
@ -23,7 +23,7 @@
:book-cover-aspect-ratio="bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio"
:bookshelf-view="bookshelfView" :bookshelf-view="bookshelfView"
:continue-listening-shelf="continueListeningShelf" :continue-listening-shelf="continueListeningShelf"
class="relative mx-2" class="relative"
@edit="editEpisode" @edit="editEpisode"
@editPodcast="editPodcast" @editPodcast="editPodcast"
@select="selectItem" @select="selectItem"

6
client/components/widgets/ItemSlider.vue
View File

@ -10,8 +10,8 @@
<span class="material-icons text-2xl">chevron_right</span> <span class="material-icons text-2xl">chevron_right</span>
</button> </button>
</div> </div>
<div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled"> <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
<div class="flex" :style="{ height: height + 'px' }"> <div class="flex space-x-4" :style="{ height: height + 'px' }">
<template v-for="(item, index) in items"> <template v-for="(item, index) in items">
<cards-lazy-book-card <cards-lazy-book-card
:key="item.id + '-' + shelfId + '-' + index" :key="item.id + '-' + shelfId + '-' + index"
@ -23,7 +23,7 @@
:book-cover-aspect-ratio="bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio"
:bookshelf-view="bookshelfView" :bookshelf-view="bookshelfView"
:continue-listening-shelf="continueListeningShelf" :continue-listening-shelf="continueListeningShelf"
class="relative mx-2" class="relative"
@edit="editItem" @edit="editItem"
@select="selectItem" @select="selectItem"
@hook:updated="setScrollVars" @hook:updated="setScrollVars"

6
client/components/widgets/NarratorsSlider.vue
View File

@ -10,10 +10,10 @@
<span class="material-icons text-2xl">chevron_right</span> <span class="material-icons text-2xl">chevron_right</span>
</button> </button>
</div> </div>
<div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled"> <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
<div class="flex" :style="{ height: height + 'px' }"> <div class="flex space-x-4" :style="{ height: height + 'px' }">
<template v-for="item in items"> <template v-for="item in items">
<cards-narrator-card :key="item.name" :ref="`slider-item-${item.name}`" :narrator="item" :height="cardHeight" :width="cardWidth" class="relative mx-2" @hook:updated="setScrollVars" /> <cards-narrator-card :key="item.name" :ref="`slider-item-${item.name}`" :narrator="item" :height="cardHeight" :width="cardWidth" class="relative" @hook:updated="setScrollVars" />
</template> </template>
</div> </div>
</div> </div>

6
client/components/widgets/SeriesSlider.vue
View File

@ -10,10 +10,10 @@
<span class="material-icons text-2xl">chevron_right</span> <span class="material-icons text-2xl">chevron_right</span>
</button> </button>
</div> </div>
<div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled"> <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
<div class="flex" :style="{ height: height + 'px' }"> <div class="flex space-x-4" :style="{ height: height + 'px' }">
<template v-for="(item, index) in items"> <template v-for="(item, index) in items">
<cards-lazy-series-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :series-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="$constants.BookshelfView.DETAIL" class="relative mx-2" @hook:updated="setScrollVars" /> <cards-lazy-series-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :series-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="$constants.BookshelfView.DETAIL" class="relative" @hook:updated="setScrollVars" />
</template> </template>
</div> </div>
</div> </div>