wirtz
/
esp-link
mirror of https://github.com/jeelabs/esp-link.git
1
0
Fork 0
Code Issues Releases Wiki Activity

switch to 4 col grid; use pure-css source; tweak responsive layout; fix hamburger menu

Browse Source
pull/30/head
Thorsten von Eicken 10 years ago
parent de9b4dbe6d
commit 1f8cdb66b4
7 changed files with 1408 additions and 35 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      html/head-
  2. 6
      html/home.html
  3. 11
      html/pure-min.css
  4. 1388
      html/pure.css
  5. 10
      html/style.css
  6. 9
      html/ui.js
  7. 15
      html/wifi/wifi.html

2
html/head-
Unescape View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html><head> <html><head>
<title>esp-link</title> <title>esp-link</title>
<link rel="stylesheet" href="/pure-min.css"> <link rel="stylesheet" href="/pure.css">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/ui.js"></script> <script src="/ui.js"></script>

6
html/home.html
Unescape View File

@ -7,7 +7,7 @@
<div class="content"> <div class="content">
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-24-24"><div class="card"> <div class="pure-u-1"><div class="card">
<p>The JeeLabs esp-link firmware bridges the ESP8266 serial port to Wifi and can <p>The JeeLabs esp-link firmware bridges the ESP8266 serial port to Wifi and can
program microcontrollers over the serial port, in particular Arduinos, AVRs, and program microcontrollers over the serial port, in particular Arduinos, AVRs, and
NXP's LPC800 and other ARM processors.</p> NXP's LPC800 and other ARM processors.</p>
@ -26,7 +26,7 @@
</div></div> </div></div>
</div> </div>
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-12-24"><div class="card"> <div class="pure-u-1 pure-u-md-1-2"><div class="card">
<h1>Wifi summary</h1> <h1>Wifi summary</h1>
<div id="wifi-spinner" class="spinner spinner-small"></div> <div id="wifi-spinner" class="spinner spinner-small"></div>
<table id="wifi-table" class="pure-table pure-table-horizontal" hidden><tbody> <table id="wifi-table" class="pure-table pure-table-horizontal" hidden><tbody>
@ -36,7 +36,7 @@
<tr><td>Wifi address</td><td id="wifi-ip"></td></tr> <tr><td>Wifi address</td><td id="wifi-ip"></td></tr>
</tbody> </table> </tbody> </table>
</div></div> </div></div>
<div class="pure-u-12-24"><div class="card"> <div class="pure-u-1 pure-u-md-1-2"><div class="card">
<h1>Pin assignment</h1> <h1>Pin assignment</h1>
<legend>Select one of the following signal/pin assignments to match your hardware</legend> <legend>Select one of the following signal/pin assignments to match your hardware</legend>
<fieldset class='radios' id='pin-mux'> <fieldset class='radios' id='pin-mux'>

11
html/pure-min.css vendored
View File

File diff suppressed because one or more lines are too long

1388
html/pure.css
View File

File diff suppressed because it is too large Load Diff

10
html/style.css
Unescape View File

