Merge branch 'map_page_scaling' into 'master'

bugfix: attempt to fix the map page scaling.

Closes #9

See merge request !3

webpage/css/meshmap-default.css

 /*** background color of the overall page ***/
 body {
     background-color: #dddddd;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    outline: 0;
 }
 /*** This will change the size of the top left corner logo ***/
 #pageLogo {
 	width: 50px;
 	vertical-align: middle;
 }
+#headerText {
+    margin: 0;
+}
 /*** This will change the size of the map "container" ***/
+/*** it should be left to default of 100%/100% of the window ***/
 #meshmap {
-	height: 700px;
-	margin: 5px auto;
-	width: 100%;
+	/*height: 700px;*/
+	/*margin: 5px auto;*/
+	/*width: 100%;*/
 }
 /*** this is the size of the map itself ***/
 #mapid {
-	width: 100%;
-	height: 100%;
+	/*width: 100vh;*/
+	height: 100vh;
 }
 h1 {
     color: navy;
@@ -87,21 +95,21 @@ tr:nth-child(odd) {
 MapTitle {
     color: Black;
     font-weight:bold;
-    font-size: 200%;
+    font-size: 2em;
     vertical-align: middle;
 }
 
 Warning_MSG {
     color: Red;
     font-weight:bold;
-    font-size: 150%;
+    font-size: 1.5em;
     text-align: center;
 }
 
 Welcome_MSG {
     /* color: Blue; */
     font-weight:bold;
-    font-size: 150%;
+    font-size: 1.5em;
     text-align: center;
     display: inline;
 }
@@ -117,13 +125,13 @@ Welcome_MSG2 {
 Internet_MSG {
     color: Purple;
     font-weight:bold;
-    font-size: 100%;
+    font-size: 1em;
     text-align: center;
 }
 Mesh_MSG {
     color: Orange;
     font-weight:bold;
-    font-size: 100%;
+    font-size: 1em;
     text-align: center;
 }
 NodeTitle {
@@ -169,21 +177,21 @@ Link_Infinite {
 MAP_DETAILS {
     color: Black;
     font-weight:bold;
-    font-size: 125%;
+    font-size: 1.25em;
 }
 
 /*NEW ADDITIONS*/
 .maptitle {
     color: Black;
     font-weight:bold;
-    font-size: 200%;
+    font-size: 2em;
     vertical-align: middle;
     display: inline;
 }
 .welcomeMsg {
     /* color: Blue; */
     font-weight:bold;
-    font-size: 150%;
+    font-size: 1.5em;
     text-align: center;
     display: inline;
 }
@@ -196,7 +204,7 @@ MAP_DETAILS {
 .warningMsg {
     color: Red;
     font-weight:bold;
-    font-size: 150%;
+    font-size: 1.5em;
     text-align: center;
     display: inline;
 }

webpage/map_display.php

@@ -299,6 +299,9 @@ if (isset($USER_SETTINGS['map_iFrame_Enabled']) && ($USER_SETTINGS['map_iFrame_E
     }
 }else {
     echo "<div id='meshmap'>\n"; // Closing tag at end of primary routine
+    
+    echo "<div id='mapHeader'>\n";
+    
     if (isset($USER_SETTINGS['pageLogo'])) {
         //echo "<MapTitle>";
         echo "<img class='maptitle' id='pageLogo' src='" . $USER_SETTINGS['pageLogo'] . "' alt='The Logo'>";
@@ -330,6 +333,8 @@ if (isset($USER_SETTINGS['map_iFrame_Enabled']) && ($USER_SETTINGS['map_iFrame_E
         //echo "</Warning_MSG>";
         echo "<br>";
     }
+    
+    echo "</div>\n"; // end of mapHeader <div>
 }
 
 if (isset($GLOBALS['hide_admin'])) {
@@ -506,7 +511,9 @@ $Content .= <<< EOD
 	L.control.autoRefresh().addTo(map);
 			
 	</script>
+
 EOD;
+
 }
 
 $Content .= "</div>\n"; // Closing tag
@@ -514,21 +521,27 @@ $Content .= "</div>\n"; // Closing tag
 // Display Page
 echo $Content;
 
+// the final scaling of the map div
+// kinda hacky but it works well enough for now.
+$scaling = <<<EOD
+<script>
+	var userAgent = window.navigator.userAgent;
+	var map = document.getElementById("mapid");
+	var header = document.getElementById("mapHeader");
+	if(header) {
+		var offset = header.offsetHeight;
+		var search4FF = /Firefox/;
+		if(search4FF.test(userAgent) {
+			offset = offset + 14;
+		}
+		str = "calc(100vh - " + offset + "px)";
+	}
+</script>
 
-//if (is_connected() && $USER_SETTINGS['inetServerText'])
-//{
-//    echo "<Internet_MSG>";
-//    echo sprintf($USER_SETTINGS['inetServerText'], $USER_SETTINGS['inetServerHostname']);
-//    echo "<br>";
-//    echo "</Internet_MSG>";
-//}
+EOD;
 
-//echo "</div>\n"; // End division meshmap
+echo $scaling;
 
 echo "</body>\n";
 echo "</html>\n";
-/*
-* End of primary display
-********************************************************************************************************************/
-
 ?>