From e10fb566c9306ecd7f457d7e64260fb09b7540d6 Mon Sep 17 00:00:00 2001 From: Xaver Maierhofer Date: Fri, 3 Jun 2016 19:44:07 +0200 Subject: [PATCH] [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 | 2 ++ lib/infobox/main.js | 3 ++- lib/infobox/node.js | 22 ++++++++++------------ lib/map.js | 6 +++--- scss/modules/_map.scss | 11 ++++++++++- scss/modules/_node.scss | 8 ++++++++ scss/modules/_tabs.scss | 2 ++ 7 files changed, 37 insertions(+), 17 deletions(-) diff --git a/.sass-lint.yml b/.sass-lint.yml index 9b46f7b..e8ac9c6 100644 --- a/.sass-lint.yml +++ b/.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 diff --git a/lib/infobox/main.js b/lib/infobox/main.js index 5731f35..d9e485b 100644 --- a/lib/infobox/main.js +++ b/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); } diff --git a/lib/infobox/node.js b/lib/infobox/node.js index c1a18be..ed7d778 100644 --- a/lib/infobox/node.js +++ b/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 = "#"; diff --git a/lib/map.js b/lib/map.js index b70bd16..386458e 100644 --- a/lib/map.js +++ b/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") }; }); diff --git a/scss/modules/_map.scss b/scss/modules/_map.scss index 072e483..48d0055 100644 --- a/scss/modules/_map.scss +++ b/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 { diff --git a/scss/modules/_node.scss b/scss/modules/_node.scss index 93ef15d..9e68ce9 100644 --- a/scss/modules/_node.scss +++ b/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; diff --git a/scss/modules/_tabs.scss b/scss/modules/_tabs.scss index 6e97613..d992a30 100644 --- a/scss/modules/_tabs.scss +++ b/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;