From 3e0a4406eba200d439c55bc22cd79a50fb044be8 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <moonloop.adult@protonmail.com>
Date: Fri, 5 Feb 2021 02:35:00 +0100
Subject: [PATCH] Hiding more than 2 rows of tags under expand button on scene
 page. Fixed album background being bright in dark mode.

---
 assets/components/album/album.vue      |   2 +-
 assets/components/releases/release.vue |  14 ++--
 assets/components/releases/tags.vue    | 109 ++++++++++++++++++++++---
 3 files changed, 108 insertions(+), 17 deletions(-)

diff --git a/assets/components/album/album.vue b/assets/components/album/album.vue
index 39ba6baa..074ac495 100644
--- a/assets/components/album/album.vue
+++ b/assets/components/album/album.vue
@@ -92,7 +92,7 @@ export default {
 	position: fixed;
 	top: 0;
 	left: 0;
-	background: var(--shadow-extreme);
+	background: var(--darken-extreme);
 	z-index: 10;
 }
 
diff --git a/assets/components/releases/release.vue b/assets/components/releases/release.vue
index c9030c81..9f6484ff 100644
--- a/assets/components/releases/release.vue
+++ b/assets/components/releases/release.vue
@@ -51,12 +51,10 @@
 				</h2>
 			</div>
 
-			<div
+			<Tags
 				v-if="release.tags.length > 0"
-				class="row"
-			>
-				<Tags :tags="release.tags" />
-			</div>
+				:tags="release.tags"
+			/>
 
 			<div class="row associations">
 				<ul class="actors nolist">
@@ -320,6 +318,8 @@ export default {
 .title {
 	display: inline-flex;
 	margin: 0;
+	font-size: 1.5rem;
+	line-height: 1.25;
 
 	.icon {
 		fill: var(--shadow);
@@ -452,6 +452,10 @@ export default {
         display: inline-block;
     }
 
+	.title {
+		font-size: 1.25rem;
+	}
+
     .actors {
         grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     }
diff --git a/assets/components/releases/tags.vue b/assets/components/releases/tags.vue
index ef99b4d4..f873f59c 100644
--- a/assets/components/releases/tags.vue
+++ b/assets/components/releases/tags.vue
@@ -1,19 +1,60 @@
 <template>
-	<ul class="tags nolist">
-		<li
-			v-for="tag in tags"
-			:key="`tag-${tag.slug}`"
-			class="tag"
+	<div
+		class="tags-container"
+		:class="{ overflowing }"
+	>
+		<ul
+			ref="tags"
+			class="tags nolist"
+			:class="{ expanded }"
 		>
-			<a
-				:href="`/tag/${tag.slug}`"
-				class="link"
-			>{{ tag.name }}</a>
-		</li>
-	</ul>
+			<li
+				v-for="tag in tags"
+				:key="`tag-${tag.slug}`"
+				class="tag"
+			>
+				<a
+					:href="`/tag/${tag.slug}`"
+					class="link"
+				>{{ tag.name }}</a>
+			</li>
+		</ul>
+
+		<button
+			v-if="overflowing && !expanded"
+			class="tags-more"
+			@click="expanded = true"
+		>More tags</button>
+
+		<button
+			v-if="expanded"
+			class="tags-more"
+			@click="expanded = false"
+		>Fewer tags</button>
+	</div>
 </template>
 
 <script>
+function updateOverflowing() {
+	const containerBoundaries = this.$refs.tags.getBoundingClientRect();
+	const containerBottom = containerBoundaries.top + containerBoundaries.height;
+
+	this.overflowing = Array.from(this.$refs.tags.querySelectorAll('.tag')).some((tag) => {
+		const tagBoundaries = tag.getBoundingClientRect();
+
+		return tagBoundaries.top > containerBottom;
+	});
+}
+
+function mounted() {
+	window.addEventListener('resize', this.updateOverflowing);
+	this.updateOverflowing();
+}
+
+function beforeUnmount() {
+	window.removeEventListener('resize', this.updateOverflowing);
+}
+
 export default {
 	props: {
 		tags: {
@@ -21,10 +62,39 @@ export default {
 			default: () => [],
 		},
 	},
+	data() {
+		return {
+			overflowing: false,
+			expanded: false,
+		};
+	},
+	mounted,
+	beforeUnmount,
+	methods: {
+		updateOverflowing,
+	},
 };
 </script>
 
 <style lang="scss" scoped>
+.tags-container {
+	margin: 0 0 1.5rem 0;
+
+	&.overflowing {
+		margin: 0 0 .5rem 0;
+	}
+}
+
+.tags {
+	max-height: 4.6rem;
+	padding: 2px 1rem 0 1rem;
+	overflow: hidden;
+
+	&.expanded {
+		max-height: unset;
+	}
+}
+
 .tag .link {
 	color: var(--link);
     background: var(--background);
@@ -39,4 +109,21 @@ export default {
         color: var(--primary);
     }
 }
+
+.tags-more {
+	width: 100%;
+	background: none;
+	padding: .5rem 1rem;
+	border: solid 1px var(--shadow-hint);
+	border-left: none;
+	border-right: none;
+	margin: .25rem 0 .5rem 0;
+	color: var(--shadow);
+	font-size: .9rem;
+
+	&:hover {
+		cursor: pointer;
+		color: var(--shadow-strong);
+	}
+}
 </style>