DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

Improved content reflow for lazy loading scene banner.

This commit is contained in:
DebaucheryLibrarian 2021-03-16 03:55:20 +01:00
parent 3bebf5bf51
commit ece9569d66
3 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/components/album/album.vue
View File

@ -27,6 +27,9 @@
> >
<img <img
:src="getPath(item, 'thumbnail', { local })" :src="getPath(item, 'thumbnail', { local })"
:style="{ 'background-image': `url('${getPath(item, 'lazy', { local })}')` }"
:width="item.width"
:height="item.height"
:title="item.title" :title="item.title"
loading="lazy" loading="lazy"
class="item image" class="item image"
@ -183,6 +186,9 @@ export default {
.item { .item {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
height: auto;
background-size: cover;
background-position: center;
} }
.item-comment { .item-comment {

9
assets/components/releases/banner.vue
View File

@ -33,6 +33,8 @@
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)" v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
:src="getPath(release.teaser, 'thumbnail', { original: true })" :src="getPath(release.teaser, 'thumbnail', { original: true })"
:alt="release.title" :alt="release.title"
:width="photo.width"
:height="photo.height"
loading="lazy" loading="lazy"
class="item trailer" class="item trailer"
> >
@ -66,6 +68,8 @@
<img <img
:src="getPath(cover, 'thumbnail')" :src="getPath(cover, 'thumbnail')"
:style="{ 'background-image': getBgPath(cover, 'lazy') }" :style="{ 'background-image': getBgPath(cover, 'lazy') }"
:width="photo.width"
:height="photo.height"
class="item cover" class="item cover"
loading="lazy" loading="lazy"
@load="$emit('load', $event)" @load="$emit('load', $event)"
@ -87,8 +91,10 @@
> >
<img <img
:src="getPath(photo, 'thumbnail')" :src="getPath(photo, 'thumbnail')"
:style="{ 'background-image': getPath(photo, 'lazy') }" :style="{ 'background-image': `url('${getPath(photo, 'lazy')}` }"
:alt="`Photo ${photo.index + 1}`" :alt="`Photo ${photo.index + 1}`"
:width="photo.width"
:height="photo.height"
loading="lazy" loading="lazy"
class="item" class="item"
@load="$emit('load', $event)" @load="$emit('load', $event)"
@ -273,6 +279,7 @@ export default {
.item { .item {
max-width: 100%; max-width: 100%;
width: auto;
height: 18rem; height: 18rem;
box-shadow: 0 0 3px var(--shadow-weak); box-shadow: 0 0 3px var(--shadow-weak);
background-size: cover; background-size: cover;

6
assets/js/fragments.js
View File

@ -108,6 +108,8 @@ const releasePosterFragment = `
index index
path path
thumbnail thumbnail
width
height
lazy lazy
isS3 isS3
comment comment
@ -129,6 +131,8 @@ const releaseCoversFragment = `
index index
path path
thumbnail thumbnail
width
height
lazy lazy
isS3 isS3
comment comment
@ -150,6 +154,8 @@ const releasePhotosFragment = `
index index
path path
thumbnail thumbnail
width
height
lazy lazy
isS3 isS3
comment comment