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
This commit is contained in:
Nils Schneider 2015-04-02 04:11:49 +02:00
parent ca3dd9ae29
commit 8de28b903b
4 changed files with 65 additions and 58 deletions

View file

@ -8,9 +8,10 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
var dataTargets = [] var dataTargets = []
var latestData var latestData
var content var content
var contentDiv
var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5]) var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5])
var sidebar = new Sidebar(document.body) var sidebar
function removeContent() { function removeContent() {
if (!content) if (!content)
@ -18,7 +19,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
router.removeTarget(content) router.removeTarget(content)
content.destroy() content.destroy()
document.body.removeChild(content.div) contentDiv.removeChild(content.div)
content = null content = null
} }
@ -26,7 +27,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
removeContent() removeContent()
content = new K(linkScale, sidebar, router) content = new K(linkScale, sidebar, router)
document.body.insertBefore(content.div, document.body.firstChild) contentDiv.appendChild(content.div)
if (latestData) if (latestData)
content.setData(latestData) content.setData(latestData)
@ -36,6 +37,12 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
router.reload() router.reload()
} }
contentDiv = document.createElement("div")
contentDiv.classList.add("content")
document.body.appendChild(contentDiv)
sidebar = new Sidebar(document.body)
var buttonToggle = document.createElement("button") var buttonToggle = document.createElement("button")
buttonToggle.classList.add("contenttoggle") buttonToggle.classList.add("contenttoggle")
buttonToggle.classList.add("next-graph") buttonToggle.classList.add("next-graph")
@ -50,7 +57,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
addContent(Map) addContent(Map)
} }
} }
document.body.appendChild(buttonToggle) contentDiv.appendChild(buttonToggle)
var infobox = new Infobox(config, sidebar, router) var infobox = new Infobox(config, sidebar, router)
var tabs = new Tabs() var tabs = new Tabs()

View file

@ -14,10 +14,6 @@ define([], function () {
sidebar.classList.toggle("hidden") sidebar.classList.toggle("hidden")
} }
var container = document.createElement("div")
container.classList.add("container")
sidebar.appendChild(container)
self.getWidth = function () { self.getWidth = function () {
if (sidebar.classList.contains("hidden")) if (sidebar.classList.contains("hidden"))
return 0 return 0
@ -27,10 +23,10 @@ define([], function () {
} }
self.add = function (d) { self.add = function (d) {
d.render(container) d.render(sidebar)
} }
self.container = container self.container = sidebar
return self return self
} }

View file

@ -1,5 +1,6 @@
.graph { .graph {
height: 100vh; height: 100%;
width: 100%;
background: url(img/gplaypattern.png); background: url(img/gplaypattern.png);
svg { svg {
@ -54,9 +55,3 @@
} }
} }
} }
@media screen and (max-width: $minscreenwidth) {
.graph {
height: 60vh;
}
}

View file

@ -2,6 +2,9 @@
@import '_leaflet.label'; @import '_leaflet.label';
$minscreenwidth: 60em; $minscreenwidth: 60em;
$sidebarwidth: 420pt;
$sidebarwidthsmall: 360pt;
$buttondistance: 12pt;
@import '_forcegraph'; @import '_forcegraph';
@ -10,9 +13,10 @@ $minscreenwidth: 60em;
} }
.contenttoggle { .contenttoggle {
z-index: 100;
position: absolute; position: absolute;
top: 0.7em; top: $buttondistance;
right: 0.7em; right: $buttondistance;
} }
.contenttoggle.next-graph:after { .contenttoggle.next-graph:after {
@ -23,7 +27,15 @@ $minscreenwidth: 60em;
content: '\f203'; content: '\f203';
} }
.content {
position: fixed;
width: 100vw;
height: 100vh;
}
.tabs { .tabs {
padding-top: 1em !important;
margin: 0;
list-style: none; list-style: none;
display: flex; display: flex;
} }
@ -145,8 +157,8 @@ button::-moz-focus-inner {
button.close { button.close {
position: absolute; position: absolute;
right: 0.7em; right: $buttondistance;
top: 0.7em; top: $buttondistance;
} }
button.close:after { button.close:after {
@ -162,11 +174,11 @@ button.close:after {
} }
.sidebarhandle { .sidebarhandle {
position: absolute; position: fixed;
right: -2.5em; left: $sidebarwidth + 2 * $buttondistance;
top: 0.7em; top: $buttondistance;
z-index: 10; 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 { .sidebarhandle:after {
@ -176,9 +188,7 @@ button.close:after {
.sidebar.hidden .sidebarhandle { .sidebar.hidden .sidebarhandle {
transform: scale(-1, 1); transform: scale(-1, 1);
} left: $buttondistance;
.hostname {
} }
.online { .online {
@ -191,27 +201,19 @@ button.close:after {
.sidebar { .sidebar {
z-index: 5; z-index: 5;
width: 40em; width: $sidebarwidth;
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
top: 0; top: $buttondistance;
left: 0; left: $buttondistance;
margin-bottom: $buttondistance;
background: white; background: white;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
transition: left 0.5s; transition: left 0.5s;
} }
.sidebar.hidden { .sidebar.hidden {
left: -40em; left: -$sidebarwidth - $buttondistance;
}
.sidebar .container {
overflow: auto;
box-sizing: border-box;
}
.sidebar .container, .map {
height: 100vh;
} }
.sidebar .icon { .sidebar .icon {
@ -255,11 +257,16 @@ button.close:after {
right: 0.5em; right: 0.5em;
} }
.map .node-alert { .map {
-webkit-animation: blink 2s linear; width: 100%;
-webkit-animation-iteration-count: infinite; height: 100%;
animation: blink 2s linear;
animation-iteration-count: infinite; .node-alert {
-webkit-animation: blink 2s linear;
-webkit-animation-iteration-count: infinite;
animation: blink 2s linear;
animation-iteration-count: infinite;
}
} }
.proportion th { .proportion th {
@ -302,36 +309,38 @@ button.close:after {
@media screen and (max-width: 80em) { @media screen and (max-width: 80em) {
.sidebar { .sidebar {
font-size: 0.8em; 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) { @media screen and (max-width: $minscreenwidth) {
.sidebar .container {
overflow: visible;
height: auto;
padding-top: 1em;
}
.sidebarhandle { .sidebarhandle {
display: none; display: none;
} }
.map { .content {
position: relative;
width: auto;
height: 60vh; height: 60vh;
} }
.sidebar { .sidebar {
position: static; position: static;
margin-left: 0em !important; margin: 0em !important;
width: auto; width: auto;
height: auto; height: auto;
min-height: 0;
} }
.sidebar.hidden { .sidebar.hidden {
width: auto; width: auto;
} }
.sidebar.hidden .sidebar .container {
display: block;
}
} }