From 8de28b903b790ee3539a67e54791569fecee9543 Mon Sep 17 00:00:00 2001 From: Nils Schneider Date: Thu, 2 Apr 2015 04:11:49 +0200 Subject: [PATCH] enhance sidebar and content styling - 3 sidebar variations (margin, no margin, below content) depending on screen size - scrolling sidebar will scroll document (more space on mobile devices) - wrap map/graph on div.content --- lib/gui.js | 15 +++++-- lib/sidebar.js | 8 +--- scss/_forcegraph.scss | 9 +---- scss/main.scss | 91 ++++++++++++++++++++++++------------------- 4 files changed, 65 insertions(+), 58 deletions(-) diff --git a/lib/gui.js b/lib/gui.js index f92110e..5c5376e 100644 --- a/lib/gui.js +++ b/lib/gui.js @@ -8,9 +8,10 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist, var dataTargets = [] var latestData var content + var contentDiv var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5]) - var sidebar = new Sidebar(document.body) + var sidebar function removeContent() { if (!content) @@ -18,7 +19,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist, router.removeTarget(content) content.destroy() - document.body.removeChild(content.div) + contentDiv.removeChild(content.div) content = null } @@ -26,7 +27,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist, removeContent() content = new K(linkScale, sidebar, router) - document.body.insertBefore(content.div, document.body.firstChild) + contentDiv.appendChild(content.div) if (latestData) content.setData(latestData) @@ -36,6 +37,12 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist, router.reload() } + contentDiv = document.createElement("div") + contentDiv.classList.add("content") + document.body.appendChild(contentDiv) + + sidebar = new Sidebar(document.body) + var buttonToggle = document.createElement("button") buttonToggle.classList.add("contenttoggle") buttonToggle.classList.add("next-graph") @@ -50,7 +57,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist, addContent(Map) } } - document.body.appendChild(buttonToggle) + contentDiv.appendChild(buttonToggle) var infobox = new Infobox(config, sidebar, router) var tabs = new Tabs() diff --git a/lib/sidebar.js b/lib/sidebar.js index a7cae54..bfa07f6 100644 --- a/lib/sidebar.js +++ b/lib/sidebar.js @@ -14,10 +14,6 @@ define([], function () { sidebar.classList.toggle("hidden") } - var container = document.createElement("div") - container.classList.add("container") - sidebar.appendChild(container) - self.getWidth = function () { if (sidebar.classList.contains("hidden")) return 0 @@ -27,10 +23,10 @@ define([], function () { } self.add = function (d) { - d.render(container) + d.render(sidebar) } - self.container = container + self.container = sidebar return self } diff --git a/scss/_forcegraph.scss b/scss/_forcegraph.scss index b0d2eef..f8f94a4 100644 --- a/scss/_forcegraph.scss +++ b/scss/_forcegraph.scss @@ -1,5 +1,6 @@ .graph { - height: 100vh; + height: 100%; + width: 100%; background: url(img/gplaypattern.png); svg { @@ -54,9 +55,3 @@ } } } - -@media screen and (max-width: $minscreenwidth) { - .graph { - height: 60vh; - } -} diff --git a/scss/main.scss b/scss/main.scss index 5b70e29..343c997 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -2,6 +2,9 @@ @import '_leaflet.label'; $minscreenwidth: 60em; +$sidebarwidth: 420pt; +$sidebarwidthsmall: 360pt; +$buttondistance: 12pt; @import '_forcegraph'; @@ -10,9 +13,10 @@ $minscreenwidth: 60em; } .contenttoggle { + z-index: 100; position: absolute; - top: 0.7em; - right: 0.7em; + top: $buttondistance; + right: $buttondistance; } .contenttoggle.next-graph:after { @@ -23,7 +27,15 @@ $minscreenwidth: 60em; content: '\f203'; } +.content { + position: fixed; + width: 100vw; + height: 100vh; +} + .tabs { + padding-top: 1em !important; + margin: 0; list-style: none; display: flex; } @@ -145,8 +157,8 @@ button::-moz-focus-inner { button.close { position: absolute; - right: 0.7em; - top: 0.7em; + right: $buttondistance; + top: $buttondistance; } button.close:after { @@ -162,11 +174,11 @@ button.close:after { } .sidebarhandle { - position: absolute; - right: -2.5em; - top: 0.7em; + position: fixed; + left: $sidebarwidth + 2 * $buttondistance; + top: $buttondistance; z-index: 10; - transition: right 0.5s, box-shadow 0.5s, color 0.5s, transform 0.5s; + transition: left 0.5s, box-shadow 0.5s, color 0.5s, transform 0.5s; } .sidebarhandle:after { @@ -176,9 +188,7 @@ button.close:after { .sidebar.hidden .sidebarhandle { transform: scale(-1, 1); -} - -.hostname { + left: $buttondistance; } .online { @@ -191,27 +201,19 @@ button.close:after { .sidebar { z-index: 5; - width: 40em; + width: $sidebarwidth; box-sizing: border-box; position: absolute; - top: 0; - left: 0; + top: $buttondistance; + left: $buttondistance; + margin-bottom: $buttondistance; background: white; box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23); transition: left 0.5s; } .sidebar.hidden { - left: -40em; -} - -.sidebar .container { - overflow: auto; - box-sizing: border-box; -} - -.sidebar .container, .map { - height: 100vh; + left: -$sidebarwidth - $buttondistance; } .sidebar .icon { @@ -255,11 +257,16 @@ button.close:after { right: 0.5em; } -.map .node-alert { - -webkit-animation: blink 2s linear; - -webkit-animation-iteration-count: infinite; - animation: blink 2s linear; - animation-iteration-count: infinite; +.map { + width: 100%; + height: 100%; + + .node-alert { + -webkit-animation: blink 2s linear; + -webkit-animation-iteration-count: infinite; + animation: blink 2s linear; + animation-iteration-count: infinite; + } } .proportion th { @@ -302,36 +309,38 @@ button.close:after { @media screen and (max-width: 80em) { .sidebar { font-size: 0.8em; + top: 0pt; + left: 0pt; + margin: 0pt; + width: $sidebarwidthsmall; + min-height: 100vh; + + .sidebarhandle { + left: $sidebarwidthsmall + $buttondistance; + } } } @media screen and (max-width: $minscreenwidth) { - .sidebar .container { - overflow: visible; - height: auto; - padding-top: 1em; - } - .sidebarhandle { display: none; } - .map { + .content { + position: relative; + width: auto; height: 60vh; } .sidebar { position: static; - margin-left: 0em !important; + margin: 0em !important; width: auto; height: auto; + min-height: 0; } .sidebar.hidden { width: auto; } - - .sidebar.hidden .sidebar .container { - display: block; - } }