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
This commit is contained in:
Milan Pssler 2016-11-06 00:11:49 +01:00
parent 84aee48229
commit 1641bc2437
5 changed files with 68 additions and 87 deletions

View file

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

View file

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

View file

@ -378,15 +378,12 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
return a & a return a & a
}, 0) }, 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) { if (o.caption) {
@ -400,7 +397,7 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
p.appendChild(content) p.appendChild(content)
return content return content
} }
function showStatImg(o, d) { function showStatImg(o, d) {
var subst = {} var subst = {}
@ -410,44 +407,30 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
} }
return function(config, el, router, d) { 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") var attributes = document.createElement("table")
attributes.classList.add("attributes") 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, "Status", showStatus(d))
attributeEntry(attributes, "Gateway", d.flags.gateway ? "ja" : null) attributeEntry(attributes, "Gateway", d.flags.gateway ? "ja" : null)
attributeEntry(attributes, "Koordinaten", showGeoURI(d)) attributeEntry(attributes, "Koordinaten", showGeoURI(d))

View file

@ -1,40 +1,36 @@
.nodeheader { .nodeheader {
width: 90%; width: 90%;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.nodeheader img { .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 { .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;
} }

View file

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