Rediseño de la interfaz y arreglos menores

- ¡Ahora con tema oscuro! Se activa según el navegador del usuario.
- URL de audios simplificada.
- Nuevos iconos para canciones con acordes/audios.
- Enlaces de la cabecera actualizados.
- Siempre mostramos los ajustes.
- Insertar espacio forzoso para separar algunas palabras que se juntaban.
- Soporte para canciones con dos líneas de acordes (e.g. Engrandece).
This commit is contained in:
Carlos Galindo 2023-09-08 00:37:10 +02:00
parent e838b066de
commit 03522304fa
15 changed files with 203 additions and 83 deletions

View file

@ -16,8 +16,7 @@
{% if song.origin %}
<span>basada en: <strong>{{ song.origin }}</strong></span>
{% endif %}
<details>
<summary><h3 style="display: inline-block;">Ajustes</h3></summary>
<h3>Ajustes</h3>
<div>
<label>Cambiar tamaño de letra </label>
<button class="small" onclick="size(-1)">-</button>
@ -29,7 +28,7 @@
<label><input id="showChords" type="checkbox" checked onchange="showChords(this.checked)"/> Mostrar acordes</label>
</div>
<div id="transposeControls" class="showChords">
<label>Transponer acordes </label>
<label for="transposeSelect">Transponer acordes </label>
<button class="small" onclick="transposeAdd(-2)">-2</button>
<button class="small" onclick="transposeAdd(-1)">-1</button>
<select id="transposeSelect" disabled>
@ -58,16 +57,15 @@
</div>
{% endif %}
{% endif %}
</details>
<h3>Canción</h3>
<div id="wholeSongDiv">
<div id="songLyrics" class="showLyrics" style="display: none;">
{% for verse in song.verses %}
<div class="{{ verse.kind }}">
<p class="{{ verse.kind }}">
{% for line in verse.lines %}
{{ line }}<br/>
{% endfor %}
</div>
</p>
{% endfor %}
</div>
<div id="songChords" class="showChords">
@ -82,13 +80,45 @@
{% if chord.class %}
<span class="{{ chord.class }}"></span>
{% endif %}
{% for c in chord.chord.items %}
{% if c.chord %}
<span class="c">{{ c.text|safe }}</span>
{% else %}
<span>{{ c.text|safe }}</span>
{% if chord.chord.trfmt == "normal" %}
{% for c in chord.chord.items_t %}
{% if c.chord %}
<span class="c">{{ c.text|safe }}</span>
{% else %}
<span>{{ c.text|safe }}</span>
{% endif %}
{% endfor %}
{% endif %}
{% if chord.chord.trfmt == "double" %}
<span>
{% for c in chord.chord.items_n %}
{% if c.chord %}
<span class="c">{{ c.text|safe }}</span>
{% else %}
<span>{{ c.text|safe }}</span>
{% endif %}
{% endfor %}
<br/>
{% for c in chord.chord.items_t %}
{% if c.chord %}
<span class="c">{{ c.text|safe }}</span>
{% else %}
<span>{{ c.text|safe }}</span>
{% endif %}
{% endfor %}
<span/>
{% endif %}
{% if chord.chord.trfmt == "hover" %}
<span>
{% for c in chord.chord.items_n %}
{% if c.chord %}
<span class="c">{{ c.text|safe }}</span>
{% else %}
<span>{{ c.text|safe }}</span>
{% endif %}
{% endfor %}
<br/>&nbsp;</span>
{% endif %}
{% endfor %}
</td>
</tr>
<tr class="lyric">