From a439faa3fe95dab0bb83cc8ecf485baf9f3dee21 Mon Sep 17 00:00:00 2001
From: Alexandre Tuleu <alexandre.tuleu.2005@polytechnique.org>
Date: Mon, 14 Aug 2023 22:34:40 +0200
Subject: [PATCH] Makes the layout responsive

---
 src/app.scss                           | 54 +++++++++++++++++++++-----
 src/config.yml                         |  3 +-
 src/lib/components/Brand.svelte        |  3 +-
 src/lib/components/ServiceCard.svelte  | 24 +++++++++---
 src/lib/components/ServiceGroup.svelte | 20 ++++++++--
 5 files changed, 83 insertions(+), 21 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 471b1e2..04d666f 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -10,7 +10,7 @@ body {
 	background-image: var(--background-image);
 	background-size: cover;
 	background-position: center;
-	color: var(--text);
+	color: var(--text) !important;
 	transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 }
 
@@ -128,23 +128,59 @@ main {
 		gap: 32px;
 	}
 
-	.service-group {
-		background: lime;
-	}
-
-	.service-group.layout-column {
+	.group .services.layout-column {
 		display: flex;
 		flex-flow: column nowrap;
 		gap: 16px;
 	}
 
-	.service-group.layout-row {
+	.group .services.layout-row {
 		display: grid;
 		grid-template-columns: var(--layout-template);
 		gap: 16px;
 	}
 
-	.service-card {
-		background: orange;
+	@media (max-width: 768px) {
+		.layout-column {
+			grid-template-columns: 1fr;
+		}
+
+		.group .services.layout-row {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	.group .header {
+		display: flex;
+		flex-flow: row nowrap;
+		font-size: 1.7em;
+		padding-bottom: 8px;
+	}
+
+	.card {
+		background: var(--card-background);
+		transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.media-content {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.card .image {
+		width: 48px;
+		height: 48px;
+		font-size: 48px;
+	}
+
+	.card:hover {
+		transform: translate(0, -3px);
+
+		.tag {
+		}
 	}
 }
diff --git a/src/config.yml b/src/config.yml
index 37eeb78..908399f 100644
--- a/src/config.yml
+++ b/src/config.yml
@@ -28,7 +28,7 @@ services:
 
           - title: 'PiHole'
             subtitle: 'A DNS Hole'
-            icon: 'fas fa-hard-drive'
+            logo: 'https://cdn.rawgit.com/pi-hole/graphics/master/Vortex/Vortex.svg'
             target: '_blank'
             url: '/pihole'
             type: 'pihole'
@@ -43,7 +43,6 @@ services:
             icon: 'fas fa-hard-drive'
             target: '_blank'
             url: '/NAS'
-            type: prowlarr
 
             keywords: 'cloud storage files'
 
diff --git a/src/lib/components/Brand.svelte b/src/lib/components/Brand.svelte
index 5e25ee2..790324f 100644
--- a/src/lib/components/Brand.svelte
+++ b/src/lib/components/Brand.svelte
@@ -22,9 +22,10 @@
 
 <style>
 	div {
-		width: 100%;
 		height: 100%;
+		width: 100%;
 		color: var(--mask-color);
+		display: flex;
 	}
 
 	img {
diff --git a/src/lib/components/ServiceCard.svelte b/src/lib/components/ServiceCard.svelte
index ebf6673..158a6b9 100644
--- a/src/lib/components/ServiceCard.svelte
+++ b/src/lib/components/ServiceCard.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { ServiceConfig } from '$lib/config';
 	import { getServiceComponent } from '$lib/services/services';
+	import Brand from './Brand.svelte';
 
 	export let service: ServiceConfig;
 	export let data: any;
@@ -8,9 +9,22 @@
 	const component = getServiceComponent(service.type || '');
 </script>
 
-<div class="service-card">
-	<p>{service.title}</p>
-	{#if component != undefined}
-		<svelte:component this={component} {data} />
-	{/if}
+<div class="card">
+	<div class="card-content">
+		<div class="media">
+			<div class="media-left">
+				<figure class="image">
+					<Brand brand={service} />
+				</figure>
+			</div>
+			<div class="media-content">
+				<p class="title is-4">{service.title}</p>
+				{#if component != undefined}
+					<p class="subtitle is-6"><svelte:component this={component} {data} /></p>
+				{:else}
+					<p class="subtitle is-6">{service.subtitle}</p>
+				{/if}
+			</div>
+		</div>
+	</div>
 </div>
diff --git a/src/lib/components/ServiceGroup.svelte b/src/lib/components/ServiceGroup.svelte
index 6c375d7..dd03a95 100644
--- a/src/lib/components/ServiceGroup.svelte
+++ b/src/lib/components/ServiceGroup.svelte
@@ -1,14 +1,26 @@
 <script lang="ts">
 	import type { ServiceGroupConfig } from '$lib/config';
 	import { layoutDirection } from '$lib/stores/layout';
+	import Brand from './Brand.svelte';
 	import ServiceCard from './ServiceCard.svelte';
 
 	export let group: ServiceGroupConfig;
 	export let groupData: Array<unknown>;
 </script>
 
-<div class="service-group layout-{$layoutDirection}">
-	{#each group.items as service, i}
-		<ServiceCard {service} data={groupData[i]} />
-	{/each}
+<div class="group">
+	<div class="header">
+		<h3>
+			{#if group.icon}
+				<i class={group.icon} />
+			{/if}
+			{group.title}
+		</h3>
+	</div>
+
+	<div class="services layout-{$layoutDirection}">
+		{#each group.items as service, i}
+			<ServiceCard {service} data={groupData[i]} />
+		{/each}
+	</div>
 </div>