[PATCH 1/1] Use pure.css for SSL WebUI
Dominik Heidler
dominik at heidler.eu
Do Jan 28 17:09:33 CET 2016
Signed-off-by: Dominik Heidler <dominik at heidler.eu>
---
.../fff/fff-web/files/www/public/cgi-bin/status | 2 +-
.../fff/fff-web/files/www/public/css/style.css | 38 +++-
.../fff/fff-web/files/www/ssl/cgi-bin/home | 1 +
src/packages/fff/fff-web/files/www/ssl/css | 1 +
src/packages/fff/fff-web/files/www/ssl/home.html | 62 +++---
src/packages/fff/fff-web/files/www/ssl/home.js | 4 +
src/packages/fff/fff-web/files/www/ssl/index.html | 27 ++-
.../fff/fff-web/files/www/ssl/password.html | 17 +-
.../fff/fff-web/files/www/ssl/settings.html | 13 +-
src/packages/fff/fff-web/files/www/ssl/settings.js | 20 +-
src/packages/fff/fff-web/files/www/ssl/shared.js | 50 +++--
src/packages/fff/fff-web/files/www/ssl/style.css | 226 ---------------------
.../fff/fff-web/files/www/ssl/upgrade.html | 15 +-
.../fff/fff-web/files/www/ssl/wifiscan.html | 11 +-
src/packages/fff/fff-web/files/www/ssl/wifiscan.js | 2 +-
15 files changed, 168 insertions(+), 321 deletions(-)
create mode 120000 src/packages/fff/fff-web/files/www/ssl/css
delete mode 100644 src/packages/fff/fff-web/files/www/ssl/style.css
diff --git a/src/packages/fff/fff-web/files/www/public/cgi-bin/status b/src/packages/fff/fff-web/files/www/public/cgi-bin/status
index fa837af..087a318 100755
--- a/src/packages/fff/fff-web/files/www/public/cgi-bin/status
+++ b/src/packages/fff/fff-web/files/www/public/cgi-bin/status
@@ -39,7 +39,7 @@ if [ -n "$position_comment" ]; then
echo " <li><a href='#'>${position_comment}</a></li>"
fi
%>
- <li><form action="https://<% echo -n "$HTTP_HOST" %>"><button type="submit" class="pure-button">Login</button></form></li>
+ <li><form action="https://<% echo -n "$HTTP_HOST" %>"><button type="submit" class="pure-button pure-button-primary">Login</button></form></li>
</ul>
</div>
</div>
diff --git a/src/packages/fff/fff-web/files/www/public/css/style.css b/src/packages/fff/fff-web/files/www/public/css/style.css
index a194087..2b4f818 100644
--- a/src/packages/fff/fff-web/files/www/public/css/style.css
+++ b/src/packages/fff/fff-web/files/www/public/css/style.css
@@ -26,9 +26,6 @@ label {
}
.pure-button {
- background-color: #1f8dd6;
- color: white;
- padding: 0.5em 2em;
border-radius: 5px;
}
@@ -63,12 +60,15 @@ a.pure-button-primary {
color: #6FBEF3;
}
-.home-menu li a:hover,
-.home-menu li a:focus {
+.home-menu li a:hover {
background: none;
color: #AECFE5;
}
+.home-menu li a:focus {
+ background: none;
+}
+
.home-menu {
text-align: left;
}
@@ -76,3 +76,31 @@ a.pure-button-primary {
.home-menu ul {
float: right;
}
+
+li { list-style-type: none; }
+
+.pure-form-aligned div.pure-control-group > label {
+ width: 11.5em;
+}
+
+fieldset > legend {
+ font-weight: bold;
+}
+
+span > label {
+ width: auto !important;
+ margin: 0 1em 0 3px !important;
+}
+
+.formtable th {
+ padding-right: 5px;
+ text-align: right;
+ vertical-align: top;
+ color: #34495e;
+ font-weight: normal;
+}
+
+.formtable ul {
+ margin: 0;
+ padding: 0;
+}
diff --git a/src/packages/fff/fff-web/files/www/ssl/cgi-bin/home b/src/packages/fff/fff-web/files/www/ssl/cgi-bin/home
index 7b04b05..b696fb2 100755
--- a/src/packages/fff/fff-web/files/www/ssl/cgi-bin/home
+++ b/src/packages/fff/fff-web/files/www/ssl/cgi-bin/home
@@ -43,6 +43,7 @@ print 'date' "$(date)"
if [ $(sockread /var/run/fastd.status < /dev/null 2> /dev/null | grep -c '"connection": {') -gt 0 ]; then
print 'has_vpn' 'Ja'
+ printList 'fastd_peer' "$(cd /etc/fastd/fff/peers/; ls)"
else
print 'has_vpn' 'Nein'
fi
diff --git a/src/packages/fff/fff-web/files/www/ssl/css b/src/packages/fff/fff-web/files/www/ssl/css
new file mode 120000
index 0000000..0a52d25
--- /dev/null
+++ b/src/packages/fff/fff-web/files/www/ssl/css
@@ -0,0 +1 @@
+../public/css
\ No newline at end of file
diff --git a/src/packages/fff/fff-web/files/www/ssl/home.html b/src/packages/fff/fff-web/files/www/ssl/home.html
index 3cb0583..023c33f 100644
--- a/src/packages/fff/fff-web/files/www/ssl/home.html
+++ b/src/packages/fff/fff-web/files/www/ssl/home.html
@@ -4,51 +4,63 @@
<head>
<title>Home</title>
<meta charset="utf-8"/>
-<link rel="stylesheet" type="text/css" href="style.css" />
<script src="shared.js"></script>
<script src="home.js"></script>
</head>
<body onload="init();">
+<div class="content">
+<div class="pure-form pure-form-aligned">
<fieldset>
<legend id="system">System</legend>
-<div><label>Name: </label><span id="name">?</span></div>
-<div><label>Modell: </label><span id="model">?</span></div>
-<div><label>MAC-Adresse: </label><span id="mac">?</span></div>
-<div><label>Bekannte Knoten: </label><span id="node_count">?</span></div>
-<div><label>Nachbarknoten: </label><span id="neigh_count">?</span></div>
-<div><label>VPN aktiv: </label><span id="has_vpn">?</span></div>
-<div><label>Laufzeit: </label><span id="uptime">?</span></div>
-<div><label>Auslastung: </label><span id="load">?</span></div>
-<div><label>System: </label><span id="uname">?</span></div>
-<div><label>Uhrzeit: </label><span id="date">?</span></div>
+<table class="formtable">
+<tr><th>Name:</th><td id="name">?</td></tr>
+<tr><th>Modell:</th><td id="model">?</td></tr>
+<tr><th>MAC-Adresse:</th><td id="mac">?</td></tr>
+<tr><th>Bekannte Knoten:</th><td id="node_count">?</td></tr>
+<tr><th>Nachbarknoten:</th><td id="neigh_count">?</td></tr>
+<tr><th>VPN aktiv:</th><td id="has_vpn">?</td></tr>
+<tr><th>Laufzeit:</th><td id="uptime">?</td></tr>
+<tr><th>Auslastung:</th><td id="load">?</td></tr>
+<tr><th>System:</th><td id="uname">?</td></tr>
+<tr><th>Uhrzeit:</th><td id="date">?</td></tr>
+<tr><th>VPN Gateways:</th><td id="fastd_peer">keine</td></tr>
+</table>
</fieldset>
<fieldset>
<legend id="freifunk">Netz: Freifunk</legend>
-<div><label>Nutzer: </label><span id="freifunk_user_count">?</span></div>
-<div><label>Empfangen: </label><span id="freifunk_rx_bytes">?</span> </div>
-<div><label>Gesendet: </label><span id="freifunk_tx_bytes">?</span></div>
-<div><label>IPv4 Adressen: </label><span id="freifunk_addr4">?</span></div>
-<div><label>IPv6 Adressen: </label><span id="freifunk_addr6">?</span></div>
+<table class="formtable">
+<tr><th>Nutzer:</th><td id="freifunk_user_count">?</td></tr>
+<tr><th>Empfangen:</th><td id="freifunk_rx_bytes">?</td></tr>
+<tr><th>Gesendet:</th><td id="freifunk_tx_bytes">?</td></tr>
+<tr><th>IPv4 Adressen:</th><td id="freifunk_addr4">?</td></tr>
+<tr><th>IPv6 Adressen:</th><td id="freifunk_addr6">?</td></tr>
+</table>
</fieldset>
<fieldset>
<legend id="wan">Netz: WAN</legend>
-<div><label>Internet Vorhanden: </label><span id="has_internet">?</span></div>
-<div><label>Empfangen: </label><span id="wan_rx_bytes">?</span> </div>
-<div><label>Gesendet: </label><span id="wan_tx_bytes">?</span></div>
-<div><label>IPv4 Adressen: </label><span id="wan_addr4">?</span></div>
-<div><label>IPv6 Adressen: </label><span id="wan_addr6">?</span></div>
+<table class="formtable">
+<tr><th>Internet vorhanden:</th><td id="has_internet">?</td></tr>
+<tr><th>Empfangen:</th><td id="wan_rx_bytes">?</td></tr>
+<tr><th>Gesendet:</th><td id="wan_tx_bytes">?</td></tr>
+<tr><th>IPv4 Adressen:</th><td id="wan_addr4">?</td></tr>
+<tr><th>IPv6 Adressen:</th><td id="wan_addr6">?</td></tr>
+</table>
</fieldset>
<fieldset>
<legend id="software">Software</legend>
-<div><label>Firmware Version: </label><span id="firmware_version">?</span></div>
-<div><label>OpenWrt Version: </label><span id="openwrt_version">?</span></div>
-<div><label>Batman-Adv Version: </label><span id="batman_version">?</span></div>
-<div><label>Fastd Version: </label><span id="fastd_version">?</span></div>
+<table class="formtable">
+<tr><th>Firmware Version:</th><td id="firmware_version">?</td></tr>
+<tr><th>OpenWrt Version:</th><td id="openwrt_version">?</td></tr>
+<tr><th>Batman-Adv Version:</th><td id="batman_version">?</td></tr>
+<tr><th>Fastd Version:</th><td id="fastd_version">?</td></tr>
+</table>
</fieldset>
+</div>
+</div>
</body>
</html>
diff --git a/src/packages/fff/fff-web/files/www/ssl/home.js b/src/packages/fff/fff-web/files/www/ssl/home.js
index da12f32..289c746 100644
--- a/src/packages/fff/fff-web/files/www/ssl/home.js
+++ b/src/packages/fff/fff-web/files/www/ssl/home.js
@@ -23,6 +23,10 @@ function init() {
continue;
}
+ if (key == 'name') {
+ document.getElementsByTagName("title")[0].innerHTML = "FFF Router :: " + value;
+ }
+
//for traffic
if(/_bytes$/.test(key)) {
value = formatSize(value);
diff --git a/src/packages/fff/fff-web/files/www/ssl/index.html b/src/packages/fff/fff-web/files/www/ssl/index.html
index cc6cff7..ab5c91e 100644
--- a/src/packages/fff/fff-web/files/www/ssl/index.html
+++ b/src/packages/fff/fff-web/files/www/ssl/index.html
@@ -2,9 +2,12 @@
<html>
<head>
-<title>Freifunk</title>
+<title>FFF Router</title>
<meta charset="utf-8"/>
-<link rel="stylesheet" type="text/css" href="style.css" />
+<link rel="stylesheet" href="/css/pure-min.css">
+<link rel="stylesheet" href="/css/side-menu.css">
+<link rel="stylesheet" href="/css/grids-responsive-min.css">
+<link rel="stylesheet" href="/css/style.css">
<script src="shared.js"></script>
<script type="text/javascript">
@@ -28,6 +31,7 @@ function adv_toggle(e)
adv_mode = !adv_mode;
e.innerHTML = adv_mode ? "Erweitert: An" : "Erweitert: Aus";
adv_apply();
+ document.activeElement.blur();
}
function nav_onclick()
@@ -70,8 +74,9 @@ function nav_onclick()
onParents(this, 'UL', function(n) { show(n); });
onChilds(this.parentNode, 'UL', function(n) { show(n); });
- onDesc($("globalnav"), 'A', function(n) { removeClass(n, "here"); });
- onParents(this, 'LI', function(n) { addClass(n.firstChild, "here"); });
+ onDesc($("globalnav"), 'LI', function(n) { removeClass(n, "pure-menu-selected"); });
+ onParents(this, 'LI', function(n) { addClass(n, "pure-menu-selected"); });
+ document.activeElement.blur();
return false;
}
@@ -86,6 +91,7 @@ function preselect() {
}
function reboot() {
+ document.activeElement.blur();
if(!confirm("Neustart durchf\xFChren?")) return;
send("/cgi-bin/misc", { func : "reboot" }, function(data) {
setText('msg', data);
@@ -99,7 +105,9 @@ function logout() {
</head>
<body onload="preselect();">
-
+<div class="header">
+<div class="home-menu pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed">
+<a class="pure-menu-heading" href="http://www.freifunk-franken.de">freifunk-franken.de</a>
<ul id="globalnav">
<li><a href="home.html" id="first">Home</a></li>
<li><a href="settings.html">Einstellungen</a></li>
@@ -107,13 +115,14 @@ function logout() {
<li><a href="upgrade.html">Upgrade</a></li>
<li><a href="password.html">Password</a></li>
<li><a href="#" onclick="reboot()">Neustart</a></li>
- <li><a href="#" onclick="logout()">Logout</a></li>
<li><a href="#" onclick="adv_toggle(this)">Erweitert: Aus</a></li>
+ <li><button class="pure-button pure-button-primary" onclick="logout()">Logout</button></li>
</ul>
-<br>
-<pre id="msg" tabindex="-1"></pre>
+</div>
+</div>
-<div id="help"></div>
+<br>
+<div class="content" style="margin-bottom: 0;"><pre id="msg" tabindex="-1"></pre></div>
<div id="body"></div>
diff --git a/src/packages/fff/fff-web/files/www/ssl/password.html b/src/packages/fff/fff-web/files/www/ssl/password.html
index 08f10b4..f33cf26 100644
--- a/src/packages/fff/fff-web/files/www/ssl/password.html
+++ b/src/packages/fff/fff-web/files/www/ssl/password.html
@@ -4,24 +4,27 @@
<head>
<title>Password</title>
<meta charset="utf-8"/>
-<link rel="stylesheet" type="text/css" href="style.css" />
<script src="shared.js"></script>
<script src="password.js"></script>
</head>
<body onload="init();">
+<div class="content">
+<form class="pure-form pure-form-aligned">
<fieldset>
<legend>Passwort</legend>
- <div>
- <label>Neues Password:</label> <input id="p1" type="password">
+ <div class="pure-control-group">
+ <label>Neues Password:</label><input id="p1" type="password">
</div>
- <div>
- <label>Bestätigung:</label> <input id="p2" type="password">
+ <div class="pure-control-group">
+ <label>Bestätigung:</label><input id="p2" type="password">
</div>
- <div><br />Das Passwort ist für den Zugriff auf die Weboberfläche des Routers und auch den Zugriff per SSH. Der Benutzername ist 'root'.</div>
+ <div>Das Passwort ist für den Zugriff auf die Weboberfläche des Routers und auch den Zugriff per SSH.<br />Der Benutzername ist 'root'.</div>
</fieldset>
<div>
- <button type="button" onclick="apply()">Ändern</button>
+ <button type="button" class="pure-button pure-button-primary" onclick="apply()">Ändern</button>
+</div>
+</form>
</div>
</body>
diff --git a/src/packages/fff/fff-web/files/www/ssl/settings.html b/src/packages/fff/fff-web/files/www/ssl/settings.html
index eb081a2..1176d8f 100644
--- a/src/packages/fff/fff-web/files/www/ssl/settings.html
+++ b/src/packages/fff/fff-web/files/www/ssl/settings.html
@@ -4,23 +4,26 @@
<head>
<title>Einstellungen</title>
<meta charset="utf-8"/>
-<link rel="stylesheet" type="text/css" href="style.css" />
<script src="shared.js"></script>
<script src="settings.js"></script>
</head>
<body onload="init();">
+<div class="content">
+<form class="pure-form pure-form-aligned" onsubmit="save_data(); return false;">
<fieldset>
<legend>Allgemeine Einstellungen</legend>
- <span id="general"></span>
+ <div id="general"></div>
</fieldset>
<fieldset>
<legend>Bandbreitenkontrolle</legend>
- <span id="traffic"></span>
- <div><br />Die für das Freifunknetz beanspruchte Internet-Bandbreite am WAN kann hier begrenzt werden.</div>
+ <div id="traffic"></div>
+ <div>Die für das Freifunknetz beanspruchte Internet-Bandbreite am WAN kann hier begrenzt werden.<br /><br /></div>
</fieldset>
-<button type="button" onclick="save_data()">Speichern</button>
+<input type="submit" class="pure-button pure-button-primary" value="Speichern" />
+</form>
+</div>
</body>
</html>
diff --git a/src/packages/fff/fff-web/files/www/ssl/settings.js b/src/packages/fff/fff-web/files/www/ssl/settings.js
index bf1b878..f2dfc61 100644
--- a/src/packages/fff/fff-web/files/www/ssl/settings.js
+++ b/src/packages/fff/fff-web/files/www/ssl/settings.js
@@ -53,27 +53,21 @@ function appendSetting(p, path, value, mode)
switch(name)
{
case "latitude":
- b = append_input(p, "GPS-Koordinaten Latitude", id, value);
+ b = append_input(p, "GPS Breitengrad", id, value);
b.lastChild.placeholder = "52.02713078";
addInputCheck(b.lastChild, /^$|^\d{1,3}\.\d{1,8}$/, "Ung\xfcltige Eingabe. Bitte nur maximal 8 Nachkommastellen und keine Kommas verwenden.");
addHelpText(b, "Die Latitude Koordinate dieses Knotens auf der Freifunk-Karte (z.B. \"52.02713078\").");
- var map_button = append_button(b, "Position auf Karte anzeigen / setzen", function() {
- window.open('/map.html', '_blank', 'location=0,status=0,scrollbars=1,width=400,height=300')
- });
- b.style["position"] = "relative";
- map_button.style["position"] = "absolute";
- map_button.style["height"] = "44px";
+ var map_button = append_button(b, "Position auf Karte anzeigen / setzen", function() {window.open('/map.html', '_blank', 'location=0,status=0,scrollbars=1,width=400,height=300')});
map_button.style["margin-left"] = "5px";
- map_button.style["z-index"] = "-1";
break;
case "longitude":
- b = append_input(p, "GPS-Koordinaten Longitude", id, value);
+ b = append_input(p, "GPS Längengrad", id, value);
b.lastChild.placeholder = "8.52829987";
addInputCheck(b.lastChild, /^$|^\d{1,3}\.\d{1,8}$/, "Ung\xfcltige Eingabe. Bitte nur maximal 8 Nachkommastellen und keine Kommas verwenden.");
addHelpText(b, "Die Longitude Koordinate dieses Knotens auf der Freifunk-Karte (z.B. \"8.52829987\").");
break;
case "position_comment":
- b = append_input(p, "Standort Beschreibung", id, value);
+ b = append_input(p, "Standortbeschreibung", id, value);
b.lastChild.placeholder = "Am Antennenmast";
addInputCheck(b.lastChild, /^$|^[\-\^'\w\.\:\[\]\(\)\/ &@\+\u0080-\u00FF]{0,255}$/, "Ung\xfcltige Eingabe.");
addHelpText(b, "Eine genauere Beschreibung zum Standort");
@@ -83,9 +77,10 @@ function appendSetting(p, path, value, mode)
b.lastChild.placeholder = "MeinRouter";
addInputCheck(b.lastChild, /^$|^[\-\^'\w\.\:\[\]\(\)\/ &@\+\u0080-\u00FF]{0,32}$/, "Ung\xfcltige Eingabe.");
addHelpText(b, "Der Name dieses Knotens auf der Freifunk-Karte.");
+ document.getElementsByTagName("title")[0].innerHTML = "FFF Router :: " + value;
break;
case "description":
- b = append_input(p, "Knotenbeschreibung", id, value);
+ b = append_textarea(p, "Knotenbeschreibung", id, value);
b.lastChild.placeholder = "In einer grauen Kiste versteckt";
addInputCheck(b.lastChild, /^$|^[\-\^'\w\.\:\[\]\(\)\/ &@\+\u0080-\u00FF]{0,255}$/, "Ung\xfcltige Eingabe.");
addHelpText(b, "Beschreibung dieses Knotens.");
@@ -98,7 +93,7 @@ function appendSetting(p, path, value, mode)
break;
case "enabled":
if(cfg == "simple-tc") {
- b = append_radio(p, "Bandbreitenkontrolle", id, value, [["An", "1"], ["Aus", "0"]]);
+ b = append_radio(p, "Bandbreitenkontrolle", id, value, [["An", "1"], ["Aus", "0"]], true);
addHelpText(b, "Bandbreitenkontrolle f\xfcr den Upload-/Download \xfcber das Freifunknetz \xfcber den eigenen Internetanschluss.");
}
break;
@@ -117,6 +112,7 @@ function appendSetting(p, path, value, mode)
}
b.id = id; //needed for updateFrom
+ addClass(b, "pure-control-group");
b.onchange = function() {
updateFrom(b);
};
diff --git a/src/packages/fff/fff-web/files/www/ssl/shared.js b/src/packages/fff/fff-web/files/www/ssl/shared.js
index 1c4c0e0..e652595 100644
--- a/src/packages/fff/fff-web/files/www/ssl/shared.js
+++ b/src/packages/fff/fff-web/files/www/ssl/shared.js
@@ -53,21 +53,7 @@ function replaceItem(str, old_item, new_item)
}
function addHelpText(elem, text) {
- var help = $("help");
-
- if(help) {
- elem.onmouseover = function(e) {
- help.style.top = (e.clientY-20)+"px";
- help.style.left = (e.clientX+80)+"px";
- help.innerHTML = text;
- show(help);
- };
-
- elem.onmouseout = function() {
- help.innerHTML = "";
- hide(help);
- };
- }
+ elem.title = text;
}
//to config file syntax
@@ -261,6 +247,8 @@ function collect_inputs(p, obj)
{
if(p.tagName == "SELECT")
obj[p.name] = p.value;
+ if(p.tagName == "TEXTAREA")
+ obj[p.name] = p.value;
if(p.tagName == "INPUT")
if(p.type == "text" || p.type == "password" || (p.type == "radio" && p.checked))
obj[p.name] = p.value
@@ -296,6 +284,7 @@ function append_section(parent, title, id)
function append_button(parent, text, onclick)
{
var button = append(parent, 'button');
+ addClass(button, "pure-button");
button.type = 'button';
button.innerHTML = text;
button.onclick = onclick;
@@ -370,6 +359,27 @@ function append_input(parent, title, name, value)
input.value = (typeof value == "undefined") ? "" : value;
input.name = name;
input.type = "text";
+ addClass(input, "pure-input-1-3");
+
+ div.appendChild(label);
+ div.appendChild(input);
+
+ return div;
+}
+
+//append a textarea field
+//e.g. append_input(parent, "Name", "name_string", "MyName")
+function append_textarea(parent, title, name, value)
+{
+ var div = append(parent, 'div');
+ var label = create('label');
+ var input = create('textarea');
+
+ label.innerHTML = title + ":";
+ input.value = (typeof value == "undefined") ? "" : value;
+ input.name = name;
+ input.type = "text";
+ addClass(input, "pure-input-1-3");
div.appendChild(label);
div.appendChild(input);
@@ -378,9 +388,9 @@ function append_input(parent, title, name, value)
}
//append a radio field
-//e.g. append_radio(parent, "Enabled", "enabled", 0, [["Yes", 1], ["No", 0])
-function append_radio(parent, title, name, selected, choices) {
- return _selection("radio", parent, title, name, [selected], choices);
+//e.g. append_radio(parent, "Enabled", "enabled", 0, [["Yes", 1], ["No", 0], true)
+function append_radio(parent, title, name, selected, choices, inline) {
+ return _selection("radio", parent, title, name, [selected], choices, inline);
}
//append a checkbox field
@@ -389,7 +399,7 @@ function append_check(parent, title, name, selected, choices) {
return _selection("checkbox", parent, title, name, selected, choices);
}
-function _selection(type, parent, title, name, selected, choices)
+function _selection(type, parent, title, name, selected, choices, inline)
{
var p = append(parent, 'div');
var label = append(p, 'label');
@@ -405,7 +415,7 @@ function _selection(type, parent, title, name, selected, choices)
var choice_value = "" + (s ? choices[i] : choices[i][1]);
var choice_help = s ? undefined : choices[i][2];
- var div = append(span, 'div');
+ var div = append(span, (inline)?'span':'div');
var input = append(div, 'input');
var label = append(div, 'label');
diff --git a/src/packages/fff/fff-web/files/www/ssl/style.css b/src/packages/fff/fff-web/files/www/ssl/style.css
deleted file mode 100644
index 61fc3f0..0000000
--- a/src/packages/fff/fff-web/files/www/ssl/style.css
+++ /dev/null
@@ -1,226 +0,0 @@
-
-/* common */
-
-* { margin:0; padding:0; }
-
-a { text-decoration: none; }
-
-li { list-style-type: none; }
-
-html {
- font: 90%/1.3 arial,sans-serif;
- padding:1em;
- background:#fafafa;
-}
-
-body {
- font: normal 16px verdana,arial,'Bitstream Vera Sans',helvetica,sans-serif;
-}
-
-
-/* specific */
-
-.mac {
- color: #0033CC;
- cursor: help;
-}
-
-#nds_files label {
- width: 18em;
-}
-
-#nds_macs {
- margin-bottom: 2em;
-}
-
-#wifiscan table {
- text-align: center;
-}
-
-#wifiscan td:nth-of-type(1) {
- text-align: left;
-}
-
-#help {
- padding: 5px;
- height: 0px;
- position: absolute;
- min-height: 50px;
- background-color: #f2f2f2;
- display:none;
- border: 2px dotted grey;
-}
-
-#switches label {
- width: 6em;
-}
-
-/* forms */
-
-legend {
- color: #0b77b7;
- font-size: 1.2em;
-}
-
-label {
- float: left;
- width: 12em;
- text-align: right;
- margin-right: 1em;
- white-space: nowrap;
-}
-
-fieldset {
- border: 1px solid #ddd;
- padding: 0.5em;
- margin: 0.5em;
- width: 36em;
-}
-
-fieldset fieldset {
- width: auto;
-}
-
-fieldset > * {
- margin: 0.3em 0;
- clear: both;
-}
-
-fieldset div > * {
- display: inline-block;
- vertical-align: middle;
-}
-
-input {
- padding: 0.15em;
- width: 15em;
- border: 1px solid #ddd;
- background: #fafafa;
- font: bold 0.95em arial, sans-serif;
- -moz-border-radius: 0.4em;
- -khtml-border-radius: 0.4em;
-}
-
-input:hover, input:focus {
- border-color: #c5c5c5;
- background: #f6f6f6;
-}
-
-select {
- min-width: 4em;
-}
-
-option {
- padding-right: 1em;
-}
-
-.radio_option div {
- float: left;
- white-space: nowrap;
- clear: none;
-}
-
-.radio_option div label, .radio_option div input {
- vertical-align: middle;
- display: inline;
- float: none;
- width: auto;
- background: none;
- border: none;
-}
-
-.select_option label {
- font-size: 1em;
- color: #000;
-}
-
-.list_option div {
- clear: left;
- margin: 0;
- padding: 0;
- float: left;
- list-style: none;
-}
-
-
-/* navigation */
-
-#globalnav {
- position: relative;
- float: auto;
- width: 98%;
- padding: 0 0 1.75em 1em;
- margin: 0;
- margin-bottom: 2%;
- list-style: none;
- line-height: 1em;
-}
-
-#globalnav li {
- float: left;
- margin: 0;
- padding: 0;
-}
-
-#globalnav a {
- display: block;
- color: #444;
- text-decoration: none;
- font-weight: bold;
- background: #ddd;
- margin: 0;
- padding: 0.25em 1em;
- border-left: 1px solid #fff;
- border-top: 1px solid #fff;
- border-right: 1px solid #aaa;
-}
-
-#globalnav a:hover,
-#globalnav a:active,
-#globalnav a.here:link,
-#globalnav a.here:visited {
- background: #bbb;
-}
-
-#globalnav a.here:link,
-#globalnav a.here:visited {
- position: relative;
- z-index: 102;
-}
-
-/* sub-navigation */
-
-#globalnav ul {
- position: absolute;
- left: 0;
- top: 1.5em;
- float: left;
- background: #bbb;
- width: 100%;
- margin: 0;
- padding: 0.25em 0.25em 0.25em 1em;
- list-style: none;
- border-top: 1px solid #fff;
-}
-
-#globalnav ul li {
- float: left;
- display: block;
- margin-top: 1px;
-}
-
-#globalnav ul a {
- background: #bbb;
- color: #fff;
- display: inline;
- margin: 0;
- padding: 0 1em;
- border: 0;
-}
-
-#globalnav ul a:hover,
-#globalnav ul a:active,
-#globalnav ul a.here:link,
-#globalnav ul a.here:visited {
- color: #444;
-}
diff --git a/src/packages/fff/fff-web/files/www/ssl/upgrade.html b/src/packages/fff/fff-web/files/www/ssl/upgrade.html
index 41d4543..42e57cd 100644
--- a/src/packages/fff/fff-web/files/www/ssl/upgrade.html
+++ b/src/packages/fff/fff-web/files/www/ssl/upgrade.html
@@ -4,18 +4,19 @@
<head>
<title>Upgrade</title>
<meta charset="utf-8"/>
-<link rel="stylesheet" type="text/css" href="style.css" />
<script src="shared.js"></script>
<script src="upgrade.js"></script>
</head>
<body onload="init();">
+<div class="content">
+<div class="pure-form pure-form-aligned">
<fieldset>
<legend>Router Zurücksetzen</legend>
<div>
- <button type="button" onclick="restore_firmware()">Zurücksetzen</button>
+ <button type="button" class="pure-button pure-button-primary" onclick="restore_firmware()">Zurücksetzen</button>
</div>
- <div><br />Alle Einstellungen werden zurückgesetzt und der Router startet neu.</div>
+ <div>Alle Einstellungen werden zurückgesetzt und der Router startet neu.</div>
</fieldset>
<fieldset>
<legend>Manuelles Update</legend>
@@ -25,8 +26,8 @@
<label>
<input type="file" id="import_file" name="firmware" onchange="$('selected_image').innerHTML=this.value.replace(/^.*[\\\/](.*)$/, '$1');" style="visibility:hidden;position:absolute;top:-50;left:-50"/>
<input type="hidden" name="func" value="apply_firmware" />
- <button type="button" onclick="$('import_file').click()">Image Auswählen</button>
- <button type="submit">Senden</button>
+ <button type="button" class="pure-button" onclick="$('import_file').click()">Image Auswählen</button>
+ <button type="submit" class="pure-button pure-button-primary">Senden</button>
</label>
<div>
<input type="checkbox" name="keep_config" value="yes" />
@@ -34,8 +35,10 @@
</div>
</div>
</form>
- <div><br />Hier kann ein Freifunk-Image verwendet werden (*-sysupgrade.bin) oder die Firmware des Routerherstellers.</div>
+ <div>Hier kann ein Freifunk-Image verwendet werden (*-sysupgrade.bin) oder die Firmware des Routerherstellers.</div>
</fieldset>
+</div>
+</div>
</body>
diff --git a/src/packages/fff/fff-web/files/www/ssl/wifiscan.html b/src/packages/fff/fff-web/files/www/ssl/wifiscan.html
index 9e58c85..429301e 100644
--- a/src/packages/fff/fff-web/files/www/ssl/wifiscan.html
+++ b/src/packages/fff/fff-web/files/www/ssl/wifiscan.html
@@ -4,23 +4,26 @@
<head>
<title>Wifiscan</title>
<meta charset="utf-8"/>
-<link rel="stylesheet" type="text/css" href="style.css" />
<script src="shared.js"></script>
<script src="wifiscan.js"></script>
</head>
<body onload="init();">
+<div class="content">
+<form class="pure-form pure-form-aligned">
<fieldset id="wifiscan">
<legend>Wifi Scan</legend>
<div>
<select id="wifiscan_selection"></select>
- <button type="button" onclick="wifi_scan()">Scan starten</button>
+ <button type="button" class="pure-button" onclick="wifi_scan()">Scan starten</button>
</div>
- <table id="wifiscan_table" style="display: none">
- <tr><th>Name</th><th>Kanal</th><th>Signal</th><th>Typ</th></tr>
+ <table id="wifiscan_table" style="display: none; margin-top: 1em;" class="pure-table pure-table-striped">
+ <thead><tr><th>Name</th><th>Kanal</th><th>Signal</th><th>Typ</th></tr></thead>
<tbody id="wifiscan_tbody"></tbody>
</table>
</fieldset>
+</form>
+</div>
</body>
</html>
diff --git a/src/packages/fff/fff-web/files/www/ssl/wifiscan.js b/src/packages/fff/fff-web/files/www/ssl/wifiscan.js
index 3be2591..bf0815c 100644
--- a/src/packages/fff/fff-web/files/www/ssl/wifiscan.js
+++ b/src/packages/fff/fff-web/files/www/ssl/wifiscan.js
@@ -46,7 +46,7 @@ function wifi_scan()
}
var table = $('wifiscan_table');
- show(table);
+ table.style["display"] = "table";
});
}
--
2.6.4
Mehr Informationen über die Mailingliste franken-dev