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.9 KiB
HTML
106 lines
4.9 KiB
HTML
{% import "partials/icons.html" as icons %}
|
|
<h2 id="{{ month.anchor }}" class="timeline-heading scroll-mt-24 mb-6 text-2xl font-semibold text-amber-800" data-timeline-month>
|
|
{{ month.heading }}
|
|
<button type="button" class="timeline-top-btn" onclick="window.scrollTo({top: 0, behavior: 'smooth'})" aria-label="Back to top">
|
|
{% call icons::arrow_up("h-5 w-5") %}
|
|
</button>
|
|
</h2>
|
|
{% for event in month.events %}
|
|
<div class="timeline-item relative mb-8" data-timeline-event>
|
|
{# Timeline node/bullet #}
|
|
<span
|
|
class="timeline-node absolute h-5 w-5 rounded-full border-4 border-amber-50 bg-amber-600"
|
|
aria-hidden="true"
|
|
></span>
|
|
<div class="rounded-lg border border-amber-200 bg-amber-50 p-5 shadow-sm text-left">
|
|
<div class="flex flex-wrap items-center justify-between gap-2">
|
|
<span
|
|
class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-amber-200 text-amber-800"
|
|
>{{ event.kind_label }}</span
|
|
>
|
|
<time
|
|
datetime="{{ event.iso_timestamp }}"
|
|
class="text-xs uppercase tracking-wide text-stone-500"
|
|
>
|
|
{{ event.date_label }}{% if let Some(label) = event.time_label %} · {{ label }}{% endif
|
|
%}
|
|
</time>
|
|
</div>
|
|
<h3 class="mt-3 flex items-center gap-2 text-lg font-semibold text-amber-800">
|
|
<a href="{{ event.link }}" class="hover:text-amber-600">{{ event.title }}</a>
|
|
{% if let Some(url) = event.external_link %}
|
|
<a
|
|
href="{{ url }}"
|
|
class="inline-flex h-7 w-7 items-center justify-center text-amber-700 transition hover:text-amber-500"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
aria-label="Open external link"
|
|
>
|
|
{% call icons::external_link("h-3.5 w-3.5") %}
|
|
<span class="sr-only">Open external link</span>
|
|
</a>
|
|
{% endif %}
|
|
{% if is_authenticated %}
|
|
{% if let Some(brew) = event.brew_data %}
|
|
<form
|
|
class="inline ml-auto"
|
|
data-on:submit="@post('/api/v1/brews', {contentType: 'form'})"
|
|
>
|
|
<input type="hidden" name="bag_id" value="{{ brew.bag_id }}" />
|
|
<input type="hidden" name="coffee_weight" value="{{ brew.coffee_weight }}" />
|
|
<input type="hidden" name="grinder_id" value="{{ brew.grinder_id }}" />
|
|
<input type="hidden" name="grind_setting" value="{{ brew.grind_setting }}" />
|
|
<input type="hidden" name="brewer_id" value="{{ brew.brewer_id }}" />
|
|
{% if let Some(fp_id) = brew.filter_paper_id %}
|
|
<input type="hidden" name="filter_paper_id" value="{{ fp_id }}" />
|
|
{% endif %}
|
|
<input type="hidden" name="water_volume" value="{{ brew.water_volume }}" />
|
|
<input type="hidden" name="water_temp" value="{{ brew.water_temp }}" />
|
|
<button
|
|
type="submit"
|
|
class="inline-flex h-7 w-7 items-center justify-center rounded-md text-amber-700 transition hover:text-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500"
|
|
title="Brew again"
|
|
>
|
|
<span class="sr-only">Brew again</span>
|
|
{% call icons::refresh("h-4 w-4") %}
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
{% endif %}
|
|
</h3>
|
|
{% if event.details.len() > 0 %}
|
|
<dl class="mt-4 flex flex-col gap-2 text-sm text-stone-600">
|
|
{% for detail in event.details %}
|
|
<div class="flex justify-between gap-2">
|
|
<dt class="font-medium text-stone-500">{{ detail.label }}</dt>
|
|
{% if detail.label.eq_ignore_ascii_case("position") && detail.link.is_some() %}
|
|
<dd class="text-right">
|
|
<a href="{{ detail.link.as_ref().unwrap() }}" target="_blank" rel="noreferrer noopener" class="text-amber-700 hover:text-amber-500">View on Map</a>
|
|
<span class="text-stone-400">/</span>
|
|
<button type="button" onclick="navigator.clipboard.writeText('{{ detail.value }}')" class="text-amber-700 hover:text-amber-500 transition" title="Copy coordinates" aria-label="Copy coordinates">Copy</button>
|
|
</dd>
|
|
{% else if let Some(url) = detail.link %}
|
|
<dd class="text-right"><a href="{{ url }}" target="_blank" rel="noreferrer noopener" class="text-amber-700 hover:text-amber-500">{{ detail.value }}</a></dd>
|
|
{% else %}
|
|
<dd class="text-right">{{ detail.value }}</dd>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</dl>
|
|
{% endif %} {% if let Some(notes) = event.tasting_notes %} {% if notes.is_empty() %}
|
|
<p class="mt-4 text-sm text-stone-600">No tasting notes yet.</p>
|
|
{% else %}
|
|
<ul class="mt-4 flex flex-wrap gap-2">
|
|
{% for note in 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 %} {% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|