forked from DebaucheryLibrarian/traxxx
Fixed scroll component so it uses slot props instead of the depcrecated .
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
<ul
|
||||
v-if="releases.length > 0"
|
||||
:key="sfw"
|
||||
v-lazy-container="{ selector: '.thumbnail' }"
|
||||
class="nolist tiles"
|
||||
>
|
||||
<li
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user