Move to less, improved style, fixed bugs

* Redirection wasn't being encoded properly
* CSS to LESS transition
* Improved Makefile
* Explained red color in index
* Unified link and button styles

Makefile

@@ -1,7 +1,36 @@
-all: clean
+.PHONY=static all clean svg js css
-	mkdir -p public audios
+
-	ln -s ../audios public/audios
+ALL_CSS := $(patsubst res/%.less,public/%.css,$(wildcard res/*.less))
+ALL_JS := $(patsubst res/%.js,public/%.js,$(wildcard res/*.js))
+ALL_SVG := $(patsubst res/%.svg,public/%.svg,$(wildcard res/*.svg))
+
+all: public/index.html
+
+static: css js svg
+
+css: $(ALL_CSS)
+
+js: $(ALL_JS)
+
+svg: $(ALL_SVG)
+
+public:
+	mkdir public
+
+public/index.html: static public public/audios \
+		res/index.html res/page.html \
+		res/song.html res/song_li.html res/song_redir.html
 	python3 src/latex_scanner.py
 
+public/audios: audios public
+	rm -f public/audios
+	ln -s ../audios public/audios
+
+public/%.css: res/%.less
+	lessc $< $@
+
+public/%: res/%
+	cp $< $@
+
 clean:
 	rm -rf public

res/colors.less

@@ -0,0 +1,12 @@
+@nochordscolor: #FBB;
+@nochordscolor-hover: #FAA;
+@title: #369;
+@subtitle: #444;
+@text: #333;
+@text-hover: #607D8B;
+@secondary: #EEE;
+@secondary-hover: #CCC;
+@chord-color: darkgreen;
+
+@transition: .5s;
+@border-radius: 4px;

res/index.css

@@ -1,62 +0,0 @@
-.songs {
-    margin: 0 0 2em 0;
-    list-style-type: none;
-    padding: 0;
-}
-
-.songs li {
-    cursor: pointer;
-    position: relative;
-    left: 0;
-    background-color: #EEE;
-    margin: .5em;
-    padding: .3em 0;
-    min-height: 1.6em;
-    border-radius: 4px;
-}
-
-.songs li a {
-    color: inherit;
-    text-decoration: inherit;
-}
-
-.songs li:hover {
-    color: #607D8B;
-    background-color: #DDD;
-    transition-duration: 500ms;
-}
-
-/* .songs li.selected {
-    background-color: #CFD8DC;
-    transition-duration: 100ms;
-}
-
-.songs li.selected:hover {
-    background-color: #BBD8DC;
-    color: white;
-    transition-duration: 500ms;
-} */
-
-.songs li.hasChords {
-    background-color: #FBB;
-}
-
-.songs li.hasChords:hover {
-    color: #607D8B;
-    background-color: #FAA;
-}
-
-.songs .numberBadge {
-    display: inline-block;
-    font-size: small;
-    color: white;
-    padding: 0.8em 0.7em 0 0.7em;
-    background-color: #405061;
-    line-height: 1em;
-    position: relative;
-    left: -1px;
-    top: -4px;
-    min-height: 1.8em;
-    margin-right: .8em;
-    border-radius: 4px 0 0 4px;
-}

res/index.html

@@ -1,4 +1,5 @@
 <h2>Índice</h2>
-<ul class="songs">
+<ol class="songs">
-    %s
+    Las canciones sin acordes están marcadas en <span class="hasChords">rojo</span>.
-</ul>
+    {list_content}
+</ol>

res/index.less

@@ -0,0 +1,37 @@
+@import "colors";
+
+.songs {
+    list-style: none;
+    padding: 0;
+    > a {
+        color: inherit;
+        text-decoration: none;
+        > li {
+            background-color: @secondary;
+            margin: .5em;
+            padding: .6em;
+            border-radius: @border-radius;
+            .number {
+                font-weight: bolder;
+                color: black;
+            }
+            &:hover {
+                color: @text-hover;
+                background-color: @secondary-hover;
+                transition-duration: @transition;
+            }
+            &.hasChords {
+                background-color: @nochordscolor;
+                &:hover {
+                    color: @text-hover;
+                    background-color: @nochordscolor-hover;
+                }
+            }
+        }
+    }
+}
+span.hasChords {
+    background-color: @nochordscolor;
+    padding: 0.3em 0.4em;
+    border-radius: @border-radius;
+}

res/main.css

@@ -1,44 +0,0 @@
-h1 {
-    color: #369;
-    font-size: 250%;
-}
-h2, h3 {
-    color: #444;
-    font-weight: lighter;
-}
-body {
-    font-family: Helvetica, Arial, sans-serif;
-    margin: 2em;
-    color: #333;
-}
-
-.nav * {
-    display: inline;
-}
-
-.nav li {
-    padding: 0.5em;
-    margin: 0.2em;
-    background: #eee;
-    border-radius: 5px;
-}
-
-.nav li:hover {
-    background: #ccc;
-    transition-duration: 500ms;
-}
-
-.nav li.selected {
-    background: #bbb;
-    transition-duration: 100ms;
-}
-
-.nav .selected a {
-    color: #111;
-    transition-duration: 100ms;
-}
-
-.nav a {
-    color: #333;
-    text-decoration: none;
-}

res/main.less

@@ -0,0 +1,56 @@
+@import "colors";
+
+h1 {
+    color: @title;
+    margin-inline: auto;
+    width: max-content;
+    max-width: 100%;
+    text-align: center;
+}
+
+h2, h3 {
+    color: @subtitle;
+    font-weight: lighter;
+}
+
+footer {
+    text-align: center;
+}
+
+body {
+    font-family: Helvetica, Arial, sans-serif;
+    color: @text;
+    max-width: 75em;
+    margin: 1em;
+    @media (min-width: 75em + 1em) {
+        margin: auto;
+    }
+}
+
+nav {
+    margin-inline: auto;
+    width: max-content;
+    max-width: 100%;
+    > ul {
+        padding-inline-start: 0px;
+        > li {
+            display: inline-block;
+        }
+    }
+}
+
+a {
+    text-decoration: none;
+    > span {
+        color: @text;
+        padding: 0.5em;
+        margin: 0.2em;
+        display: inline-block;
+        background: @secondary;
+        border-radius: @border-radius;
+        &:hover {
+            background: @secondary-hover;
+            transition-duration: @transition;
+        }
+    }
+}

res/page.html

@@ -4,24 +4,27 @@
     <meta charset="UTF-8">
     <title>Cancionero - Parroquia San Leandro</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    %s
+    {css}
 </head>
 <body>
     <header>
         <h1>Cancionero San Leandro</h1>
         <nav class="nav">
             <ul>
-                <li><a href="https://sanleandro-obispo.net/">Parroquia San Leandro</a></li>
+                <li><a href="https://sanleandro-obispo.net/"><span>Parroquia San Leandro</span></a></li>
-                <li><a href="https://nube.sanleandro-obispo.net/s/X23Jzz5A6dpCfr2">Grabaciones</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/">Cancionero en PDF</a></li>
+                <li><a href="https://sanleandro-obispo.net/cancionero/"><span>Cancionero en PDF</span></a></li>
             </ul>
         </nav>
     </header>
     <main>
-        %s
+        {main}
     </main>
     <footer>
-        <p>Canciones del <a href="https://sanleandro-obispo.net/cancionero">Cancionero</a> de la <a href="https://sanleandro-obispo.net">Parroquia San Leandro</a></p>
+        <p>
+            &copy; 2020 Carlos Galindo, Parroquia San Leandro
+            <a href="https://gitlab.com/parroquia-san-leandro/cancionero-web"><span>Código fuente</span></a>
+        </p>
     </footer>
 </body>
 </html>

res/song.html

@@ -1,9 +1,9 @@
 <div class="song">
     <script async src="../transpose.js"></script>
     <script async src="../sizes.js"></script>
-    <h2>%s</h2>
+    <h2>{name}</h2>
-    %s
+    {author}
-    %s
+    {origin}
     <h3>Ajustes</h3>
     <div>
 		<label>Cambiar tamaño de letra </label>
@@ -34,15 +34,15 @@
         <button class="small" onclick="transposeAdd(2)">+2</button>
         <button onclick="transpose(0)">Reset</button>
     </div>
-    %s
+    {capo_settings}
     <h3>Canción</h3>
     <div id="wholeSongDiv">
-        %s
+        {song_html}
     </div>
     <div>
-        %s
+        {audios_header}
-        %s
+        {audios_html}
     </div>
-    <a href="https://gitlab.com/parroquia-san-leandro/cancionero-25/blob/master/%s">Ver archivo original</a>
+    <a href="https://gitlab.com/parroquia-san-leandro/cancionero-25/blob/master/{latex_file}"><span>Ver archivo original (LaTeX)</span></a>
-    <button onclick="window.location = window.location.toString().slice(0, window.location.toString().lastIndexOf('/')) + '/../'">Atrás</button>
+    <a href="../"><span>Atrás</span></a>
 </div>

res/song.less

@@ -1,6 +1,8 @@
+@import "colors.less";
+
 table.chordedline {
     border-spacing: 0px;
-    display: inline;
+    display: inline-block;
 }
 
 .song div {
@@ -13,36 +15,21 @@ table.chordedline {
 
 .chord {
     font-style: italic;
-    color: darkgreen;
+    color: @chord-color;
 }
 
-.chorus {
+div.chorus {
     font-weight: bold;
     border-left: black 2px solid;
-    padding-left: 0.5em !important;
-}
-
-.chorus div {
     padding-left: 0.5em;
-}
+    div {
-
+        padding-left: 0.5em;
-.chorus table {
+    }
+    table {
         margin-left: 0;
         padding-left: 0;
         padding-right: 0;
-}
+    }
-
-.lrep {
-    -moz-transform: scaleX(-1);
-    -o-transform: scaleX(-1);
-    -webkit-transform: scaleX(-1);
-    transform: scaleX(-1);
-    filter: FlipV;
-    -ms-filter: "FlipV";
-    background-image: url(repeat-sign.svg);
-    display: inline-block;
-    width: 1em;
-    height: 2em;
 }
 
 .rrep {
@@ -52,14 +39,40 @@ table.chordedline {
     height: 2em;
 }
 
-.rep {
+.lrep {
-    font-style: italic;
+    -moz-transform: scaleX(-1);
+    -o-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+    filter: FlipV;
+    -ms-filter: "FlipV";
+    .rrep();
 }
 
-button.small {
+.rep {
-    padding: 0.1em;
+    font-style: italic;
 }
 
 .echo {
     font-style: italic;
 }
+
+button, select#transposeSelect {
+    min-width: 2em;
+    min-height: 2em;
+    padding: .4em;
+    border-style: none;
+    border-radius: @border-radius;
+    background-color: @secondary;
+    &:hover {
+        background-color: @secondary-hover;
+        transition-duration: @transition;
+    }
+}
+
+select#transposeSelect {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    font-weight: bold;
+    color: black;
+}

res/song_li.html

@@ -1,6 +1,6 @@
-<li%s>
+<a href="{url}">
-    <a href="%s">
+    <li {li_class}>
-        <span class="numberBadge">%d. </span>
+        <span class="number">{number}.</span>
-        %s%s%s
+        {name}{author}{origin}
-    </a>
+    </li>
-</li>
+</a>

res/song_redir.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta http-equiv="refresh" content="0; url = {0}">
+        <meta http-equiv="refresh" content="0; url = {url}">
     </head>
     <body>
-        <a href="{0}">Redirigiendo a la canción, haz click aquí si no sucede de forma automática.</a>
+        <a href="{url}">Redirigiendo a la canción, haz click aquí si no sucede de forma automática.</a>
     </body>
 </html>

src/latex_scanner.py

@@ -3,6 +3,7 @@ from audio_scanner import find_audios
 from os.path import join
 from pathlib import Path
 import shutil
+import urllib.parse
 import os
 import re
 
@@ -232,26 +233,28 @@ class SongLoader:
 
     def print_index(self, index_file="index.html"):
         self.songs = sorted(self.songs, key=lambda s: s.number)
-        body = index_template % join_list([index_per_song_template %
+        song_list = join_list([index_per_song_template.format(
-                                           (' class="hasChords"' if not s.chorded() else '',
+                    url=s.get_url(),
-                                            s.get_url(),
+                    li_class=' class="hasChords"' if not s.chorded() else '',
-                                            s.number, s.name,
+                    number=s.number,
-                                            " por %s " % s.author if s.author else "",
+                    name=s.name,
-                                            " basado en %s " % s.origin if s.origin else "")
+                    author=" por %s " % s.author if s.author else "",
+                    origin=" basado en %s " % s.origin if s.origin else "")
                     for s in self.songs])
+        body = index_template.format(list_content=song_list)
         with open(index_file, 'w') as f:
-            f.write(page_template % (index_css, body))
+            f.write(page_template.format(css=index_css, main=body))
 
     def print_songs(self, directory="."):
         for song in self.songs:
             num_dir = join(directory, "%03d" % (song.number))
             mkdir(num_dir)
             with open(join(num_dir, "index.html"), 'w') as f:
-                f.write(song_redir_template.format("../" + song.get_url()))
+                f.write(song_redir_template.format(url=urllib.parse.quote("../" + song.get_url())))
             song_dir = join(directory, song.get_url())
             mkdir(song_dir)
             with open(join(song_dir, "index.html"), 'w') as f:
-                f.write(page_template % (song_css, str(song)))
+                f.write(page_template.format(css=song_css, main=str(song)))
 
 
 def copy_static(source_dir, target_dir):

src/song_types.py

@@ -32,17 +32,17 @@ class Song:
         self.category = category
 
     def __str__(self):
-        return song_template % (
+        return song_template.format(
-            self.name,
+            name=self.name,
-            "<div>Autor: %s</div>" % self.author if self.author else "",
+            author="<div>Autor: %s</div>" % self.author if self.author else "",
-            "<div>Basada en: %s</div>" % self.origin if self.origin else "",
+            origin="<div>Basada en: %s</div>" % self.origin if self.origin else "",
-            """<div *ngIf="song.capo != 0"><span class="capo">Tono original: Cejilla {s.capo}</span>
+            capo_settings="""<div><span class="capo">Tono original: Cejilla {s.capo}</span>
             <button style="margin-left: 0.5em;" onclick="transpose({s.capo})">Transponer para quitarla</button></div>"""
                 .format(s=self) if self.capo != 0 else "",
-            join_list(self.verses),
+            song_html=join_list(self.verses),
-            "<h3>Audios</h3>" if len(self.audios) > 0 else "",
+            audios_header="<h3>Audios</h3>" if len(self.audios) > 0 else "",
-            join_list(self.audios),
+            audios_html=join_list(self.audios),
-            self.latex_file)
+            latex_file=self.latex_file)
 
     def set_capo(self, capo):
         self.capo = capo
@@ -230,7 +230,7 @@ class Audio:
     def __str__(self):
         return """
         <div>
-            Audio del %s (<a href="%s">descarga</a>)
+            Audio del %s <a href="%s"><span>Descargar</span></a>
             <audio controls style='width: 100%%;'>
                 <source src='%s' type='audio/mpeg'/>
             </audio>