4fd72d654a
- Create /bags/:id detail page with coffee, roaster, map, and bag info cards - Extract shared template macros into detail_cards.html (coffee_card, roaster_card, map_with_legend, share_button) - Extract build_coffee_info() and build_roaster_info() view model helpers - Refactor brew.html and cup.html to use shared macros - Make bag cards on homepage clickable, linking to detail page - Add Close Bag and Delete actions on bag detail page - Unify homepage card styling (bg-surface, hover:border-accent/40) - Update CLAUDE.md with detail page patterns
88 lines
3.5 KiB
HTML
88 lines
3.5 KiB
HTML
{% extends "base.html" %}
|
|
{% import "partials/detail_cards.html" as detail %}
|
|
{% block title %}Brewlog · {{ brew.roast_name }}{% endblock %}
|
|
{% block description %}{{ brew.roast_name }} by {{ brew.roaster_name }} — {{ brew.coffee_weight }} coffee, {{ brew.water_volume }} water.{% endblock %}
|
|
{% block og_title %}{{ brew.roast_name }} — Brewlog{% endblock %}
|
|
{% block og_description %}{{ brew.roast_name }} by {{ brew.roaster_name }} — {{ brew.coffee_weight }} coffee, {{ brew.water_volume }} water.{% endblock %}
|
|
{% block head %}<meta property="og:image" content="{{ base_url }}/og-image.png" />{% endblock %}
|
|
{% block content %}
|
|
<header class="flex items-start justify-between gap-4">
|
|
<div class="flex flex-col gap-2">
|
|
<h1 class="text-3xl font-semibold">{{ brew.roast_name }}</h1>
|
|
<p class="text-sm text-text-secondary">
|
|
{{ brew.roaster_name }} · Brewed {{ brew.created_date }} at {{ brew.created_time }}
|
|
</p>
|
|
</div>
|
|
{{ detail::share_button() }}
|
|
</header>
|
|
|
|
{{ detail::share_script() }}
|
|
|
|
{# ── Coffee + map ── #}
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
{{ detail::coffee_card(brew.roast_name, brew.roaster_name, brew.origin, brew.origin_flag, brew.region, brew.producer, brew.process, brew.tasting_notes) }}
|
|
{{ detail::map_with_legend_2(brew.map_countries, brew.map_max, "Origin", "", "Roaster", "opacity-50") }}
|
|
</div>
|
|
|
|
{# ── Roaster & gear ── #}
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
{{ detail::roaster_card(brew.roaster_name, brew.roaster_country, brew.roaster_country_flag, brew.roaster_city, brew.roaster_homepage) }}
|
|
|
|
<div class="rounded-lg border bg-surface p-5">
|
|
<h2 class="text-lg font-semibold text-text mb-4">Gear</h2>
|
|
<dl class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
|
|
<div>
|
|
<dt class="text-text-muted">Grinder</dt>
|
|
<dd class="font-medium text-text">{{ brew.grinder_name }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-text-muted">Brewer</dt>
|
|
<dd class="font-medium text-text">{{ brew.brewer_name }}</dd>
|
|
</div>
|
|
{% if let Some(fp) = brew.filter_paper_name %}
|
|
<div>
|
|
<dt class="text-text-muted">Filter Paper</dt>
|
|
<dd class="font-medium text-text">{{ fp }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
|
|
{# ── Recipe ── #}
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div class="rounded-lg border bg-surface p-5">
|
|
<h2 class="text-lg font-semibold text-text mb-4">Recipe</h2>
|
|
<dl class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
|
|
<div>
|
|
<dt class="text-text-muted">Coffee</dt>
|
|
<dd class="font-medium text-text">{{ brew.coffee_weight }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-text-muted">Water</dt>
|
|
<dd class="font-medium text-text">{{ brew.water_volume }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-text-muted">Temperature</dt>
|
|
<dd class="font-medium text-text">{{ brew.water_temp }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-text-muted">Grind Setting</dt>
|
|
<dd class="font-medium text-text">{{ brew.grind_setting }}</dd>
|
|
</div>
|
|
{% if let Some(time) = brew.brew_time %}
|
|
<div>
|
|
<dt class="text-text-muted">Brew Time</dt>
|
|
<dd class="font-medium text-text">{{ time }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if !brew.quick_notes_label.is_empty() %}
|
|
<div>
|
|
<dt class="text-text-muted">Notes</dt>
|
|
<dd class="font-medium text-text">{{ brew.quick_notes_label }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|