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

Move nuxt components to components-nuxt

Browse source
This commit is contained in:
Sam Carlton 2021-09-11 13:07:08 -05:00
parent 300d9598b4
commit decaaabfe1
36 changed files with 62 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

86
components/video/card.vue
View file

@ -1,86 +0,0 @@
<template>
<div class="video-card">
<a
:href="video.endpoint"
class=""
>
<div class="video-card-container relative overflow-hidden bg-black">
<div class="video-card-image ratio-wrapper">
<div class="relative overflow-hidden w-full pb-16/9">
<picture>
<source
:sizes="video.thumbnail.sizes"
:data-srcset="video.thumbnail.srcset"
type="image/jpg"
>
<img
:data-src="video.thumbnail.src"
:alt="video.name"
class="lazyload absolute h-full w-full object-cover"
>
</picture>
</div>
</div>
<div
:style="{
'--gradient-from-color': 'rgba(0, 0, 0, 1)',
'--gradient-to-color': 'rgba(0, 0, 0, 0.7)'
}"
class="video-card-overlay absolute inset-0 flex justify-between items-start bg-gradient-to-tr from-black to-transparent p-4"
>
<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"
>
<path
fill="currentColor"
d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"
/>
</svg>
</div>
<div
v-if="pill"
class="video-pill h-5 text-xs bg-white-2 flex justify-center items-center outline-0 rounded-full ease px-2"
>
{{ pill }}
</div>
</div>
<!-- Video Text Content -->
<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>
</a>
</div>
</template>
<script>
import 'lazysizes'
export default {
props: {
video: {
type: Object,
required: true
}
},
computed: {
pill () {
// if this video has a banchmark tag
// then pill is 'Benchmark'
if (this.video.tags.includes('benchmark')) return 'Benchmark'
// No pill
return null
}
}
}
</script>