From e838b066de0ec2184c4e2517b246c4f464b8474b Mon Sep 17 00:00:00 2001
From: Carlos Galindo <git@cgj.es>
Date: Tue, 22 Nov 2022 19:22:00 +0100
Subject: [PATCH] minimizar espacio vertical y mostrar-ocultar acordes

---
 res/static/song.js      | 12 +++++-------
 res/templates/song.html | 17 +++++++++--------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/res/static/song.js b/res/static/song.js
index 34c6975..40e6529 100644
--- a/res/static/song.js
+++ b/res/static/song.js
@@ -73,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);
 }
diff --git a/res/templates/song.html b/res/templates/song.html
index f16acf7..cbf0b00 100644
--- a/res/templates/song.html
+++ b/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 %}