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

fix: make detail page action buttons responsive on mobile

Browse source
This commit is contained in:
Jon Seager 2026-02-11 09:05:58 +00:00
parent 76445f49ae
commit 705144bcf7
No known key found for this signature in database
2 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
templates/pages/bag.html
View file

@ -112,21 +112,26 @@
{# ── Actions ── #} {# ── Actions ── #}
<div class="grid gap-6 md:grid-cols-2"> <div class="grid gap-6 md:grid-cols-2">
<div <div
class="rounded-lg border bg-surface p-5 md:col-span-2 flex items-center gap-2" class="rounded-lg border bg-surface p-5 md:col-span-2 flex flex-col gap-2 sm:flex-row sm:items-center"
> >
{{ detail::edit_button(edit_url) }}
{% if !bag.closed %} {% if !bag.closed %}
<button <button
type="button" type="button"
class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt" class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt sm:flex-1"
data-on:click="confirm('Close this bag? This will mark it as finished.') && @put('/api/v1/bags/{{ bag.id }}?closed=true&remaining=0')" data-on:click="confirm('Close this bag? This will mark it as finished.') && @put('/api/v1/bags/{{ bag.id }}?closed=true&remaining=0')"
> >
{{ icons::x_mark("h-4 w-4") }} Close Bag {{ icons::x_mark("h-4 w-4") }} Close Bag
</button> </button>
{% endif %} {% endif %}
<a
href="{{ edit_url }}"
class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:bg-surface-alt sm:flex-1"
>
{{ icons::pencil("h-4 w-4") }} Edit
</a>
<button <button
type="button" type="button"
class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-error transition hover:bg-surface-alt" class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-error transition hover:bg-surface-alt sm:flex-1"
data-on:click="confirm('Delete this bag? This cannot be undone.') && @delete('/api/v1/bags/{{ bag.id }}')" data-on:click="confirm('Delete this bag? This cannot be undone.') && @delete('/api/v1/bags/{{ bag.id }}')"
> >
{{ icons::delete("h-4 w-4") }} Delete {{ icons::delete("h-4 w-4") }} Delete

8
templates/partials/detail_cards.html
View file

@ -179,16 +179,18 @@
{% endmacro %} {% endmacro %}
{% macro edit_delete_buttons(edit_url, entity_label, api_path, id) %} {% macro edit_delete_buttons(edit_url, entity_label, api_path, id) %}
<div class="rounded-lg border bg-surface p-5 flex items-center gap-2"> <div
class="rounded-lg border bg-surface p-5 flex flex-col gap-2 sm:flex-row sm:items-center"
>
<a <a
href="{{ edit_url }}" href="{{ edit_url }}"
class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:bg-surface-alt" class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:bg-surface-alt sm:flex-1"
> >
{{ icons::pencil("h-4 w-4") }} Edit {{ icons::pencil("h-4 w-4") }} Edit
</a> </a>
<button <button
type="button" type="button"
class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-error transition hover:bg-surface-alt" class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-error transition hover:bg-surface-alt sm:flex-1"
data-on:click="confirm('Delete this {{ entity_label }}? This cannot be undone.') && @delete('{{ api_path }}/{{ id }}')" data-on:click="confirm('Delete this {{ entity_label }}? This cannot be undone.') && @delete('{{ api_path }}/{{ id }}')"
> >
{{ icons::delete("h-4 w-4") }} Delete {{ icons::delete("h-4 w-4") }} Delete