cdnutterandClaude Opus 5.5
88373176f2
Entries now sit at places 1…max with gaps allowed (#28, nothing at #29, #30). Moving onto an empty place just puts the entry there; onto a taken place, the entries in between shift one step, stopping at the first empty place, so lists without gaps reorder exactly as before. Inserts push down only to the next gap; deleting can close up or leave the place empty. New endpoint POST /api/lists/{id}/places inserts or removes empty places or closes every gap; move and delete reply with every entry's place. The podium shows an empty step for an empty #2 or #3, and a list can't shrink below its last used place. The editor loads every entry (no paging) and applies edits instantly with the same rules (places.js mirrors places.go), queueing saves in the background and reconciling with the server's reply. Type a place and press Enter (↑/↓ move between boxes, Alt+↑/↓ moves the entry), drag, or use the row menu. Empty runs show as rows with Add here and Remove, and a toolbar shows the gap count, Close gaps and a Go to # box. Clicking an entry opens it for editing. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
81 lines
3.4 KiB
HTML
81 lines
3.4 KiB
HTML
{{/*
|
|
ranked draws a list in its style. Takes: Items, Category, Style, Title,
|
|
and optionally AllLink/Total (home page: link to the full list).
|
|
Podium and Spotlight feature #1, so a page that doesn't start at #1 falls
|
|
back to a plain list.
|
|
*/}}
|
|
{{define "ranked"}}
|
|
{{- $featured := and (or (eq .Style "podium") (eq .Style "spotlight")) (eq (index .Items 0).Rank 1)}}
|
|
<div class="ranked ranked--{{if $featured}}{{.Style}}{{else}}{{flatLayout .Style}}{{end}} aspect-{{.Category.Aspect}}" data-items data-list-title="{{.Title}}">
|
|
{{- if and $featured (eq .Style "podium")}}{{template "podium" .}}
|
|
{{- else if $featured}}{{template "spotlight" .}}
|
|
{{- else}}{{template "items" (dict "Items" .Items "Category" .Category "Layout" (flatLayout .Style))}}
|
|
{{- end}}
|
|
<script type="application/json" class="items-data">{{.Items}}</script>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "podium"}}
|
|
{{- $c := .Category}}
|
|
{{- $top := podium .Items}}
|
|
<ol class="podium podium--{{len $top}}">
|
|
{{- range $i, $spot := $top}}
|
|
{{- if not $spot}}
|
|
<li class="podium-spot podium-spot--{{add $i 1}} podium-spot--empty" aria-hidden="true">
|
|
<span class="podium-step"><span>{{add $i 1}}</span></span>
|
|
</li>
|
|
{{- else}}
|
|
{{- with $spot}}
|
|
<li class="podium-spot podium-spot--{{.Rank}}">
|
|
<button type="button" class="item-btn podium-card" data-item="{{.ID}}">
|
|
<span class="item-art">{{template "art" (dict "Item" . "Icon" $c.Icon)}}</span>
|
|
<span class="item-body">
|
|
<span class="item-title"><span class="sr-only">#{{.Rank}}: </span>{{.Title}}</span>
|
|
{{- template "itemsub" .}}
|
|
</span>
|
|
</button>
|
|
{{- template "playbtn" .}}
|
|
<span class="podium-step" aria-hidden="true"><span>{{.Rank}}</span></span>
|
|
</li>
|
|
{{- end}}
|
|
{{- end}}
|
|
{{- end}}
|
|
</ol>
|
|
{{- $rest := belowPlace 3 .Items}}
|
|
{{- if $rest}}
|
|
<details class="more">
|
|
<summary class="more-btn"><span class="more-closed">Show {{len $rest}} more</span><span class="more-open">Show less</span>{{icon "chevron-down"}}</summary>
|
|
{{template "items" (dict "Items" $rest "Category" $c "Layout" "rows")}}
|
|
{{- if .AllLink}}<a class="more-all" href="{{.AllLink}}">See all {{num .Total}}{{icon "arrow-right"}}</a>{{end}}
|
|
</details>
|
|
{{- else if .AllLink}}
|
|
<a class="more-all" href="{{.AllLink}}">See all {{num .Total}}{{icon "arrow-right"}}</a>
|
|
{{- end}}
|
|
{{end}}
|
|
|
|
{{define "spotlight"}}
|
|
{{- $c := .Category}}
|
|
{{- with index .Items 0}}
|
|
<article class="spotlight">
|
|
{{- if .Image}}<div class="spotlight-bg" aria-hidden="true"><img src="{{.Image}}" alt=""></div>{{end}}
|
|
<div class="spotlight-art">
|
|
<button type="button" class="item-btn" data-item="{{.ID}}" aria-label="#1: {{.Title}}">
|
|
<span class="item-art">{{template "art" (dict "Item" . "Icon" $c.Icon)}}</span>
|
|
</button>
|
|
{{- template "playbtn" .}}
|
|
</div>
|
|
<div class="spotlight-body">
|
|
<p class="spotlight-rank">#1</p>
|
|
<h3 class="spotlight-title">{{.Title}}</h3>
|
|
{{- template "itemsub" .}}
|
|
{{- with .Note}}<blockquote class="spotlight-note">{{.}}</blockquote>
|
|
{{- else}}{{with .Description}}<p class="spotlight-desc">{{.}}</p>{{end}}{{end}}
|
|
<button type="button" class="btn btn--sm spotlight-more" data-item="{{.ID}}">More about it{{icon "arrow-right"}}</button>
|
|
</div>
|
|
</article>
|
|
{{- end}}
|
|
{{- $rest := after 1 .Items}}
|
|
{{- if $rest}}{{template "items" (dict "Items" $rest "Category" $c "Layout" "rows")}}{{end}}
|
|
{{- if .AllLink}}<a class="more-all" href="{{.AllLink}}">See all {{num .Total}}{{icon "arrow-right"}}</a>{{end}}
|
|
{{end}}
|