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

fix: add x icon to cancel button and saving spinner to edit forms

Browse source 
Replace both buttons with a centered "Saving..." spinner when the
form is submitting. Add x_mark icon to the cancel button for clarity.
This commit is contained in:
Jon Seager 2026-02-10 19:42:16 +00:00
parent 0434b127e0
commit 8ced58039b
No known key found for this signature in database
7 changed files with 77 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
templates/pages/edit_bag.html
View file

@ -82,24 +82,26 @@
class="text-sm text-error"
role="alert"
></p>
<div class="flex flex-col gap-2">
<div
data-show="$_submitting"
style="display:none"
class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
>
{{ icons::spinner("h-5 w-5") }} Saving&hellip;
</div>
<div class="flex flex-col gap-2" data-show="!$_submitting">
<button
type="submit"
class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
data-attr:disabled="$_submitting"
>
<span data-show="$_submitting" style="display:none"
>{{ icons::spinner("h-4 w-4") }}</span
>
<span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
Save Changes
{{ icons::check("h-4 w-4") }} Save Changes
</button>
<button
type="button"
onclick="history.back()"
class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
>
Cancel
{{ icons::x_mark("h-4 w-4") }} Cancel
</button>
</div>
</form>

20
templates/pages/edit_brew.html
View file

@ -368,24 +368,26 @@
class="text-sm text-error"
role="alert"
></p>
<div class="flex flex-col gap-2">
<div
data-show="$_submitting"
style="display:none"
class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
>
{{ icons::spinner("h-5 w-5") }} Saving&hellip;
</div>
<div class="flex flex-col gap-2" data-show="!$_submitting">
<button
type="submit"
class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
data-attr:disabled="$_submitting"
>
<span data-show="$_submitting" style="display:none"
>{{ icons::spinner("h-4 w-4") }}</span
>
<span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
Save Changes
{{ icons::check("h-4 w-4") }} Save Changes
</button>
<button
type="button"
onclick="history.back()"
class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
>
Cancel
{{ icons::x_mark("h-4 w-4") }} Cancel
</button>
</div>
</form>

20
templates/pages/edit_cafe.html
View file

@ -125,24 +125,26 @@
class="text-sm text-error"
role="alert"
></p>
<div class="flex flex-col gap-2">
<div
data-show="$_submitting"
style="display:none"
class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
>
{{ icons::spinner("h-5 w-5") }} Saving&hellip;
</div>
<div class="flex flex-col gap-2" data-show="!$_submitting">
<button
type="submit"
class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
data-attr:disabled="$_submitting"
>
<span data-show="$_submitting" style="display:none"
>{{ icons::spinner("h-4 w-4") }}</span
>
<span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
Save Changes
{{ icons::check("h-4 w-4") }} Save Changes
</button>
<button
type="button"
onclick="history.back()"
class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
>
Cancel
{{ icons::x_mark("h-4 w-4") }} Cancel
</button>
</div>
</form>

20
templates/pages/edit_cup.html
View file

@ -79,24 +79,26 @@
class="text-sm text-error"
role="alert"
></p>
<div class="flex flex-col gap-2">
<div
data-show="$_submitting"
style="display:none"
class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
>
{{ icons::spinner("h-5 w-5") }} Saving&hellip;
</div>
<div class="flex flex-col gap-2" data-show="!$_submitting">
<button
type="submit"
class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
data-attr:disabled="$_submitting"
>
<span data-show="$_submitting" style="display:none"
>{{ icons::spinner("h-4 w-4") }}</span
>
<span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
Save Changes
{{ icons::check("h-4 w-4") }} Save Changes
</button>
<button
type="button"
onclick="history.back()"
class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
>
Cancel
{{ icons::x_mark("h-4 w-4") }} Cancel
</button>
</div>
</form>

20
templates/pages/edit_gear.html
View file

@ -71,24 +71,26 @@
class="text-sm text-error"
role="alert"
></p>
<div class="flex flex-col gap-2">
<div
data-show="$_submitting"
style="display:none"
class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
>
{{ icons::spinner("h-5 w-5") }} Saving&hellip;
</div>
<div class="flex flex-col gap-2" data-show="!$_submitting">
<button
type="submit"
class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
data-attr:disabled="$_submitting"
>
<span data-show="$_submitting" style="display:none"
>{{ icons::spinner("h-4 w-4") }}</span
>
<span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
Save Changes
{{ icons::check("h-4 w-4") }} Save Changes
</button>
<button
type="button"
onclick="history.back()"
class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
>
Cancel
{{ icons::x_mark("h-4 w-4") }} Cancel
</button>
</div>
</form>

20
templates/pages/edit_roast.html
View file

@ -147,24 +147,26 @@
class="text-sm text-error"
role="alert"
></p>
<div class="flex flex-col gap-2">
<div
data-show="$_submitting"
style="display:none"
class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
>
{{ icons::spinner("h-5 w-5") }} Saving&hellip;
</div>
<div class="flex flex-col gap-2" data-show="!$_submitting">
<button
type="submit"
class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
data-attr:disabled="$_submitting"
>
<span data-show="$_submitting" style="display:none"
>{{ icons::spinner("h-4 w-4") }}</span
>
<span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
Save Changes
{{ icons::check("h-4 w-4") }} Save Changes
</button>
<button
type="button"
onclick="history.back()"
class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
>
Cancel
{{ icons::x_mark("h-4 w-4") }} Cancel
</button>
</div>
</form>

20
templates/pages/edit_roaster.html
View file

@ -89,24 +89,26 @@
class="text-sm text-error"
role="alert"
></p>
<div class="flex flex-col gap-2">
<div
data-show="$_submitting"
style="display:none"
class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
>
{{ icons::spinner("h-5 w-5") }} Saving&hellip;
</div>
<div class="flex flex-col gap-2" data-show="!$_submitting">
<button
type="submit"
class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
data-attr:disabled="$_submitting"
>
<span data-show="$_submitting" style="display:none"
>{{ icons::spinner("h-4 w-4") }}</span
>
<span data-show="!$_submitting">{{ icons::check("h-4 w-4") }}</span>
Save Changes
{{ icons::check("h-4 w-4") }} Save Changes
</button>
<button
type="button"
onclick="history.back()"
class="inline-flex w-full items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
>
Cancel
{{ icons::x_mark("h-4 w-4") }} Cancel
</button>
</div>
</form>