From 231b75c47eef6156e17e1e3b63c64b973df08ba8 Mon Sep 17 00:00:00 2001
From: bytedream <bytedream@protonmail.com>
Date: Tue, 10 Sep 2024 16:11:20 +0200
Subject: [PATCH] make bullet points on rule page collapsable (#26)
---
src/routes/rules/+page.svelte | 36 +++++++++++++++++++++++------------
1 file changed, 24 insertions(+), 12 deletions(-)
diff --git a/src/routes/rules/+page.svelte b/src/routes/rules/+page.svelte
index 4800a90..ecdb88d 100644
--- a/src/routes/rules/+page.svelte
+++ b/src/routes/rules/+page.svelte
@@ -1,5 +1,5 @@
<script lang="ts">
- import { rulesLong } from '$lib/rules';
+ import {rulesLong, rulesShort} from '$lib/rules';
</script>
<svelte:head>
@@ -7,14 +7,26 @@
</svelte:head>
<h1 class="text-3xl lg:text-5xl mb-4">CraftAttack 6 Regelwerk</h1>
-<p>{rulesLong.header}</p>
-<ol class="p-[revert] list-decimal my-6">
- {#each rulesLong.sections as section}
- <li class="mb-2">
- {section.content}
- </li>
- {/each}
-</ol>
-<p>
- {rulesLong.footer}
-</p>
+<div class="collapse collapse-arrow">
+ <input type="checkbox" autocomplete="off" checked />
+ <div class="collapse-title">
+ <p>0. Vorwort</p>
+ </div>
+ <div class="collapse-content">
+ <p>{rulesShort.header}</p>
+ <p class="mt-1 text-[.75rem]">{rulesShort.footer}</p>
+ </div>
+ <span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
+</div>
+{#each rulesShort.sections as section, i}
+ <div class="collapse collapse-arrow">
+ <input type="checkbox" autocomplete="off" />
+ <div class="collapse-title">
+ <p>{i + 1}. {section.title}</p>
+ </div>
+ <div class="collapse-content">
+ <p>{section.content}</p>
+ </div>
+ </div>
+ <span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
+{/each}