Fixed scroll component so it uses slot props instead of the depcrecated .

This commit is contained in:
DebaucheryLibrarian
2020-12-26 23:51:27 +01:00
parent ced8f447a7
commit c503e12adb
32 changed files with 1421 additions and 1538 deletions

View File

@@ -1,8 +1,5 @@
<template>
<div
v-lazy-container
class="media"
>
<div class="media">
<div
v-if="release.trailer || release.teaser"
class="trailer-container"
@@ -33,8 +30,9 @@
<img
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
:data-src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
:alt="release.title"
loading="lazy"
class="item trailer"
>
@@ -65,10 +63,11 @@
rel="noopener noreferrer"
>
<img
:data-src="`/media/${cover.thumbnail}`"
:data-loading="`/media/${cover.lazy}`"
:src="`/media/${cover.thumbnail}`"
:style="{ background: sfw ? `/media/${cover.sfw.lazy}` : `/media/${cover.lazy}` }"
class="item cover"
@load="$parent.$emit('load')"
loading="lazy"
@load="$emit('load', $event)"
>
</a>
</template>
@@ -86,11 +85,12 @@
rel="noopener noreferrer"
>
<img
:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:style="{ background: sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}` }"
:alt="`Photo ${photo.index + 1}`"
loading="lazy"
class="item"
@load="$parent.$emit('load')"
@load="$emit('load', $event)"
>
<span
@@ -139,6 +139,10 @@ export default {
type: Boolean,
default: false,
},
test: {
type: String,
default: null,
},
},
data() {
return {
@@ -159,15 +163,8 @@ export default {
.media {
flex-shrink: 0;
white-space: nowrap;
overflow-x: auto;
scrollbar-width: none;
scroll-behavior: smooth;
font-size: 0;
&::-webkit-scrollbar {
display: none;
}
&.expanded {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
@@ -249,6 +246,7 @@ export default {
height: 18rem;
max-width: 100%;
box-shadow: 0 0 3px var(--shadow-weak);
background-size: cover;
}
.trailer-container {

View File

@@ -11,12 +11,14 @@
/>
<Scroll
v-slot="slotProps"
class="scroll-light"
:expandable="false"
>
<Media
:release="release"
:class="{ expanded }"
@load="slotProps.loaded"
/>
</Scroll>
@@ -56,10 +58,7 @@
</div>
<div class="row associations">
<ul
v-lazy-container="{ selector: '.lazy' }"
class="actors nolist"
>
<ul class="actors nolist">
<li
v-for="actor in release.actors"
:key="actor.id"

View File

@@ -8,7 +8,6 @@
<ul
v-if="releases.length > 0"
:key="sfw"
v-lazy-container="{ selector: '.thumbnail' }"
class="nolist tiles"
>
<li

View File

@@ -13,10 +13,10 @@
>
<img
v-if="release.poster"
:data-src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
:data-loading="sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}`"
:src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
:alt="release.title"
class="thumbnail"
loading="lazy"
>
<span
@@ -26,10 +26,10 @@
<img
v-for="cover in release.covers"
:key="cover.id"
:data-src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
:data-loading="sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}`"
:src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
:alt="release.title"
class="thumbnail cover"
loading="lazy"
>
</span>