fix: styles

src/App.svelte

@@ -3,6 +3,7 @@
     import { images } from "$lib/images";
     import { t } from "$lib/utils";
 
+    import DateForm from "$lib/components/Date.svelte";
     import County from "$lib/components/County.svelte";
     import Quote from "$lib/components/Quote.svelte";
 </script>
@@ -47,37 +48,7 @@
         {#each $counters as counter, id}
             <section>
                 <header>
-                    <form action="post" on:submit|preventDefault>
-                        <fieldset>
-                            <label>
-                                <input
-                                    id={String(id)}
-                                    type="date"
-                                    class="clear"
-                                    name="start"
-                                    value={counter.start}
-                                    required
-                                    on:change={changeDate}
-                                />
-                            </label>
-                            <label>
-                                <input
-                                    id={String(id)}
-                                    class="clear"
-                                    type="text"
-                                    name="title"
-                                    maxlength="15"
-                                    value={counter.title}
-                                    placeholder={t(
-                                        "Counter name",
-                                        "Имя счётчика",
-                                    )}
-                                    required
-                                    on:change={changeDate}
-                                />
-                            </label>
-                        </fieldset>
-                    </form>
+                    <DateForm {id} {counter} />
                 </header>
                 <County {counter} />
                 <footer>
@@ -88,31 +59,7 @@
             </section>
         {/each}
         <section id="add">
-            <form method="post" on:submit|preventDefault={setDate}>
-                <fieldset>
-                    <label>
-                        <input
-                            type="date"
-                            name="start"
-                            value={$date}
-                            required
-                        />
-                    </label>
-                    <label>
-                        <input
-                            type="text"
-                            name="title"
-                            placeholder={t("Counter name", "Имя счётчика")}
-                            required
-                        />
-                    </label>
-                </fieldset>
-                <h2>
-                    <button>
-                        {t("Add counter", "Добавить счётчик")}
-                    </button>
-                </h2>
-            </form>
+            <DateForm />
         </section>
     </main>
     {#await quote.load() then}
@@ -121,7 +68,7 @@
 
     <footer>
         <button on:click={images.back}>{t("Image", "Картинка")}</button>
-        <!-- <h2>{$time}</h2> -->
+        <h2>{$time}</h2>
         <button on:click={quote.load}>{t("Quote", "Цитата")}</button>
     </footer>
 {/await}
@@ -131,6 +78,7 @@
 
     header {
         justify-content: center;
+        padding: 0;
     }
     main {
         display: flex;
@@ -149,44 +97,6 @@
     }
     section footer {
         justify-content: center;
-    }
-
-    form {
-        max-width: 15em;
-        margin: auto;
-    }
-    fieldset {
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-flow: column nowrap;
-        gap: 1em;
-        border: 0;
-    }
-    input {
-        font-family: inherit;
-        font-size: 1.5em;
-        font-weight: bold;
-        font-family: inherit;
-        line-height: 2em;
-        text-align: center;
-        margin: 0;
-        outline: 0;
-        width: 100%;
-        background: transparent;
-        border: 2px solid currentColor;
-        border-radius: 0.25rem;
-        color: inherit;
-        /* max-width: 20em; */
-        margin: auto;
-    }
-    input[type="date"]::-webkit-datetime-edit {
-        flex: 1;
-    }
-    input.clear {
-        border-color: transparent;
-    }
-    form button {
-        min-width: 100%;
+        /* padding: 0; */
     }
 </style>

src/css/base.css

@@ -6,11 +6,12 @@ html {
 body {
     margin: 0;
     display: grid;
-    grid-template-rows: 1fr 0.5fr auto;
+    grid-template-rows: 1fr 0.8fr 4em;
     grid-template-columns: 1fr;
     font-family: system-ui;
     text-align: center;
     background-color: var(--light);
+    overflow: hidden;
 }
 
 body::after {

src/lib/components/Date.svelte

@@ -0,0 +1,105 @@
+<script lang="ts" context="module">
+    import { dates, date } from "$lib/data";
+    import { t } from "$lib/utils";
+</script>
+
+<script lang="ts">
+    export let id = 0;
+    export let counter: Counter | undefined = undefined;
+
+    function setDate(e: SubmitEvent) {
+        if (counter) return;
+        const data = new FormData(e.target as HTMLFormElement);
+        const date = Object.fromEntries(data) as StartDate;
+        dates.add(date);
+    }
+
+    function changeDate(e: ChangeEventHandler<HTMLInputElement>) {
+        if (!counter) return;
+        const { id, name, value } = e.currentTarget;
+        const changed = { [name]: value };
+        dates.change(Number(id), changed);
+    }
+</script>
+
+<form action="post" on:submit|preventDefault={setDate}>
+    <fieldset>
+        <label>
+            <input
+                id={String(id)}
+                type="date"
+                name="start"
+                class:clear={counter}
+                value={counter?.start || $date}
+                required
+                on:change={changeDate}
+            />
+        </label>
+        <label>
+            <input
+                id={String(id)}
+                type="text"
+                name="title"
+                maxlength="15"
+                class:clear={counter}
+                value={counter?.title || ""}
+                placeholder={t("Counter name", "Имя счётчика")}
+                autocomplete="off"
+                required
+                on:change={changeDate}
+            />
+        </label>
+        {#if !counter}
+            <fieldset>
+                <h2>
+                    <button>
+                        {t("Add counter", "Добавить счётчик")}
+                    </button>
+                </h2>
+            </fieldset>
+        {/if}
+    </fieldset>
+</form>
+
+<style>
+    form {
+        max-width: 15em;
+        margin: auto;
+    }
+    fieldset {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        border: 0;
+    }
+    :global(#add) fieldset {
+        gap: 1em;
+    }
+    input {
+        font-family: inherit;
+        font-size: 1.5em;
+        font-weight: bold;
+        font-family: inherit;
+        line-height: 2em;
+        text-align: center;
+        margin: 0;
+        outline: 0;
+        width: 100%;
+        background: transparent;
+        border: 2px solid currentColor;
+        border-radius: 0.25rem;
+        color: inherit;
+        /* max-width: 20em; */
+        margin: auto;
+    }
+    input[type="date"]::-webkit-datetime-edit {
+        flex: 1;
+    }
+    input.clear {
+        border-color: transparent;
+    }
+    form button {
+        min-width: 100%;
+    }
+</style>

src/lib/components/Quote.svelte

@@ -18,7 +18,7 @@
 <style>
     blockquote {
         font-size: large;
-        margin-top: 0;
+        margin: 0 1em;
     }
     blockquote p {
         font-style: italic;