router pics hopglass changes

- don't use display block on the table, instead make the close button
  position absolute
- show the old style heading when no source is defined
- clean up the indention and some small things

config.json.example

@@ -38,6 +38,11 @@
   ],
   "siteNames": [
     { "site": "dus", "name": "Flingern" }
+  ],
+  "hwImg": [
+    { "thumbnail": "https://cdn.rawgit.com/Moorviper/meshviewer_hwpics/master/nodes/{MODELHASH}.svg",
+      "caption": "Knoten {MODELHASH}"
+    }
   ]
 }
 

helper.js

@@ -132,9 +132,10 @@ function attributeEntry(el, label, value) {
   var th = document.createElement("th")
   if (typeof label === "string")
     th.textContent = label
-
+  else {
-  else
     th.appendChild(label)
+    tr.className = "routerpic"
+  }
 
   tr.appendChild(th)
 

lib/infobox/node.js

@@ -378,15 +378,12 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
       return a & a
     }, 0)
 
-    if (o.thumbnail) {
+    content = document.createElement("img")
-      content = document.createElement("img")
+    content.id = "routerpicture"
-      content.id = "routerpicture"
+    content.classList.add("nodeImg")
-      content.classList.add("nodeImg")
+    content.src = o.thumbnail.replace("{MODELHASH}", modelhash)
-      content.src = o.thumbnail.replace("{MODELHASH}", modelhash)
+    content.onerror = function() {
-      content.onerror = function() {
+      document.getElementById("routerpicdiv").outerHTML = "Knotenname"
-        console.log("Router-Bild nicht vorhanden !!! create an issue @ https://github.com/Moorviper/Freifunk-Router-Anleitungen/issues")
-        document.getElementById("routerpicdiv").outerHTML = "Knotenname"
-      }
     }
 
     if (o.caption) {
@@ -400,7 +397,7 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
     p.appendChild(content)
 
     return content
-}
+  }
 
   function showStatImg(o, d) {
     var subst = {}
@@ -410,44 +407,30 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
   }
 
   return function(config, el, router, d) {
-    var top = document.createElement("div")
-    top.id = "routerpicdiv"
-    try {
-      if (config.hwImg)
-        config.hwImg.forEach(function(hwImg) {
-          try {
-            top.appendChild(showNodeImg(hwImg, d.nodeinfo.hardware.model))
-          }
-          catch (err) {
-            console.log(err.message)
-          }
-        })
-
-      else
-      {
-        var localpic = [] // create fallback-config-data
-        localpic.push({
-          thumbnail: "./nodes/{MODELHASH}.svg",
-          caption: "Knoten {MODELHASH}"
-        })
-        localpic.forEach(function(localpic) {
-          try {
-            top.appendChild(showNodeImg(localpic, d.nodeinfo.hardware.model))
-          }
-          catch (err) {
-            console.log(err.message)
-          }
-        })
-      }
-    }
-    catch (err) {
-      console.log(err.message)
-    }
-
     var attributes = document.createElement("table")
     attributes.classList.add("attributes")
 
-    attributeEntry(attributes, top, d.nodeinfo.hostname)
+    if (config.hwImg) {
+      var top = document.createElement("div")
+      top.id = "routerpicdiv"
+      try {
+        config.hwImg.forEach(function(hwImg) {
+          try {
+            top.appendChild(showNodeImg(hwImg, d.nodeinfo.hardware.model))
+          } catch (err) {
+            console.log(err.message)
+          }
+        })
+      } catch (err) {
+        console.log(err.message)
+      }
+      attributeEntry(attributes, top, d.nodeinfo.hostname)
+    } else {
+      var h2 = document.createElement("h2")
+      h2.textContent = d.nodeinfo.hostname
+      el.appendChild(h2)
+    }
+
     attributeEntry(attributes, "Status", showStatus(d))
     attributeEntry(attributes, "Gateway", d.flags.gateway ? "ja" : null)
     attributeEntry(attributes, "Koordinaten", showGeoURI(d))

scss/_sidebar.scss

@@ -1,40 +1,36 @@
 .nodeheader {
-    width: 90%;
+  width: 90%;
-    position: relative;
+  position: relative;
-    z-index: 2;
+  z-index: 2;
 }
 
 .nodeheader img {
-    width: 30%;
+  width: 30%;
-    max-height: 180px;
+  max-height: 180px;
-    margin: auto;
+  margin: auto;
-    text-align: center;
+  text-align: center;
-    max-width: 128px;
+  max-width: 128px;
-    display: block;
+  display: block;
-    z-index: 2;
+  z-index: 2;
 }
-.nodeheader img .none{
+
-    display: none;
+.nodeheader img .none {
+  display: none;
 }
 
 .nodeheader span {
-    background-color: silver;
+  background-color: silver;
-    background-color: hsla(0, 0%, 100%, 0.5);
+  background-color: hsla(0, 0%, 100%, 0.5);
-    position: absolute;
+  position: absolute;
-    bottom: 0;
+  bottom: 0;
-    width: 100%;
+  width: 100%;
-    line-height: 1.5em;
+  line-height: 1.5em;
-    text-align: center;
+  text-align: center;
-    color: black;
+  color: black;
-    font-weight: bold;
+  font-weight: bold;
-    font-size: large;
+  font-size: large;
-    z-index: 2;
+  z-index: 2;
-    white-space: nowrap;
+  white-space: nowrap;
-    overflow: hidden;
+  overflow: hidden;
-    text-overflow: ellipsis;
+  text-overflow: ellipsis;
-}
-
-.limit {
-    min-height: 1px;
-    max-height: 1px;
 }

scss/main.scss

@@ -101,11 +101,6 @@ table th.sort-up:after {
   content: '\f104';
 }
 
-table.attributes {
-  top: 1px;
-  display: block;
-}
-
 table.attributes th {
   text-align: left;
   font-weight: bold;
@@ -121,7 +116,7 @@ table.attributes td {
   line-height: 1.41em;
 }
 
-table.attributes tr:first-child {
+table.attributes tr.routerpic {
   max-height: 128px;
   max-width: 128px;
   min-width: 128px;
@@ -130,14 +125,14 @@ table.attributes tr:first-child {
   /*background-color: green;*/
 }
 
-table.attributes tr:first-child td{
+table.attributes tr.routerpic td {
   font-weight: bold;
   /*background-color: red;*/
   font-size: large;
   vertical-align:bottom;
 }
 
-table.attributes tr:first-child th{
+table.attributes tr.routerpic th {
   font-weight: bold;
   /*background-color: red;*/
   font-size: large;
@@ -158,7 +153,6 @@ table.attributes tr:first-child th{
     @include shadow(2);
     background: rgba(255, 255, 255, 0.97);
     border-radius: 2px;
-    padding-bottom: 30px;
   }
 
   .container.hidden {
@@ -264,6 +258,8 @@ button.close {
   border-radius: 0;
   color: rgba(0, 0, 0, 0.5);
   font-family: "ionicons";
+  position: absolute;
+  right: 0;
 
   &:hover {
     color: #dc0067;