gui: add header to sidebar

lib/container.js

@@ -1,8 +1,11 @@
 define([], function () {
-  return function () {
+  return function (tag) {
+    if (!tag)
+      tag = "div"
+
     var self = this
 
-    var container = document.createElement("div")
+    var container = document.createElement(tag)
 
     self.add = function (d) {
       d.render(container)

lib/gui.js

@@ -71,6 +71,8 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     buttons.appendChild(buttonToggle)
 
     var title = new Title(config)
+
+    var header = new Container("header")
     var infobox = new Infobox(config, sidebar, router)
     var tabs = new Tabs()
     var overview = new Container()
@@ -89,12 +91,14 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     dataTargets.push(linklist)
     dataTargets.push(statistics)
 
-    overview.add(meshstats)
+    sidebar.add(header)
+    header.add(meshstats)
+
     overview.add(newnodeslist)
     overview.add(lostnodeslist)
 
     sidebar.add(tabs)
-    tabs.add("Übersicht", overview)
+    tabs.add("Aktuelles", overview)
     tabs.add("Knoten", nodelist)
     tabs.add("Verbindungen", linklist)
     tabs.add("Statistiken", statistics)

scss/main.scss

@@ -33,13 +33,16 @@ $buttondistance: 12pt;
   }
 }
 
+.tabs, header {
+  background: rgba(0, 0, 0, 0.02);
+}
+
 .tabs {
   padding: 1em 0 0 !important;
   margin: 0;
   list-style: none;
   display: flex;
   font-family: Roboto;
-  background: rgba(0, 0, 0, 0.02);
   @include shadow(1);
 }