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": [
{ "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")
if (typeof label === "string")
th.textContent = label
else
else {
th.appendChild(label)
tr.className = "routerpic"
}
tr.appendChild(th)

View file

@ -378,16 +378,13 @@ 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"
}
}
if (o.caption) {
caption = o.caption.replace("{MODELHASH}", modelhash)
@ -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")
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))

View file

@ -13,7 +13,8 @@
display: block;
z-index: 2;
}
.nodeheader img .none{
.nodeheader img .none {
display: none;
}
@ -33,8 +34,3 @@
overflow: hidden;
text-overflow: ellipsis;
}
.limit {
min-height: 1px;
max-height: 1px;
}

View file

@ -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;