From 37f51955e65d3843c3e1d41daec377ebe35d2193 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Thu, 2 Mar 2023 17:01:53 +0100
Subject: [PATCH] Update report style (map and gallery)

---
 css/ds.css         |  2 +-
 js/ds.js           | 10 +++++-----
 js/views/report.js |  3 ++-
 report/index.html  |  7 +++++--
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/css/ds.css b/css/ds.css
index 644e086..c37fb94 100644
--- a/css/ds.css
+++ b/css/ds.css
@@ -60,7 +60,7 @@ table.table th {
     border: none;
 }
 #map {
-    height: 600px;
+    height: 400px;
 }
 
 /* Print styles */
diff --git a/js/ds.js b/js/ds.js
index 70badae..d9db858 100644
--- a/js/ds.js
+++ b/js/ds.js
@@ -1,4 +1,8 @@
 'use strict';
+/**
+* @namespace DataSpace
+*/
+const DataSpace = {};
 
 export const BASE_URL = 'http://dataspace.ispc.cnr.it';
 const RES_ENDPOINT = '/resources/';
@@ -87,17 +91,13 @@ export function printReport() {
     });
 }
 export function attachMap(coordinates, htmlId = 'map') {
-    const map = L.map(htmlId).setView(coordinates, 13);
+    const map = L.map(htmlId).setView(coordinates, 18);
 
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     }).addTo(map);
 
     L.marker(coordinates).addTo(map);
-    /*
-        .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
-        .openPopup();
-    */
 }
 /**
  * @todo Use TS to define object shape
diff --git a/js/views/report.js b/js/views/report.js
index 07eef81..b8544b4 100644
--- a/js/views/report.js
+++ b/js/views/report.js
@@ -88,7 +88,8 @@ document.addEventListener('readystatechange', async () => {
         // Create image gallery
         // TODO refactor...
         let gallery = document.querySelector('#gallery');
-        gallery.classList.remove('d-hide');
+        gallery.parentElement
+            .classList.remove('d-hide');
 
         for (const src of files) {
             const img = document.createElement('img');
diff --git a/report/index.html b/report/index.html
index 1914e2d..e78a846 100644
--- a/report/index.html
+++ b/report/index.html
@@ -45,8 +45,11 @@
                 <div class="column col-6 p-2 mt-2">
                     <div id="map"></div>
                 </div>
-                <div class="container grid-md">
-                    <div class="columns d-hide mt-2" id="gallery">
+                <div class="container d-hide mt-2 pt-2 grid-md">
+                    <p class="text-small">
+                        Click on any image to open gallery
+                    </p>
+                    <div class="columns mt-2" id="gallery">
                     </div>
                 </div>
             </div>