94 lines
3.3 KiB
HTML
94 lines
3.3 KiB
HTML
{{define "timeline.html"}}
|
|
<div class="timeline">
|
|
<div class="timeline-header">
|
|
<button
|
|
hx-get="/timeline/{{.PrevYear}}/{{.PrevMonth}}"
|
|
hx-target="#timeline-panel"
|
|
hx-swap="innerHTML"
|
|
class="nav-btn"
|
|
aria-label="Previous month">
|
|
‹
|
|
</button>
|
|
<h2>{{.MonthName}} {{.Year}}</h2>
|
|
<button
|
|
hx-get="/timeline/{{.NextYear}}/{{.NextMonth}}"
|
|
hx-target="#timeline-panel"
|
|
hx-swap="innerHTML"
|
|
class="nav-btn"
|
|
aria-label="Next month">
|
|
›
|
|
</button>
|
|
</div>
|
|
|
|
<div class="timeline-content">
|
|
{{if .Days}}
|
|
{{range .Days}}
|
|
<article class="timeline-day">
|
|
<header class="timeline-day-header">
|
|
<time datetime="{{formatDate .Date}}">
|
|
{{.Date.Format "Monday, January 2"}}
|
|
</time>
|
|
</header>
|
|
|
|
<div class="timeline-entries">
|
|
{{/* Events */}}
|
|
{{range .Events}}
|
|
<div class="timeline-entry event-entry">
|
|
<div class="entry-icon">📅</div>
|
|
<div class="entry-content">
|
|
<h4>{{.Title}}</h4>
|
|
{{if not .AllDay}}
|
|
<span class="entry-time">{{formatTime .Start}} - {{formatTime .End}}</span>
|
|
{{else}}
|
|
<span class="entry-time">All day</span>
|
|
{{end}}
|
|
{{if .Location}}
|
|
<span class="entry-location">📍 {{.Location}}</span>
|
|
{{end}}
|
|
{{if .Description}}
|
|
<p class="entry-description">{{.Description}}</p>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{/* Diary entry */}}
|
|
{{if .Diary}}
|
|
<div class="timeline-entry diary-entry">
|
|
<div class="entry-icon">📝</div>
|
|
<div class="entry-content">
|
|
<h4>Journal Entry</h4>
|
|
<p class="entry-description diary-text">{{.Diary.Text}}</p>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{/* Photos */}}
|
|
{{if .Photos}}
|
|
<div class="timeline-entry photo-entry">
|
|
<div class="entry-icon">📷</div>
|
|
<div class="entry-content">
|
|
<h4>Photos</h4>
|
|
<div class="photo-grid">
|
|
{{range .Photos}}
|
|
<figure class="photo-item">
|
|
<img src="{{.URLPath}}" alt="{{.Description}}" loading="lazy">
|
|
<figcaption>{{.Description}}</figcaption>
|
|
</figure>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</article>
|
|
{{end}}
|
|
{{else}}
|
|
<div class="timeline-empty">
|
|
<p>No entries for this month.</p>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|