summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/containers
diff options
context:
space:
mode:
authorWolfgang Müller2024-03-05 18:08:09 +0100
committerWolfgang Müller2024-03-05 19:25:59 +0100
commitd1d654ebac2d51e3841675faeb56480e440f622f (patch)
tree56ef123c1a15a10dfd90836e4038e27efde950c6 /frontend/src/lib/containers
downloadhircine-d1d654ebac2d51e3841675faeb56480e440f622f.tar.gz
Initial commit0.1.0
Diffstat (limited to 'frontend/src/lib/containers')
-rw-r--r--frontend/src/lib/containers/Cardlets.svelte11
-rw-r--r--frontend/src/lib/containers/Cards.svelte8
-rw-r--r--frontend/src/lib/containers/Carousel.svelte15
-rw-r--r--frontend/src/lib/containers/Column.svelte3
-rw-r--r--frontend/src/lib/containers/Grid.svelte23
5 files changed, 60 insertions, 0 deletions
diff --git a/frontend/src/lib/containers/Cardlets.svelte b/frontend/src/lib/containers/Cardlets.svelte
new file mode 100644
index 0000000..129da61
--- /dev/null
+++ b/frontend/src/lib/containers/Cardlets.svelte
@@ -0,0 +1,11 @@
+<script>
+ import { fadeDefault } from '$lib/Transitions';
+ import { fade } from 'svelte/transition';
+</script>
+
+<div
+ class="grid gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 min-[1600px]:grid-cols-8 min-[1920px]:grid-cols-10"
+ in:fade={fadeDefault}
+>
+ <slot />
+</div>
diff --git a/frontend/src/lib/containers/Cards.svelte b/frontend/src/lib/containers/Cards.svelte
new file mode 100644
index 0000000..a19e8be
--- /dev/null
+++ b/frontend/src/lib/containers/Cards.svelte
@@ -0,0 +1,8 @@
+<script>
+ import { fadeDefault } from '$lib/Transitions';
+ import { fade } from 'svelte/transition';
+</script>
+
+<div class="grid gap-4 xl:grid-cols-2 min-[1920px]:grid-cols-3" in:fade|global={fadeDefault}>
+ <slot />
+</div>
diff --git a/frontend/src/lib/containers/Carousel.svelte b/frontend/src/lib/containers/Carousel.svelte
new file mode 100644
index 0000000..1268a78
--- /dev/null
+++ b/frontend/src/lib/containers/Carousel.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+ export let title: string;
+ export let href: string;
+</script>
+
+<div class="flex flex-col gap-1">
+ <h2 class="flex text-2xl font-medium">
+ <a class="hover:text-white" {href}>
+ {title}
+ </a>
+ </h2>
+ <div class="flex flex-wrap gap-5">
+ <slot />
+ </div>
+</div>
diff --git a/frontend/src/lib/containers/Column.svelte b/frontend/src/lib/containers/Column.svelte
new file mode 100644
index 0000000..05daece
--- /dev/null
+++ b/frontend/src/lib/containers/Column.svelte
@@ -0,0 +1,3 @@
+<div class="flex flex-col gap-4">
+ <slot />
+</div>
diff --git a/frontend/src/lib/containers/Grid.svelte b/frontend/src/lib/containers/Grid.svelte
new file mode 100644
index 0000000..1224156
--- /dev/null
+++ b/frontend/src/lib/containers/Grid.svelte
@@ -0,0 +1,23 @@
+<script>
+ import { fadeDefault } from '$lib/Transitions';
+
+ import { fade } from 'svelte/transition';
+</script>
+
+<div
+ class="flex flex-col gap-1 lg:grid lg:h-full lg:max-h-full lg:overflow-auto"
+ in:fade|global={fadeDefault}
+>
+ <slot />
+</div>
+
+<style>
+ div {
+ grid-template-columns: auto 1fr;
+ grid-template-rows: auto 1fr;
+
+ grid-template-areas:
+ 'header header'
+ 'sidebar main';
+ }
+</style>