From aae8e7535a65942e834c7fe1f09438d6ebae977b Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 21 Apr 2024 15:36:01 -0500
Subject: [PATCH] Fix:Home page always showing horizontal scrollbar
---
client/assets/app.css | 3 +--
client/components/widgets/AuthorsSlider.vue | 6 +++---
client/components/widgets/EpisodeSlider.vue | 6 +++---
client/components/widgets/ItemSlider.vue | 6 +++---
client/components/widgets/NarratorsSlider.vue | 6 +++---
client/components/widgets/SeriesSlider.vue | 6 +++---
6 files changed, 16 insertions(+), 17 deletions(-)
diff --git a/client/assets/app.css b/client/assets/app.css
index 2e0714f978..7daf74ff4b 100644
--- a/client/assets/app.css
+++ b/client/assets/app.css
@@ -30,8 +30,7 @@
}
.bookshelf-row {
- /* Sidebar width + scrollbar width */
- width: calc(100vw - 88px);
+ width: calc(100vw - (100vw - 100%));
}
@media (max-width: 768px) {
diff --git a/client/components/widgets/AuthorsSlider.vue b/client/components/widgets/AuthorsSlider.vue
index 72e02f1162..1a87bb606d 100644
--- a/client/components/widgets/AuthorsSlider.vue
+++ b/client/components/widgets/AuthorsSlider.vue
@@ -10,10 +10,10 @@
<span class="material-icons text-2xl">chevron_right</span>
</button>
</div>
- <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
- <div class="flex" :style="{ height: height + 'px' }">
+ <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
+ <div class="flex space-x-4" :style="{ height: height + 'px' }">
<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>
</div>
</div>
diff --git a/client/components/widgets/EpisodeSlider.vue b/client/components/widgets/EpisodeSlider.vue
index 1c6c55bb5a..400f0a0ca2 100644
--- a/client/components/widgets/EpisodeSlider.vue
+++ b/client/components/widgets/EpisodeSlider.vue
@@ -10,8 +10,8 @@
<span class="material-icons text-2xl">chevron_right</span>
</button>
</div>
- <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
- <div class="flex" :style="{ height: height + 'px' }">
+ <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
+ <div class="flex space-x-4" :style="{ height: height + 'px' }">
<template v-for="(item, index) in items">
<cards-lazy-book-card
:key="item.recentEpisode.id"
@@ -23,7 +23,7 @@
:book-cover-aspect-ratio="bookCoverAspectRatio"
:bookshelf-view="bookshelfView"
:continue-listening-shelf="continueListeningShelf"
- class="relative mx-2"
+ class="relative"
@edit="editEpisode"
@editPodcast="editPodcast"
@select="selectItem"
diff --git a/client/components/widgets/ItemSlider.vue b/client/components/widgets/ItemSlider.vue
index da6eeba479..2fd29a6f51 100644
--- a/client/components/widgets/ItemSlider.vue
+++ b/client/components/widgets/ItemSlider.vue
@@ -10,8 +10,8 @@
<span class="material-icons text-2xl">chevron_right</span>
</button>
</div>
- <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
- <div class="flex" :style="{ height: height + 'px' }">
+ <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
+ <div class="flex space-x-4" :style="{ height: height + 'px' }">
<template v-for="(item, index) in items">
<cards-lazy-book-card
:key="item.id + '-' + shelfId + '-' + index"
@@ -23,7 +23,7 @@
:book-cover-aspect-ratio="bookCoverAspectRatio"
:bookshelf-view="bookshelfView"
:continue-listening-shelf="continueListeningShelf"
- class="relative mx-2"
+ class="relative"
@edit="editItem"
@select="selectItem"
@hook:updated="setScrollVars"
diff --git a/client/components/widgets/NarratorsSlider.vue b/client/components/widgets/NarratorsSlider.vue
index 77302f6f70..881c148b1c 100644
--- a/client/components/widgets/NarratorsSlider.vue
+++ b/client/components/widgets/NarratorsSlider.vue
@@ -10,10 +10,10 @@
<span class="material-icons text-2xl">chevron_right</span>
</button>
</div>
- <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
- <div class="flex" :style="{ height: height + 'px' }">
+ <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
+ <div class="flex space-x-4" :style="{ height: height + 'px' }">
<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>
</div>
</div>
diff --git a/client/components/widgets/SeriesSlider.vue b/client/components/widgets/SeriesSlider.vue
index 2244e5772e..820cbe1e3f 100644
--- a/client/components/widgets/SeriesSlider.vue
+++ b/client/components/widgets/SeriesSlider.vue
@@ -10,10 +10,10 @@
<span class="material-icons text-2xl">chevron_right</span>
</button>
</div>
- <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
- <div class="flex" :style="{ height: height + 'px' }">
+ <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
+ <div class="flex space-x-4" :style="{ height: height + 'px' }">
<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>
</div>
</div>