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

Use poster component for cards

Browse source
This commit is contained in:
Sam Carlton 2021-05-15 19:01:06 -05:00
parent 7b004ea590
commit f7d7c7266f
3 changed files with 37 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components-eleventy/video/card.js
View file

@ -1,3 +1,4 @@
import renderPoster from './poster.js'
function pill ( text ) {
return /* html */`
@ -20,6 +21,8 @@ export default async function ( video, options = {} ) {
// console.log('video', video)
const posterHtml = renderPoster( video )
return /* html */`
<div class="video-card ${ classes }" style="max-width: ${ width }; flex-basis: ${ width }; scroll-snap-align: start;">
<a
@ -29,18 +32,7 @@ export default async function ( video, options = {} ) {
<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>
${ posterHtml }
</div>
</div>
<div