minimizar espacio vertical y mostrar-ocultar acordes

res/static/song.js

@@ -33,12 +33,16 @@ function transpose(n) {
 function transposeAdd(n) {
     for (c of document.getElementsByClassName('c')) {
         chord = c.innerHTML
+        nbsp = chord.endsWith(" ")
+        if (nbsp) {
+            chord = chord.slice(0, -6)
+        }
         if (LAT_INDEX[chord] == undefined) {
             throw Error("Unknown chord: " + chord)
         }
         i = LAT_INDEX[chord]
         j = (i + n + 12) % 12
-        c.innerHTML = CHORDS_LAT[j]
+        c.innerHTML = CHORDS_LAT[j] + (nbsp ? " " : "")
     }
 
     setTransposeSelector(getTranspose() + n)
@@ -69,20 +73,18 @@ function getTranspose() {
 
 // Init
 window.onload = function () {
-    var show = localStorage.getItem("show_chords") == "true";
+    var show = localStorage.getItem("show_chords") != "false";
     showChords(show);
     document.getElementById("showChords").checked = show;
 };
 
 function showChords(show) {
     if (show || show == "true") {
-        document.getElementById("songLyrics").style.display = "none";
-        document.getElementById("songChords").style.display = "block";
-        document.getElementById("transposeControls").style.display = "block";
+        for (let e of document.getElementsByClassName("showChords")) { e.style.display = "block"; }
+        for (let e of document.getElementsByClassName("showLyrics")) { e.style.display = "none";  }
     } else {
-        document.getElementById("songLyrics").style.display = "block";
-        document.getElementById("songChords").style.display = "none";
-        document.getElementById("transposeControls").style.display = "none";
+        for (let e of document.getElementsByClassName("showChords")) { e.style.display = "none";  }
+        for (let e of document.getElementsByClassName("showLyrics")) { e.style.display = "block"; }
     }
     localStorage.setItem("show_chords", show);
 }

res/templates/song.html

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