@ -23,12 +23,6 @@ a:hover {
border: 0px solid #000000; border: 0px solid #000000;
} }
@media screen and (max-width: 1023px) {
.pure-u-12-24 {
width: 100%;
}
}
/* wifi AP selection form */ /* wifi AP selection form */
#aps label div { #aps label div {
display: inline-block; display: inline-block;
@ -260,7 +254,7 @@ pre.console a {
/* -- Responsive Styles (Media Queries) ------------------------------------- */ /* -- Responsive Styles (Media Queries) ------------------------------------- */
@media (min-width: 48em) { @media (min-width: 56em) {
.header, .content { .header, .content {
padding-left: 2em; padding-left: 2em;
padding-right: 2em; padding-right: 2em;
@ -285,7 +279,7 @@ pre.console a {
} }
} }
@media (max-width: 48em) { @media (max-width: 56em) {
#layout.active { #layout.active {
position: relative; position: relative;
left: 150px; left: 150px;

9
html/ui.js
Unescape View File

@ -219,8 +219,7 @@ onLoad(function() {
l.insertBefore(m( l.insertBefore(m(
'<div id="messages"><div id="warning" hidden></div><div id="notification" hidden></div></div>'), o); '<div id="messages"><div id="warning" hidden></div><div id="notification" hidden></div></div>'), o);
// menu hamburger button // menu hamburger button
var ml = m('<a href="#menu" id="menuLink" class="menu-link"><span></span></a>'); l.insertBefore(m('<a href="#menu" id="menuLink" class="menu-link"><span></span></a>'), o);
l.insertBefore(ml, o);
// menu left-pane // menu left-pane
var mm = m( var mm = m(
'<div id="menu">\ '<div id="menu">\
@ -234,13 +233,15 @@ onLoad(function() {
l.insertBefore(mm, o); l.insertBefore(mm, o);
// make hamburger button pull out menu // make hamburger button pull out menu
ml.onclick = function (e) { var ml = $('#menuLink'), mm = $('#menu');
bnd(ml, 'click', function (e) {
console.log("hamburger time");
var active = 'active'; var active = 'active';
e.preventDefault(); e.preventDefault();
toggleClass(l, active); toggleClass(l, active);
toggleClass(mm, active); toggleClass(mm, active);
toggleClass(ml, active); toggleClass(ml, active);
}; });
// populate menu via ajax call // populate menu via ajax call
var getMenu = function() { var getMenu = function() {

15
html/wifi/wifi.html
Unescape View File

@ -5,7 +5,7 @@
<div class="content"> <div class="content">
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-12-24"><div class="card"> <div class="pure-u-1 pure-u-md-1-2"><div class="card">
<h1>Wifi State</h1> <h1>Wifi State</h1>
<div id="wifi-spinner" class="spinner spinner-small"></div> <div id="wifi-spinner" class="spinner spinner-small"></div>
<table id="wifi-table" class="pure-table pure-table-horizontal" hidden><tbody> <table id="wifi-table" class="pure-table pure-table-horizontal" hidden><tbody>
@ -19,7 +19,7 @@
<tr><td colspan="2" id="wifi-warn"></td></tr> <tr><td colspan="2" id="wifi-warn"></td></tr>
</tbody> </table> </tbody> </table>
</div></div> </div></div>
<div class="pure-u-12-24"><div class="card"> <div class="pure-u-1 pure-u-md-1-2"><div class="card">
<h1>Wifi Association</h1> <h1>Wifi Association</h1>
<p id="reconnect" style="color: #600" hidden></p> <p id="reconnect" style="color: #600" hidden></p>
<form action="#" id="wifiform" class="pure-form pure-form-stacked"> <form action="#" id="wifiform" class="pure-form pure-form-stacked">
@ -34,16 +34,17 @@
</div></div> </div></div>
</div> </div>
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-12-24"><div class="card"> <div class="pure-u-1 pure-u-md-1-2"><div class="card">
<h1>Special Settings</h1> <h1>Special Settings</h1>
<form action="#" id="specform" class="pure-form"> <form action="#" id="specform" class="pure-form">
<legend>Special settings, use with care!</legend> <legend>Special settings, use with care!</legend>
<div class="form-horizontal"> <div class="form-horizontal">
<label for="dhcp-ron" style="margin-right:1em">
<input type="radio" name="dhcp" value="on" id="dhcp-ron"/> <input type="radio" name="dhcp" value="on" id="dhcp-ron"/>
<label for="dhcp-ron">DHCP</label> DHCP</label>
<input type="radio" name="dhcp" value="off" id="dhcp-roff" <label for="dhcp-roff">
style="margin-left:1em"/> <input type="radio" name="dhcp" value="off" id="dhcp-roff"/>
<label for="dhcp-roff">Static IP</label> Static IP</label>
</div> </div>
<div id="dhcp-on" class="pure-form-stacked"> <div id="dhcp-on" class="pure-form-stacked">
<label>Hostname when requesting DHCP lease</label> <label>Hostname when requesting DHCP lease</label>

Write Preview
Loading…
Cancel
Save