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

feat: add sticky submit button to all mobile add forms

Browse source 
Apply the existing sticky-submit pattern (fixed bottom bar on mobile,
inline on desktop) to roaster, roast, bag, gear, cafe, and cup add
forms, matching the brew form behavior.
This commit is contained in:
Jon Seager 2026-02-11 10:15:40 +00:00
parent 1f21dc27af
commit 1eb5647b76
No known key found for this signature in database
1 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
templates/pages/add.html
View file

@ -128,7 +128,7 @@
<form <form
method="post" method="post"
action="/api/v1/roasters" action="/api/v1/roasters"
class="flex flex-col gap-4" class="flex flex-col gap-4 pb-16 md:pb-0"
onsubmit="sessionStorage.setItem('toast', 'Roaster added')" onsubmit="sessionStorage.setItem('toast', 'Roaster added')"
> >
<div class="grid gap-4 sm:grid-cols-2"> <div class="grid gap-4 sm:grid-cols-2">
@ -190,7 +190,7 @@
</label> </label>
</div> </div>
{{ img::deferred_upload("roaster-image", "Add image (optional)") }} {{ img::deferred_upload("roaster-image", "Add image (optional)") }}
<div class="flex items-center justify-end"> <div class="sticky-submit flex items-center justify-end">
<button <button
type="submit" 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" 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"
@ -284,7 +284,7 @@
<form <form
method="post" method="post"
action="/api/v1/roasts" action="/api/v1/roasts"
class="flex flex-col gap-4" class="flex flex-col gap-4 pb-16 md:pb-0"
onsubmit="sessionStorage.setItem('toast', 'Roast added')" onsubmit="sessionStorage.setItem('toast', 'Roast added')"
> >
<div class="flex flex-col gap-1 text-sm"> <div class="flex flex-col gap-1 text-sm">
@ -403,7 +403,7 @@
</label> </label>
</div> </div>
{{ img::deferred_upload("roast-image", "Add image (optional)") }} {{ img::deferred_upload("roast-image", "Add image (optional)") }}
<div class="flex items-center justify-end"> <div class="sticky-submit flex items-center justify-end">
<button <button
type="submit" 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" 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"
@ -447,7 +447,7 @@
<form <form
method="post" method="post"
action="/api/v1/bags" action="/api/v1/bags"
class="mt-4 flex flex-col gap-4" class="mt-4 flex flex-col gap-4 pb-16 md:pb-0"
onsubmit="sessionStorage.setItem('toast', 'Bag added')" onsubmit="sessionStorage.setItem('toast', 'Bag added')"
> >
<div class="flex flex-col gap-1 text-sm"> <div class="flex flex-col gap-1 text-sm">
@ -498,7 +498,7 @@
/> />
</label> </label>
</div> </div>
<div class="flex items-center justify-end"> <div class="sticky-submit flex items-center justify-end">
<button <button
type="submit" 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" 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"
@ -972,7 +972,7 @@
<form <form
method="post" method="post"
action="/api/v1/gear" action="/api/v1/gear"
class="mt-4 flex flex-col gap-4" class="mt-4 flex flex-col gap-4 pb-16 md:pb-0"
onsubmit="sessionStorage.setItem('toast', 'Gear added')" onsubmit="sessionStorage.setItem('toast', 'Gear added')"
> >
<div class="grid gap-4 sm:grid-cols-3"> <div class="grid gap-4 sm:grid-cols-3">
@ -1023,7 +1023,7 @@
</label> </label>
</div> </div>
{{ img::deferred_upload("gear-image", "Add image (optional)") }} {{ img::deferred_upload("gear-image", "Add image (optional)") }}
<div class="flex items-center justify-end"> <div class="sticky-submit flex items-center justify-end">
<button <button
type="submit" 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" 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"
@ -1092,7 +1092,7 @@
id="cafe-form" id="cafe-form"
method="post" method="post"
action="/api/v1/cafes" action="/api/v1/cafes"
class="mt-4 flex flex-col gap-4" class="mt-4 flex flex-col gap-4 pb-16 md:pb-0"
onsubmit="sessionStorage.setItem('toast', 'Cafe added')" onsubmit="sessionStorage.setItem('toast', 'Cafe added')"
> >
<div class="grid gap-4 sm:grid-cols-2"> <div class="grid gap-4 sm:grid-cols-2">
@ -1188,7 +1188,7 @@
</label> </label>
</div> </div>
{{ img::deferred_upload("cafe-image", "Add image (optional)") }} {{ img::deferred_upload("cafe-image", "Add image (optional)") }}
<div class="flex items-center justify-end"> <div class="sticky-submit flex items-center justify-end">
<button <button
type="submit" 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" 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"
@ -1244,7 +1244,7 @@
<form <form
method="post" method="post"
action="/api/v1/cups" action="/api/v1/cups"
class="mt-4 flex flex-col gap-4" class="mt-4 flex flex-col gap-4 pb-16 md:pb-0"
onsubmit="sessionStorage.setItem('toast', 'Cup added')" onsubmit="sessionStorage.setItem('toast', 'Cup added')"
> >
<div class="grid gap-4 sm:grid-cols-2"> <div class="grid gap-4 sm:grid-cols-2">
@ -1297,7 +1297,7 @@
</searchable-select> </searchable-select>
</div> </div>
</div> </div>
<div class="flex items-center justify-end"> <div class="sticky-submit flex items-center justify-end">
<button <button
type="submit" 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" 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"