parroquia-san-leandro/cancionero-web
1
0
Fork 0
mirror of https://gitlab.com/parroquia-san-leandro/cancionero-web.git synced 2025-04-26 15:16:19 +02: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
Download patch file Download diff file Expand all files Collapse all files

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>

73
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;
}
.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;
}

12
res/song_li.html
View file

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

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>