[PATCH 1/1] Use pure.css for SSL WebUI
Dominik Heidler
dominik at heidler.eu
Mo Feb 15 14:35:02 CET 2016
Hi,
angesichts der Tatsache, dass das WebUI aktuell zwar funktioniert, aber durch das (total unnötig verwendete)
JavaScript furchtbar zu maintainen ist, wird das WebUI in dieser Form vmtl eh nur in der nächsten Version enthalten sein.
Man braucht keine ~500 Zeilen Javascript, um 5 Werte in der Config zu setzen.
Das soll mit ganz normalen CGIs gemacht werden, die die Werte dann einfach über
UCI Aufrufe setzen können.
In dem Zug müssen wir dann das komplette Frontend sowieso neu schreiben.
Dann können wir auch sehen, ob wie pure.css wirklich brauchen, oder ob wir die paar CSS Anweisungen nicht
einfach selbst schreiben.
Grüße,
Dominik
Am 14.02.2016 um 20:29 schrieb delphiN:
> Hi Dominik.
>
> Was ist eigentlich aus diesen Patches geworden? Sind die einfach unter
> gegangen? Mir ist gerade aufgefallen, das das Web-Interface ja immer
> noch echt bescheiden aussieht.
>
> delphiN
>
>
> Am 28.01.2016 17:09, schrieb Dominik Heidler:
>> 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"; }); }
>
>
>
>
Mehr Informationen über die Mailingliste franken-dev