From 0a0a3ddd7b6e2096523603d94d7f6a637e9892e5 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <moonloop.adult@protonmail.com>
Date: Sat, 23 Jan 2021 23:26:56 +0100
Subject: [PATCH] Improved appearence of empty scene media banner.

---
 assets/components/releases/banner.vue  | 185 +++++++++++++------------
 assets/components/releases/release.vue |   8 +-
 assets/components/scroll/scroll.vue    |   4 +-
 3 files changed, 105 insertions(+), 92 deletions(-)

diff --git a/assets/components/releases/banner.vue b/assets/components/releases/banner.vue
index f25ce5e9..ce9d64f0 100644
--- a/assets/components/releases/banner.vue
+++ b/assets/components/releases/banner.vue
@@ -1,108 +1,110 @@
 <template>
-	<div
-		class="media"
-		:class="{ center: release.photos.length < 2 }"
-	>
+	<div class="media-container">
 		<div
-			v-if="release.trailer || release.teaser"
-			class="trailer-container"
+			class="media"
+			:class="{ center: release.photos.length < 2 }"
 		>
-			<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>
-
-			<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"
+			<div
+				v-if="release.trailer || release.teaser"
+				class="trailer-container"
 			>
+				<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
-				v-if="release.poster"
-				v-tooltip="'View poster'"
-				:href="`/media/${release.poster.path}`"
-				:class="{ playing }"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="poster-link"
-			><Icon icon="image" /></a>
+				<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>
 
-			<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
-					:src="`/media/${cover.thumbnail}`"
-					:style="{ 'background-image': sfw ? `url(/media/${cover.sfw.lazy})` : `url(/media/${cover.lazy})` }"
-					class="item cover"
+					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"
-					@load="$emit('load', $event)"
+					class="item trailer"
 				>
-			</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)"
-				>
+				<a
+					v-if="release.poster"
+					v-tooltip="'View poster'"
+					:href="`/media/${release.poster.path}`"
+					:class="{ playing }"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="poster-link"
+				><Icon icon="image" /></a>
 
 				<span
-					v-if="sfw"
+					v-if="sfw && !playing"
 					class="warning"
 				>
 					<Icon icon="warning2" />NSFW
 				</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>
 </template>
@@ -163,6 +165,10 @@ export default {
 <style lang="scss" scoped>
 @import 'breakpoints';
 
+.media-container {
+	backdrop-filter: blur(1rem);
+}
+
 .media {
     flex-shrink: 0;
     white-space: nowrap;
@@ -171,6 +177,7 @@ export default {
 
 .media.center {
 	width: 1200px;
+	max-width: 100%;
 	margin: 0 auto;
 }
 
diff --git a/assets/components/releases/release.vue b/assets/components/releases/release.vue
index bfb05b3a..ecf9b3db 100644
--- a/assets/components/releases/release.vue
+++ b/assets/components/releases/release.vue
@@ -5,7 +5,8 @@
 	>
 		<Scroll
 			v-slot="slotProps"
-			class="scroll-light"
+			class="scroll-light banner"
+			:style="{ 'background-image': `url(/media/${release.poster.thumbnail})` }"
 			:expandable="false"
 		>
 			<Banner
@@ -259,6 +260,11 @@ export default {
 	border-bottom: solid 1px var(--shadow-hint);
 }
 
+.banner {
+	background-position: center;
+	background-size: cover;
+}
+
 .info {
     padding: 1rem;
     border-left: solid 1px var(--shadow-hint);
diff --git a/assets/components/scroll/scroll.vue b/assets/components/scroll/scroll.vue
index e2886125..2b93ad50 100644
--- a/assets/components/scroll/scroll.vue
+++ b/assets/components/scroll/scroll.vue
@@ -24,7 +24,7 @@
 
 			<div
 				ref="content"
-				class="content"
+				class="scroll-content"
 			>
 				<slot :loaded="loaded" />
 			</div>
@@ -145,7 +145,7 @@ export default {
 	position: relative;
 }
 
-.content {
+.scroll-content {
 	overflow-x: scroll;
 	scroll-behavior: smooth;
 	scrollbar-width: none;