Add categories and favicon

* Reorganize resource directories (templates, less, static)
* Show categories on index
* Add favicon
This commit is contained in:
Carlos Galindo 2020-12-25 21:49:59 +01:00
parent 7e517112f7
commit 3eaed2eaa8
17 changed files with 180 additions and 64 deletions

View file

@ -0,0 +1,6 @@
<footer>
<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>

8
res/templates/head.html Normal file
View file

@ -0,0 +1,8 @@
<meta charset="UTF-8">
<title>Cancionero - Parroquia San Leandro</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" type="image/svg+xml" href="{{ path|urlencode }}/favicon.svg"/>
<link rel="stylesheet" type="text/css" href="{{ path|urlencode }}/main.css"/>
{% if specific_css %}
<link rel="stylesheet" type="text/css" href="{{ path|urlencode }}/{{ specific_css|urlencode }}"/>
{% endif %}

10
res/templates/header.html Normal file
View file

@ -0,0 +1,10 @@
<header>
<h1><a href="{{ path }}">Cancionero San Leandro</a></h1>
<nav class="nav">
<ul>
<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>

35
res/templates/index.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="es">
<head>
{% include "head.html" with path="." only %}
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
{% include "header.html" with path="." %}
<h2>Índice</h2>
<ul class="songs">
{% for category in sorted_categories %}
<a href="#{{ category|slugify }}">
<li>{{ category|title }}</li>
</a>
{% endfor %}
</ul>
Las canciones sin acordes están marcadas en <span class="noChords">rojo</span>.
<ol class="songs">
{% for category, songs in sorted_categories.items %}
<h3 id="{{ category|slugify }}">{{ category|title }}</h3>
{% for song in songs %}
<a href="{{ song.url }}">
<li {% if not song.chorded %}class="noChords"{% endif %}>
<span class="number">{{ song.number }}.</span>
{{ song.name }}
{% if song.author %} por {{ song.author }} {% endif %}
{% if song.origin %} basada en {{ song.origin }} {% endif %}
</li>
</a>
{% endfor %}
{% endfor %}
</ol>
{% include "footer.html" %}
</body>
</html>

112
res/templates/song.html Normal file
View file

@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="es">
<head>
{% include "head.html" with path=".." only %}
<link rel="stylesheet" type="text/css" href="../song.css"/>
<script async src="../transpose.js"></script>
<script async src="../sizes.js"></script>
</head>
<body>
{% include "header.html" with path=".." %}
<div class="song">
<h2>{{ song.name}}</h2>
<a href="../#{{ song.category|slugify }}"><span>Categoría: {{ song.category|title }}</span></a>
{% if song.author %}
<span>por <strong>{{ song.author }}</strong></span>
{% endif %}
{% if song.origin %}
<span>basada en: <strong>{{ song.origin }}</strong></span>
{% endif %}
<h3>Ajustes</h3>
<div>
<label>Cambiar tamaño de letra </label>
<button class="small" onclick="size(-1)">-</button>
<button class="small" onclick="size(0)">Reset</button>
<button class="small" onclick="size(+1)">+</button>
</div>
{% if song.chorded %}
<div>
<label>Transponer acordes </label>
<button class="small" onclick="transposeAdd(-2)">-2</button>
<button class="small" onclick="transposeAdd(-1)">-1</button>
<select id="transposeSelect" disabled>
<option>-6</option>
<option>-5</option>
<option>-4</option>
<option>-3</option>
<option>-2</option>
<option>-1</option>
<option selected="selected">0</option>
<option>+1</option>
<option>+2</option>
<option>+3</option>
<option>+4</option>
<option>+5</option>
<option>+6</option>
</select>
<button class="small" onclick="transposeAdd(1)">+1</button>
<button class="small" onclick="transposeAdd(2)">+2</button>
<button onclick="transpose(0)">Reset</button>
</div>
{% endif %}
{% if song.capo != 0 %}
<div>
<span class="capo">Tono original: Cejilla {{ song.capo }}</span>
<button style="margin-left: 0.5em;" onclick="transpose({{ song.capo}})">Transponer para quitarla</button>
</div>
{% endif %}
<h3>Canción</h3>
<div id="wholeSongDiv">
{% for verse in song.verses %}
<div class="{{ verse.kind }}">
{% for line in verse.lines %}
{% spaceless %}
{% for chord, lyric in line.zipped_arr %}
<table class="chordedline">
<tr class="chord">
<td rowspan="{{ chord.rowspan|default:'1' }}">
{% if chord.class %}
<span class="{{ chord.class }}"></span>
{% endif %}
{% for c in chord.chord.items %}
{% if c.chord %}
<span class="c">{{ c.text|safe }}</span>
{% else %}
<span>{{ c.text|safe }}</span>
{% endif %}
{% endfor %}
</td>
</tr>
<tr class="lyric">
<td>
{% if 'rowspan' not in chord %}
<span>{{ lyric|safe }}</span>
{% endif %}
</td>
</tr>
</table>
{% endfor %}
{% if not forloop.last %} <br/> {% endif %}
{% endspaceless %}
{% endfor %}
</div>
{% endfor %}
</div>
{% for audio in audios %}
{% if forloop.first %}
<h3>Audios</h3>
{% endif %}
<div>
Audio del {{ audio.date_text }} <a href="{{ audio.audio_file|urlencode }}"><span>Descargar</span></a>
<audio controls style='width: 100%%;'>
<source src='{{ audio.audio_file|urlencode }}' type='audio/mpeg'/>
</audio>
</div>
{% endfor %}
<a href="https://gitlab.com/parroquia-san-leandro/cancionero-25/blob/master/{{ song.latex_file|urlencode }}"><span>Ver archivo original (LaTeX)</span></a>
<a href="../"><span>Índice</span></a>
<a href="../#{{ song.category|slugify }}"><span>Categoría: {{ song.category|title }}</span></a>
</div>
{% include "footer.html" %}
</body>
</html>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="es">
<head>
{% include "head.html" with path=".." only %}
<meta http-equiv="refresh" content="0; url = ../{{ song.url|urlencode }}">
</head>
<body>
{% include "header.html" with path=".." %}
<a href="../{{ song.url|urlencode }}">Redirigiendo a la canción, haz click aquí si no sucede de forma automática.</a>
{% include "footer.html" %}
</body>
</html>