mirror of
https://github.com/jeelabs/esp-link.git
synced 2026-02-20 02:31:19 +01:00
switch to 4 col grid; use pure-css source; tweak responsive layout; fix hamburger menu
This commit is contained in:
Thorsten von Eicken
@@ -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>
|
||||
|
||||
@@ -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
11
html/pure-min.css
vendored
File diff suppressed because one or more lines are too long
1388
html/pure.css
Normal file
1388
html/pure.css
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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;
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user