mirror of
https://gitlab.com/parroquia-san-leandro/cancionero-web.git
synced 2024-12-22 08:43:33 +01:00
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
This commit is contained in:
Carlos Galindo
parent
67bedb49e4
commit
c7bca76c8c
14 changed files with 233 additions and 185 deletions
35
Makefile
35
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
|
||||
|
|
|
|||
12
res/colors.less
Normal file
12
res/colors.less
Normal file
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<h2>Índice</h2>
|
||||
<ul class="songs">
|
||||
%s
|
||||
</ul>
|
||||
<ol class="songs">
|
||||
Las canciones sin acordes están marcadas en <span class="hasChords">rojo</span>.
|
||||
{list_content}
|
||||
</ol>
|
||||
|
|
|
|||
37
res/index.less
Normal file
37
res/index.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
44
res/main.css
44
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;
|
||||
}
|
||||
56
res/main.less
Normal file
56
res/main.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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://nube.sanleandro-obispo.net/s/X23Jzz5A6dpCfr2">Grabaciones</a></li>
|
||||
<li><a href="https://sanleandro-obispo.net/cancionero/">Cancionero en PDF</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"><span>Grabaciones</span></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>
|
||||
© 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>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<div class="song">
|
||||
<script async src="../transpose.js"></script>
|
||||
<script async src="../sizes.js"></script>
|
||||
<h2>%s</h2>
|
||||
%s
|
||||
%s
|
||||
<h2>{name}</h2>
|
||||
{author}
|
||||
{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
|
||||
%s
|
||||
{audios_header}
|
||||
{audios_html}
|
||||
</div>
|
||||
<a href="https://gitlab.com/parroquia-san-leandro/cancionero-25/blob/master/%s">Ver archivo original</a>
|
||||
<button onclick="window.location = window.location.toString().slice(0, window.location.toString().lastIndexOf('/')) + '/../'">Atrás</button>
|
||||
<a href="https://gitlab.com/parroquia-san-leandro/cancionero-25/blob/master/{latex_file}"><span>Ver archivo original (LaTeX)</span></a>
|
||||
<a href="../"><span>Atrás</span></a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
div {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<li%s>
|
||||
<a href="%s">
|
||||
<span class="numberBadge">%d. </span>
|
||||
%s%s%s
|
||||
</a>
|
||||
</li>
|
||||
<a href="{url}">
|
||||
<li {li_class}>
|
||||
<span class="number">{number}.</span>
|
||||
{name}{author}{origin}
|
||||
</li>
|
||||
</a>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 "")
|
||||
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):
|
||||
|
|
|
|||
|
|
@ -32,17 +32,17 @@ class Song:
|
|||
self.category = category
|
||||
|
||||
def __str__(self):
|
||||
return song_template % (
|
||||
self.name,
|
||||
"<div>Autor: %s</div>" % self.author if self.author else "",
|
||||
"<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>
|
||||
return song_template.format(
|
||||
name=self.name,
|
||||
author="<div>Autor: %s</div>" % self.author if self.author else "",
|
||||
origin="<div>Basada en: %s</div>" % self.origin if self.origin else "",
|
||||
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),
|
||||
"<h3>Audios</h3>" if len(self.audios) > 0 else "",
|
||||
join_list(self.audios),
|
||||
self.latex_file)
|
||||
song_html=join_list(self.verses),
|
||||
audios_header="<h3>Audios</h3>" 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 """
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue