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

@@ -63,10 +63,7 @@
:items-per-page="limit"
/>
<div
v-lazy-container="{ selector: '.lazy' }"
class="tiles"
>
<div class="tiles">
<Actor
v-for="actor in actors"
:key="`actor-${actor.id}`"

View File

@@ -16,9 +16,9 @@
>
<img
:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
:style="{ 'background-image': sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}` }"
:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
loading="lazy"
class="avatar photo"
@load="$parent.$emit('load')"
>
@@ -34,9 +34,9 @@
>
<img
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
:style="{ 'background-image': sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}` }"
:title="`© ${photo.credit || photo.entity.name}`"
loading="lazy"
class="photo"
@load="$parent.$emit('load')"
>
@@ -76,9 +76,6 @@ export default {
padding: .5rem 1rem;
margin: 0 1rem 0 0;
font-size: 0;
overflow-x: scroll;
scroll-behavior: smooth;
scrollbar-width: none;
&.expanded {
flex-wrap: wrap;
@@ -101,10 +98,6 @@ export default {
.avatar-link {
display: none;
}
&::-webkit-scrollbar {
display: none;
}
}
.photo-link {
@@ -115,6 +108,7 @@ export default {
height: 15rem;
box-shadow: 0 0 3px var(--darken-weak);
object-fit: cover;
background-size: cover;
}
@media(max-width: $breakpoint3) {

View File

@@ -45,9 +45,10 @@
<div class="avatar-container">
<img
v-if="actor.avatar"
:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
class="avatar lazy"
:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
:style="{ 'background-image': sfw ? `url(/img/${actor.avatar.sfw.lazy})`: `url(/img/${actor.avatar.lazy})` }"
loading="lazy"
class="avatar"
>
<span
@@ -232,6 +233,7 @@ export default {
justify-content: center;
object-fit: cover;
object-position: 50% 0;
background-size: cover;
}
.avatar-fallback {