13

css/bottomSheet.css

@@ -1,5 +1,5 @@
 /* ===============================
-   BOTTOM SHEET (menu ⋮)
+   STRUTTURA BASE (comune)
    =============================== */
 
 .bottom-sheet {
@@ -8,10 +8,6 @@
   left: 0;
   width: 100%;
 
-  /* 🔥 Altezza dinamica: abbastanza grande per mostrare tutto */
-  height: 60vh;
-  max-height: 80vh;
-
   background: rgba(255,255,255,0.95);
   backdrop-filter: blur(6px);
   border-top: 1px solid #ddd;
@@ -20,15 +16,13 @@
   display: none;
   flex-direction: column;
   z-index: 9999;
-
-  overflow-y: auto; /* 🔥 Scroll verticale */
 }
 
 .bottom-sheet.open {
   display: flex;
 }
 
-/* Header con la "maniglia" */
+/* Maniglia superiore */
 .sheet-header {
   height: 16px;
   display: flex;
@@ -44,12 +38,18 @@
   border-radius: 4px;
 }
 
-/* Contenuto del menu (ordinamento, filtri, ecc.) */
+/* ===============================
-.sheet-content {
+   BOTTOM SHEET FOTO (MAPPA)
-  padding: 20px;
+   BASSO — SOLO STRISCIA FOTO
+   =============================== */
+
+.photo-strip {
+  height: 140px;          /* altezza originale */
+  overflow-y: hidden;     /* niente scroll verticale */
+  overflow-x: auto;       /* scroll orizzontale per le foto */
 }
 
-/* Miniature (usate nel bottom sheet delle foto, non in quello delle opzioni) */
+/* Miniature della striscia foto */
 .sheet-gallery {
   display: flex;
   flex-direction: row;
@@ -74,6 +74,21 @@
   object-fit: cover;
 }
 
+/* ===============================
+   BOTTOM SHEET OPZIONI (⋮)
+   ALTO — MENU COMPLETO
+   =============================== */
+
+.options-sheet {
+  height: auto;           /* grande */
+  max-height: 80vh;
+  overflow-y: auto;       /* scroll verticale */
+}
+
+.sheet-content {
+  padding: 20px;
+}
+
 /* Pulsanti del menu ⋮ */
 .sheet-btn {
   width: 100%;
@@ -91,10 +106,22 @@
   background: #e8e8e8;
 }
 
-/* Titoli delle sezioni */
+/* Titoli delle sezioni del menu ⋮ */
 #optionsSheet h3 {
   margin-top: 20px;
   margin-bottom: 10px;
   font-size: 16px;
   color: #444;
 }
+
+.sheet-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.0); /* invisibile */
+  display: none;
+  z-index: 9998; /* appena sotto il bottom sheet */
+}
+
+.sheet-overlay.open {
+  display: block;
+}

index.html

@@ -15,7 +15,6 @@
   <link rel="stylesheet" href="css/map.css">
   <link rel="stylesheet" href="css/utils.css">
 
-
   <!-- Leaflet CSS -->
   <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
 
@@ -46,31 +45,41 @@
     <div id="globalMap" class="global-map"></div>
   </main>
 
-  <!-- Modal Media (foto + video) -->
+  <!-- =============================== -->
+  <!-- MODAL FOTO/VIDEO -->
+  <!-- =============================== -->
   <div id="modal" class="modal">
     <div class="modal-content">
       <div class="modal-close" id="modalClose">×</div>
 
-      <!-- CONTENITORE DINAMICO -->
       <div id="modalMediaContainer"></div>
 
       <div class="modal-info-btn" id="modalInfoBtn">ℹ️</div>
     </div>
   </div>
 
-  <!-- Pannello Info -->
+  <!-- =============================== -->
+  <!-- PANNELLO INFO -->
+  <!-- =============================== -->
   <div id="infoPanel" class="info-panel"></div>
 
