Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-15 06:35:20 -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

4
components/video/card.vue
View file

@ -24,7 +24,7 @@
}"
class="video-card-overlay absolute inset-0 flex justify-start items-start bg-gradient-to-tr from-black to-transparent p-4"
>
<div class="play-circle w-10 h-10 bg-white-5 flex justify-center items-center outline-0 rounded-full ease">
<div class="play-circle w-8 h-8 bg-white-2 flex justify-center items-center outline-0 rounded-full ease">
<svg
viewBox="0 0 18 18"
style="width:18px;height:18px;margin-left:3px"
@ -36,7 +36,7 @@
</svg>
</div>
</div>
<div class="video-card-content absolute inset-0 flex items-end p-4">
<div class="video-card-content absolute inset-0 flex items-end py-4 px-6">
<div class="w-full text-sm text-left whitespace-normal">{{ video.name }}</div>
</div>
</div>

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' })
}
}
}