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.
69 lines
2.2 KiB
HTML
69 lines
2.2 KiB
HTML
{{define "content"}}
|
|
<h1>Lähetä kappale</h1>
|
|
|
|
{{with .Data.Error}}<p class="error">{{.}}</p>{{end}}
|
|
|
|
<form method="post" action="/submit" enctype="multipart/form-data" class="stack">
|
|
<label class="dropzone" id="dropzone" for="audio">
|
|
<input type="file" id="audio" name="audio" accept="audio/*">
|
|
<span class="dz-title">Raahaa äänitiedosto tähän</span>
|
|
<span class="muted small">tai valitse napsauttamalla</span>
|
|
<span class="filename" id="filename"></span>
|
|
</label>
|
|
<p class="or">tai</p>
|
|
<label>YouTube-linkki
|
|
<input type="url" name="url" placeholder="https://www.youtube.com/watch?v=…">
|
|
</label>
|
|
<button type="submit">Lähetä</button>
|
|
</form>
|
|
|
|
{{with .Data.Submissions}}
|
|
<section>
|
|
<h2>Omat lähetykset</h2>
|
|
<table>
|
|
<thead><tr><th>Kappale</th><th>Tila</th><th>Lähetetty</th></tr></thead>
|
|
<tbody>
|
|
{{range .}}
|
|
<tr>
|
|
<td><a href="/submit/{{.ID}}">{{if .Title}}{{.Title}}{{else}}(nimetön){{end}}</a></td>
|
|
<td>{{.Label}}</td>
|
|
<td class="nowrap">{{fidate .CreatedAt}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
{{end}}
|
|
|
|
<p class="muted">Enintään 50 MB ja 15 minuuttia.</p>
|
|
|
|
<script>
|
|
// The native control can't be relabelled or styled, so it is hidden behind this one — which
|
|
// still is the input, so keyboard focus and form submission work untouched.
|
|
(function () {
|
|
const zone = document.getElementById('dropzone')
|
|
const input = document.getElementById('audio')
|
|
const name = document.getElementById('filename')
|
|
|
|
const show = () => {
|
|
name.textContent = input.files.length ? input.files[0].name : ''
|
|
zone.classList.toggle('has-file', input.files.length > 0)
|
|
}
|
|
input.addEventListener('change', show)
|
|
|
|
for (const type of ['dragenter', 'dragover']) {
|
|
zone.addEventListener(type, e => { e.preventDefault(); zone.classList.add('over') })
|
|
}
|
|
for (const type of ['dragleave', 'dragend', 'drop']) {
|
|
zone.addEventListener(type, e => { e.preventDefault(); zone.classList.remove('over') })
|
|
}
|
|
zone.addEventListener('drop', e => {
|
|
if (e.dataTransfer.files.length) {
|
|
input.files = e.dataTransfer.files
|
|
show()
|
|
}
|
|
})
|
|
})()
|
|
</script>
|
|
{{end}}
|