atuleu/flanders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactors layout using tailwind

Browse Source 
Ugly but more responsive column design.
This commit is contained in:
Alexandre Tuleu
2023-09-21 16:26:56 +02:00
parent 4d419b77c0
commit 68eb084a3d
6 changed files with 63 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app.css
View File

@@ -3,10 +3,9 @@
@tailwind utilities; @tailwind utilities;
html { html {
height: 100%; min-height: 100vh;
} }
body { body {
height: 100%; min-height: 100vh;
min-height: 100%;
} }

6
src/app.html
View File

@@ -8,9 +8,11 @@
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div <div
class="h-full bg-neutral-400 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400" class="min-h-screen bg-neutral-400 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400"
> >
<div class="container mx-auto flex h-full flex-col">%sveltekit.body%</div> <div class="container mx-auto flex min-h-screen flex-col px-4 md:px-8">
%sveltekit.body%
</div>
</div> </div>
</body> </body>
</html> </html>

3
src/config.yml
View File

@@ -4,6 +4,8 @@ logo: 'icon-any.svg'
icon: 'fa fa-cloud' icon: 'fa fa-cloud'
asmask: true asmask: true
columns: 4
links: links:
- title: 'Cloud' - title: 'Cloud'
icon: 'fa fa-cloud' icon: 'fa fa-cloud'
@@ -24,6 +26,7 @@ services:
- title: 'Sonarr' - title: 'Sonarr'
url: 'http://sonarr.lan' url: 'http://sonarr.lan'
type: sonarr type: sonarr
api_key: 43f13770f9a0419bbdc3224dae76e886
keywords: 'shows tracker torrent usenet' keywords: 'shows tracker torrent usenet'
- title: 'Radarr' - title: 'Radarr'

6
src/lib/components/ServiceCard.svelte
View File

@@ -42,14 +42,14 @@
<div class="flex flex h-12 w-12 flex-row text-4xl"> <div class="flex flex h-12 w-12 flex-row text-4xl">
<Brand brand={brand()} /> <Brand brand={brand()} />
</div> </div>
<div> <div class="h-12">
<p class="text-xl">{service.title}</p> <p class="text-xl">{service.title}</p>
<p class="text-md"> <p class="text-md min-h-12">
{subtitle()} {subtitle()}
</p> </p>
</div> </div>
</div> </div>
<div class="mr-6 mt-2 h-7 overflow-hidden pl-20"> <div class="min-h-7 mr-6 mt-2 h-7 overflow-hidden pl-20">
{#if component != undefined} {#if component != undefined}
<svelte:component this={component} {data} /> <svelte:component this={component} {data} />
{/if} {/if}

31
src/lib/components/ServiceGroup.svelte
View File

@@ -6,6 +6,24 @@
export let group: ServiceGroupConfig; export let group: ServiceGroupConfig;
export let groupData: Array<unknown>; export let groupData: Array<unknown>;
export let columns: number; 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);
</script> </script>
<div> <div>
@@ -18,20 +36,9 @@
</h3> </h3>
</div> </div>
<div class={'gap-4' + ' layout-' + $layoutDirection} style={'--columns: ' + columns}> <div class="gap-4 {layoutClasses}">
{#each group.items as service, i} {#each group.items as service, i}
<ServiceCard {service} data={groupData[i]} /> <ServiceCard {service} data={groupData[i]} />
{/each} {/each}
</div> </div>
</div> </div>
<style>
.layout-row {
display: grid;
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}
.layout-column {
display: flex;
flex-flow: row wrap;
}
</style>

50
src/routes/+page.svelte
View File

@@ -1,24 +1,49 @@
<script lang="ts"> <script lang="ts">
import Header from '$lib/components/Header.svelte'; import Header from '$lib/components/Header.svelte';
import ServiceGroup from '$lib/components/ServiceGroup.svelte'; import ServiceGroup from '$lib/components/ServiceGroup.svelte';
import { layoutDirection } from '$lib/stores/layout'; import { layoutDirection, type LayoutDirection } from '$lib/stores/layout';
import type { PageData } from './$types'; import type { PageData } from './$types';
export let data: PageData; export let data: PageData;
function renderClasses(columns: number, direction: LayoutDirection): string {
if (direction === 'row') {
switch (columns) {
case 1:
return 'grid grid-rows-1';
case 2:
return 'grid grid-rows-1 md:grid-rows-2';
case 3:
return 'grid grid-rows-1 md:grid-rows-2 xl:grid-rows-3';
default:
return 'grid grid-rows-1 md:grid-rows-2 xl:grid-rows-3 2xl:grid-rows-4';
}
}
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';
}
}
$: columns = Math.min(data.config.columns, data.config.services.length);
$: layoutClasses = renderClasses(columns, $layoutDirection);
</script> </script>
<Header section={data.config} links={data.config.links} /> <Header section={data.config} links={data.config.links} />
<main <main class="mb-auto mt-16 gap-12 {layoutClasses}" style="--columns: {data.config.columns}">
class={'container mb-auto mt-20 gap-4 transition-all' + ' layout-' + $layoutDirection}
style={'--columns:' + data.config.columns}
>
{#each data.config.services as group, i} {#each data.config.services as group, i}
<ServiceGroup {group} groupData={data.serviceData[i]} columns={data.config.columns} /> <ServiceGroup {group} groupData={data.serviceData[i]} {columns} />
{/each} {/each}
</main> </main>
<footer class="flex h-8 w-full flex-row"> <footer class="mt-12 flex h-8 w-full flex-row">
<div class="mx-auto"> <div class="mx-auto">
Made with ♥ by atuleu. Your IP: {data.location}. Made with ♥ by atuleu. Your IP: {data.location}.
{#if data.privateAccess === true} {#if data.privateAccess === true}
@@ -28,14 +53,3 @@
{/if} {/if}
</div> </div>
</footer> </footer>
<style>
.layout-column {
display: grid;
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}
.layout-row {
display: grid;
grid-template-rows: repeat(var(--columns), minmax(0, 1fr));
}
</style>