90 lines
3.8 KiB
HTML
90 lines
3.8 KiB
HTML
{{define "timeline.html"}}
|
|
<div class="timeline" id="timeline">
|
|
<div class="timeline-header">
|
|
<button
|
|
hx-get="/timeline/{{.PrevYear}}/{{.PrevMonth}}"
|
|
hx-target="#timeline"
|
|
hx-swap="outerHTML"
|
|
class="tui-button"
|
|
aria-label="Previous month">
|
|
«
|
|
</button>
|
|
<span class="timeline-title">{{.MonthName}} {{.Year}}</span>
|
|
<button
|
|
hx-get="/timeline/{{.NextYear}}/{{.NextMonth}}"
|
|
hx-target="#timeline"
|
|
hx-swap="outerHTML"
|
|
class="tui-button"
|
|
aria-label="Next month">
|
|
»
|
|
</button>
|
|
</div>
|
|
|
|
<div class="timeline-content">
|
|
{{if .Days}}
|
|
{{range .Days}}
|
|
<article class="timeline-day">
|
|
<div class="tui-window tui-no-shadow">
|
|
<fieldset class="tui-fieldset tui-border-single">
|
|
<legend>{{.Date.Format "Monday, January 2"}}</legend>
|
|
|
|
<div class="timeline-entries">
|
|
{{/* Events */}}
|
|
{{range .Events}}
|
|
<div class="timeline-entry">
|
|
<span class="entry-type cyan-255-text">[EVENT]</span>
|
|
<span class="entry-title white-255-text">{{.Title}}</span>
|
|
{{if not .AllDay}}
|
|
<span class="entry-time green-255-text">{{formatTime .Start}} - {{formatTime .End}}</span>
|
|
{{else}}
|
|
<span class="entry-time green-255-text">All day</span>
|
|
{{end}}
|
|
{{if .Location}}
|
|
<span class="entry-location yellow-255-text">@ {{.Location}}</span>
|
|
{{end}}
|
|
{{if .Description}}
|
|
<p class="entry-description">{{.Description}}</p>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
|
|
{{/* Diary entry */}}
|
|
{{if .Diary}}
|
|
<div class="timeline-entry">
|
|
<span class="entry-type purple-255-text">[DIARY]</span>
|
|
<span class="entry-title white-255-text">Journal Entry</span>
|
|
<p class="entry-description diary-text">{{.Diary.Text}}</p>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{/* Photos */}}
|
|
{{if .Photos}}
|
|
<div class="timeline-entry">
|
|
<span class="entry-type orange-255-text">[PHOTOS]</span>
|
|
<span class="entry-title white-255-text">{{len .Photos}} photo(s)</span>
|
|
<div class="photo-grid">
|
|
{{range .Photos}}
|
|
<figure class="photo-item">
|
|
<a href="{{.URLPath}}" target="_blank">
|
|
<img src="{{.URLPath}}" alt="{{.Description}}" loading="lazy">
|
|
</a>
|
|
{{if .Description}}<figcaption>{{.Description}}</figcaption>{{end}}
|
|
</figure>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</article>
|
|
{{end}}
|
|
{{else}}
|
|
<div class="timeline-empty">
|
|
<p class="white-255-text">No entries for this month.</p>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|