Using scroll component for release banner, adding expand button.

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;