Added scroll buttons to entity children.

assets/components/entities/entity.vue

@@ -50,30 +50,53 @@
 		<div class="content-inner">
 			<div
 				v-if="entity.children.length > 0"
-				class="children"
+				class="children-container"
-				:class="{ expanded }"
 			>
-				<EntityTile
+				<div
-					v-for="child in entity.children"
+					class="scroll-container"
-					:key="`child-${child.id}`"
+					:class="{ expanded }"
-					:entity="child"
+				>
-				/>
+					<div
-			</div>
+						class="scroll scroll-left noselect"
+						:class="{ unscrolled }"
+						@click="scroll('left')"
+					><Icon icon="arrow-left3" /></div>
 
-			<div
+					<div
-				v-if="entity.children.length > 1"
+						ref="children"
-				class="expand noselect"
+						class="children"
-				@click="expanded = !expanded"
+						:class="{ expanded }"
-			>
+						@scroll="updateScroll"
-				<Icon
+					>
-					v-show="expanded"
+						<EntityTile
-					icon="arrow-up3"
+							v-for="child in entity.children"
-				/>
+							:key="`child-${child.id}`"
+							:entity="child"
+						/>
+					</div>
 
-				<Icon
+					<div
-					v-show="!expanded"
+						class="scroll scroll-right noselect"
-					icon="arrow-down3"
+						:class="{ scrolled }"
-				/>
+						@click="scroll('right')"
+					><Icon icon="arrow-right3" /></div>
+				</div>
+
+				<div
+					v-if="entity.children.length > 1"
+					class="expand noselect"
+					@click="expanded = !expanded"
+				>
+					<Icon
+						v-show="expanded"
+						icon="arrow-up3"
+					/>
+
+					<Icon
+						v-show="!expanded"
+						icon="arrow-down3"
+					/>
+				</div>
 			</div>
 
 			<FilterBar
@@ -109,8 +132,30 @@ async function fetchEntity() {
 	this.pageTitle = entity.name;
 }
 
+function updateScroll() {
+	this.unscrolled = this.$refs.children.scrollLeft === 0;
+	this.scrolled = this.$refs.children.scrollWidth - this.$refs.children.clientWidth === this.$refs.children.scrollLeft;
+}
+
+function scroll(direction) {
+	if (direction === 'right') {
+		this.$refs.children.scrollLeft = this.$refs.children.scrollLeft + this.$refs.children.clientWidth - 100;
+	}
+
+	if (direction === 'left') {
+		this.$refs.children.scrollLeft = this.$refs.children.scrollLeft - this.$refs.children.clientWidth + 100;
+	}
+}
+
 async function mounted() {
 	await this.fetchEntity();
+
+	this.updateScroll();
+	window.addEventListener('resize', this.updateScroll);
+}
+
+function beforeDestroy() {
+	window.removeEventListener('resize', this.updateScroll);
 }
 
 async function route() {
@@ -130,14 +175,19 @@ export default {
 			totalCount: null,
 			limit: 10,
 			expanded: false,
+			unscrolled: true,
+			scrolled: false,
 		};
 	},
 	watch: {
 		$route: route,
 	},
 	mounted,
+	beforeDestroy,
 	methods: {
 		fetchEntity,
+		updateScroll,
+		scroll,
 	},
 };
 </script>
@@ -179,13 +229,17 @@ export default {
 	object-position: 100% 50%;
 }
 
+.children-container {
+	background: var(--profile);
+}
+
 .children {
 	display: flex;
 	box-sizing: border-box;
-	overflow-x: auto;
 	padding: 1rem;
 	border-bottom: solid 1px var(--darken-hint);
-	background: var(--profile);
+	overflow-x: auto;
+	scroll-behavior: smooth;
 	scrollbar-width: none;
 
 	.tile {
@@ -209,18 +263,69 @@ export default {
 }
 
 .expand {
-	background: var(--profile);
-
 	.icon {
-		fill: var(--lighten-weak);
+		fill: var(--lighten);
 	}
 
 	&:hover {
-		background: var(--darken-strong);
+		background: var(--lighten-hint);
 
 		.icon {
-			fill: var(--lighten-weak);
+			fill: var(--text-light);
 		}
 	}
 }
+
+.scroll-container {
+	position: relative;
+	padding: 0 1rem 0 0;
+
+	&.expanded {
+		padding: 0;
+
+		.scroll {
+			display: none;
+		}
+	}
+}
+
+.scroll {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+
+	&.unscrolled,
+	&.scrolled {
+		display: none;
+	}
+
+	.icon {
+		fill: var(--lighten);
+	}
+
+	&:hover {
+		display: flex;
+		cursor: pointer;
+
+		.icon {
+			fill: var(--text-light);
+		}
+	}
+}
+
+.scroll-left {
+	left: 0;
+	padding: 1rem 2rem 1rem 1rem;
+	background: linear-gradient(to right, var(--profile) 50%, transparent);
+}
+
+.scroll-right {
+	right: 0;
+	padding: 1rem 1rem 1rem 2rem;
+	background: linear-gradient(to left, var(--profile) 50%, transparent);
+}
 </style>

assets/components/sidebar/sidebar.vue

@@ -11,7 +11,7 @@
 			/>
 
 			<router-link
-				to="/home"
+				to="/updates"
 				class="logo-link"
 				@click.native="toggleSidebar(false)"
 			>
@@ -29,7 +29,7 @@
 				<li class="nav-item">
 					<router-link
 						v-slot="{ href, isActive, navigate }"
-						to="/home"
+						to="/updates"
 						@click.native="toggleSidebar(false)"
 					>
 						<a
@@ -67,7 +67,7 @@
 							:href="href"
 							:class="{ active: isActive }"
 							@click="navigate"
-						>Sites</a>
+						>Channels</a>
 					</router-link>
 				</li>
 

assets/components/tags/tags.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import Tag from '../tile/tag.vue';
+import Tag from './tile.vue';
 
 function sfw() {
 	return this.$store.state.ui.sfw;
@@ -146,7 +146,7 @@ export default {
 
 .tiles {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(23rem, .33fr));
+    grid-template-columns: repeat(auto-fill, minmax(20rem, .33fr));
     grid-gap: 1rem;
     margin: 0 0 1.5rem 0;
 }
@@ -158,13 +158,19 @@ export default {
 
 @media(max-width: $breakpoint3) {
     .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(21rem, .5fr));
+        grid-template-columns: repeat(auto-fill, minmax(20rem, .5fr));
     }
 }
 
 @media(max-width: $breakpoint) {
     .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+    }
+}
+
+@media(max-width: $breakpoint0) {
+    .tiles {
+        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
     }
 }
 </style>