mirror of
https://gitlab.com/parroquia-san-leandro/cancionero-web.git
synced 2026-01-28 13:07:58 +01:00
preparar-misa: estilo y logica botones.
This commit is contained in:
parent
eefbf5449b
commit
67a3629c8a
7 changed files with 119 additions and 29 deletions
|
|
@ -67,7 +67,9 @@ div.chorus, p.chorus {
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
button, select.transposeSelect {
|
||||
button,
|
||||
select,
|
||||
input[type="button"] {
|
||||
min-width: 2em;
|
||||
min-height: 2em;
|
||||
padding: .4em;
|
||||
|
|
@ -79,7 +81,8 @@ button, select.transposeSelect {
|
|||
color: @text-dark;
|
||||
background-color: @secondary-dark;
|
||||
}
|
||||
&:hover {
|
||||
&:hover,
|
||||
&.pair-sub:hover ~ &.pair-sup {
|
||||
background-color: @secondary-hover;
|
||||
transition-duration: @transition;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -97,3 +100,26 @@ select.transposeSelect {
|
|||
color: @text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-reverse {
|
||||
display: inline-flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.buttonpair.flex-reverse button.right,
|
||||
.buttonpair.flex-reverse button.left {
|
||||
border: 1px solid @secondary-hover;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: @secondary-hover-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonpair.flex-reverse button.right {
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
border-width: 0 0 0 2px;
|
||||
}
|
||||
|
||||
.buttonpair.flex-reverse button.left {
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
border-width: 0 2px 0 0;
|
||||
}
|
||||
1
res/static/svg/down.svg
Normal file
1
res/static/svg/down.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
|
||||
|
After Width: | Height: | Size: 450 B |
1
res/static/svg/new.svg
Normal file
1
res/static/svg/new.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/></svg>
|
||||
|
After Width: | Height: | Size: 432 B |
1
res/static/svg/random.svg
Normal file
1
res/static/svg/random.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm64 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm64 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
|
||||
|
After Width: | Height: | Size: 471 B |
1
res/static/svg/trash.svg
Normal file
1
res/static/svg/trash.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>
|
||||
|
After Width: | Height: | Size: 908 B |
1
res/static/svg/up.svg
Normal file
1
res/static/svg/up.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
|
||||
|
After Width: | Height: | Size: 451 B |
|
|
@ -12,6 +12,30 @@
|
|||
.hidePreview .preview {
|
||||
display: none;
|
||||
}
|
||||
#songlist > *,
|
||||
.mainButtons input[type="button"],
|
||||
.mainButtons button {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
label.forCheckbox {
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
button.icon img {
|
||||
width: 1em;
|
||||
height: 0.9em;
|
||||
pointer-events: none;
|
||||
}
|
||||
img.redFilter {
|
||||
filter: invert(55%) sepia(67%) saturate(876%) hue-rotate(-40deg) brightness(90%) contrast(103%);
|
||||
}
|
||||
img.greenFilter {
|
||||
filter: invert(61%) sepia(78%) saturate(626%) hue-rotate(43deg) brightness(70%) contrast(102%);
|
||||
}
|
||||
span.songSelector {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
column-gap: 0.3em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -22,35 +46,48 @@
|
|||
<input type="button" onclick="shareList(event)" value="compartirla">.</p>
|
||||
<p>Si prefieres crear un PDF, <a href="https://cgj.es/cancionero-generador/">pulsa aquí</a>.</p>
|
||||
<p>
|
||||
<label><input class="init" id="controlsCheckbox" type="checkbox" onchange="toggleControls(event)" checked> Modificar la lista</label>
|
||||
<label><input class="init" id="previewCheckbox" type="checkbox" onchange="togglePreview(event)"> Ver las canciones</label>
|
||||
<label><input id="showChords" type="checkbox" checked onchange="showChords(this.checked)"/> Mostrar acordes</label>
|
||||
<label class="forCheckbox"><input class="init" id="controlsCheckbox" type="checkbox" onchange="toggleControls(event)" checked> Modificar la lista</label>
|
||||
<label class="forCheckbox"><input class="init" id="previewCheckbox" type="checkbox" onchange="togglePreview(event)"> Ver las canciones</label>
|
||||
<label class="forCheckbox"><input id="showChords" type="checkbox" checked onchange="showChords(this.checked)"/> Mostrar acordes</label>
|
||||
</p>
|
||||
<p class="controls">
|
||||
<input type="button" value="Borrar todas" onclick="clearSongs()">
|
||||
<input type="button" value="Añadir canción" onclick="addSong()">
|
||||
<input type="button" value="Añadir canción aleatoria" onclick="addRandomSong()">
|
||||
<input type="button" value="Añadir la primera canción de cada sección" onclick="addFirstSongs()">
|
||||
<input type="button" value="Añadir una canción por sección (aleatorias)" onclick="addRandomSongs()">
|
||||
<p class="controls mainButtons">
|
||||
Añadir
|
||||
<span class="buttonpair flex-reverse">
|
||||
<button class="icon right pair-sub" title="Añadir una canción aleatoria" onclick="addRandomSong()">
|
||||
aleatoria <img class="greenFilter" src="svg/random.svg"></button>
|
||||
<button class="icon left pair-sup" title="Añadir una canción vacía" onclick="addSong()">
|
||||
<img class="greenFilter" src="svg/new.svg"> una canción</button>
|
||||
</span>
|
||||
<br>
|
||||
Añadir
|
||||
<span class="buttonpair flex-reverse">
|
||||
<button class="icon right pair-sub" title="Añade una canción aleatoria por categoría" onclick="addRandomSongs()">
|
||||
aleatorias <img class="greenFilter" src="svg/random.svg"></button>
|
||||
<button class="icon left pair-sup" title="Añade una canción por categoría" onclick="addFirstSongs()">
|
||||
<img class="greenFilter" src="svg/new.svg"> varias canciones</button>
|
||||
</span>
|
||||
<br>
|
||||
<button class="icon" onclick="clearSongs()"><img class="redFilter" src="svg/trash.svg"> Borrar todas</button>
|
||||
</p>
|
||||
<ul id="songlist"></ul>
|
||||
<div id="songlist"></div>
|
||||
<input type="button" onclick="shareList(event)" value="Compartir enlace al cancionero">
|
||||
<dialog id="sharedialog">
|
||||
<p>Copia y comparte el enlace: <a id="sharelink" href="">tus canciones</a></p>
|
||||
<input type="button" onclick="event.target.parentElement.close()" value="Cerrar">
|
||||
</dialog>
|
||||
<template id='songtemplate'>
|
||||
<li><span class="controls"><select name="songs[]" required onchange="songSelect(event)">
|
||||
<div><span class="controls songSelector"><select name="songs[]" required onchange="songSelect(event)">
|
||||
<option value="">Selecciona una canción</option>{% for category, songs in categorized_songs %}
|
||||
<optgroup label="— {{ category }}">{% for s in songs %}
|
||||
<option value="{{ s.number }}">{{ s.number }}. {{ s.name }}</option>{% endfor %}
|
||||
</optgroup>{% endfor %}
|
||||
</select>
|
||||
<input type="button" value="Subir" onclick="songUp(event)">
|
||||
<input type="button" value="Bajar" onclick="songDown(event)">
|
||||
<input type="button" value="Quitar" onclick="songDelete(event)"></span>
|
||||
<div class="preview"></div>
|
||||
</li>
|
||||
<button class="icon" title="Subir" onclick="songUp(event)"><img class="greenFilter" src="svg/up.svg"></button>
|
||||
<button class="icon" title="Bajar" onclick="songDown(event)"><img class="greenFilter" src="svg/down.svg"></button>
|
||||
<button class="icon" title="Quitar" onclick="songDelete(event)"><img class="redFilter" src="svg/trash.svg"></button>
|
||||
</span>
|
||||
<div class="preview"></div>
|
||||
</div>
|
||||
</template>
|
||||
</main>
|
||||
<script>
|
||||
|
|
@ -148,27 +185,49 @@ function addSongs(random) {
|
|||
li.parentElement.removeChild(li);
|
||||
}
|
||||
|
||||
function toggleControls(event) {
|
||||
if (event.target.checked)
|
||||
document.body.classList.remove("hideControls");
|
||||
else
|
||||
document.body.classList.add("hideControls");
|
||||
}
|
||||
|
||||
function togglePreview(event) {
|
||||
if (event.target.checked)
|
||||
document.body.classList.remove("hidePreview");
|
||||
else
|
||||
document.body.classList.add("hidePreview");
|
||||
}
|
||||
|
||||
function shareList(event) {
|
||||
function getSongList() {
|
||||
const ol = document.getElementById("songlist");
|
||||
let res = [];
|
||||
for (let li of ol.childNodes) {
|
||||
let song = li.firstElementChild.firstElementChild.value;
|
||||
res.push(song);
|
||||
let value = li.firstElementChild.firstElementChild.value;
|
||||
if (value)
|
||||
res.push(value);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
function toggleControls(event) {
|
||||
if (event.target.checked) {
|
||||
document.body.classList.remove("hideControls");
|
||||
} else {
|
||||
if (getSongList().length == 0) {
|
||||
event.target.checked = true;
|
||||
} else {
|
||||
document.body.classList.add("hideControls");
|
||||
let preview = document.getElementById('previewCheckbox');
|
||||
if (!preview.checked) {
|
||||
preview.checked = true;
|
||||
preview.dispatchEvent(new Event("change"));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function togglePreview(event) {
|
||||
if (event.target.checked) {
|
||||
document.body.classList.remove("hidePreview");
|
||||
} else {
|
||||
document.body.classList.add("hidePreview");
|
||||
let controls = document.getElementById('controlsCheckbox');
|
||||
if (!controls.checked) {
|
||||
controls.checked = true;
|
||||
controls.dispatchEvent(new Event("change"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function shareList(event) {
|
||||
const res = getSongList();
|
||||
if (res.length > 0) {
|
||||
let hash = res.join(",");
|
||||
document.getElementById("sharelink").href = "#" + hash;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue