Esa Kataja
00ea7624ca
A copy pass over the Finnish UI. The em-dash aside was doing the work of a second sentence in ten places, so it is a second sentence now, or gone. The sealed-score wording was wrong twice over: it promised "pisteet" when only other people's are hidden, and said "kirjoitat" when the reveal actually happens on save. Both fixed on the queue, the song page and the card badge.
66 lines
2.7 KiB
HTML
66 lines
2.7 KiB
HTML
{{/* Two shapes, because timed lyrics and guessed lyrics deserve different treatment.
|
||
Synced: one element per line with its own timestamp, highlighted as it comes.
|
||
Plain: one block that scrolls continuously, with a nudge knob, because a highlight on evenly
|
||
guessed timings turns guaranteed drift into what looks like a bug. */}}
|
||
{{define "lyricsview"}}
|
||
<span class="cap">Sanoitukset</span>
|
||
{{$lines := .LyricLines}}
|
||
{{if $lines}}
|
||
<div class="lyricsbox synced" data-song="{{.ID}}">
|
||
{{range $lines}}<p class="lline" data-t="{{.At}}">{{if .Text}}{{.Text}}{{else}} {{end}}</p>{{end}}
|
||
</div>
|
||
<label class="follow">
|
||
<input type="checkbox" checked> Seuraa kappaletta
|
||
<span class="muted small">(sivu ei vieri)</span>
|
||
</label>
|
||
{{else}}
|
||
<div class="lyricsbox plain" data-duration="{{.Duration}}" data-song="{{.ID}}">
|
||
<div class="lscroll">{{lyricstext .Lyrics}}</div>
|
||
</div>
|
||
<label class="nudge">
|
||
Ajoitus
|
||
<input type="range" min="-10" max="10" step="0.5" value="0" aria-label="Ajoituksen siirto sekunteina">
|
||
<output>0 s</output>
|
||
</label>
|
||
{{end}}
|
||
{{end}}
|
||
|
||
{{define "player"}}
|
||
<!-- Ships with native controls; player.js removes them and drives the same element. No JS means
|
||
the browser's own player, which is plain but complete. -->
|
||
<div class="playerwrap" data-duration="{{.Duration}}">
|
||
<audio controls preload="none" src="/audio/{{.ID}}" class="player"></audio>
|
||
</div>
|
||
{{end}}
|
||
|
||
{{define "songcard"}}
|
||
<a class="songcard{{if and (not .Own) (not .Reviewed)}} unreviewed{{end}}" href="/songs/{{.ID}}">
|
||
{{if .Average}}<span class="scorebadge">{{score .Average}}</span>
|
||
{{else if .ReviewCount}}<span class="scorebadge sealed" title="Muiden pisteet paljastuvat kun tallennat omasi"></span>{{end}}
|
||
<span class="title">{{.Title}}</span>
|
||
<span class="artist">{{.Artist}}</span>
|
||
<span class="meta">
|
||
<span class="badge genre">{{.GenreLabel}}</span>
|
||
<span>{{.Length}}</span>
|
||
<span>{{.Submitter}}</span>
|
||
{{if .Own}}<span class="badge admin">oma</span>
|
||
{{else if .Reviewed}}<span class="badge reviewed">arvosteltu</span>
|
||
{{else}}<span class="badge pending">arvostelematta</span>{{end}}
|
||
{{if .ReviewCount}}<span>{{.ReviewCount}} arvostelua</span>{{end}}
|
||
</span>
|
||
</a>
|
||
{{end}}
|
||
|
||
{{define "fader"}}
|
||
<!-- A native range input turned vertical: keyboard, form submission and the value all stay free. -->
|
||
<div class="fader">
|
||
<span class="ticks" aria-hidden="true">
|
||
<span>100</span><span>75</span><span>50</span><span>25</span><span>1</span>
|
||
</span>
|
||
<input type="range" name="score" min="1" max="100" value="{{.}}"
|
||
aria-label="Pisteet 1–100"
|
||
oninput="this.closest('.fader').querySelector('output').value = this.value">
|
||
<output class="readout">{{.}}</output>
|
||
</div>
|
||
{{end}}
|