From 087d349cec558222adf3ad836aeeff5fb497615c Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Sun, 28 Jun 2020 03:58:16 +0200
Subject: [PATCH] Hiding scroll buttons on small screens. Fixed channel count
 on overview.

---
 assets/components/entities/entity.vue   | 27 ++++++++++++++++++++++++-
 assets/components/networks/networks.vue | 19 ++++++++---------
 assets/components/tags/tags.vue         |  2 +-
 assets/js/curate.js                     |  9 ++++++++-
 assets/js/entities/actions.js           | 21 +++++++++++--------
 5 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/assets/components/entities/entity.vue b/assets/components/entities/entity.vue
index 37cc07ad..735ec051 100644
--- a/assets/components/entities/entity.vue
+++ b/assets/components/entities/entity.vue
@@ -52,6 +52,22 @@
 				v-if="entity.children.length > 0"
 				class="children-container"
 			>
+				<div
+					v-if="expanded"
+					class="expand noselect"
+					@click="expanded = !expanded"
+				>
+					<Icon
+						v-show="expanded"
+						icon="arrow-up3"
+					/>
+
+					<Icon
+						v-show="!expanded"
+						icon="arrow-down3"
+					/>
+				</div>
+
 				<div
 					class="scroll-container"
 					:class="{ expanded }"
@@ -83,7 +99,7 @@
 				</div>
 
 				<div
-					v-if="(scrollable && entity.children.length > 1) || expanded"
+					v-if="scrollable || expanded"
 					class="expand noselect"
 					@click="expanded = !expanded"
 				>
@@ -195,6 +211,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'theme';
+
 .info {
 	height: 2.5rem;
 	display: flex;
@@ -202,6 +220,7 @@ export default {
 	padding: 1rem;
 	background: var(--profile);
 	border-bottom: solid 1px var(--lighten-hint);
+	box-shadow: inset 0 0 3px var(--darken);
 
 	.link {
 		display: flex;
@@ -337,4 +356,10 @@ export default {
 	padding: 1rem 1rem 1rem 2rem;
 	background: linear-gradient(to left, var(--profile) 50%, transparent);
 }
+
+@media(max-width: $breakpoint) {
+	.scroll {
+		display: none;
+	}
+}
 </style>
diff --git a/assets/components/networks/networks.vue b/assets/components/networks/networks.vue
index ba1f596b..b1578f9f 100644
--- a/assets/components/networks/networks.vue
+++ b/assets/components/networks/networks.vue
@@ -6,7 +6,7 @@
 		>
 			<input
 				v-model="query"
-				:placeholder="`Find ${siteCount} sites in ${networks.length} networks`"
+				:placeholder="`Find ${channelCount} channels in ${entities.length} networks`"
 				class="query"
 				@input="searchEntities"
 			>
@@ -35,9 +35,9 @@
 			class="entity-tiles"
 		>
 			<Entity
-				v-for="network in networks"
-				:key="`network-tile-${network.slug}`"
-				:entity="network"
+				v-for="entity in entities"
+				:key="`entity-tile-${entity.slug}`"
+				:entity="entity"
 			/>
 		</div>
 	</div>
@@ -54,7 +54,7 @@ async function searchEntities() {
 }
 
 async function mounted() {
-	this.networks = await this.$store.dispatch('fetchEntities', {
+	this.entities = await this.$store.dispatch('fetchEntities', {
 		type: 'network',
 		entitySlugs: [
 			'bamvisions',
@@ -62,11 +62,12 @@ async function mounted() {
 			'legalporno',
 		],
 	});
+
 	this.pageTitle = 'Networks';
 }
 
-function siteCount() {
-	return this.networks.map(network => network.children).flat().length;
+function channelCount() {
+	return this.entities.reduce((acc, entity) => acc + entity.childrenTotal, 0);
 }
 
 export default {
@@ -77,12 +78,12 @@ export default {
 		return {
 			query: '',
 			pageTitle: null,
-			networks: [],
+			entities: [],
 			searchResults: [],
 		};
 	},
 	computed: {
-		siteCount,
+		channelCount,
 	},
 	mounted,
 	methods: {
diff --git a/assets/components/tags/tags.vue b/assets/components/tags/tags.vue
index fa753f0f..4c300fe3 100644
--- a/assets/components/tags/tags.vue
+++ b/assets/components/tags/tags.vue
@@ -146,7 +146,7 @@ export default {
 
 .tiles {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(20rem, .33fr));
+    grid-template-columns: repeat(auto-fill, minmax(23rem, .33fr));
     grid-gap: 1rem;
     margin: 0 0 1.5rem 0;
 }
diff --git a/assets/js/curate.js b/assets/js/curate.js
index 9af1b99d..2abb3554 100644
--- a/assets/js/curate.js
+++ b/assets/js/curate.js
@@ -122,8 +122,15 @@ function curateEntity(entity, parent, releases) {
 		children: [],
 	};
 
+	if (entity.children) {
+		if (entity.children.nodes) {
+			curatedEntity.children = entity.children.nodes.map(childEntity => curateEntity(childEntity, curatedEntity));
+		}
+
+		curatedEntity.childrenTotal = entity.children.totalCount;
+	}
+
 	if (entity.parent || parent) curatedEntity.parent = curateEntity(entity.parent || parent);
-	if (entity.children) curatedEntity.children = entity.children.map(childEntity => curateEntity(childEntity, curatedEntity));
 	if (releases) curatedEntity.releases = releases.map(release => curateRelease(release));
 
 	return curatedEntity;
diff --git a/assets/js/entities/actions.js b/assets/js/entities/actions.js
index 04ff1c85..7d9a5c67 100644
--- a/assets/js/entities/actions.js
+++ b/assets/js/entities/actions.js
@@ -33,16 +33,18 @@ function initEntitiesActions(store, _router) {
                     slug
                     url
 					hasLogo
-					children: childEntities(
+					children: childEntitiesConnection(
                         orderBy: [PRIORITY_DESC, NAME_ASC],
                     ) {
-                        id
-                        name
-                        slug
-                        url
-						type
-                        priority
-						hasLogo
+						nodes {
+							id
+							name
+							slug
+							url
+							type
+							priority
+							hasLogo
+						}
                     }
                     parent {
                         id
@@ -147,6 +149,9 @@ function initEntitiesActions(store, _router) {
 					type
                     url
 					hasLogo
+					children: childEntitiesConnection {
+						totalCount
+					}
                 }
             }
         `, {