coracle/flotilla
1
3
Fork 9
Code Issues 32 Pull Requests 1 Actions Packages Projects 5 Releases Wiki Activity

Work on add space modal

Browse Source
This commit is contained in:
Jon Staab
2024-08-08 14:02:46 -07:00
parent fb04a68168
commit 6c2e5d6e07
17 changed files with 232 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+28 -28
View File
@@ -4,6 +4,7 @@
import {fly} from "@lib/transition"
import {toast} from "@app/toast"
import {modals} from "@app/modal"
import ModalBox from "@lib/components/ModalBox.svelte"
import PrimaryNav from "@app/components/PrimaryNav.svelte"
import SecondaryNav from "@app/components/SecondaryNav.svelte"
@@ -34,32 +35,31 @@
}
</script>
<div class="flex h-screen" data-theme="dark">
<PrimaryNav />
<SecondaryNav />
<div class="flex-grow bg-base-200">
<slot />
</div>
</div>
<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
{#if $page.state.modal}
{@const {component, props} = modals.get($page.state.modal)}
<svelte:component this={component} {...props} />
{/if}
</div>
<form method="dialog" class="modal-backdrop">
<button />
</form>
</dialog>
{#if $toast}
{#key $toast.id}
<div transition:fly class="toast">
<div class="alert">
<span>{$toast.message}</span>
</div>
<div data-theme="dark">
<div class="flex h-screen">
<PrimaryNav />
<SecondaryNav />
<div class="flex-grow bg-base-200">
<slot />
</div>
{/key}
{/if}
</div>
<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle">
{#if $page.state.modal}
{#key $page.state.modal}
<ModalBox {...modals.get($page.state.modal)} />
{/key}
{/if}
<form method="dialog" class="modal-backdrop">
<button />
</form>
</dialog>
{#if $toast}
{#key $toast.id}
<div transition:fly class="toast">
<div class="alert">
<span>{$toast.message}</span>
</div>
</div>
{/key}
{/if}
</div>
src/routes/home/+page.svelte
+14 -38
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import Icon from "@lib/components/Icon.svelte"
import CardButton from "@lib/components/CardButton.svelte"
</script>
<div class="hero min-h-screen bg-base-200">
@@ -7,43 +7,19 @@
<div class="flex max-w-xl flex-col gap-4">
<h1 class="text-stark-content text-center text-5xl">Welcome to</h1>
<h1 class="text-stark-content mb-4 text-center text-5xl font-bold uppercase">Flotilla</h1>
<div class="grid grid-cols-2 gap-3">
<div class="button flex items-center gap-4 bg-base-100 hover:bg-base-200">
<Icon class="bg-accent" size={7} icon="add-circle" />
<div class="flex flex-col gap-1">
<p class="text-stark-content">Create a group</p>
<p class="text-xs">Invite all your friends, do life together.</p>
<p></p>
</div>
<Icon size={7} icon="alt-arrow-right" />
</div>
<div class="button flex items-center gap-4 bg-base-100 hover:bg-base-200">
<Icon class="bg-accent" size={7} icon="compass" />
<div class="flex flex-col gap-1">
<p class="text-stark-content">Discover groups</p>
<p class="text-xs">Find a community based on your hobbies or interests.</p>
<p></p>
</div>
<Icon size={7} icon="alt-arrow-right" />
</div>
<div class="button flex items-center gap-4 bg-base-100 hover:bg-base-200">
<Icon class="bg-accent" size={7} icon="plain" />
<div class="flex flex-col gap-1">
<p class="text-stark-content">Leave feedback</p>
<p class="text-xs">Let us know how we can improve by giving us feedback.</p>
<p></p>
</div>
<Icon size={7} icon="alt-arrow-right" />
</div>
<div class="button flex items-center gap-4 bg-base-100 hover:bg-base-200">
<Icon class="bg-accent" size={7} icon="hand-pills" />
<div class="flex flex-col gap-1">
<p class="text-stark-content">Donate to Flotilla</p>
<p class="text-xs">Support the project by donating to the developer.</p>
<p></p>
</div>
<Icon size={7} icon="alt-arrow-right" />
</div>
<div class="grid lg:grid-cols-2 gap-3">
<CardButton icon="add-circle" title="Create a group" class="h-24">
Invite all your friends, do life together.
</CardButton>
<CardButton icon="compass" title="Discover groups" class="h-24">
Find a community based on your hobbies or interests.
</CardButton>
<CardButton icon="plain" title="Leave feedback" class="h-24">
Let us know how we can improve by giving us feedback.
</CardButton>
<CardButton icon="hand-pills" title="Donate to Flotilla" class="h-24">
Support the project by donating to the developer.
</CardButton>
</div>
</div>
</div>