[PATCH v2 1/1] Use pure.css for SSL WebUI
Tim Niemeyer
tim.niemeyer at mastersword.de
So Jan 31 19:01:13 CET 2016
Hi
Am Donnerstag, den 28.01.2016, 18:49 +0100 schrieb Dominik Heidler:
> Signed-off-by: Dominik Heidler <dominik at heidler.eu>
Tested-by: Tim Niemeyer <tim.niemeyer at mastersword.de>
Mit dem Patch wird auch der Button von der Map repariert, damit wäre der
"Fix Map" Patch obsolete.
Tim
> ---
> .../fff/fff-web/files/www/public/cgi-bin/status | 2 +-
> .../fff/fff-web/files/www/public/css/style.css | 56 ++++-
> .../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, 186 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..7059050 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,49 @@ 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;
> +}
> +
> + at media(max-width:1070px) {
> + .pure-menu li a {
> + padding: 5px 10px;
> + }
> +}
> +
> + at media(max-width:930px) {
> + .home-menu.pure-menu > a.pure-menu-heading {
> + display: none;
> + }
> +}
> +
> + at media(max-width:700px) {
> + .pure-menu li a {
> + padding: 5px 5px;
> + }
> +}
> 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
>
-------------- nächster Teil --------------
Ein Dateianhang mit Binärdaten wurde abgetrennt...
Dateiname : signature.asc
Dateityp : application/pgp-signature
Dateigröße : 473 bytes
Beschreibung: This is a digitally signed message part
URL : <http://lists.freifunk.net/pipermail/franken-dev-freifunk.net/attachments/20160131/dae593a9/attachment-0002.sig>
Mehr Informationen über die Mailingliste franken-dev