From 20d1a319abe56ff48b718c8f5839f149b45eea61 Mon Sep 17 00:00:00 2001
From: Kasper <kasperkh.kh@gmail.com>
Date: Wed, 10 Jan 2024 07:40:07 +0100
Subject: [PATCH] Show Channels page as grid, closes #7

---
 CHANGELOG.md                     |  1 +
 src/routes/channels/+page.svelte | 20 +++++++-------------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b3d9011..639b757 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Next
 - Make search case insensitive
+- Show Channels page as grid
 - Load 100 videos at a time instead of 50
 - Allow selecting bottom row diagonally with the down arrow key
 
diff --git a/src/routes/channels/+page.svelte b/src/routes/channels/+page.svelte
index 4de0e2a..0fcccc5 100644
--- a/src/routes/channels/+page.svelte
+++ b/src/routes/channels/+page.svelte
@@ -85,12 +85,12 @@
 			{visibleIndexes.length} of {channels.length}
 		</div>
 	</header>
-	<div bind:this={channels_scroll_el} class="channels">
+	<div bind:this={channels_scroll_el} class="channels grid">
 		{#each channels as channel, i}
 			{@const lowerName = channel.name.toLowerCase()}
 			<div
 				class="channel selectable"
-				class:show={filter === '' || lowerName.includes(filter.toLowerCase())}
+				hidden={filter !== '' && !lowerName.includes(filter.toLowerCase())}
 			>
 				<img src={channel.icon} alt="" />
 				<div class="details">
@@ -101,7 +101,6 @@
 						class="title">{channel.name}</a
 					>
 					<div class="content">
-						<!-- <span>{channel.id}</span> -->
 						<span
 							>Check for videos after {new Date(Number(channel.from_time)).toLocaleString()}</span
 						>
@@ -161,24 +160,19 @@
 	.selectable
 		user-select: text
 	.channels
-		flex-wrap: wrap
-		padding: 0px var(--page-padding)
-		height: 0px
-		flex-grow: 1
-		overflow-y: auto
+		padding: var(--page-padding)
+		gap: var(--page-padding)
+		display: grid
+		grid-template-columns: repeat(auto-fill, minmax(550px, 1fr))
 	.channel
-		flex-grow: 1
+		display: flex
 		align-items: center
 		border-radius: 7px
 		transition: border 120ms $ease-md
 		padding: 15px 5px
 		border: 1px solid transparent
-		display: none
-		&.show
-			display: flex
 		@media screen and (min-width: 600px)
 			padding: 15px
-			margin: 15px 0px
 			background-color: hsla(223, 33%, 64%, 0.05)
 			box-shadow: 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1)
 			border: 1px solid hsla(0, 0%, 50%, 0.04)
-- 
2.51.2