Add list styles: Podium, Spotlight, Grid, List

- Each list picks a style in List settings (new lists default to Podium);
  existing lists keep Grid or List
- Podium: top 3 on medal-colored steps (#1 center and raised), the rest
  behind a native <details> "Show N more"; stacks #1 over #2/#3 on phones
- Spotlight: #1 as a feature card (art, why-note or description, play
  button), the rest as a numbered list
- Visitors can switch styles on a list page (?style=), preserved across
  pages; later pages fall back to a plain list since they don't start at #1
- Entries' detail data now lives on a wrapper per list, so featured and
  collapsed entries all open the detail view

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
cdnutterandClaude Opus 5.5 committed 2026-09-25 11:18:44 -07:00
1 parent b09533cc00
commit ddf2157e63
15 files changed
+286 -65

No files matched your search

+1 -1
View File
@@ -30,7 +30,7 @@
</div>
<a class="see-all" href="/l/{{.List.Slug}}">{{if .More}}All {{num .List.ItemCount}}{{else}}Open{{end}}{{icon "arrow-right"}}</a>
</header>
{{if .Items}}{{template "items" (dict "Items" .Items "Category" .Category "Layout" .List.Layout "Title" .List.Title)}}{{end}}
{{if .Items}}{{template "ranked" (dict "Items" .Items "Category" .Category "Style" .List.Layout "Title" .List.Title "AllLink" (and (gt .More 0) (print "/l/" .List.Slug)) "Total" .List.ItemCount)}}{{end}}
</section>
{{end}}
{{else}}
+9 -8
View File
@@ -18,10 +18,11 @@
<div class="list-actions">
{{if $.LoggedIn}}<a class="btn btn--ghost" href="/admin/lists/{{.List.ID}}">{{icon "pencil"}}Edit</a>{{if .Items}}{{template "export" .List.Slug}}{{end}}{{end}}
{{if .Items}}
<div class="segmented" role="group" aria-label="Layout" data-layout-toggle data-default="{{.List.Layout}}" data-key="{{.List.Slug}}">
<button type="button" data-layout="grid" title="Grid">{{icon "grid"}}<span class="sr-only">Grid</span></button>
<button type="button" data-layout="rows" title="List">{{icon "rows"}}<span class="sr-only">List</span></button>
</div>
<nav class="segmented" aria-label="Style">
{{- range .Styles}}
<a href="?style={{.Key}}" title="{{.Label}}"{{if eq .Key $.Data.Style}} aria-current="true"{{end}}>{{icon .Icon}}<span class="sr-only">{{.Label}}</span></a>
{{- end}}
</nav>
{{end}}
</div>
</div>
@@ -30,16 +31,16 @@
<div class="container list-body">
{{if .Items}}
{{template "items" (dict "Items" .Items "Category" .Category "Layout" .List.Layout "Title" .List.Title)}}
{{template "ranked" (dict "Items" .Items "Category" .Category "Style" .Style "Title" .List.Title)}}
{{if .PageNums}}
<nav class="pager" aria-label="Pages">
{{if gt .Page 1}}<a class="pager-btn" href="?page={{add .Page -1}}" rel="prev">{{icon "chevron-left"}}<span class="sr-only">Previous</span></a>{{end}}
{{if gt .Page 1}}<a class="pager-btn" href="?page={{add .Page -1}}{{.PageQS}}" rel="prev">{{icon "chevron-left"}}<span class="sr-only">Previous</span></a>{{end}}
{{range .PageNums}}
{{if eq . 0}}<span class="pager-gap">…</span>
{{else if eq . $.Data.Page}}<span class="pager-btn is-current" aria-current="page">{{.}}</span>
{{else}}<a class="pager-btn" href="?page={{.}}">{{.}}</a>{{end}}
{{else}}<a class="pager-btn" href="?page={{.}}{{$.Data.PageQS}}">{{.}}</a>{{end}}
{{end}}
{{if lt .Page .Pages}}<a class="pager-btn" href="?page={{add .Page 1}}" rel="next">{{icon "chevron-right"}}<span class="sr-only">Next</span></a>{{end}}
{{if lt .Page .Pages}}<a class="pager-btn" href="?page={{add .Page 1}}{{.PageQS}}" rel="next">{{icon "chevron-right"}}<span class="sr-only">Next</span></a>{{end}}
</nav>
{{end}}
{{else}}