Afegir control visual de les lletres per a partitures

folkugat_web/assets/static/css/main.css

@@ -737,6 +737,10 @@ video {
   width: 50%;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
 .w-full {
   width: 100%;
 }

folkugat_web/assets/templates/fragments/tema/editor/lyric.html

@@ -7,6 +7,16 @@
                   rounded
                   bg-brown px-2 "
       />
+    <input name="max_columns"
+           type="number"
+           min="1"
+           max="10"
+           placeholder="3 (default)"
+           value="{{ lyric.max_columns or '' }}"
+           class="border border-beige focus:outline-none
+                  rounded
+                  bg-brown px-2 ml-2 w-16 "
+      />
     <button title="Desa els canvis"
             class="mx-1"
             hx-put="/api/tema/{{ lyric.tema_id }}/lyric/{{ lyric.id }}"

folkugat_web/assets/templates/fragments/tema/lyric.html

@@ -1,6 +1,9 @@
 <div id="tema-lyric-{{ lyric.id }}">
   <h5 class="text-sm text-beige text-right">
     {{ lyric.title }}
+    {% if logged_in and lyric.max_columns %}
+    <span class="text-xs ml-2">{{ lyric.max_columns }} columnes</span>
+    {% endif %}
     {% if logged_in %}
     <button title="Modifica la lletra"
             class="mx-1"
@@ -20,6 +23,6 @@
   </h5>
   <hr class="h-px mt-1 mb-3 bg-beige border-0">
   <div class="text-center">
-  {{ lyric.content.replace('\n', '<br>') | safe }}
+  {{ (lyric.content.replace('~', '')).replace('\n', '<br>') | safe }}
   </div>
 </div>

folkugat_web/assets/templates/lilypond/single_tune.ly

@@ -38,7 +38,7 @@
     \hspace #1
     \center-column {
         {% for line in paragraph.lines %}
-        \line { {{ line | safe }} }
+          {% if line %} \line { {{ line | safe }} } {% else %} \vspace #1 {% endif %}
         {% endfor %}
     }
     {% endfor %}