design

client/components/PadTable.js

@@ -9,6 +9,8 @@ export default {
 		const currentSort = ref("date");
 		const currentSortDir = ref("desc");
 
+		const tags = ref([]);
+
 		const sortedPads = computed(() => {
 			return pads.value.sort((a, b) => {
 				let modifier = 1;
@@ -46,6 +48,17 @@ export default {
 			.then((res) => res.json())
 			.then((data) => {
 				pads.value = data.pads;
+
+				pads.value.map(
+					(pad) =>
+						(pad.categories = pad.categories
+							.split(",")
+							.map((category) => category.trim()))
+				);
+
+				tags.value = Array.from(
+					new Set([...pads.value.map((pad) => pad.categories)].flat())
+				).sort();
 				currentPage.value = data.page;
 				loaded.value = true;
 			});
@@ -58,38 +71,53 @@ export default {
 			currentSort,
 			currentSortDir,
 			loaded,
+			tags,
 			sort,
 			formatDate,
 		};
 	},
 	template: `
 
+
+
 		<div v-if="!loaded" class='loading grow'>
 			Loading loading loading loading loading loading loading loading loading loading loading loading loading loading loading loading loading loading etc
 		</div>
 
 		<div v-else>
+			<div class="filter">
+				<h2>Filter Categories</h2>
+				<ul>
+					<li v-for="tag in tags" :key="tag">{{tag}}</li>
+				</ul>
+			</div>
 
-			<p class="from">Fetching pads from <a :href="'https://pzwiki.wdka.nl/mediadesign/' + currentPage">
-				{{currentPage}}
-			</a>
+	
+			<p class="from">
+				Fetching pads from 
+				<a :href="'https://pzwiki.wdka.nl/mediadesign/' + currentPage">{{currentPage}}</a>
 			</p>
 
 
 			<table>
 				<tr class="header">
-					<th v-for="column in columns" @click='sort(column)'> 
+					<th v-for="column in columns" :class="column" @click='sort(column)'> 
 						{{column }}
 						<span v-if='column == currentSort'> {{ currentSortDir == 'asc' ?  '▼' : '▲'}}</span>
-						
 					</th>
 				</tr>
 				<tr v-for="(pad, index) in sortedPads" key="pad.title, index" :class="pad.category">
 					<td class="title">
 						<a :href="pad.link" class='stretched' target="_blank"> {{pad.title}} </a>
 					</td>
-					<td class="overview">{{pad.overview}}</td>
-					<td class="categories">{{pad.categories}}</td>
+					<td class="overview">
+						<p>
+							{{pad.overview}}
+						</p>
+					</td>
+					<td class="categories">
+						<span class="category" v-for="category in pad.categories" :key="category">{{category}}</span>
+					</td>
 					<td class="date">{{formatDate(pad.date)}}</td>
 					
 				</tr>

client/style.css

@@ -1,3 +1,8 @@
+:root {
+	--bg: #000000;
+	--color: dodgerblue;
+}
+
 * {
 	box-sizing: border-box;
 }
@@ -6,7 +11,8 @@ html,
 body {
 	font-family: Arial, Helvetica, sans-serif;
 	line-height: 1.6;
-	color: dodgerblue;
+	color: var(--color);
+	background-color: var(--bg);
 }
 
 a {
@@ -24,6 +30,7 @@ input {
 	outline: none;
 	padding: 0.4em;
 	margin: 0;
+	background: none;
 }
 
 input.overview {
@@ -57,8 +64,8 @@ button.submit {
 }
 
 button:hover {
-	background-color: dodgerblue;
-	color: white;
+	background-color: var(--color);
+	color: var(--bg);
 }
 
 *:not(h2) + input {
@@ -69,8 +76,8 @@ button:hover {
 	display: inline-block;
 	padding-left: 12px;
 	border-left: 1px solid currentColor;
-	margin-top: 32px;
-	margin-bottom: 48px;
+	margin-top: 12px;
+	margin-bottom: 12px;
 }
 
 .app-form h2 {
@@ -86,18 +93,25 @@ table a {
 	text-decoration: none;
 }
 
+tr.header {
+	position: sticky;
+	top: 0;
+	background-color: var(--bg);
+	z-index: 100;
+}
+
 th {
 	text-align: left;
 	padding: 24px 0;
 	border-bottom: 1px solid currentColor;
 	text-transform: capitalize;
-	font-size: 28px;
+	font-size: 21px;
 	user-select: none;
 	cursor: pointer;
 }
 
 td {
-	padding: 12px 0;
+	padding: 12px;
 	border-bottom: 1px solid currentColor;
 }
 
@@ -105,6 +119,15 @@ td.title {
 	font-weight: bold;
 }
 
+td.overview,
+th.overview {
+	flex-grow: 3;
+}
+
+td.overview p {
+	margin: 0;
+}
+
 tr {
 	position: relative;
 	transition: transform 0.1s ease-in;
@@ -131,6 +154,79 @@ tr:hover:not(:first-of-type) {
 .grow {
 	animation: grow 5s;
 }
+
+.filter {
+	padding-left: 12px;
+	border-left: 1px solid currentColor;
+	margin-top: 32px;
+	margin-bottom: 48px;
+}
+
+.filter h2 {
+	font-weight: normal;
+	margin: 0;
+	margin-bottom: 8px;
+}
+
+.filter ul {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	gap: 8px;
+	margin: 0;
+	padding: 0;
+}
+
+.filter ul li,
+.category {
+	display: inline-block;
+	border: 1px solid currentColor;
+	padding: 0 4px;
+}
+
+tr {
+	display: flex;
+	justify-content: space-between;
+}
+
+th,
+td {
+	padding: 12px 12px;
+}
+
+th:first-of-type,
+td:first-child {
+	padding-left: 0;
+}
+
+th:last-of-type,
+td:last-child {
+	padding-right: 0;
+}
+
+th.date,
+td.date {
+	flex-grow: 0.4;
+	margin-left: auto;
+}
+
+tr > * {
+	flex: 1;
+}
+
+td.categories {
+	align-content: flex-start;
+
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	height: auto;
+}
+
+.categories .category {
+	border: none;
+}
+
 @keyframes grow {
 	from {
 		transform: scale(100%);