From 68eb084a3d5677be29bf8be52a8ed6d81d5aa56d Mon Sep 17 00:00:00 2001 From: Alexandre Tuleu Date: Thu, 21 Sep 2023 16:26:56 +0200 Subject: [PATCH] Refactors layout using tailwind Ugly but more responsive column design. --- src/app.css | 5 ++- src/app.html | 6 ++-- src/config.yml | 3 ++ src/lib/components/ServiceCard.svelte | 6 ++-- src/lib/components/ServiceGroup.svelte | 31 +++++++++------- src/routes/+page.svelte | 50 ++++++++++++++++---------- 6 files changed, 63 insertions(+), 38 deletions(-) diff --git a/src/app.css b/src/app.css index d2f6977..59aafb3 100644 --- a/src/app.css +++ b/src/app.css @@ -3,10 +3,9 @@ @tailwind utilities; html { - height: 100%; + min-height: 100vh; } body { - height: 100%; - min-height: 100%; + min-height: 100vh; } diff --git a/src/app.html b/src/app.html index aba2847..f7cc84c 100644 --- a/src/app.html +++ b/src/app.html @@ -8,9 +8,11 @@
-
%sveltekit.body%
+
+ %sveltekit.body% +
diff --git a/src/config.yml b/src/config.yml index e62075d..5aa584b 100644 --- a/src/config.yml +++ b/src/config.yml @@ -4,6 +4,8 @@ logo: 'icon-any.svg' icon: 'fa fa-cloud' asmask: true +columns: 4 + links: - title: 'Cloud' icon: 'fa fa-cloud' @@ -24,6 +26,7 @@ services: - title: 'Sonarr' url: 'http://sonarr.lan' type: sonarr + api_key: 43f13770f9a0419bbdc3224dae76e886 keywords: 'shows tracker torrent usenet' - title: 'Radarr' diff --git a/src/lib/components/ServiceCard.svelte b/src/lib/components/ServiceCard.svelte index 40337c4..72bb33a 100644 --- a/src/lib/components/ServiceCard.svelte +++ b/src/lib/components/ServiceCard.svelte @@ -42,14 +42,14 @@
-
+

{service.title}

-

+

{subtitle()}

-
+
{#if component != undefined} {/if} diff --git a/src/lib/components/ServiceGroup.svelte b/src/lib/components/ServiceGroup.svelte index 30a7940..1419bc6 100644 --- a/src/lib/components/ServiceGroup.svelte +++ b/src/lib/components/ServiceGroup.svelte @@ -6,6 +6,24 @@ export let group: ServiceGroupConfig; export let groupData: Array; export let columns: number; + + function renderClasses(columns: number, direction: LayoutDirection): string { + if (direction === 'column') { + return 'flex flex-col'; + } + switch (columns) { + case 1: + return 'grid grid-cols-1'; + case 2: + return 'grid grid-cols-1 md:grid-cols-2'; + case 3: + return 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3'; + default: + return 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4'; + } + } + + $: layoutClasses = renderClasses(columns, $layoutDirection);
@@ -18,20 +36,9 @@
-
+
{#each group.items as service, i} {/each}
- - diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 555b99f..10167ef 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,24 +1,49 @@
-
+
{#each data.config.services as group, i} - + {/each}
-