From 4bf4183a2adc0ad60619634d28499a5ab45e9c4b Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Sun, 28 Jun 2020 03:28:11 +0200
Subject: [PATCH] Only show entity children expand when overflowing.

---
 assets/components/entities/entity.vue |  31 +++++---
 assets/components/tags/tile.vue       | 107 ++++++++++++++++++++++++++
 assets/img/icons/arrow-left2.svg      |   5 ++
 assets/img/icons/arrow-right2.svg     |   5 ++
 4 files changed, 137 insertions(+), 11 deletions(-)
 create mode 100644 assets/components/tags/tile.vue
 create mode 100644 assets/img/icons/arrow-left2.svg
 create mode 100644 assets/img/icons/arrow-right2.svg

diff --git a/assets/components/entities/entity.vue b/assets/components/entities/entity.vue
index c9e82322..37cc07ad 100644
--- a/assets/components/entities/entity.vue
+++ b/assets/components/entities/entity.vue
@@ -58,7 +58,7 @@
 				>
 					<div
 						class="scroll scroll-left noselect"
-						:class="{ unscrolled }"
+						:class="{ 'scroll-start': scrollAtStart }"
 						@click="scroll('left')"
 					><Icon icon="arrow-left3" /></div>
 
@@ -77,13 +77,13 @@
 
 					<div
 						class="scroll scroll-right noselect"
-						:class="{ scrolled }"
+						:class="{ 'scroll-end': scrollAtEnd }"
 						@click="scroll('right')"
 					><Icon icon="arrow-right3" /></div>
 				</div>
 
 				<div
-					v-if="entity.children.length > 1"
+					v-if="(scrollable && entity.children.length > 1) || expanded"
 					class="expand noselect"
 					@click="expanded = !expanded"
 				>
@@ -133,8 +133,9 @@ async function fetchEntity() {
 }
 
 function updateScroll() {
-	this.unscrolled = this.$refs.children.scrollLeft === 0;
-	this.scrolled = this.$refs.children.scrollWidth - this.$refs.children.clientWidth === this.$refs.children.scrollLeft;
+	this.scrollable = this.$refs.children.scrollWidth > this.$refs.children.clientWidth;
+	this.scrollAtStart = this.$refs.children.scrollLeft === 0;
+	this.scrollAtEnd = this.$refs.children.scrollWidth - this.$refs.children.clientWidth === this.$refs.children.scrollLeft;
 }
 
 function scroll(direction) {
@@ -175,8 +176,9 @@ export default {
 			totalCount: null,
 			limit: 10,
 			expanded: false,
-			unscrolled: true,
-			scrolled: false,
+			scrollable: true,
+			scrollAtStart: true,
+			scrollAtEnd: false,
 		};
 	},
 	watch: {
@@ -298,9 +300,14 @@ export default {
 	top: 0;
 	bottom: 0;
 
-	&.unscrolled,
-	&.scrolled {
+	&.scroll-start ,
+	&.scroll-end {
+		/* use over v-show so button stays visible while still hovered */
 		display: none;
+
+		.icon {
+			fill: var(--lighten-weak);
+		}
 	}
 
 	.icon {
@@ -311,8 +318,10 @@ export default {
 		display: flex;
 		cursor: pointer;
 
-		.icon {
-			fill: var(--text-light);
+		&:not(.scroll-start):not(.scroll-end) {
+			.icon {
+				fill: var(--text-light);
+			}
 		}
 	}
 }
diff --git a/assets/components/tags/tile.vue b/assets/components/tags/tile.vue
new file mode 100644
index 00000000..ddea41a1
--- /dev/null
+++ b/assets/components/tags/tile.vue
@@ -0,0 +1,107 @@
+<template>
+	<router-link
+		:to="{ name: 'tag', params: { tagSlug: tag.slug, tags: 'all-tags', range: 'latest' } }"
+		:title="tag.name"
+		class="tile"
+	>
+		<span class="title">{{ tag.name }}</span>
+
+		<template v-if="tag.poster">
+			<img
+				v-if="!lazy && !sfw"
+				:src="`/img/${tag.poster.thumbnail}`"
+				:title="tag.poster.comment"
+				:alt="tag.name"
+				class="poster"
+			>
+
+			<img
+				v-if="!lazy && sfw"
+				:src="`/img/${tag.poster.sfw.thumbnail}`"
+				:title="tag.poster.sfw.comment"
+				:alt="tag.name"
+				class="poster"
+			>
+
+			<img
+				v-if="lazy && !sfw"
+				:data-src="`/img/${tag.poster.thumbnail}`"
+				:data-loading="`/img/${tag.poster.lazy}`"
+				:title="tag.poster.comment"
+				:alt="tag.name"
+				class="poster"
+			>
+
+			<img
+				v-if="lazy && sfw"
+				:data-src="`/img/${tag.poster.sfw.thumbnail}`"
+				:data-loading="`/img/${tag.poster.sfw.lazy}`"
+				:title="tag.poster.sfw.comment"
+				:alt="tag.name"
+				class="poster"
+			>
+		</template>
+	</router-link>
+</template>
+
+<script>
+function sfw() {
+	return this.$store.state.ui.sfw;
+}
+
+export default {
+	props: {
+		tag: {
+			type: Object,
+			default: null,
+		},
+		lazy: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		sfw,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.tile {
+    color: var(--text-light);
+    background: var(--profile);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    box-sizing: border-box;
+    position: relative;
+    box-shadow: 0 0 3px var(--darken-weak);
+	overflow: hidden;
+}
+
+.poster {
+    width: 100%;
+	height: 100%;
+    object-fit: cover;
+    object-position: 50% 100%;
+}
+
+.title {
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    padding: .5rem 1rem;
+    position: absolute;
+    bottom: 0;
+    background: var(--darken);
+	overflow: hidden;
+	white-space: nowrap;
+    font-size: 1rem;
+    font-weight: bold;
+    text-transform: capitalize;
+    text-shadow: 0 0 3px var(--darken-strong);
+	text-overflow: ellipsis;
+}
+</style>
diff --git a/assets/img/icons/arrow-left2.svg b/assets/img/icons/arrow-left2.svg
new file mode 100644
index 00000000..af13b97a
--- /dev/null
+++ b/assets/img/icons/arrow-left2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-left2</title>
+<path d="M10.5 16l2-2-6-6 6-6-2-2-8 8 8 8z"></path>
+</svg>
diff --git a/assets/img/icons/arrow-right2.svg b/assets/img/icons/arrow-right2.svg
new file mode 100644
index 00000000..b9fc62d3
--- /dev/null
+++ b/assets/img/icons/arrow-right2.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-right2</title>
+<path d="M5.5 0l-2 2 6 6-6 6 2 2 8-8-8-8z"></path>
+</svg>