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

Improved content reflow for lazy loading scene banner.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

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