parroquia-san-leandro/cancionero-web
1
0
Fork 0
mirror of https://gitlab.com/parroquia-san-leandro/cancionero-web.git synced 2024-12-22 08:43:33 +01:00
Code Releases Activity

Move to less, improved style, fixed bugs

Browse source 
* 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 2020-12-12 16:20:41 +01:00
parent 67bedb49e4
commit c7bca76c8c
14 changed files with 233 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
Makefile
View file

@ -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
View 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;

62
res/index.css
View file

@ -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;
}

7
res/index.html
View file

@ -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
View 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
View file

@ -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
View 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;
}
}
}

15
res/page.html
View file

@ -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>
&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>

18
res/song.html
View file

@ -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>

63
res/song.css → res/song.less
View file

@ -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 {
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;
}

10
res/song_li.html
View file

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

4
res/song_redir.html
View file

@ -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>

21
src/latex_scanner.py
View file

@ -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):

20
src/song_types.py
View file

@ -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>