parroquia-san-leandro/cancionero-web
1
0
Fork 0
mirror of https://gitlab.com/parroquia-san-leandro/cancionero-web.git synced 2024-12-22 08:43:33 +01:00
Code Releases Activity

minimizar espacio vertical y mostrar-ocultar acordes

Browse source
This commit is contained in:
Carlos Galindo 2022-11-22 19:22:00 +01:00
parent e6b10585b7
commit e838b066de
2 changed files with 14 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/static/song.js
View file

@ -73,20 +73,18 @@ function getTranspose() {
// Init // Init
window.onload = function () { window.onload = function () {
var show = localStorage.getItem("show_chords") == "true"; var show = localStorage.getItem("show_chords") != "false";
showChords(show); showChords(show);
document.getElementById("showChords").checked = show; document.getElementById("showChords").checked = show;
}; };
function showChords(show) { function showChords(show) {
if (show || show == "true") { if (show || show == "true") {
document.getElementById("songLyrics").style.display = "none"; for (let e of document.getElementsByClassName("showChords")) { e.style.display = "block"; }
document.getElementById("songChords").style.display = "block"; for (let e of document.getElementsByClassName("showLyrics")) { e.style.display = "none"; }
document.getElementById("transposeControls").style.display = "block";
} else { } else {
document.getElementById("songLyrics").style.display = "block"; for (let e of document.getElementsByClassName("showChords")) { e.style.display = "none"; }
document.getElementById("songChords").style.display = "none"; for (let e of document.getElementsByClassName("showLyrics")) { e.style.display = "block"; }
document.getElementById("transposeControls").style.display = "none";
} }
localStorage.setItem("show_chords", show); localStorage.setItem("show_chords", show);
} }

17
res/templates/song.html
View file

@ -9,15 +9,15 @@
{% include "header.html" with path=".." %} {% include "header.html" with path=".." %}
<main> <main>
<div class="song"> <div class="song">
<h2>{{song.number}}. {{ song.name}}</h2> <h2 style="display: inline-block;">{{song.number}}. {{ song.name}}</h2>
<a href="../#{{ song.category|slugify }}"><span>Categoría: {{ song.category|title }}</span></a>
{% if song.author %} {% if song.author %}
<span>por <strong>{{ song.author }}</strong></span> <span>por <strong>{{ song.author }}</strong></span>
{% endif %} {% endif %}
{% if song.origin %} {% if song.origin %}
<span>basada en: <strong>{{ song.origin }}</strong></span> <span>basada en: <strong>{{ song.origin }}</strong></span>
{% endif %} {% endif %}
<h3>Ajustes</h3> <details>
<summary><h3 style="display: inline-block;">Ajustes</h3></summary>
<div> <div>
<label>Cambiar tamaño de letra </label> <label>Cambiar tamaño de letra </label>
<button class="small" onclick="size(-1)">-</button> <button class="small" onclick="size(-1)">-</button>
@ -28,7 +28,7 @@
<div> <div>
<label><input id="showChords" type="checkbox" checked onchange="showChords(this.checked)"/> Mostrar acordes</label> <label><input id="showChords" type="checkbox" checked onchange="showChords(this.checked)"/> Mostrar acordes</label>
</div> </div>
<div id="transposeControls"> <div id="transposeControls" class="showChords">
<label>Transponer acordes </label> <label>Transponer acordes </label>
<button class="small" onclick="transposeAdd(-2)">-2</button> <button class="small" onclick="transposeAdd(-2)">-2</button>
<button class="small" onclick="transposeAdd(-1)">-1</button> <button class="small" onclick="transposeAdd(-1)">-1</button>
@ -51,16 +51,17 @@
<button class="small" onclick="transposeAdd(2)">+2</button> <button class="small" onclick="transposeAdd(2)">+2</button>
<button onclick="transpose(0)">Reset</button> <button onclick="transpose(0)">Reset</button>
</div> </div>
{% endif %}
{% if song.capo != 0 %} {% if song.capo != 0 %}
<div> <div class="showChords">
<span class="capo">Tono original: Cejilla {{ song.capo }}</span> <span class="capo">Tono original: Cejilla {{ song.capo }}</span>
<button style="margin-left: 0.5em;" onclick="transpose({{ song.capo}})">Transponer para quitarla</button> <button style="margin-left: 0.5em;" onclick="transpose({{ song.capo}})">Transponer para quitarla</button>
</div> </div>
{% endif %} {% endif %}
{% endif %}
</details>
<h3>Canción</h3> <h3>Canción</h3>
<div id="wholeSongDiv"> <div id="wholeSongDiv">
<div id="songLyrics" style="display: none;"> <div id="songLyrics" class="showLyrics" style="display: none;">
{% for verse in song.verses %} {% for verse in song.verses %}
<div class="{{ verse.kind }}"> <div class="{{ verse.kind }}">
{% for line in verse.lines %} {% for line in verse.lines %}
@ -69,7 +70,7 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<div id="songChords"> <div id="songChords" class="showChords">
{% for verse in song.verses %} {% for verse in song.verses %}
<div class="{{ verse.kind }}"> <div class="{{ verse.kind }}">
{% for line in verse.lines %} {% for line in verse.lines %}