about box

lib/about.js

@@ -0,0 +1,36 @@
+define(function () {
+  return function() {
+    this.render = function (d) {
+      var el = document.createElement("div")
+      d.appendChild(el)
+      var s = "<h2>Über meshviewer</h2>"
+
+      s += "<p>Mit Doppelklick und Shift+Doppelklick kann man in der Karte "
+      s += "auch zoomen.</p>"
+
+      s += "<h3>GPL 2</h3>"
+
+      s += "<p>Copyright (C) Nils Schneider</p>"
+      s += "<p>This program is free software: you can redistribute it and/or "
+      s += "modify it under the terms of the GNU General Public License as "
+      s += "published by the Free Software Foundation, either version 3 of "
+      s += "the License, or (at your option) any later version.</p>"
+
+      s += "<p>This program is distributed in the hope that it will be useful, "
+      s += "but WITHOUT ANY WARRANTY; without even the implied warranty of "
+      s += "MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the "
+      s += "GNU General Public License for more details.</p>"
+
+      s += "<p>You should have received a copy of the GNU Gneral Public License "
+      s += "along with this program.  If not, see "
+      s += "<a href=\"https://www.gnu.org/licenses/\">"
+      s += "https://www.gnu.org/licenses/</a>.</p>"
+
+      s += "<p>You may find the source code at "
+      s += "<a href=\"https://github.com/tcatm/meshviewer\">"
+      s += "https://github.com/tcatm/meshviewer</a>."
+
+      el.innerHTML = s
+    }
+  }
+})

lib/gui.js

@@ -1,8 +1,9 @@
 define([ "chroma-js", "map", "sidebar", "tabs", "container", "meshstats",
          "linklist", "nodelist", "simplenodelist", "infobox/main",
-         "proportions", "forcegraph", "title" ],
+         "proportions", "forcegraph", "title", "about" ],
 function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
-          Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph, Title) {
+          Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph,
+          Title, About) {
   return function (config, router) {
     var self = this
     var dataTargets = []
@@ -74,6 +75,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     var nodelist = new Nodelist(router)
     var linklist = new Linklist(linkScale, router)
     var statistics = new Proportions()
+    var about = new About()
 
     dataTargets.push(meshstats)
     dataTargets.push(newnodeslist)
@@ -88,9 +90,10 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
 
     sidebar.add(tabs)
     tabs.add("Übersicht", overview)
-    tabs.add("Alle Knoten", nodelist)
+    tabs.add("Knoten", nodelist)
     tabs.add("Verbindungen", linklist)
     tabs.add("Statistiken", statistics)
+    tabs.add("Über", about)
 
     router.addTarget(title)
     router.addTarget(infobox)

scss/main.scss

@@ -125,6 +125,10 @@ table.attributes td {
     background: rgba(255, 255, 255, 0.9);
     border-radius: 2px;
   }
+
+  p {
+    line-height: 1.67em;
+  }
 }
 
 .infobox .clients {