nicolo/caprigis
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Change modal layout

Browse Source
This commit is contained in:
Nicolò P 2024-07-08 09:27:53 +02:00
parent f2f6e7c359
commit 3f9f62db2e
2 changed files with 56 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/app.css
View File

@ -114,6 +114,9 @@ a:visited {
.modal-content {
width: 60vw;
}
.has-bottom-border {
border-bottom: 1px #aaa solid;
}
/* Custom controls */
.site-control {
padding-top: 3px;

82
js/ui.js
View File

@ -75,7 +75,12 @@ UI.toggleMenu = function (triggerId) {
UI.openModal = async function (data) {
const modal = document.querySelector('.modal');
// DEBUG
let table = `<table class="table is-fullwidth is-striped">
let content = `<div class="container has-bottom-border">
<details>
<summary class="is-clickable has-text-centered p-2 is-size-5">
Scheda del sito
</summary>
<table class="table is-fullwidth is-striped">
<tr><th>Denominazione</th><td>${data.denominazione}</td></tr>
<tr><th>Località</th><td>${data.localita}</td></tr>
<tr><th>Indirizzo</th><td>${data.indirizzo}</td></tr>
@ -93,51 +98,70 @@ UI.openModal = async function (data) {
<tr><th>Stato di conservazione</th><td>${data.stato_conserv}</td></tr>
<tr><th>Documenti</th><td>${data.documenti}</td></tr>
<tr><th>Descrizione</th><td><details><summary class="is-clickable">Leggi tutto</summary>${data.descrizione}</details></td></tr>
`;
</table>
</details>
</div>`;
if (data.documents.length) {
table += `<tr>
<th class="has-text-centered">Pubblicazioni</th>
<td><ul>
let publications = data.documents.filter(d => d.tipo === 'pubblicazione');
let docs = data.documents.filter(d => d.tipo === 'documentazione');
content += `<div class="has-bottom-border"><details>
<summary class="is-clickable has-text-centered p-2 is-size-5">
Documentazione di archivio
</summary>
<div class="p-2">
<ol class="ml-2 pl-4">
`;
for (const doc of data.documents) {
table += `
for (const doc of docs) {
content += `
<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
`;
}
table += '</ul></td></tr>';
content += '</ol></div></details></div>';
content += `<div class="has-bottom-border"><details>
<summary class="is-clickable has-text-centered p-2 is-size-5">
Pubblicazioni del progetto
</summary>
<div class="p-2">
<ol class="ml-2 pl-4">
`;
for (const doc of publications) {
content += `
<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
`;
}
content += '</ol></div></details></div>';
}
if (data.surveys.length) {
table += `<tr><th class="has-text-centered" colspan="2">Elaborazioni CNR da rilievi</th></tr>`;
table += `
<tr>
<td colspan="2" style="max-width: 70%">
<p class="is-size-6 has-text-centered p-2">Cliccare sull'immagine per aprire la gallery</p>
<figure class="image is-clickable" id="gallery-1">
<img src="img/${data.surveys[0].filename}" />
content += `<div class="has-text-centered has-bottom-border">
<p class="is-size-5 mt-3">Elaborazioni CNR da rilievi</p>`;
content += `
<div style="max-width: 70%; margin: 0 auto">
<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
<figure class="has-text-centered is-clickable" id="gallery-1">
<img src="img/${data.surveys[0].filename}" width="300"/>
<figcaption class="p-2 has-text-centered">${data.surveys[0].didascalia}</figcaption>
</figure>
</td>
</tr>
</div>
</div>
`;
}
if (data.photos.length) {
table += `<tr><th class="has-text-centered" colspan="2">Fotografie</th></tr>`;
table += `
<tr>
<td colspan="2" style="max-width: 70%">
<p class="is-size-6 has-text-centered p-2">Cliccare sull'immagine per aprire la gallery</p>
<figure class="image is-clickable" id="gallery-2">
<img src="img/${data.photos[0].filename}" />
content += `<div class="content has-text-centered">
<p class="is-size-5 mt-3">Fotografie</p>`;
content += `
<div style="max-width: 70%; margin: 0 auto">
<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
<figure class="is-clickable has-text-centered" id="gallery-2">
<img src="img/${data.photos[0].filename}" width="300"/>
<figcaption class="p-2 has-text-centered">${data.photos[0].didascalia}</figcaption>
</figure>
</td>
</tr>
</div>
</div>
`;
// Open gallery when image is clicked
}
table += '</table>';
modal.querySelector('.modal-content').innerHTML = table;
modal.querySelector('.modal-content').innerHTML = content;
modal.classList.add('is-active');
const closeBtn = modal.querySelector('.modal-close');
const modalBg = modal.querySelector('.modal-background');