Changed graphics panel (stick to right) + corrected month in date indicator

client/components/states_indicator/dates/dates.js

@@ -27,7 +27,7 @@ class DatesIndicator extends HTMLElement{
         let date = new Date(timestamp);
         let dayName = this.dayNumberToName(date.getDay());
         let day = date.getDate();
-        let month = date.getMonth();
+        let month = date.getMonth() + 1; //getMonth returns number between 0 and 1
         let year = date.getFullYear();
 
         return dayName + ", " + day.toString().padStart(2, "0") + "/" + month.toString().padStart(2, "0") + "/"  + year ;

client/cssFiles/SEAWebClientGraphics.css

@@ -2,10 +2,6 @@
     pointer-events: none;
 }
 
-.panel.graphics{
-    display: flex;
-    justify-content: flex-end;
-}
 
 .panel.graphics span:first-child{
     display: none;
@@ -29,7 +25,6 @@
     padding-right: 12px;
     display: flex;
     column-gap: 5px;
-    margin-left: 120px;
     margin-top: 2px;
 }
 

client/cssFiles/SEAWebClientSwiper.css

@@ -21,19 +21,23 @@
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
 /* PANEL */
 .panel {
-	text-align: center;
 	background-color: #303030;
 	color: white;
-	/* padding: 6px 6px 6px 6px; */
 	position: absolute;
 	z-index: 20;
 	width: 100%;
 	height: 30px;
 }
 .panel:not(.graphics) {
+	text-align: center;
 	padding: 6px 6px 6px 6px;
 }
 
+.panel.graphics{
+    display: flex;
+    justify-content: flex-end;
+}
+
 .slide-close-icon {
 	transition: 0.4s;
 	cursor: pointer;

client/jsFiles/SEAWebClientGraphics.js

@@ -961,13 +961,27 @@ let graphs = (function (){
 
         let graphicsPanel = container.parentNode.querySelector('.panel')
         graphicsPanel.classList.add('graphics');
+
+        // The cross to display "main" panel at the location of the graphs
+        let gotoMainElm = document.createElement('div');
+        gotoMainElm.innerHTML = "×";
+        gotoMainElm.addEventListener('click', function () {
+            currentSwiper.enableSwiping(true);
+            console.log("MAIN")
+            currentSwiper.slideNext();
+        });
+
         if(!created){            
-            globalControls.loadControls(graphicsPanel);
             globalIndicators.loadIndicators(graphicsPanel);
+            globalControls.loadControls(graphicsPanel);
+            graphicsPanel.appendChild(gotoMainElm);
+            gotoMainElm.style.marginTop = "auto";
+            gotoMainElm.style.marginBottom = "auto";
+            gotoMainElm.style.marginRight = "6px";
+            gotoMainElm.style.marginLeft = "6px";
+            created = true;
         }
 
-
-
         // gotoNowElm.addEventListener('click', gotoNow);
         //gotoNowElm.innerHTML = "go to now";
         // container.parentNode.querySelector('.panel span').appendChild(gotoNowElm);
@@ -1013,9 +1027,6 @@ let graphs = (function (){
             // container.parentNode.querySelector('.panel span').appendChild(zoomMode);
         }
 
-        // The cross to display "main" panel at the location of the graphs
-        let gotoMainElm = document.createElement('div');
-        gotoMainElm.innerHTML = "×";
         let currentSwiper = swiper[f];
 
         function setSlidingMode(mode) {
@@ -1027,16 +1038,7 @@ let graphs = (function (){
             currentSwiper.enableSwiping(false);
          })
 
-        gotoMainElm.addEventListener('click', function () {
-            currentSwiper.enableSwiping(true);
-            console.log("MAIN")
-            currentSwiper.slideNext();
-        });
         // container.parentNode.querySelector('.panel span').appendChild(gotoMainElm);
-        if(!created){
-            graphicsPanel.appendChild(gotoMainElm);
-            created = true;
-        }
     }