From 1641bc24370723846931eb5f1684a866b5fcbf6a Mon Sep 17 00:00:00 2001 From: Milan Pssler Date: Sun, 6 Nov 2016 00:11:49 +0100 Subject: [PATCH] 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 | 5 ++++ helper.js | 5 ++-- lib/infobox/node.js | 73 +++++++++++++++++---------------------------- scss/_sidebar.scss | 58 +++++++++++++++++------------------ scss/main.scss | 14 ++++----- 5 files changed, 68 insertions(+), 87 deletions(-) diff --git a/config.json.example b/config.json.example index ded5050..b1879f0 100644 --- a/config.json.example +++ b/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}" + } ] } diff --git a/helper.js b/helper.js index 5343980..6e00702 100644 --- a/helper.js +++ b/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) diff --git a/lib/infobox/node.js b/lib/infobox/node.js index 9d4daa7..d7a5acd 100644 --- a/lib/infobox/node.js +++ b/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.id = "routerpicture" - content.classList.add("nodeImg") - content.src = o.thumbnail.replace("{MODELHASH}", modelhash) - content.onerror = function() { - console.log("Router-Bild nicht vorhanden !!! create an issue @ https://github.com/Moorviper/Freifunk-Router-Anleitungen/issues") - document.getElementById("routerpicdiv").outerHTML = "Knotenname" - } + content = document.createElement("img") + content.id = "routerpicture" + content.classList.add("nodeImg") + content.src = o.thumbnail.replace("{MODELHASH}", modelhash) + content.onerror = function() { + 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)) diff --git a/scss/_sidebar.scss b/scss/_sidebar.scss index 062d689..0d3e497 100644 --- a/scss/_sidebar.scss +++ b/scss/_sidebar.scss @@ -1,40 +1,36 @@ .nodeheader { - width: 90%; - position: relative; - z-index: 2; + width: 90%; + position: relative; + z-index: 2; } .nodeheader img { - width: 30%; - max-height: 180px; - margin: auto; - text-align: center; - max-width: 128px; - display: block; - z-index: 2; + width: 30%; + max-height: 180px; + margin: auto; + text-align: center; + max-width: 128px; + display: block; + z-index: 2; } -.nodeheader img .none{ - display: none; + +.nodeheader img .none { + display: none; } .nodeheader span { - background-color: silver; - background-color: hsla(0, 0%, 100%, 0.5); - position: absolute; - bottom: 0; - width: 100%; - line-height: 1.5em; - text-align: center; - color: black; - font-weight: bold; - font-size: large; - z-index: 2; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.limit { - min-height: 1px; - max-height: 1px; + background-color: silver; + background-color: hsla(0, 0%, 100%, 0.5); + position: absolute; + bottom: 0; + width: 100%; + line-height: 1.5em; + text-align: center; + color: black; + font-weight: bold; + font-size: large; + z-index: 2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } diff --git a/scss/main.scss b/scss/main.scss index a582582..68cc4eb 100644 --- a/scss/main.scss +++ b/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;