Improved appearence of empty scene media banner.
This commit is contained in:
DebaucheryLibrarian
parent
fdb48f0d6d
commit
0a0a3ddd7b
|
|
@ -1,108 +1,110 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div class="media-container">
|
||||||
class="media"
|
|
||||||
:class="{ center: release.photos.length < 2 }"
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
v-if="release.trailer || release.teaser"
|
class="media"
|
||||||
class="trailer-container"
|
:class="{ center: release.photos.length < 2 }"
|
||||||
>
|
>
|
||||||
<video
|
<div
|
||||||
v-if="release.trailer"
|
v-if="release.trailer || release.teaser"
|
||||||
:src="`/media/${release.trailer.path}`"
|
class="trailer-container"
|
||||||
:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
|
|
||||||
:alt="release.title"
|
|
||||||
:class="{ sfw: sfw && paused }"
|
|
||||||
class="item trailer"
|
|
||||||
controls
|
|
||||||
@playing="playing = true; paused = false;"
|
|
||||||
@pause="playing = false; paused = true;"
|
|
||||||
>Sorry, the tailer cannot be played in your browser</video>
|
|
||||||
|
|
||||||
<video
|
|
||||||
v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
|
|
||||||
:src="`/media/${release.teaser.path}`"
|
|
||||||
:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
|
|
||||||
:alt="release.title"
|
|
||||||
:class="{ sfw: sfw && paused }"
|
|
||||||
class="item trailer"
|
|
||||||
controls
|
|
||||||
@playing="playing = true; paused = false;"
|
|
||||||
@pause="playing = false; paused = true;"
|
|
||||||
>Sorry, the tailer cannot be played in your browser</video>
|
|
||||||
|
|
||||||
<img
|
|
||||||
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
|
|
||||||
:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
|
|
||||||
:alt="release.title"
|
|
||||||
loading="lazy"
|
|
||||||
class="item trailer"
|
|
||||||
>
|
>
|
||||||
|
<video
|
||||||
|
v-if="release.trailer"
|
||||||
|
:src="`/media/${release.trailer.path}`"
|
||||||
|
:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
|
||||||
|
:alt="release.title"
|
||||||
|
:class="{ sfw: sfw && paused }"
|
||||||
|
class="item trailer"
|
||||||
|
controls
|
||||||
|
@playing="playing = true; paused = false;"
|
||||||
|
@pause="playing = false; paused = true;"
|
||||||
|
>Sorry, the tailer cannot be played in your browser</video>
|
||||||
|
|
||||||
<a
|
<video
|
||||||
v-if="release.poster"
|
v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
|
||||||
v-tooltip="'View poster'"
|
:src="`/media/${release.teaser.path}`"
|
||||||
:href="`/media/${release.poster.path}`"
|
:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
|
||||||
:class="{ playing }"
|
:alt="release.title"
|
||||||
target="_blank"
|
:class="{ sfw: sfw && paused }"
|
||||||
rel="noopener noreferrer"
|
class="item trailer"
|
||||||
class="poster-link"
|
controls
|
||||||
><Icon icon="image" /></a>
|
@playing="playing = true; paused = false;"
|
||||||
|
@pause="playing = false; paused = true;"
|
||||||
|
>Sorry, the tailer cannot be played in your browser</video>
|
||||||
|
|
||||||
<span
|
|
||||||
v-if="sfw && !playing"
|
|
||||||
class="warning"
|
|
||||||
>
|
|
||||||
<Icon icon="warning2" />NSFW
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template v-if="release.covers && release.covers.length > 0">
|
|
||||||
<a
|
|
||||||
v-for="cover in release.covers"
|
|
||||||
:key="`cover-${cover.id}`"
|
|
||||||
:href="`/media/${cover.path}`"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
:src="`/media/${cover.thumbnail}`"
|
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
|
||||||
:style="{ 'background-image': sfw ? `url(/media/${cover.sfw.lazy})` : `url(/media/${cover.lazy})` }"
|
:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
|
||||||
class="item cover"
|
:alt="release.title"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
@load="$emit('load', $event)"
|
class="item trailer"
|
||||||
>
|
>
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div
|
<a
|
||||||
v-for="photo in photos"
|
v-if="release.poster"
|
||||||
:key="`media-${photo.id}`"
|
v-tooltip="'View poster'"
|
||||||
class="item-container"
|
:href="`/media/${release.poster.path}`"
|
||||||
>
|
:class="{ playing }"
|
||||||
<a
|
target="_blank"
|
||||||
:href="`/media/${photo.path}`"
|
rel="noopener noreferrer"
|
||||||
:class="{ sfw }"
|
class="poster-link"
|
||||||
class="item-link"
|
><Icon icon="image" /></a>
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
|
|
||||||
:style="{ 'background-image': sfw ? `url(/img/${photo.sfw.lazy})` : `url(/media/${photo.lazy})` }"
|
|
||||||
:alt="`Photo ${photo.index + 1}`"
|
|
||||||
loading="lazy"
|
|
||||||
class="item"
|
|
||||||
@load="$emit('load', $event)"
|
|
||||||
>
|
|
||||||
|
|
||||||
<span
|
<span
|
||||||
v-if="sfw"
|
v-if="sfw && !playing"
|
||||||
class="warning"
|
class="warning"
|
||||||
>
|
>
|
||||||
<Icon icon="warning2" />NSFW
|
<Icon icon="warning2" />NSFW
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</div>
|
||||||
|
|
||||||
|
<template v-if="release.covers && release.covers.length > 0">
|
||||||
|
<a
|
||||||
|
v-for="cover in release.covers"
|
||||||
|
:key="`cover-${cover.id}`"
|
||||||
|
:href="`/media/${cover.path}`"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="`/media/${cover.thumbnail}`"
|
||||||
|
:style="{ 'background-image': sfw ? `url(/media/${cover.sfw.lazy})` : `url(/media/${cover.lazy})` }"
|
||||||
|
class="item cover"
|
||||||
|
loading="lazy"
|
||||||
|
@load="$emit('load', $event)"
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="photo in photos"
|
||||||
|
:key="`media-${photo.id}`"
|
||||||
|
class="item-container"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
:href="`/media/${photo.path}`"
|
||||||
|
:class="{ sfw }"
|
||||||
|
class="item-link"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
|
||||||
|
:style="{ 'background-image': sfw ? `url(/img/${photo.sfw.lazy})` : `url(/media/${photo.lazy})` }"
|
||||||
|
:alt="`Photo ${photo.index + 1}`"
|
||||||
|
loading="lazy"
|
||||||
|
class="item"
|
||||||
|
@load="$emit('load', $event)"
|
||||||
|
>
|
||||||
|
|
||||||
|
<span
|
||||||
|
v-if="sfw"
|
||||||
|
class="warning"
|
||||||
|
>
|
||||||
|
<Icon icon="warning2" />NSFW
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -163,6 +165,10 @@ export default {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import 'breakpoints';
|
@import 'breakpoints';
|
||||||
|
|
||||||
|
.media-container {
|
||||||
|
backdrop-filter: blur(1rem);
|
||||||
|
}
|
||||||
|
|
||||||
.media {
|
.media {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
@ -171,6 +177,7 @@ export default {
|
||||||
|
|
||||||
.media.center {
|
.media.center {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
|
max-width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,8 @@
|
||||||
>
|
>
|
||||||
<Scroll
|
<Scroll
|
||||||
v-slot="slotProps"
|
v-slot="slotProps"
|
||||||
class="scroll-light"
|
class="scroll-light banner"
|
||||||
|
:style="{ 'background-image': `url(/media/${release.poster.thumbnail})` }"
|
||||||
:expandable="false"
|
:expandable="false"
|
||||||
>
|
>
|
||||||
<Banner
|
<Banner
|
||||||
|
|
@ -259,6 +260,11 @@ export default {
|
||||||
border-bottom: solid 1px var(--shadow-hint);
|
border-bottom: solid 1px var(--shadow-hint);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-left: solid 1px var(--shadow-hint);
|
border-left: solid 1px var(--shadow-hint);
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
ref="content"
|
ref="content"
|
||||||
class="content"
|
class="scroll-content"
|
||||||
>
|
>
|
||||||
<slot :loaded="loaded" />
|
<slot :loaded="loaded" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -145,7 +145,7 @@ export default {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.scroll-content {
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue