Skip to content
Snippets Groups Projects
Commit f8b03433 authored by onny's avatar onny
Browse files

itemSlider: show prev/next buttons

parent 1982ec07
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/ItemSlider.vue
+ 161
− 98
View file @ f8b03433
......@@ -25,29 +25,36 @@
<h1>{{ title }}</h1>
<a :href="showallurl">Show all</a>
</div>
<div class="podcastSlider">
<div class="navPrev" />
<div class="navNext" />
<div class="podcastSliderWrapper">
<div
v-for="(podcast, idx) in podcasts"
:key="idx"
class="podcastCard">
<router-link :to="{ path: `/browse/show/${podcast.id}`}">
<div v-lazy:background-image="podcast.smallImageURL"
class="podcastImage" />
<span class="title">
{{ podcast.title }}
</span>
<span class="subtitle">
{{ podcast.author }}
</span>
</router-link>
v-show="showPrev"
class="navSlider navPrev" />
<div id="slider" class="podcastSlider">
<div
v-for="(podcast, idx) in podcasts"
:key="idx"
class="podcastCard">
<router-link :to="{ path: `/browse/show/${podcast.id}`}">
<div v-lazy:background-image="podcast.smallImageURL"
class="podcastImage" />
<span class="title">
{{ podcast.title }}
</span>
<span class="subtitle">
{{ podcast.author }}
</span>
</router-link>
</div>
</div>
<div
v-show="showNext"
class="navSlider navNext" />
</div>
</div>
</template>
<script>
export default {
name: 'ItemSlider',
props: {
......@@ -60,108 +67,164 @@ export default {
default: '',
},
podcasts: {
type: Array,
default() { return [] },
type: Object,
default() { return {} },
},
},
data: () => ({
showPrev: false,
showNext: true,
}),
mounted() {
const slider = this.$el.querySelector('#slider')
const vm = this
slider.addEventListener('scroll', function() {
if (slider.scrollLeft > 0) {
vm.showPrev = true
} else {
vm.showPrev = false
}
const maxScrollLeft = slider.scrollWidth - slider.clientWidth
if (slider.scrollLeft === maxScrollLeft) {
vm.showNext = false
} else {
vm.showNext = true
}
})
},
}
</script>
<style lang="scss">
.podcastSection {
margin-bottom: 20px;
}
.podcastSectionHeader {
padding: 10px 0px;
z-index: 60;
position: sticky;
top: 50px;
background: white;
display: flex;
align-items: center;
margin-bottom: 10px;
h1 {
flex-grow: 1;
font-size: 1.6em;
.podcastSection {
margin-bottom: 20px;
}
a {
color: #1976d2;
cursor: pointer;
.podcastSectionHeader {
padding: 10px 0px;
z-index: 60;
position: sticky;
top: 50px;
background: white;
display: flex;
align-items: center;
margin-bottom: 10px;
h1 {
flex-grow: 1;
font-size: 1.6em;
}
a {
color: #1976d2;
cursor: pointer;
}
}
}
.podcastSlider {
width: 100%;
display: flex;
overflow: hidden;
overflow-x: auto;
scrollbar-width: none;
&:before {
content: '';
display: block;
position: absolute;
left: 30px;
height: 220px;
width: 100px;
background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
.podcastSliderWrapper {
display: flex;
}
&:after {
content: '';
display: block;
position: absolute;
right: 30px;
height: 220px;
width: 100px;
background-image: linear-gradient(to left, white 0%, rgba(255,255,255,0) 100%);
.podcastSlider {
width: 100%;
display: flex;
overflow: hidden;
overflow-x: auto;
scrollbar-width: none;
&:before {
content: '';
display: block;
position: absolute;
left: 30px;
height: 220px;
width: 100px;
background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
}
&:after {
content: '';
display: block;
position: absolute;
right: 30px;
height: 220px;
width: 100px;
background-image: linear-gradient(to left, white 0%, rgba(255,255,255,0) 100%);
}
}
}
.podcastCard {
width: 170px;
height: 220px;
margin-right: 15px;
flex-shrink: 0;
background: rgba(241, 241, 241, 0.6);
border-radius: 3px;
padding: 15px;
transition: all 0.2s ease-in-out;
* {
cursor: pointer;
.navSlider {
position: relative;
top: 60px;
height: 100px;
width: 40px;
z-index: 100;
background: rgba(241, 241, 241, 1);
border: 1px solid #ddd;
background-repeat: no-repeat;
background-position: center center;
background-size: 80%;
}
.podcastImage {
background-size: cover;
background-position: center;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
border: 1px solid rgba(0,0,0,.5);
border-radius: 5px;
width: 140px;
height: 140px;
margin-bottom: 5px;
transition: opacity .4s ease;
.navSlider:hover {
background: rgb(236, 236, 236);
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
.navNext {
right: -25px;
background-image: var(--icon-triangle-e-000);
}
.navPrev {
left: -5px;
background-image: var(--icon-triangle-e-000);
transform: rotate(180deg);
}
span.title {
font-size: 1em;
.podcastCard {
width: 170px;
height: 220px;
margin-right: 15px;
flex-shrink: 0;
background: rgba(241, 241, 241, 0.6);
border-radius: 3px;
padding: 15px;
transition: all 0.2s ease-in-out;
* {
cursor: pointer;
}
.podcastImage {
background-size: cover;
background-position: center;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
border: 1px solid rgba(0,0,0,.5);
border-radius: 5px;
width: 140px;
height: 140px;
margin-bottom: 5px;
transition: opacity .4s ease;
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
span.title {
font-size: 1em;
}
span.subtitle {
font-size: 0.9em;
color: #b5b1b1;
}
}
span.subtitle {
font-size: 0.9em;
color: #b5b1b1;
.podcastCard:hover {
background: rgb(236, 236, 236);
}
}
.podcastCard:hover {
background: rgb(236, 236, 236);
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment