mirror of
https://gitlab.com/parroquia-san-leandro/cancionero-web.git
synced 2025-04-26 23:26:19 +02:00
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:
parent
e838b066de
commit
03522304fa
15 changed files with 203 additions and 83 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<footer>
|
||||
<p>
|
||||
© 2020 Carlos Galindo, Parroquia San Leandro
|
||||
© 2023 Carlos Galindo, Parroquia San Leandro
|
||||
<a href="https://gitlab.com/parroquia-san-leandro/cancionero-web"><span>Código fuente</span></a>
|
||||
</p>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<h1><a href="{{ path }}">Cancionero San Leandro</a></h1>
|
||||
<nav class="nav">
|
||||
<ul>
|
||||
<li><a href="https://sanleandro-obispo.net/"><span>Parroquia San Leandro</span></a></li>
|
||||
<li><a href="https://nube.sanleandro-obispo.net/s/X23Jzz5A6dpCfr2"><span>Grabaciones</span></a></li>
|
||||
<li><a href="https://sanleandro-obispo.net/cancionero/"><span>Cancionero en PDF</span></a></li>
|
||||
<li><a href="https://sanleandrovalencia.es/"><span id="nav-web">Parroquia San Leandro</span></a></li>
|
||||
<li><a href="https://nube.sanleandrovalencia.es/s/X23Jzz5A6dpCfr2"><span id="nav-audios">Grabaciones</span></a></li>
|
||||
<li><a href="https://sanleandrovalencia.es/cancionero/"><span>Cancionero en PDF</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -15,17 +15,25 @@
|
|||
</a>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
Las canciones sin acordes están marcadas en <span class="noChords">rojo</span>.
|
||||
<p><strong>Leyenda</strong>: <img src="music.svg" class="music-icon"> tiene música grabada; <img src="guitar.svg" class="guitar-icon"> tiene acordes.</p>
|
||||
<ol class="songs">
|
||||
{% for category, songs in sorted_categories.items %}
|
||||
<h3 id="{{ category|slugify }}">{{ category|title }}</h3>
|
||||
{% for song in songs %}
|
||||
<a href="{{ song.url }}">
|
||||
<li {% if not song.chorded %}class="noChords" {% endif %}>
|
||||
<li>
|
||||
<span class="number">{{ song.number }}.</span>
|
||||
{{ song.name }}
|
||||
{% if song.author %} por {{ song.author }} {% endif %}
|
||||
{% if song.origin %} basada en {{ song.origin }} {% endif %}
|
||||
<span class="name">
|
||||
{{ song.name }}
|
||||
{% if song.author %} por {{ song.author }} {% endif %}
|
||||
{% if song.origin %} basada en {{ song.origin }} {% endif %}
|
||||
</span>
|
||||
{% if song.has_audios %}
|
||||
<img src="music.svg" class="music-icon filter-green">
|
||||
{% endif %}
|
||||
{% if song.chorded %}
|
||||
<img src="guitar.svg" class="guitar-icon filter-green">
|
||||
{% endif %}
|
||||
</li>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
|
@ -34,4 +42,4 @@
|
|||
</main>
|
||||
{% include "footer.html" %}
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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/> </span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="lyric">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue