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

feat(home): make brew cards clickable, linking to detail page

Browse source 
Change brew card from div to anchor element with hover border effect.
Brew Again button uses preventDefault to avoid navigating to the detail
page when clicked.
This commit is contained in:
Jon Seager 2026-02-08 16:10:21 +00:00
parent eaf558a524
commit ffee36ea41
No known key found for this signature in database
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
templates/partials/brew_card.html
View file

@ -1,6 +1,6 @@
{% import "partials/icons.html" as icons %}
{% macro card(brew, is_authenticated) %}
<div class="relative w-[45vw] md:w-[200px] h-[279px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col">
<a href="/brews/{{ brew.id }}" class="relative w-[45vw] md:w-[200px] h-[279px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col transition hover:border-accent/40">
<div class="h-[4.5rem] overflow-hidden">
<span class="block font-semibold text-text truncate">{{ brew.roast_name }}</span>
<p class="mt-0.5 text-sm text-text-muted truncate">{{ brew.roaster_name }}</p>
@ -13,13 +13,13 @@
{% if !brew.quick_notes.is_empty() %}<p class="truncate">{{ brew.quick_notes_label }}</p>{% endif %}
</div>
{% if is_authenticated %}
<div class="mt-3">
<a href="{{ brew.brew_again_url() }}"
class="inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md border px-2 text-sm font-medium text-accent transition hover:text-accent-hover hover:bg-surface-alt">
<div class="relative z-10 mt-3">
<span onclick="event.preventDefault(); window.location.href='{{ brew.brew_again_url() }}';"
class="inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md border px-2 text-sm font-medium text-accent transition hover:text-accent-hover hover:bg-surface-alt cursor-pointer">
{{ icons::beaker("h-4 w-4") }}
Brew Again
</a>
</span>
</div>
{% endif %}
</div>
</a>
{% endmacro %}