Esa Kataja
f33f4fa4d6
The theme handoff encoded as CSS custom properties rather than a Tailwind config, since there is no Tailwind here. Palette, spacing, radii, shadows and motion follow it as written; docs/theme.md lists what differs and why. - Oswald vendored as a 21KB variable woff2, latin subset, no CDN. Its phantom weight 900 resolved to 700 — loading a weight you don't have is what made the brand render differently per platform - color-scheme: dark makes the native audio element fit the palette, which was the handoff's complaint about it - Songs are text cards rather than artwork tiles, because there is no artwork. The unreviewed state keeps its red-brown border and gains a badge, so it is never carried by colour alone - Nav is the three-column grid; the mobile menu is <details>, no JS - Flash messages became bottom-right toasts Favicon carried over from the Nuxt project.
108 lines
4.1 KiB
HTML
108 lines
4.1 KiB
HTML
{{define "content"}}
|
|
{{$s := .Data}}
|
|
<h1>{{$s.Title}}</h1>
|
|
<p class="songmeta">
|
|
<strong>{{$s.Artist}}</strong>
|
|
<span class="badge genre">{{$s.GenreLabel}}</span>
|
|
<span>{{$s.Length}}</span>
|
|
<span>lähettänyt {{$s.Submitter}} {{fidate $s.CreatedAt}}</span>
|
|
{{if $s.Own}}<span class="badge admin">oma kappale</span>{{end}}
|
|
</p>
|
|
|
|
{{template "player" $s}}
|
|
|
|
{{with $s.Description}}<p class="intro">{{.}}</p>{{end}}
|
|
{{with $s.SourceURL}}<p class="muted"><a href="{{.}}" rel="noreferrer">Kuuntele YouTubessa</a></p>{{end}}
|
|
|
|
{{if $s.CanEdit}}
|
|
<details class="editbox">
|
|
<summary>Muokkaa tietoja</summary>
|
|
<form method="post" action="/songs/{{$s.ID}}" class="stack">
|
|
<label>Nimi <input name="title" value="{{$s.Title}}" maxlength="100" required></label>
|
|
<label>Esittäjä <input name="artist" value="{{$s.Artist}}" maxlength="100" required></label>
|
|
<label>Genre
|
|
<select name="genre" required>
|
|
{{$current := $s.Genre}}
|
|
{{range $s.Genres}}
|
|
<option value="{{.Code}}" {{if eq .Code $current}}selected{{end}}>{{.Label}}</option>
|
|
{{end}}
|
|
</select>
|
|
</label>
|
|
<label>Esittely <textarea name="description" rows="4" maxlength="2000">{{$s.Description}}</textarea></label>
|
|
<button type="submit">Tallenna</button>
|
|
</form>
|
|
<form method="post" action="/songs/{{$s.ID}}/delete"
|
|
onsubmit="return confirm('Poistetaanko kappale lopullisesti?')">
|
|
<button type="submit" class="danger ghost">Poista kappale</button>
|
|
</form>
|
|
<p class="muted small">Muokkaus ja poisto ovat mahdollisia vain ennen ensimmäistä arvostelua.</p>
|
|
</details>
|
|
{{else if $s.Own}}
|
|
<p class="muted small">Kappaletta on jo arvosteltu, joten tietoja ei voi enää muuttaa.</p>
|
|
{{end}}
|
|
|
|
<section>
|
|
{{if $s.CanReview}}
|
|
<h2>Arvostele</h2>
|
|
<form method="post" action="/songs/{{$s.ID}}/review" class="stack">
|
|
{{template "scorefield" 50}}
|
|
<label>Arvostelu
|
|
<textarea name="text" rows="6" maxlength="5000" required
|
|
placeholder="Mitä kuulit?"></textarea>
|
|
</label>
|
|
<button type="submit">Tallenna arvostelu</button>
|
|
</form>
|
|
<p class="muted small">Muiden arvostelut ja pisteet paljastuvat kun olet tallentanut omasi.
|
|
Voit muokata tai poistaa arvostelusi 30 minuutin ajan.</p>
|
|
{{else if $s.ViewerReview}}
|
|
<h2>Oma arvostelusi</h2>
|
|
{{with $s.ViewerReview}}
|
|
{{if .CanEdit}}
|
|
<form method="post" action="/reviews/{{.ID}}" class="stack">
|
|
<input type="hidden" name="from" value="/songs/{{$s.ID}}">
|
|
{{template "scorefield" .Score}}
|
|
<label>Arvostelu
|
|
<textarea name="text" rows="6" maxlength="5000" required>{{.Text}}</textarea>
|
|
</label>
|
|
<button type="submit">Päivitä</button>
|
|
</form>
|
|
<form method="post" action="/reviews/{{.ID}}/delete"
|
|
onsubmit="return confirm('Poistetaanko arvostelu?')">
|
|
<input type="hidden" name="from" value="/songs/{{$s.ID}}">
|
|
<button type="submit" class="danger">Poista arvostelu</button>
|
|
</form>
|
|
<p class="muted small">Muokkausaika päättyy {{fidate .EditableUntil}}.</p>
|
|
{{else}}
|
|
<p class="score">{{.Score}}</p>
|
|
<p>{{.Text}}</p>
|
|
<p class="muted small">Muokkausaika on päättynyt.</p>
|
|
{{end}}
|
|
{{end}}
|
|
{{end}}
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Arvostelut{{if $s.ReviewCount}} ({{$s.ReviewCount}}){{end}}</h2>
|
|
|
|
{{if $s.Revealed}}
|
|
{{if $s.Average}}<p class="average">Keskiarvo <strong>{{score $s.Average}}</strong></p>{{end}}
|
|
{{range $s.Reviews}}
|
|
<article class="review{{if .Own}} own{{end}}">
|
|
<header>
|
|
<span class="avatar small">{{.Initials}}</span>
|
|
<span class="who">{{.Reviewer}}</span>
|
|
<span class="score">{{.Score}}</span>
|
|
<span class="meta">{{fidate .CreatedAt}}</span>
|
|
</header>
|
|
<p>{{.Text}}</p>
|
|
</article>
|
|
{{else}}
|
|
<p class="muted">Kukaan ei ole vielä arvostellut tätä kappaletta.</p>
|
|
{{end}}
|
|
{{else}}
|
|
<p class="muted">Muiden arvostelut ja keskiarvo näkyvät kun olet kirjoittanut omasi.
|
|
{{if $s.ReviewCount}}Arvosteluja on {{$s.ReviewCount}}.{{end}}</p>
|
|
{{end}}
|
|
</section>
|
|
{{end}}
|