From c7bca76c8c9650f3d2ef426643442933139db44c Mon Sep 17 00:00:00 2001 From: Carlos Galindo Date: Sat, 12 Dec 2020 16:20:41 +0100 Subject: [PATCH] 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 | 35 ++++++++++++++++-- res/colors.less | 12 ++++++ res/index.css | 62 ------------------------------- res/index.html | 7 ++-- res/index.less | 37 +++++++++++++++++++ res/main.css | 44 ---------------------- res/main.less | 56 ++++++++++++++++++++++++++++ res/page.html | 15 +++++--- res/song.html | 18 ++++----- res/{song.css => song.less} | 73 ++++++++++++++++++++++--------------- res/song_li.html | 12 +++--- res/song_redir.html | 4 +- src/latex_scanner.py | 23 +++++++----- src/song_types.py | 20 +++++----- 14 files changed, 233 insertions(+), 185 deletions(-) create mode 100644 res/colors.less delete mode 100644 res/index.css create mode 100644 res/index.less delete mode 100644 res/main.css create mode 100644 res/main.less rename res/{song.css => song.less} (50%) diff --git a/Makefile b/Makefile index f575c1e..3b6fd8a 100644 --- a/Makefile +++ b/Makefile @@ -1,7 +1,36 @@ -all: clean - mkdir -p public audios - ln -s ../audios public/audios +.PHONY=static all clean svg js css + +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 diff --git a/res/colors.less b/res/colors.less new file mode 100644 index 0000000..4e4d052 --- /dev/null +++ b/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; diff --git a/res/index.css b/res/index.css deleted file mode 100644 index 5c71a9c..0000000 --- a/res/index.css +++ /dev/null @@ -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; -} diff --git a/res/index.html b/res/index.html index 1cd14ce..69b337d 100644 --- a/res/index.html +++ b/res/index.html @@ -1,4 +1,5 @@

Índice

- +
    + Las canciones sin acordes están marcadas en rojo. + {list_content} +
diff --git a/res/index.less b/res/index.less new file mode 100644 index 0000000..a26c9f3 --- /dev/null +++ b/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; +} diff --git a/res/main.css b/res/main.css deleted file mode 100644 index 0372680..0000000 --- a/res/main.css +++ /dev/null @@ -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; -} diff --git a/res/main.less b/res/main.less new file mode 100644 index 0000000..c3d064a --- /dev/null +++ b/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; + } + } +} diff --git a/res/page.html b/res/page.html index b341531..c985dbb 100644 --- a/res/page.html +++ b/res/page.html @@ -4,24 +4,27 @@ Cancionero - Parroquia San Leandro - %s + {css}

Cancionero San Leandro

- %s + {main}
diff --git a/res/song.html b/res/song.html index 299dad4..4015d07 100644 --- a/res/song.html +++ b/res/song.html @@ -1,9 +1,9 @@
-

%s

- %s - %s +

{name}

+ {author} + {origin}

Ajustes

@@ -34,15 +34,15 @@
- %s + {capo_settings}

Canción

- %s + {song_html}
- %s - %s + {audios_header} + {audios_html}
- Ver archivo original - + Ver archivo original (LaTeX) + Atrás
diff --git a/res/song.css b/res/song.less similarity index 50% rename from res/song.css rename to res/song.less index e63f9e1..d0f0425 100644 --- a/res/song.css +++ b/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; -} - -.chorus 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; + div { + padding-left: 0.5em; + } + table { + margin-left: 0; + padding-left: 0; + padding-right: 0; + } } .rrep { @@ -52,14 +39,40 @@ table.chordedline { height: 2em; } -.rep { - font-style: italic; +.lrep { + -moz-transform: scaleX(-1); + -o-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + filter: FlipV; + -ms-filter: "FlipV"; + .rrep(); } -button.small { - padding: 0.1em; +.rep { + 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; +} diff --git a/res/song_li.html b/res/song_li.html index d771c9b..7fe2e0e 100644 --- a/res/song_li.html +++ b/res/song_li.html @@ -1,6 +1,6 @@ - - - %d. - %s%s%s - - + +
  • + {number}. + {name}{author}{origin} +
    • +     \ No newline at end of file diff --git a/res/song_redir.html b/res/song_redir.html index ad1be43..ccebfd0 100644 --- a/res/song_redir.html +++ b/res/song_redir.html @@ -1,9 +1,9 @@ - + - Redirigiendo a la canción, haz click aquí si no sucede de forma automática. + Redirigiendo a la canción, haz click aquí si no sucede de forma automática. diff --git a/src/latex_scanner.py b/src/latex_scanner.py index f17dcb7..792ef58 100644 --- a/src/latex_scanner.py +++ b/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 % - (' class="hasChords"' if not s.chorded() else '', - s.get_url(), - s.number, s.name, - " por %s " % s.author if s.author else "", - " basado en %s " % s.origin if s.origin else "") - for s in self.songs]) + song_list = join_list([index_per_song_template.format( + url=s.get_url(), + li_class=' class="hasChords"' if not s.chorded() else '', + number=s.number, + name=s.name, + 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): diff --git a/src/song_types.py b/src/song_types.py index cd80148..217ce54 100644 --- a/src/song_types.py +++ b/src/song_types.py @@ -32,17 +32,17 @@ class Song: self.category = category def __str__(self): - return song_template % ( - self.name, - "
    Autor: %s
    " % self.author if self.author else "", - "
    Basada en: %s
    " % self.origin if self.origin else "", - """
    Tono original: Cejilla {s.capo} + return song_template.format( + name=self.name, + author="
    Autor: %s
    " % self.author if self.author else "", + origin="
    Basada en: %s
    " % self.origin if self.origin else "", + capo_settings="""
    Tono original: Cejilla {s.capo}
    """ .format(s=self) if self.capo != 0 else "", - join_list(self.verses), - "

    Audios

    " if len(self.audios) > 0 else "", - join_list(self.audios), - self.latex_file) + song_html=join_list(self.verses), + audios_header="

    Audios

    " if len(self.audios) > 0 else "", + audios_html=join_list(self.audios), + latex_file=self.latex_file) def set_capo(self, capo): self.capo = capo @@ -230,7 +230,7 @@ class Audio: def __str__(self): return """
    - Audio del %s (descarga) + Audio del %s Descargar