autofocus + button

This commit is contained in:
Piotr Domański 2026-04-02 11:40:57 +02:00
parent 189b4dc967
commit ade4ac821f
4 changed files with 24 additions and 1 deletions

View file

@ -108,6 +108,22 @@
{/if}
</main>
<!-- FAB: Add entry (mobile only) -->
{#if diaryQuery.data}
<button
onclick={() => {
const firstMeal = diaryQuery.data?.meals[0];
if (firstMeal) goto(`/diary/${date}/add-entry?meal_id=${firstMeal.id}`);
}}
class="lg:hidden fixed bottom-[calc(4rem+var(--safe-bottom))] right-4 z-30 w-14 h-14 rounded-full bg-green-600 hover:bg-green-500 shadow-lg flex items-center justify-center transition-colors"
aria-label="Add entry"
>
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button>
{/if}
<Sheet open={calendarOpen} onclose={() => calendarOpen = false}>
<CalendarPicker selected={date} onSelect={handleDateSelect} />
</Sheet>

View file

@ -228,6 +228,7 @@
bind:value={grams}
min="1"
max="5000"
inputmode="decimal"
class="flex-1 bg-zinc-800 border border-zinc-700 rounded-xl px-4 py-2.5 text-center text-xl font-semibold focus:outline-none focus:border-green-500 transition-colors"
/>
<button

View file

@ -117,6 +117,8 @@
bind:value={grams}
min="1"
max="5000"
inputmode="decimal"
autofocus
class="flex-1 bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-center text-2xl font-semibold focus:outline-none focus:border-green-500 transition-colors"
/>
<button
@ -127,7 +129,7 @@
</div>
</main>
<div class="px-4 pb-[calc(1.5rem+var(--safe-bottom))]">
<div class="px-4 pb-[calc(5rem+var(--safe-bottom))] lg:pb-6">
<button
onclick={handleSave}
disabled={saving || grams < 1 || grams === entry.grams}

View file

@ -58,6 +58,7 @@
bind:value={protein}
min="0"
step="0.1"
inputmode="decimal"
required
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
/>
@ -70,6 +71,7 @@
bind:value={carb}
min="0"
step="0.1"
inputmode="decimal"
required
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
/>
@ -82,6 +84,7 @@
bind:value={fat}
min="0"
step="0.1"
inputmode="decimal"
required
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
/>
@ -94,6 +97,7 @@
bind:value={fiber}
min="0"
step="0.1"
inputmode="decimal"
required
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
/>