Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add scroll buttons to video rows

Browse source
This commit is contained in:
Sam Carlton 2020-12-11 00:32:08 -06:00
parent 27d748d235
commit 67fe06ff1b
2 changed files with 56 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

58
components/video/row.vue
View file

@ -1,6 +1,7 @@
<template>
<div class="video-row w-full">
<div class="video-row relative w-full">
<div
ref="row"
:style="{
scrollSnapType: 'x mandatory'
}"
@ -11,14 +12,54 @@
:key="video.slug"
:video="video"
:style="{
maxWidth: '350px',
flexBasis: '350px',
flexGrow: '0',
maxWidth: `${cardWidth}px`,
flexBasis: `${cardWidth}px`,
scrollSnapAlign: 'start'
}"
class="w-full flex-shrink-0 flex-grow-0"
/>
</div>
<button
:style="{
top: '50%',
}"
class="absolute left-0 h-10 w-10 flex justify-center items-center transform -translate-y-1/2 -translate-x-1/2 bg-darker rounded-full"
@click="scrollRow(cardWidth * -1)"
>
<svg
class="h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
style="transform: scaleX(-1);"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</button>
<button
:style="{
top: '50%',
}"
class="absolute right-0 h-10 w-10 flex justify-center items-center transform -translate-y-1/2 translate-x-1/2 bg-darker rounded-full"
@click="scrollRow(cardWidth)"
>
<svg
class="h-5 w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
</template>
@ -35,6 +76,15 @@ export default {
videos: {
type: Array,
required: true
},
cardWidth: {
type: Number,
default: 350
}
},
methods: {
scrollRow ( pixels ) {
this.$refs['row'].scrollBy({ left: pixels, behavior: 'smooth' })
}
}
}