[TASK] Improve cross browser support

- Reduce issues with i*-devices and vh height
- Calculate height better for mobile devices and add min-height of the map
- Fix icon and combined class issues in multiple browsers
- THX to browser stack for free open source account to fix the problems

.sass-lint.yml

@@ -3,3 +3,5 @@ rules:
   # Allow for new prefixes like -webkit-tap-highlight-color or antialiasing
   # Can maybe be enabled again with sass-lint 1.8 https://github.com/sasstools/sass-lint/pull/709
   no-vendor-prefixes: 0
+  # Needed for old 'display: -vendor-prefix-property' for higher browser-support
+  no-duplicate-properties: 0

lib/infobox/main.js

@@ -26,7 +26,8 @@ define(["infobox/link", "infobox/node", "infobox/location"], function (Link, Nod
       el.destroy = destroy;
 
       var closeButton = document.createElement("button");
-      closeButton.classList.add("close", "ion-android-close");
+      closeButton.classList.add("close");
+      closeButton.classList.add("ion-android-close");
       closeButton.onclick = router.reset;
       el.appendChild(closeButton);
     }

lib/infobox/node.js

@@ -134,9 +134,9 @@ define(["chroma-js", "moment", "tablesort", "helper", "moment.de"],
       };
     }
 
-    function showBar(className, v) {
+    function showBar(v) {
       var span = document.createElement("span");
-      span.classList.add("bar", className);
+      span.classList.add("bar");
 
       var bar = document.createElement("span");
       bar.style.width = (v * 100) + "%";
@@ -149,21 +149,19 @@ define(["chroma-js", "moment", "tablesort", "helper", "moment.de"],
       return span;
     }
 
-    function showLoadBar(className, v) {
+    function showLoadBar(v) {
       var span = document.createElement("span");
-      span.classList.add("bar", className);
+      span.classList.add("bar");
 
       var bar = document.createElement("span");
       if (v >= 1) {
         bar.style.width = ((v * 100) % 100) + "%";
-        bar.style.background = "rgba(255, 50, 50, 0.9)";
-        span.style.background = "rgba(255, 50, 50, 0.6)";
-        span.appendChild(bar);
+        span.classList.add("warning");
       }
       else {
         bar.style.width = (v * 100) + "%";
-        span.appendChild(bar);
       }
+      span.appendChild(bar);
 
       var label = document.createElement("label");
       label.textContent = (v);
@@ -178,7 +176,7 @@ define(["chroma-js", "moment", "tablesort", "helper", "moment.de"],
       }
 
       return function (el) {
-        el.appendChild(showLoadBar("load-avg", d.statistics.loadavg.toFixed(2)));
+        el.appendChild(showLoadBar(d.statistics.loadavg.toFixed(2)));
       };
     }
 
@@ -188,7 +186,7 @@ define(["chroma-js", "moment", "tablesort", "helper", "moment.de"],
       }
 
       return function (el) {
-        el.appendChild(showBar("memory-usage", d.statistics.memory_usage));
+        el.appendChild(showBar(d.statistics.memory_usage));
       };
     }
 
@@ -328,7 +326,7 @@ define(["chroma-js", "moment", "tablesort", "helper", "moment.de"],
 
           if (!unknown && helper.hasLocation(d.node)) {
             var span = document.createElement("span");
-            span.classList.add("icon", "ion-location");
+            span.classList.add("ion-location");
             td1.appendChild(span);
           }
 
@@ -336,7 +334,7 @@ define(["chroma-js", "moment", "tablesort", "helper", "moment.de"],
 
           var td2 = document.createElement("td");
           var a1 = document.createElement("a");
-          a1.classList.add("hostname", d.link.target.node.flags.online ? "online" : "unseen");
+          a1.classList.add(d.link.target.node.flags.online ? "online" : "unseen");
           a1.textContent = unknown ? d.id : d.node.nodeinfo.hostname;
           if (!unknown) {
             a1.href = "#";

lib/map.js

@@ -23,7 +23,7 @@ define(["map/clientlayer", "map/labelslayer",
       },
 
       onAdd: function () {
-        var button = L.DomUtil.create("button", "locate-user ion-android-locate shadow");
+        var button = L.DomUtil.create("button", "ion-android-locate shadow");
         L.DomEvent.disableClickPropagation(button);
         L.DomEvent.addListener(button, "click", this.onClick, this);
 
@@ -60,7 +60,7 @@ define(["map/clientlayer", "map/labelslayer",
       },
 
       onAdd: function () {
-        var button = L.DomUtil.create("button", "coord-picker ion-pin shadow");
+        var button = L.DomUtil.create("button", "ion-pin shadow");
 
         // Click propagation isn't disabled as this causes problems with the
         // location picking mode; instead propagation is stopped in onClick().
@@ -244,7 +244,7 @@ define(["map/clientlayer", "map/labelslayer",
 
       var layers = config.mapLayers.map(function (d) {
         return {
-          "name": d.name + "ak",
+          "name": d.name,
           "layer": "url" in d ? L.tileLayer(d.url, d.config) : console.warn("Missing map url")
         };
       });

scss/modules/_map.scss

@@ -22,10 +22,19 @@
   }
 
   @media screen and (max-width: $minscreenwidth) {
-    height: 60vh;
+    height: calc(100vh - 150px);
+    min-height: 240px;
     position: relative;
     width: auto;
   }
+
+  @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
+    height: 800px;
+  }
+
+  @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
+    height: 400px;
+  }
 }
 
 .stroke-first {

scss/modules/_node.scss

@@ -4,6 +4,14 @@
   height: 1.4em;
   position: relative;
 
+  &.warning {
+    background: mix($color-offline, $color-white, 60);
+
+    span {
+      background: $color-offline;
+    }
+  }
+
   span {
     background: $color-new;
     display: inline-block;

scss/modules/_tabs.scss

@@ -7,12 +7,14 @@
   }
   background: transparentize($color-black, .98);
   display: flex;
+  display: -webkit-flex;
   font-family: $font-family-secondary;
   list-style: none;
   margin: 0;
   padding: 0;
 
   li {
+    -webkit-flex: 1 1 auto;
     color: transparentize($color-black, .5);
     cursor: pointer;
     flex: 1 1 auto;