3bbcd33933
Replace duplicated inline SVGs across 16 templates with reusable Askama macros from a new icons.html partial, reducing repetition and making icon updates a single-point change.
106 lines
4.4 KiB
HTML
106 lines
4.4 KiB
HTML
{% extends "base.html" %} {% import "partials/icons.html" as icons %} {% block title %}Brewlog · Roaster · {{ roaster.name }}{% endblock %} {%
|
|
block content %}
|
|
<header class="flex flex-col gap-2">
|
|
<h1 class="text-3xl font-semibold">{{ roaster.name }}</h1>
|
|
<p class="max-w-2xl text-sm text-stone-600">Detailed view for {{ roaster.name }}.</p>
|
|
</header>
|
|
<section class="grid gap-4 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm">
|
|
<dl class="grid gap-2 text-sm text-stone-700">
|
|
<div class="flex justify-between gap-2">
|
|
<dt class="font-medium text-stone-500">Country</dt>
|
|
<dd class="text-right">{{ roaster.country }}</dd>
|
|
</div>
|
|
<div class="flex justify-between gap-2">
|
|
<dt class="font-medium text-stone-500">City</dt>
|
|
<dd class="text-right">{{ roaster.city }}</dd>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2">
|
|
<dt class="font-medium text-stone-500">Homepage</dt>
|
|
<dd class="flex justify-end">
|
|
{% if roaster.has_homepage %}
|
|
<a
|
|
class="inline-flex items-center gap-2 rounded-md border border-amber-400 bg-amber-200/60 px-3 py-1 text-xs font-semibold text-amber-800 transition hover:border-amber-500 hover:bg-amber-200 hover:text-amber-900"
|
|
href="{{ roaster.homepage_url }}"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
aria-label="Visit {{ roaster.name }} homepage"
|
|
>
|
|
{% call icons::external_link("h-4 w-4") %}
|
|
<span>Visit</span>
|
|
</a>
|
|
{% else %}
|
|
<span>—</span>
|
|
{% endif %}
|
|
</dd>
|
|
</div>
|
|
<div class="flex justify-between gap-2">
|
|
<dt class="font-medium text-stone-500">Created</dt>
|
|
<dd class="text-right">{{ roaster.created_at }}</dd>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-4">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-2xl font-semibold text-amber-800">Roasts</h2>
|
|
</div>
|
|
{% if roasts.is_empty() %}
|
|
<p class="text-sm text-stone-600">This roaster has no roasts yet. Use the CLI to add one.</p>
|
|
{% else %}
|
|
<div class="overflow-x-auto rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm">
|
|
<table class="min-w-full divide-y divide-amber-200 text-left text-sm text-stone-700">
|
|
<thead class="bg-amber-200/60 text-xs font-semibold tracking-wide text-amber-900">
|
|
<tr>
|
|
<th scope="col" class="px-4 py-3">Added</th>
|
|
<th scope="col" class="px-4 py-3">Roast</th>
|
|
<th scope="col" class="px-4 py-3">Origin</th>
|
|
<th scope="col" class="px-4 py-3">Region</th>
|
|
<th scope="col" class="px-4 py-3">Producer</th>
|
|
<th scope="col" class="px-4 py-3">Process</th>
|
|
<th scope="col" class="px-4 py-3">Tasting Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-amber-200/70">
|
|
{% for roast in roasts %}
|
|
<tr
|
|
data-star-key="{{ roast.full_id }}"
|
|
class="bg-amber-50/40 transition hover:bg-amber-50"
|
|
>
|
|
<td class="whitespace-nowrap px-4 py-3 text-xs font-medium text-stone-600">
|
|
{{ roast.created_at }}
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<a
|
|
href="{{ roast.detail_path }}"
|
|
class="font-semibold text-amber-800 hover:text-amber-600"
|
|
>{{ roast.name }}</a
|
|
>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">{{ roast.origin }}</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">{{ roast.region }}</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">{{ roast.producer }}</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">{{ roast.process }}</td>
|
|
<td class="px-4 py-3">
|
|
{% if roast.tasting_notes.is_empty() %}
|
|
<span class="text-xs text-stone-500">No tasting notes yet.</span>
|
|
{% else %}
|
|
<ul class="flex flex-wrap gap-2">
|
|
{% for note in roast.tasting_notes %}
|
|
<li>
|
|
<span
|
|
class="inline-flex items-center rounded-full border border-amber-500/60 bg-amber-500/10 px-3 py-1 text-xs font-semibold text-amber-700"
|
|
>{{ note }}</span
|
|
>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
{% endblock %}
|