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 { .modal-content {
width: 60vw; width: 60vw;
} }
.has-bottom-border {
border-bottom: 1px #aaa solid;
}
/* Custom controls */ /* Custom controls */
.site-control { .site-control {
padding-top: 3px; padding-top: 3px;

82
js/ui.js
View File

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