From 27752b2270126fb47cefb79bc614248923df43b8 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils@nilsschneider.net>
Date: Wed, 8 Jul 2015 21:28:26 +0200
Subject: [PATCH] gui: add header to sidebar

---
 lib/container.js | 7 +++++--
 lib/gui.js       | 8 ++++++--
 scss/main.scss   | 5 ++++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/lib/container.js b/lib/container.js
index aa993f3..a33ab75 100644
--- a/lib/container.js
+++ b/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)
diff --git a/lib/gui.js b/lib/gui.js
index 03c66cb..0ac08c0 100644
--- a/lib/gui.js
+++ b/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)
diff --git a/scss/main.scss b/scss/main.scss
index 41fc98d..b5f9200 100644
--- a/scss/main.scss
+++ b/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);
 }