From 0ec21991cd11ff4e2a1a98b04a0a794a20fe8476 Mon Sep 17 00:00:00 2001
From: Elliott Rose <elliott.rose@bsc.es>
Date: Fri, 10 Mar 2023 12:25:13 +0100
Subject: [PATCH] Update colorbar and info bar styling to fix overlap issue
 when 6 or 9 maps selected. Update fullscreen icon to become smaller when app
 is fullscreen.

---
 assets/custom-functions.js | 12 ++++++++++++
 assets/style.css           |  8 ++++++++
 data_handler.py            |  2 +-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/assets/custom-functions.js b/assets/custom-functions.js
index e8ba802..f9dea0a 100644
--- a/assets/custom-functions.js
+++ b/assets/custom-functions.js
@@ -114,10 +114,22 @@ $(document).ready(function () {
 	});
 });
 
+// MAKE FULLSCREEN ICON SMALLER WHEN APP IS FULLSCREEN
+function changeFullscreenIcon() {
+	const isFullscreen = window.innerWidth === screen.width && window.innerHeight === screen.height;
+	const button = document.getElementById('fullscreen-tab'); 
+	if (isFullscreen) {
+	    button.classList.remove('small');
+	} else {
+	    button.classList.add('small');
+	}
+}
+
 // SEND FULLSCREEN REQUEST TO PARENT WINDOW
 $(document).ready(function () {
     $(document).on('click', "#fullscreen-tab", function () {
 	parent.postMessage('fullscreen', '*');
+	changeFullscreenIcon();
 	})	
 });
 
diff --git a/assets/style.css b/assets/style.css
index 819c318..82aa3f5 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -64,6 +64,12 @@ a.modebar-btn {
     color: white;
 }
 
+#fullscreen-tab.small::after {
+    font-size: 17px !important;
+    top: 95%;
+    right: 11%;
+}
+
 .horizontal-menu {
     background-color: var(--blue) !important;
     font-family: "Roboto", sans-serif;
@@ -633,6 +639,7 @@ div.dropdown-menu.show {
 
 .info {
     padding: .15rem .15rem !important;
+    min-width: 24%;
     max-width: 79%;
 }
 
@@ -770,6 +777,7 @@ div.dropdown-menu.show {
 .leaflet-control-colorbar {
     top: 42px !important;
     font-size: .8em !important;
+    white-space: nowrap;
 }
 
 .leaflet-control-zoom-fullscreen {
diff --git a/data_handler.py b/data_handler.py
index d48a43a..810e5d3 100644
--- a/data_handler.py
+++ b/data_handler.py
@@ -1064,7 +1064,7 @@ class FigureHandler(object):
         if zoom is None:
             zoom = 3.5 -(aspect[0]-aspect[0]*0.4)
         if colorbar is not None:
-            colorbar.width = 320 - 30 * aspect[0]
+            colorbar.width = 320 - 37 * aspect[0]
             colorbar.height = 8
         if DEBUG: print("ZOOM", zoom)
         if DEBUG: print("CENTER", center)
-- 
GitLab