diff --git a/css/app.css b/css/app.css index bf91ca5..d3f91e1 100644 --- a/css/app.css +++ b/css/app.css @@ -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; diff --git a/js/ui.js b/js/ui.js index 42d7322..2a15242 100644 --- a/js/ui.js +++ b/js/ui.js @@ -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');