167 lines
7.8 KiB
HTML
167 lines
7.8 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-text"
|
|
data-timeline-month
|
|
>
|
|
{{ month.heading }}
|
|
<button
|
|
type="button"
|
|
class="timeline-top-btn"
|
|
onclick="window.scrollTo({top: 0, behavior: 'smooth'})"
|
|
aria-label="Back to top"
|
|
>
|
|
{{ icons::arrow_up("h-5 w-5") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="block mx-auto mt-1 text-xs font-normal text-text-muted uppercase tracking-wide hover:text-accent transition"
|
|
data-on:click="if ($_expandedMonths.includes(',{{ month.anchor }}')) { $_expandedMonths = $_expandedMonths.replace(',{{ month.anchor }}', ''); $_expandedCard = ''; $_collapsedCards = '' } else { $_expandedMonths = $_expandedMonths + ',{{ month.anchor }}'; $_collapsedCards = '' }"
|
|
>
|
|
<span data-show="!$_expandedMonths.includes(',{{ month.anchor }}')"
|
|
>Expand all</span
|
|
>
|
|
<span
|
|
data-show="$_expandedMonths.includes(',{{ month.anchor }}')"
|
|
style="display:none"
|
|
>Collapse all</span
|
|
>
|
|
</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-[3px] border-accent bg-page"
|
|
aria-hidden="true"
|
|
></span>
|
|
<div
|
|
class="tl-card rounded-lg border bg-surface p-5 text-left"
|
|
data-on:click="if (!evt.target.closest('a, button, form')) { if ($_expandedMonths.includes(',{{ month.anchor }}')) { $_collapsedCards = $_collapsedCards.includes(',{{ event.id }}') ? $_collapsedCards.replace(',{{ event.id }}', '') : $_collapsedCards + ',{{ event.id }}' } else { $_expandedCard = $_expandedCard.includes(',{{ event.id }}') ? $_expandedCard.replace(',{{ event.id }}', '') : $_expandedCard + ',{{ event.id }}' } }"
|
|
>
|
|
<div class="flex flex-wrap items-center justify-between gap-2">
|
|
{# Category — always visible #}
|
|
<span class="inline-flex items-center gap-1 text-xs text-text-muted">
|
|
{% if event.entity_type == "brew" %}{{ icons::beaker("h-3 w-3 shrink-0") }}{% elif event.entity_type == "roast" %}{{ icons::coffee_bean("h-3 w-3 shrink-0") }}{% elif event.entity_type == "roaster" %}{{ icons::fire("h-3 w-3 shrink-0") }}{% elif event.entity_type == "bag" %}{{ icons::bag("h-3 w-3 shrink-0") }}{% elif event.entity_type == "cup" %}{{ icons::cup("h-3 w-3 shrink-0") }}{% elif event.entity_type == "cafe" %}{{ icons::location("h-3 w-3 shrink-0") }}{% elif event.entity_type == "gear" %}{{ icons::grinder("h-3 w-3 shrink-0") }}{% endif %}
|
|
<span class="uppercase tracking-wide">{{ event.kind_label }}</span>
|
|
{# Relative date — shown when collapsed #}
|
|
<span
|
|
class="tl-condensed uppercase tracking-wide"
|
|
data-show="(!$_expandedCard.includes(',{{ event.id }}') && !$_expandedMonths.includes(',{{ month.anchor }}')) || $_collapsedCards.includes(',{{ event.id }}')"
|
|
>
|
|
· {{ event.relative_date_label }}</span
|
|
>
|
|
{# Full timestamp — shown when expanded #}
|
|
<time
|
|
datetime="{{ event.iso_timestamp }}"
|
|
class="tl-detail uppercase tracking-wide"
|
|
data-show="($_expandedCard.includes(',{{ event.id }}') || $_expandedMonths.includes(',{{ month.anchor }}')) && !$_collapsedCards.includes(',{{ event.id }}')"
|
|
style="display:none"
|
|
>
|
|
·
|
|
{{ event.date_label }}{% if let Some(label) = event.time_label %}
|
|
· {{ label }}
|
|
{% endif %}</time
|
|
>
|
|
</span>
|
|
{# Expand/collapse chevron #}
|
|
<span
|
|
class="tl-chevron text-text-muted"
|
|
data-show="(!$_expandedCard.includes(',{{ event.id }}') && !$_expandedMonths.includes(',{{ month.anchor }}')) || $_collapsedCards.includes(',{{ event.id }}')"
|
|
>
|
|
{{ icons::chevron_down("h-4 w-4") }}
|
|
</span>
|
|
<span
|
|
class="tl-chevron text-text-muted"
|
|
data-show="($_expandedCard.includes(',{{ event.id }}') || $_expandedMonths.includes(',{{ month.anchor }}')) && !$_collapsedCards.includes(',{{ event.id }}')"
|
|
style="display:none"
|
|
>
|
|
{{ icons::chevron_up("h-4 w-4") }}
|
|
</span>
|
|
</div>
|
|
<h3 class="mt-3 flex items-center gap-2 text-lg font-semibold text-text">
|
|
<a href="{{ event.link }}" class="text-accent hover:text-accent-hover"
|
|
>{{ event.title }}</a
|
|
>
|
|
{# External link — shown when expanded #}
|
|
{% if let Some(url) = event.external_link %}
|
|
<a
|
|
href="{{ url }}"
|
|
class="tl-detail ml-auto text-accent transition hover:text-accent-hover"
|
|
data-show="($_expandedCard.includes(',{{ event.id }}') || $_expandedMonths.includes(',{{ month.anchor }}')) && !$_collapsedCards.includes(',{{ event.id }}')"
|
|
style="display:none"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
aria-label="Open external link"
|
|
>
|
|
{{ icons::external_link("h-4 w-4") }}
|
|
<span class="sr-only">Open external link</span>
|
|
</a>
|
|
{% endif %}
|
|
</h3>
|
|
{# Subtitle — shown when collapsed #}
|
|
{% if let Some(sub) = event.subtitle %}
|
|
<p
|
|
class="tl-condensed mt-1 text-sm text-text-muted"
|
|
data-show="(!$_expandedCard.includes(',{{ event.id }}') && !$_expandedMonths.includes(',{{ month.anchor }}')) || $_collapsedCards.includes(',{{ event.id }}')"
|
|
>
|
|
{{ sub }}
|
|
</p>
|
|
{% endif %}
|
|
{# Detail rows — shown when expanded #}
|
|
{% if event.details.len() > 0 %}
|
|
<dl
|
|
class="tl-detail mt-4 flex flex-col gap-2 text-sm text-text-secondary"
|
|
data-show="($_expandedCard.includes(',{{ event.id }}') || $_expandedMonths.includes(',{{ month.anchor }}')) && !$_collapsedCards.includes(',{{ event.id }}')"
|
|
style="display:none"
|
|
>
|
|
{% for detail in event.details %}
|
|
<div class="flex justify-between gap-2">
|
|
<dt class="font-medium text-text-muted">{{ detail.label }}</dt>
|
|
{% if detail.label.eq_ignore_ascii_case("position") && detail.link.is_some() %}
|
|
<dd class="text-right flex items-center justify-end gap-1.5">
|
|
{{ detail.value }}
|
|
<a
|
|
href="{{ detail.link.as_ref().unwrap() }}"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
class="text-accent hover:text-accent-hover"
|
|
aria-label="View on map"
|
|
>
|
|
{{ icons::map("h-4 w-4") }}
|
|
</a>
|
|
</dd>
|
|
{% else if let Some(url) = detail.link %}
|
|
<dd class="text-right">
|
|
<a
|
|
href="{{ url }}"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
class="text-accent hover:text-accent-hover"
|
|
>{{ detail.value }}</a
|
|
>
|
|
</dd>
|
|
{% else %}
|
|
<dd class="text-right">{{ detail.value }}</dd>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% if let Some(notes) = event.tasting_notes %}
|
|
{% if !notes.is_empty() %}
|
|
<div class="flex justify-between gap-2">
|
|
<dt class="shrink-0 font-medium text-text-muted">
|
|
Tasting Notes
|
|
</dt>
|
|
<dd class="flex flex-wrap gap-1 justify-end">
|
|
{% for note in notes %}
|
|
<span class="{{ note.pill_class }}">{{ note.label }}</span>
|
|
{% endfor %}
|
|
</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</dl>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|