-  <!-- Bottom Sheet stile Google Photos Web (foto/cluster) -->
+  <!-- =============================== -->
-  <div id="bottomSheet" class="bottom-sheet">
+  <!-- PANNELLO OVERLAY -->
+  <!-- =============================== -->
+  <div id="sheetOverlay" class="sheet-overlay"></div>
+
+  <!-- =============================== -->
+  <!-- BOTTOM SHEET FOTO (MAPPA) -->
+  <!-- =============================== -->
+  <div id="bottomSheet" class="bottom-sheet photo-strip">
     <div class="sheet-header"></div>
     <div class="sheet-gallery" id="sheetGallery"></div>
   </div>
 
   <!-- =============================== -->
-  <!-- BOTTOM SHEET OPZIONI (ordinamento + raggruppamento + filtri) -->
+  <!-- BOTTOM SHEET OPZIONI (⋮) -->
   <!-- =============================== -->
-  <div id="optionsSheet" class="bottom-sheet">
+  <div id="optionsSheet" class="bottom-sheet options-sheet">
     <div class="sheet-header"></div>
 
     <div class="sheet-content">

js/bottomSheet.js

@@ -2,10 +2,26 @@
 // BOTTOM SHEET (Google Photos Web)
 // ===============================
 
+// Striscia foto (MAPPA)
 const bottomSheet = document.getElementById("bottomSheet");
 const sheetGallery = document.getElementById("sheetGallery");
 
-// Apri il bottom sheet con una lista di foto
+// Menu ⋮ (OPZIONI) — NON usare const se già definito altrove
+let optionsSheetRef = document.getElementById("optionsSheet");
+
+// Overlay per chiudere i bottom sheet
+let sheetOverlay = document.getElementById("sheetOverlay");
+if (!sheetOverlay) {
+  sheetOverlay = document.createElement("div");
+  sheetOverlay.id = "sheetOverlay";
+  sheetOverlay.className = "sheet-overlay";
+  document.body.appendChild(sheetOverlay);
+}
+
+// ===============================
+// STRISCIA FOTO (MAPPA)
+// ===============================
+
 function openBottomSheet(photoList) {
   sheetGallery.innerHTML = "";
 
@@ -31,21 +47,53 @@ function openBottomSheet(photoList) {
   });
 
   bottomSheet.classList.add("open");
+  sheetOverlay.classList.add("open");
 }
 
-// Chiudi il bottom sheet
 function closeBottomSheet() {
   bottomSheet.classList.remove("open");
+  sheetOverlay.classList.remove("open");
 }
 
-// Chiudi cliccando fuori dal bottom sheet
+// ===============================
-document.addEventListener("click", (e) => {
+// MENU ⋮ (OPZIONI)
-  if (!bottomSheet.classList.contains("open")) return;
+// ===============================
 
-  const clickedInside = bottomSheet.contains(e.target);
+function openOptionsSheet() {
-  const clickedMarker = e.target.closest(".photo-marker, .photo-cluster");
+  optionsSheetRef.classList.add("open");
+  sheetOverlay.classList.add("open");
+}
 
-  if (!clickedInside && !clickedMarker) {
+function closeOptionsSheet() {
+  optionsSheetRef.classList.remove("open");
+  sheetOverlay.classList.remove("open");
+}
+
+// ===============================
+// CHIUSURA CLICCANDO FUORI
+// ===============================
+
+sheetOverlay.addEventListener("click", () => {
   closeBottomSheet();
-  }
+  closeOptionsSheet();
 });
+
+// ===============================
+// CHIUSURA TOCCANDO LA MANIGLIA
+// ===============================
+
+document.querySelectorAll(".sheet-header").forEach(header => {
+  header.addEventListener("click", () => {
+    closeBottomSheet();
+    closeOptionsSheet();
+  });
+});
+
+// ===============================
+// ESPORTIAMO LE FUNZIONI
+// ===============================
+
+window.openBottomSheet = openBottomSheet;
+window.closeBottomSheet = closeBottomSheet;
+window.openOptionsSheet = openOptionsSheet;
+window.closeOptionsSheet = closeOptionsSheet;