Fixed tag photo scroll and lazy loading.

This commit is contained in:
DebaucheryLibrarian 2020-12-29 20:02:26 +01:00
parent b6bf043c48
commit ba8a3036a5
3 changed files with 21 additions and 8 deletions

View File

@ -10,9 +10,11 @@
>
<img
:src="`/img/${poster.thumbnail}`"
:style="{ 'background-image': `url(/img/${poster.lazy})` }"
:alt="tag.poster.comment"
class="poster"
@load="$parent.$emit('load')"
loading="lazy"
@load="$emit('load', $event)"
>
<span
@ -32,9 +34,10 @@
>
<img
:src="`/img/${photo.thumbnail}`"
:style="{ 'background-image': `url(/img/${photo.thumbnail})` }"
:alt="photo.comment"
class="photo"
@load="$parent.$emit('load')"
@load="$emit('load', $event)"
>
<span
@ -69,6 +72,7 @@ export default {
default: null,
},
},
emits: ['load'],
computed: {
poster,
photos,
@ -79,12 +83,9 @@ export default {
<style lang="scss" scoped>
.photos {
width: 100%;
padding: .5rem 1rem 0 .5rem;
padding: .5rem 1rem 0 1rem;
box-sizing: border-box;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
scroll-behavior: smooth;
font-size: 0;
&::-webkit-scrollbar {
@ -112,9 +113,10 @@ export default {
display: inline-block;
position: relative;
overflow: hidden;
&:not(:last-child) {
margin: 0 .5rem 0 0;
&:last-child {
margin: 0 1rem 0 0;
}
&:hover .photo-comment {
@ -127,6 +129,9 @@ export default {
max-height: 15rem;
max-width: 100%;
box-shadow: 0 0 3px var(--shadow-weak);
object-fit: cover;
background-position: center;
background-size: cover;
}
.photo-comment {

View File

@ -19,6 +19,7 @@
<Scroll
v-if="hasMedia"
v-slot="scroll"
:expanded="expanded"
class="scroll-light"
@expand="(state) => expanded = state"
@ -26,6 +27,7 @@
<Photos
:tag="tag"
:class="{ expanded }"
@load="scroll.loaded"
/>
</Scroll>
@ -159,4 +161,8 @@ export default {
color: var(--text-light);
background: var(--profile);
}
.scroll {
background: var(--background-dim);
}
</style>

View File

@ -37,11 +37,13 @@ function initTagsActions(store, _router) {
media {
id
thumbnail
lazy
path
comment
sfw: sfwMedia {
id
thumbnail
lazy
path
comment
}