lew/character-records-generator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(fend): sticky right-split for form output

Browse source
This commit is contained in:
Lewis Wynne 2026-03-23 19:12:56 +00:00
parent 63e8178fb0
commit bb429d8195
4 changed files with 97 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/routes/+page.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts">
import Header from '$lib/components/Header.svelte';
import SchemaForm from '$lib/components/SchemaForm.svelte';
import OutputPanel from '$lib/components/OutputPanel.svelte';
import { roster } from '$lib/state.svelte';
import { presets } from '$lib/presets';
</script>
@ -8,22 +9,28 @@
<div class="min-h-screen flex flex-col">
<Header />
<main class="flex-1 p-4">
{#if roster.active}
<div class="max-w-xl mx-auto">
<SchemaForm character={roster.active} />
{#if roster.active}
{@const char = roster.active}
<main class="flex-1 grid grid-cols-1 lg:grid-cols-[1fr_1fr]">
<div class="p-4">
<div class="max-w-xl mx-auto">
<SchemaForm character={char} />
</div>
</div>
{:else}
<div class="flex flex-col items-center justify-center gap-4 h-full min-h-[60vh]">
<p style="color: var(--text-muted);">No characters yet.</p>
<button
onclick={() => roster.create(presets[0])}
class="px-3 py-1 rounded text-sm border hover:opacity-80"
style="border-color: var(--border);"
>
Get Started
</button>
<div class="lg:sticky lg:top-[49px] lg:max-h-[calc(100vh-49px)] overflow-y-auto p-4">
<OutputPanel character={char} />
</div>
{/if}
</main>
</main>
{:else}
<main class="flex-1 flex flex-col items-center justify-center gap-4">
<p style="color: var(--text-muted);">No characters yet.</p>
<button
onclick={() => roster.create(presets[0])}
class="px-3 py-1 rounded text-sm border hover:opacity-80"
style="border-color: var(--border);"
>
Get Started
</button>
</main>
{/if}
</div>