From 2e9cefe6516e59d1fd471f6dc3afd40c84a5c747 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Fri, 8 Jan 2021 15:31:31 +0100
Subject: [PATCH] itemSlider: show prev/next buttons
---
src/components/ItemSlider.vue | 25 ++++++++++++++++++-------
1 file changed, 18 insertions(+), 7 deletions(-)
diff --git a/src/components/ItemSlider.vue b/src/components/ItemSlider.vue
index 07738a7..f85283f 100644
--- a/src/components/ItemSlider.vue
+++ b/src/components/ItemSlider.vue
@@ -29,7 +29,10 @@
<div
v-show="showPrev"
class="navSlider navPrev" />
- <div id="slider" class="podcastSlider">
+ <div
+ id="slider"
+ class="podcastSlider"
+ :class="[showPrev ? '' : 'hideBefore', showNext ? '' : 'hideAfter']">
<div
v-for="(podcast, idx) in podcasts"
:key="idx"
@@ -123,7 +126,7 @@ export default {
}
.podcastSliderWrapper {
- display: flex;
+ position: relative;
}
.podcastSlider {
@@ -137,25 +140,33 @@ export default {
content: '';
display: block;
position: absolute;
- left: 30px;
+ left: 0px;
height: 220px;
width: 100px;
- background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
+ background-image: linear-gradient(to right, white 0%, rgba(255,255,255,0) 100%);
}
&:after {
content: '';
display: block;
position: absolute;
- right: 30px;
+ right: 0px;
height: 220px;
width: 100px;
background-image: linear-gradient(to left, white 0%, rgba(255,255,255,0) 100%);
}
}
+ .podcastSlider.hideBefore:before {
+ display: none;
+ }
+
+ .podcastSlider.hideAfter:after {
+ display: none;
+ }
+
.navSlider {
- position: relative;
+ position: absolute;
top: 60px;
height: 100px;
width: 40px;
@@ -172,7 +183,7 @@ export default {
}
.navNext {
- right: -25px;
+ right: -0px;
background-image: var(--icon-triangle-e-000);
}
--
GitLab