[!!!][TASK] Refactor Scss, add Sass-lint and adjust styling
Add variables to allow easy modifications to color, font and also extending Style
This commit is contained in:
Xaver Maierhofer
Milan Pässler
parent
6175d6bb7a
commit
ed06ff6b09
50 changed files with 762 additions and 888 deletions
|
|
@ -11,17 +11,23 @@ define(["helper"], function (helper) {
|
|||
}
|
||||
|
||||
return function (config, el, router, d) {
|
||||
var unknown = !(d.source.node);
|
||||
var unknown = !d.source.node;
|
||||
var h2 = document.createElement("h2");
|
||||
var a1 = document.createElement("a");
|
||||
var a1;
|
||||
if (!unknown) {
|
||||
a1 = document.createElement("a");
|
||||
a1.href = "#";
|
||||
a1.onclick = router.node(d.source.node);
|
||||
} else {
|
||||
a1 = document.createElement("span");
|
||||
}
|
||||
a1.textContent = unknown ? d.source.id : d.source.node.nodeinfo.hostname;
|
||||
h2.appendChild(a1);
|
||||
h2.appendChild(document.createTextNode(" \uF3D6 "));
|
||||
h2.className = "ion-inside";
|
||||
|
||||
var arrow = document.createElement("spam");
|
||||
arrow.classList.add("ion-ios-arrow-thin-right");
|
||||
h2.appendChild(arrow);
|
||||
|
||||
var a2 = document.createElement("a");
|
||||
a2.href = "#";
|
||||
a2.onclick = router.node(d.target.node);
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ define(["helper"], function (helper) {
|
|||
"uci set gluon-node-info.@location[0].longitude='" + d.lng.toFixed(9) + "';" +
|
||||
"uci commit gluon-node-info";
|
||||
|
||||
el.appendChild(createBox("uci", "Befehl", editUci, false));
|
||||
el.appendChild(createBox("uci", "Uci", editUci));
|
||||
|
||||
var linkPlain = document.createElement("a");
|
||||
linkPlain.textContent = "plain";
|
||||
|
|
@ -49,22 +49,13 @@ define(["helper"], function (helper) {
|
|||
};
|
||||
linkUci.href = "#";
|
||||
|
||||
var hintText = document.createElement("p");
|
||||
hintText.appendChild(document.createTextNode("Du kannst zwischen "));
|
||||
hintText.appendChild(linkPlain);
|
||||
hintText.appendChild(document.createTextNode(" und "));
|
||||
hintText.appendChild(linkUci);
|
||||
hintText.appendChild(document.createTextNode(" wechseln."));
|
||||
el.appendChild(hintText);
|
||||
|
||||
function createBox(name, title, inputElem, isVisible) {
|
||||
var visible = typeof isVisible !== "undefined" ? isVisible : true;
|
||||
function createBox(name, title, inputElem) {
|
||||
var box = document.createElement("div");
|
||||
var heading = document.createElement("h3");
|
||||
heading.textContent = title;
|
||||
box.appendChild(heading);
|
||||
var btn = document.createElement("button");
|
||||
btn.className = "ion-ios-copy";
|
||||
btn.classList.add("ion-ios-copy");
|
||||
btn.title = "Kopieren";
|
||||
btn.onclick = function () {
|
||||
copy2clip(inputElem.id);
|
||||
|
|
@ -76,7 +67,6 @@ define(["helper"], function (helper) {
|
|||
line.appendChild(btn);
|
||||
box.appendChild(line);
|
||||
box.id = "box-" + name;
|
||||
box.style.display = visible ? "block" : "none";
|
||||
return box;
|
||||
}
|
||||
|
||||
|
|
@ -90,16 +80,5 @@ define(["helper"], function (helper) {
|
|||
}
|
||||
}
|
||||
|
||||
function switch2plain() {
|
||||
document.getElementById("box-uci").style.display = "none";
|
||||
document.getElementById("box-lat").style.display = "block";
|
||||
document.getElementById("box-lng").style.display = "block";
|
||||
}
|
||||
|
||||
function switch2uci() {
|
||||
document.getElementById("box-uci").style.display = "block";
|
||||
document.getElementById("box-lat").style.display = "none";
|
||||
document.getElementById("box-lng").style.display = "none";
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ define(["infobox/link", "infobox/node", "infobox/location"], function (Link, Nod
|
|||
el.destroy = destroy;
|
||||
|
||||
var closeButton = document.createElement("button");
|
||||
closeButton.classList.add("close");
|
||||
closeButton.classList.add("close", "ion-android-close");
|
||||
closeButton.onclick = router.reset;
|
||||
el.appendChild(closeButton);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
define(["moment", "tablesort", "helper", "moment.de"],
|
||||
function (moment, Tablesort, helper) {
|
||||
define(["chroma-js", "moment", "tablesort", "helper", "moment.de"],
|
||||
function (chroma, moment, Tablesort, helper) {
|
||||
"use strict";
|
||||
|
||||
function showGeoURI(d) {
|
||||
|
|
@ -158,7 +158,7 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("clients");
|
||||
span.textContent = "\uF47E ".repeat(d.statistics.clients);
|
||||
span.innerHTML = "<i class=\"ion-ios-person\"></i>".repeat(d.statistics.clients);
|
||||
el.appendChild(span);
|
||||
|
||||
var spanmesh = document.createElement("span");
|
||||
|
|
@ -255,8 +255,7 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
|
||||
function showBar(className, v) {
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("bar");
|
||||
span.classList.add(className);
|
||||
span.classList.add("bar", className);
|
||||
|
||||
var bar = document.createElement("span");
|
||||
bar.style.width = (v * 100) + "%";
|
||||
|
|
@ -271,8 +270,7 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
|
||||
function showLoadBar(className, v) {
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("bar");
|
||||
span.classList.add(className);
|
||||
span.classList.add("bar", className);
|
||||
|
||||
var bar = document.createElement("span");
|
||||
if (v >= 1) {
|
||||
|
|
@ -411,7 +409,7 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
link.href = webpage;
|
||||
if (webpage.search(/^https:\/\//i) !== -1) {
|
||||
var lock = document.createElement("span");
|
||||
lock.className = "ion-android-lock";
|
||||
lock.classList.add("ion-android-lock");
|
||||
a.appendChild(lock);
|
||||
var t1 = document.createTextNode(" ");
|
||||
a.appendChild(t1);
|
||||
|
|
@ -476,6 +474,11 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
}
|
||||
|
||||
return function (config, el, router, d) {
|
||||
var linkScale = chroma.scale(chroma.bezier(["#04C714", "#FF5500", "#F02311"])).domain([1, 5]);
|
||||
var h2 = document.createElement("h2");
|
||||
h2.textContent = d.nodeinfo.hostname;
|
||||
el.appendChild(h2);
|
||||
|
||||
var attributes = document.createElement("table");
|
||||
attributes.classList.add("attributes");
|
||||
|
||||
|
|
@ -495,9 +498,9 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
}
|
||||
helper.attributeEntry(attributes, top, d.nodeinfo.hostname);
|
||||
} else {
|
||||
var h2 = document.createElement("h2");
|
||||
h2.textContent = d.nodeinfo.hostname;
|
||||
el.appendChild(h2);
|
||||
var heading = document.createElement("h2");
|
||||
heading.textContent = d.nodeinfo.hostname;
|
||||
el.appendChild(heading);
|
||||
}
|
||||
|
||||
helper.attributeEntry(attributes, "Status", showStatus(d));
|
||||
|
|
@ -579,28 +582,34 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
var tr = document.createElement("tr");
|
||||
|
||||
var td1 = document.createElement("td");
|
||||
td1.className = "ion-inside";
|
||||
td1.appendChild(document.createTextNode(d.incoming ? " \uF3D5 " : " \uF3D6 "));
|
||||
tr.appendChild(td1);
|
||||
|
||||
var td2 = document.createElement("td");
|
||||
td2.appendChild(createLink(d, router));
|
||||
var direction = document.createElement("span");
|
||||
direction.classList.add(d.incoming ? "ion-ios-arrow-thin-left" : "ion-ios-arrow-thin-right");
|
||||
td1.appendChild(direction);
|
||||
|
||||
if (!unknown && helper.hasLocation(d.node)) {
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("icon");
|
||||
span.classList.add("ion-location");
|
||||
td2.appendChild(span);
|
||||
span.classList.add("icon", "ion-location");
|
||||
td1.appendChild(span);
|
||||
}
|
||||
|
||||
tr.appendChild(td1);
|
||||
|
||||
var td2 = document.createElement("td");
|
||||
var a1 = document.createElement("a");
|
||||
a1.classList.add("hostname", d.link.target.node.flags.online ? "online" : "unseen");
|
||||
a1.textContent = unknown ? d.id : d.node.nodeinfo.hostname;
|
||||
if (!unknown) {
|
||||
a1.href = "#";
|
||||
}
|
||||
a1.onclick = router.node(d.node);
|
||||
td2.appendChild(a1);
|
||||
|
||||
tr.appendChild(td2);
|
||||
|
||||
var td3 = document.createElement("td");
|
||||
var a2 = document.createElement("a");
|
||||
a2.href = "#";
|
||||
a2.textContent = helper.showTq(d.link);
|
||||
a2.onclick = router.link(d.link);
|
||||
td3.appendChild(a2);
|
||||
td3.textContent = helper.showTq(d.link);
|
||||
td3.style.color = linkScale(d.link.tq).hex();
|
||||
tr.appendChild(td3);
|
||||
|
||||
var td4 = document.createElement("td");
|
||||
|
|
@ -612,11 +621,7 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
tr.appendChild(td4);
|
||||
|
||||
var td5 = document.createElement("td");
|
||||
var a4 = document.createElement("a");
|
||||
a4.href = "#";
|
||||
a4.textContent = helper.showDistance(d.link);
|
||||
a4.onclick = router.link(d.link);
|
||||
td5.appendChild(a4);
|
||||
td5.textContent = helper.showDistance(d.link);
|
||||
td5.setAttribute("data-sort", d.link.distance !== undefined ? -d.link.distance : 1);
|
||||
tr.appendChild(td5);
|
||||
|
||||
|
|
@ -624,7 +629,7 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
});
|
||||
|
||||
table.appendChild(tbody);
|
||||
table.className = "node-links";
|
||||
table.classList.add("node-links");
|
||||
|
||||
Tablesort(table);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue