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. 17
      html/wifi/wifi.html

2
html/head-
Unescape View File

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

6
html/home.html
Unescape View File

@ -7,7 +7,7 @@
<div class="content">
<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
program microcontrollers over the serial port, in particular Arduinos, AVRs, and
NXP's LPC800 and other ARM processors.</p>
@ -26,7 +26,7 @@
</div></div>
</div>
<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>
<div id="wifi-spinner" class="spinner spinner-small"></div>
<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>
</tbody> </table>
</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>
<legend>Select one of the following signal/pin assignments to match your hardware</legend>
<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;
}
@media screen and (max-width: 1023px) {
.pure-u-12-24 {
width: 100%;
}
}
/* wifi AP selection form */
#aps label div {
display: inline-block;
@ -260,7 +254,7 @@ pre.console a {
/* -- Responsive Styles (Media Queries) ------------------------------------- */
@media (min-width: 48em) {
@media (min-width: 56em) {
.header, .content {
padding-left: 2em;
padding-right: 2em;
@ -285,7 +279,7 @@ pre.console a {
}
}
@media (max-width: 48em) {
@media (max-width: 56em) {
#layout.active {
position: relative;
left: 150px;

9
html/ui.js
Unescape View File

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

17
html/wifi/wifi.html
Unescape View File

@ -5,7 +5,7 @@
<div class="content">
<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>
<div id="wifi-spinner" class="spinner spinner-small"></div>
<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>
</tbody> </table>
</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>
<p id="reconnect" style="color: #600" hidden></p>
<form action="#" id="wifiform" class="pure-form pure-form-stacked">
@ -34,16 +34,17 @@
</div></div>
</div>
<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>
<form action="#" id="specform" class="pure-form">
<legend>Special settings, use with care!</legend>
<div class="form-horizontal">
<input type="radio" name="dhcp" value="on" id="dhcp-ron"/>
<label for="dhcp-ron">DHCP</label>
<input type="radio" name="dhcp" value="off" id="dhcp-roff"
style="margin-left:1em"/>
<label for="dhcp-roff">Static IP</label>
<label for="dhcp-ron" style="margin-right:1em">
<input type="radio" name="dhcp" value="on" id="dhcp-ron"/>
DHCP</label>
<label for="dhcp-roff">
<input type="radio" name="dhcp" value="off" id="dhcp-roff"/>
Static IP</label>
</div>
<div id="dhcp-on" class="pure-form-stacked">
<label>Hostname when requesting DHCP lease</label>

Write Preview
Loading…
Cancel
Save