Using scroll component for release banner, adding expand button.

assets/components/releases/banner.vue

@@ -1,8 +1,5 @@
 <template>
-	<div
-		class="banner"
-		@wheel.prevent="scrollBanner"
-	>
+	<div class="banner">
 		<div class="trailer">
 			<video
 				v-if="release.trailer"
@@ -110,10 +107,6 @@ function photos() {
 	return this.release.photos;
 }
 
-function scrollBanner(event) {
-	event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
-}
-
 export default {
 	props: {
 		release: {
@@ -131,9 +124,6 @@ export default {
 		photos,
 		sfw,
 	},
-	methods: {
-		scrollBanner,
-	},
 };
 </script>
 
@@ -141,14 +131,20 @@ export default {
 @import 'theme';
 
 .banner {
-    background: var(--empty);
+    background: var(--background-dim);
     flex-shrink: 0;
     white-space: nowrap;
     overflow-x: auto;
     scrollbar-width: none;
-    box-shadow: 0 0 3px var(--shadow);
+	scroll-behavior: smooth;
     font-size: 0;
 
+	&.expanded {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
     &::-webkit-scrollbar {
         display: none;
     }
@@ -187,6 +183,8 @@ export default {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+	margin: .5rem;
+	box-shadow: 0 0 3px var(--shadow-weak);
 
     .warning {
         display: none;

assets/components/releases/release.vue

@@ -3,8 +3,6 @@
 		v-if="release"
 		class="content"
 	>
-		<Banner :release="release" />
-
 		<div class="details">
 			<div class="column">
 				<a
@@ -94,9 +92,21 @@
 			</div>
 		</div>
 
+		<Scroll class="scroll-light">
+			<Banner :release="release" />
+
+			<template v-slot:expanded>
+				<Banner
+					:release="release"
+					class="expanded"
+				/>
+			</template>
+		</Scroll>
+
 		<div class="info column">
 			<h2 class="row title">{{ release.title }}</h2>
 
+			<span class="row-label">Actors</span>
 			<div class="row associations">
 				<ul
 					v-lazy-container="{ selector: '.lazy' }"
@@ -129,12 +139,12 @@
 				/>
 			</div>
 
+			<span class="row-label">Tags</span>
+
 			<div
 				v-if="release.tags.length > 0"
 				class="row"
 			>
-				<Icon icon="price-tags3" />
-
 				<ul class="tags nolist">
 					<li
 						v-for="tag in release.tags"
@@ -163,11 +173,12 @@
 				<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
 			</div>
 
+			<span class="row-label">Description</span>
+
 			<p
 				v-if="release.description"
 				class="row description"
 			>
-				<Icon icon="info2" />
 				{{ release.description }}
 			</p>
 
@@ -201,9 +212,8 @@
 				>{{ release.shootId }}</a>
 			</div>
 
+			<span class="row-label">Added</span>
 			<span class="row">
-				<Icon icon="drawer-in" />
-
 				<a
 					:href="`/added/${formatDate(release.dateAdded, 'YYYY-MM-DD')}`"
 					:title="`Added on ${formatDate(release.dateAdded, 'MMMM D, YYYY')}`"
@@ -224,6 +234,7 @@ import Banner from './banner.vue';
 import Actor from '../tile/actor.vue';
 import Release from '../tile/release.vue';
 import Releases from './releases.vue';
+import Scroll from '../scroll/scroll.vue';
 
 function pageTitle() {
 	return this.release && this.release.title;
@@ -248,6 +259,7 @@ export default {
 		Banner,
 		Release,
 		Releases,
+		Scroll,
 	},
 	data() {
 		return {
@@ -296,6 +308,18 @@ export default {
     }
 }
 
+.row-label {
+	display: block;
+	margin: 0 0 .5rem 0;
+	color: var(--shadow);
+	font-weight: bold;
+
+	.icon {
+		margin: 0 .5rem 0 0;
+		fill: var(--shadow);
+	}
+}
+
 .details {
     background: var(--profile);
     color: var(--text-light);
@@ -397,9 +421,6 @@ export default {
     margin: 0 1rem .5rem 0;
 }
 
-.movies {
-}
-
 .filename {
     width: 100%;
     padding: .5rem;