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

chore(fend): really tedious fixing of overflows and scrollbars between the splits

Browse source
This commit is contained in:
Lewis Wynne 2026-03-23 19:36:55 +00:00
parent be11c0e57a
commit 8875b70a14
6 changed files with 31 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app.html
View file

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aurora Records</title>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

2
src/lib/components/Header.svelte
View file

@ -23,7 +23,7 @@
} }
</script> </script>
<header class="sticky top-0 z-20 flex items-center gap-3 px-4 py-3 border-b" style="border-color: var(--border); background: var(--bg-card);"> <header class="flex items-center gap-3 px-4 py-3 border-b shrink-0" style="border-color: var(--border); background: var(--bg-card);">
<h1 class="font-bold whitespace-nowrap">Aurora Records</h1> <h1 class="font-bold whitespace-nowrap">Aurora Records</h1>
{#if roster.characters.length > 0} {#if roster.characters.length > 0}

2
src/lib/components/OutputPanel.svelte
View file

@ -23,7 +23,7 @@
); );
</script> </script>
<div class="flex flex-col h-full rounded border" style="border-color: var(--border); background: var(--bg-card);"> <div class="flex flex-col h-full min-h-0 rounded border" style="border-color: var(--border); background: var(--bg-card);">
<div class="flex border-b" style="border-color: var(--border);"> <div class="flex border-b" style="border-color: var(--border);">
{#each tabs as tab} {#each tabs as tab}
<button <button

2
src/lib/components/OutputTab.svelte
View file

@ -16,7 +16,7 @@
} }
</script> </script>
<div class="flex flex-col h-full"> <div class="flex flex-col h-full min-h-0">
<div class="flex items-center justify-between px-3 py-2 text-sm" style="color: var(--text-muted);"> <div class="flex items-center justify-between px-3 py-2 text-sm" style="color: var(--text-muted);">
<span>{wordCount} words</span> <span>{wordCount} words</span>
<button onclick={copy} class="flex items-center gap-1 px-2 py-1 rounded border hover:opacity-80" style="border-color: var(--border);"> <button onclick={copy} class="flex items-center gap-1 px-2 py-1 rounded border hover:opacity-80" style="border-color: var(--border);">

7
src/lib/components/RecordCard.svelte
View file

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { slide } from 'svelte/transition';
import { ChevronDown } from 'lucide-svelte'; import { ChevronDown } from 'lucide-svelte';
import type { RecordDef } from '$lib/types'; import type { RecordDef } from '$lib/types';
import DynamicField from './fields/DynamicField.svelte'; import DynamicField from './fields/DynamicField.svelte';
@ -25,11 +26,11 @@
<section class="rounded border" style="border-color: var(--border); background: var(--bg-card);"> <section class="rounded border" style="border-color: var(--border); background: var(--bg-card);">
<button <button
onclick={() => { expanded = !expanded; }} onclick={() => { expanded = !expanded; }}
class="flex items-center w-full px-4 py-3 text-left gap-3" class="flex items-center w-full px-4 py-3 text-left gap-3 min-h-[44px]"
> >
<ChevronDown <ChevronDown
size={16} size={16}
class="transition-transform shrink-0" class="shrink-0 transition-transform duration-200"
style="transform: rotate({expanded ? '0' : '-90'}deg); color: var(--text-muted);" style="transform: rotate({expanded ? '0' : '-90'}deg); color: var(--text-muted);"
/> />
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
@ -51,7 +52,7 @@
</button> </button>
{#if expanded} {#if expanded}
<div class="px-4 pb-4 flex flex-col gap-4"> <div transition:slide={{ duration: 150 }} class="px-4 pb-4 flex flex-col gap-4">
{#each record.fields as field} {#each record.fields as field}
<DynamicField <DynamicField
{field} {field}

28
src/routes/+page.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { Eye, PenLine } from 'lucide-svelte';
import Header from '$lib/components/Header.svelte'; import Header from '$lib/components/Header.svelte';
import SchemaForm from '$lib/components/SchemaForm.svelte'; import SchemaForm from '$lib/components/SchemaForm.svelte';
import OutputPanel from '$lib/components/OutputPanel.svelte'; import OutputPanel from '$lib/components/OutputPanel.svelte';
@ -8,6 +9,7 @@
import { presets } from '$lib/presets'; import { presets } from '$lib/presets';
let importData = $state<string | null>(null); let importData = $state<string | null>(null);
let mobileView = $state<'form' | 'preview'>('form');
onMount(() => { onMount(() => {
const hash = window.location.hash.slice(1); const hash = window.location.hash.slice(1);
@ -22,22 +24,38 @@
} }
</script> </script>
<div class="min-h-screen flex flex-col"> <div class="h-dvh flex flex-col overflow-hidden">
<Header /> <Header />
{#if importData} {#if importData}
<ImportModal encoded={importData} onClose={closeImport} /> <div class="flex-1 overflow-y-auto">
<ImportModal encoded={importData} onClose={closeImport} />
</div>
{:else if roster.active} {:else if roster.active}
{@const char = roster.active} {@const char = roster.active}
<main class="flex-1 grid grid-cols-1 lg:grid-cols-[1fr_1fr]"> <main class="flex-1 grid grid-cols-1 lg:grid-cols-[1fr_1fr] overflow-hidden relative">
<div class="p-4"> <div class="overflow-y-auto p-4 {mobileView === 'preview' ? 'hidden lg:block' : ''}">
<div class="max-w-xl mx-auto"> <div class="max-w-xl mx-auto">
<SchemaForm character={char} /> <SchemaForm character={char} />
</div> </div>
</div> </div>
<div class="lg:sticky lg:top-[49px] lg:max-h-[calc(100vh-49px)] overflow-y-auto p-4"> <div class="p-4 min-h-0 flex flex-col {mobileView === 'form' ? 'hidden lg:flex' : ''}">
<OutputPanel character={char} /> <OutputPanel character={char} />
</div> </div>
<div class="fixed bottom-4 right-4 lg:hidden z-10">
<button
onclick={() => { mobileView = mobileView === 'form' ? 'preview' : 'form'; }}
class="flex items-center gap-2 px-3 py-2 rounded-full shadow-lg text-sm"
style="background: var(--bg-card); border: 1px solid var(--border); color: var(--text);"
>
{#if mobileView === 'form'}
<Eye size={16} /> Preview
{:else}
<PenLine size={16} /> Edit
{/if}
</button>
</div>
</main> </main>
{:else} {:else}
<main class="flex-1 flex flex-col items-center justify-center gap-4"> <main class="flex-1 flex flex-col items-center justify-center gap-4">