Graphs cross now always top right hand corner, hides/shows right part on click, jump hides right part, goToNow shows right part

client/SEAWebClient.html

@@ -72,6 +72,7 @@
 	    </div>
         </div>
 	<div id="center"></div>
+	<div id="close-cross">&#215;</div>
 </body>
 
 </html>

client/cssFiles/SEAWebClientMain.css

@@ -127,3 +127,15 @@ meta, body {
 	overflow: hidden;
 	border: solid 4px dimgray;
 }
+
+/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
+/* CLOSE CROSS */
+
+#close-cross{
+	z-index: 50;
+	top: 9px;
+	right: 12px;
+	position: fixed;
+	color: white;
+	cursor: pointer;
+}

client/jsFiles/SEAWebClientGraphics.js

@@ -338,7 +338,7 @@ function loadGraphicsMenu(panel){
     menuGraphicsPopup.getContainer().style.right = "20px";
     panel.appendChild(graphicsMenuControl);
     graphicsMenuControl.style.marginLeft="6px";
-    graphicsMenuControl.style.marginRight="6px";
+    graphicsMenuControl.style.marginRight="22px";
     graphicsMenuControl.style.marginTop="2px";
 }
 
@@ -865,7 +865,8 @@ let graphs = (function (){
     function jumpToDate(dateTimestampMs, timeValueMs){
         
         cursorLine(null);
-
+        window["wideGraphs"] = true;
+        adjustGrid()
         let msLeftTimestampGetVars = 0, msLeftTimestampGetGraph = 0 , msRightTimestampGetVars = 0, msRightTimestampGetGraph = 0;
         
         msLeftTimestampGetVars = dateTimestampMs;
@@ -944,6 +945,9 @@ let graphs = (function (){
         let msLeftTimestamp = msRightTimestamp - 30*60*1000;
         cursorLine(null);        
 
+        window["wideGraphs"] = false; // will have no effect if hideRightPart is true
+        adjustGrid();
+
         AJAX("http://" + hostPort + "/getvars").postForm("time=" + msLeftTimestamp/1000 + "," + msRightTimestamp/1000 + "&userconfiguration=" + JSON.stringify(getFormattedUserConfigurationFromLocalStorage()) + "&id="+ clientID).then(function(data){
             currentMaxTime = msRightTimestamp + 60000;
             currentMinTime = msLeftTimestamp;
@@ -982,14 +986,6 @@ let graphs = (function (){
         let graphicsPanel = container.parentNode.querySelector('.panel')
         graphicsPanel.classList.add('graphics');
         graphicsPanel.childNodes[0].style.visibility = "hidden"; // hides the span added by the swippers
-        // 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();
-        });
 
         loadExportPopup();
         loadCurvesSettingsPopup();
@@ -997,12 +993,6 @@ let graphs = (function (){
         globalIndicators.loadIndicators(graphicsPanel);
         globalControls.loadControls(graphicsPanel);
         loadGraphicsMenu(graphicsPanel);
-        graphicsPanel.appendChild(gotoMainElm);
-        gotoMainElm.style.marginTop = "auto";
-        gotoMainElm.style.marginBottom = "auto";
-        gotoMainElm.style.marginRight = "6px";
-        gotoMainElm.style.color = "white";
-        gotoMainElm.style.cursor = "pointer";
         
         if (isTouchDevice) {
             doubleTap(removeCursor);

client/jsFiles/SEAWebClientMain.js

@@ -76,7 +76,8 @@ new Settings()
     .treat("showConsole", "sc", to_bool, true)
     .treat("showOverview", "so", to_bool, true)
     .treat("showGraphics", "sg", to_bool, true) // false)
-    .treat("hideRightPart", "hr", to_bool, false)
+    .treat("hideRightPart", "hr", to_bool, false) //used to completely disable the right part
+    .treat("wideGraphs", "wg", to_bool, false) //used to toggle the size of the graphs part
     .treat("showAsync", "sa", to_bool, false)
 
 function loadFirstBlocks() {
@@ -130,6 +131,24 @@ window.onload = function() {
     // Determine size of grid-elements depending on number of columns 'm' and
     // rows 'n'
     adjustGrid();
+
+    let crossElement = document.getElementById("close-cross");
+    
+    if(window["hideRightPart"]){
+      document.body.removeChild(crossElement);
+    }else{
+      crossElement.onclick = function(){
+        if(nColumns == 1){ // if the screen is small, the cross always slides to the next slide
+          let someSwiper = swiper[0];
+          someSwiper.enableSwiping(true); // needed because someSwiper might be the graphs swiper, and swiping is disable by default
+          someSwiper.slideNext(); // someSwiper can be anything, it will swipe to the next slide
+        }else{ // else it toggles the graphs window's size and triggers the adjustGrid()
+          window["wideGraphs"] = !window['wideGraphs'];
+          adjustGrid();
+        }
+      }
+    }
+
     // Create swiper-instances.
     for (var s = 0; s < MAXBLOCK; s++) {
         swiper[s] = insertSwiper(s);

client/jsFiles/SEAWebClientResponsivity.js

@@ -67,7 +67,7 @@ function adjustGrid() {
     paramSlider = [0,1,2,3];
     prevActiveSlider = 0;
 
-    if (window["hideRightPart"]){
+    if (window["hideRightPart"] || window["wideGraphs"]){
         style(0,"100vw","100vh");
         style(1); // hide
         style(2); // hide