From e0e584658ecc5d4f407a8349f020184cac51e6e1 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <moonloop.adult@protonmail.com>
Date: Fri, 5 Feb 2021 02:49:43 +0100
Subject: [PATCH] Changed more tags button design.

---
 assets/components/releases/tags.vue | 37 +++++++++++++++++------------
 assets/css/_theme.scss              |  2 ++
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/assets/components/releases/tags.vue b/assets/components/releases/tags.vue
index f873f59c..55b0747c 100644
--- a/assets/components/releases/tags.vue
+++ b/assets/components/releases/tags.vue
@@ -24,25 +24,29 @@
 			v-if="overflowing && !expanded"
 			class="tags-more"
 			@click="expanded = true"
-		>More tags</button>
+		>more tags</button>
 
 		<button
 			v-if="expanded"
 			class="tags-more"
 			@click="expanded = false"
-		>Fewer tags</button>
+		>fewer tags</button>
 	</div>
 </template>
 
 <script>
+import { nextTick } from 'vue';
+
 function updateOverflowing() {
-	const containerBoundaries = this.$refs.tags.getBoundingClientRect();
-	const containerBottom = containerBoundaries.top + containerBoundaries.height;
+	nextTick(() => {
+		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();
+		this.overflowing = Array.from(this.$refs.tags.querySelectorAll('.tag')).some((tag) => {
+			const tagBoundaries = tag.getBoundingClientRect();
 
-		return tagBoundaries.top > containerBottom;
+			return tagBoundaries.top > containerBottom;
+		});
 	});
 }
 
@@ -68,6 +72,9 @@ export default {
 			expanded: false,
 		};
 	},
+	watch: {
+		expanded: updateOverflowing,
+	},
 	mounted,
 	beforeUnmount,
 	methods: {
@@ -88,6 +95,7 @@ export default {
 .tags {
 	max-height: 4.6rem;
 	padding: 2px 1rem 0 1rem;
+	text-align: left;
 	overflow: hidden;
 
 	&.expanded {
@@ -111,19 +119,18 @@ export default {
 }
 
 .tags-more {
-	width: 100%;
-	background: none;
+	background: var(--shadow-touch);
 	padding: .5rem 1rem;
-	border: solid 1px var(--shadow-hint);
-	border-left: none;
-	border-right: none;
-	margin: .25rem 0 .5rem 0;
+	border: none;
+	margin: .25rem 0 .5rem 1rem;
 	color: var(--shadow);
-	font-size: .9rem;
+	font-size: .8rem;
+	font-weight: bold;
 
 	&:hover {
-		cursor: pointer;
+		background: var(--shadow-hint);
 		color: var(--shadow-strong);
+		cursor: pointer;
 	}
 }
 </style>
diff --git a/assets/css/_theme.scss b/assets/css/_theme.scss
index badb58ef..c269d9a8 100644
--- a/assets/css/_theme.scss
+++ b/assets/css/_theme.scss
@@ -61,6 +61,7 @@ $breakpoint4: 1500px;
     --shadow-modest: rgba(0, 0, 0, .3);
     --shadow-weak: rgba(0, 0, 0, .2);
     --shadow-hint: rgba(0, 0, 0, .1);
+    --shadow-touch: rgba(0, 0, 0, .05);
 
     --highlight: rgba(255, 255, 255, .5);
     --highlight-extreme: rgba(255, 255, 255, .9);
@@ -92,6 +93,7 @@ $breakpoint4: 1500px;
     --shadow-modest: rgba(255, 255, 255, .3);
     --shadow-weak: rgba(255, 255, 255, .2);
     --shadow-hint: rgba(255, 255, 255, .075);
+    --shadow-touch: rgba(255, 255, 255, .05);
 
     --highlight: rgba(0, 0, 0, .5);
     --highlight-extreme: rgba(0, 0, 0, .9);