moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(home): simplify scan bag input layout

Browse source 
- Use camera icon-only button instead of "Take Photo" text
- Align camera button and text input horizontally
- Remove Go button, form submits on Enter
This commit is contained in:
Jon Seager 2026-02-04 17:28:24 +00:00
parent 52084be7ed
commit 327a820b52
No known key found for this signature in database
1 changed files with 9 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
templates/home.html
View file

@ -60,30 +60,21 @@
data-on:datastar-fetch="if (!$_extracting) return; if (evt.detail.type === 'finished') { $_extracting = false; $_scanExtracted = true } else if (evt.detail.type === 'error') { $_extracting = false; $_extractError = 'Extraction failed. Please try again.' }" data-on:datastar-fetch="if (!$_extracting) return; if (evt.detail.type === 'finished') { $_extracting = false; $_scanExtracted = true } else if (evt.detail.type === 'error') { $_extracting = false; $_extractError = 'Extraction failed. Please try again.' }"
> >
<input type="hidden" name="image" id="scan-image" /> <input type="hidden" name="image" id="scan-image" />
<div data-show="!$_extracting" class="flex flex-wrap items-center gap-3"> <div data-show="!$_extracting" class="flex items-center gap-2">
<button <button
type="button" type="button"
onclick="document.getElementById('scan-photo').click()" onclick="document.getElementById('scan-photo').click()"
class="inline-flex items-center gap-2 rounded-md border border-amber-500 px-4 py-3 text-sm font-medium text-amber-700 transition hover:bg-amber-50" class="shrink-0 inline-flex items-center justify-center rounded-md border border-amber-500 p-2.5 text-amber-700 transition hover:bg-amber-50"
aria-label="Take Photo"
> >
{% call icons::camera("h-5 w-5") %} {% call icons::camera("h-5 w-5") %}
Take Photo
</button> </button>
<span class="text-xs text-stone-400">or</span>
<div class="flex flex-1 min-w-[200px] gap-2">
<input <input
type="text" type="text"
name="prompt" name="prompt"
class="input-field w-full text-sm" class="input-field w-full text-sm"
placeholder="Describe the coffee bag&hellip;" placeholder="Describe the coffee bag&hellip;"
/> />
<button
type="submit"
class="rounded-md border border-amber-500 px-3 py-2 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
>
Go
</button>
</div>
</div> </div>
<div data-show="$_extracting" style="display:none" class="flex items-center gap-3 text-sm text-amber-700"> <div data-show="$_extracting" style="display:none" class="flex items-center gap-3 text-sm text-amber-700">
{% call icons::spinner("h-5 w-5") %} {% call icons::spinner("h-5 w-5") %}