From 3f9f62db2ed64d5a30c52aa48856b4b010b6aaa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Mon, 8 Jul 2024 09:27:53 +0200
Subject: [PATCH] Change modal layout

---
 css/app.css |  3 ++
 js/ui.js    | 82 ++++++++++++++++++++++++++++++++++-------------------
 2 files changed, 56 insertions(+), 29 deletions(-)

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');