luxick/chronological
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tuicss library

Browse Source
This commit is contained in:
luxick
2025-12-12 11:55:37 +01:00
parent e5bbdcab42
commit 4bbc7975b3
7 changed files with 293 additions and 431 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
web/templates/partials/timeline.html
View File

@@ -5,18 +5,18 @@
hx-get="/timeline/{{.PrevYear}}/{{.PrevMonth}}"
hx-target="#timeline-panel"
hx-swap="innerHTML"
class="nav-btn"
class="tui-button"
aria-label="Previous month">
‹
«
</button>
<h2>{{.MonthName}} {{.Year}}</h2>
<span class="timeline-title">{{.MonthName}} {{.Year}}</span>
<button
hx-get="/timeline/{{.NextYear}}/{{.NextMonth}}"
hx-target="#timeline-panel"
hx-swap="innerHTML"
class="nav-btn"
class="tui-button"
aria-label="Next month">
&#8250;
&raquo;
</button>
</div>
@@ -24,68 +24,64 @@
{{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>
<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>
</div>
{{end}}
</fieldset>
</div>
</article>
{{end}}
{{else}}
<div class="timeline-empty">
<p>No entries for this month.</p>
<p class="white-255-text">No entries for this month.</p>
</div>
{{end}}
</div>