espterm/espterm-firmware
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

almost complete wifi page redesign

Browse Source
This commit is contained in:
MightyPork
2017-07-16 20:37:31 +02:00
parent a85582b94e
commit 856a694f0b
41 changed files with 1692 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html_orig/sass/_layout.scss
-178
View File
@@ -1,178 +0,0 @@
html {
font-family: Arial, sans-serif;
color: #D0D0D0;
background: #131315;
}
html, body {
@include naked();
width: 100%;
height: 100%;
overflow: hidden;
}
a, a:visited, a:link {
cursor: pointer;
color: #5abfff;
text-decoration: none;
}
a:hover {
color: #5abfff;
text-decoration: underline;
}
.Box {
display: block;
max-width: 900px;
margin-top: dist(0);
padding: dist(-1) dist(0);
@include media($phone) {
margin-top: dist(-1);
padding: dist(-3) dist(-2);
}
//
//h1 + & {
// margin-top: 0;
//}
//
//h2 {
// margin-top: 0;
//}
p:first-child {
margin-top:0;
}
border-radius: 3px;
background-color: rgba(white, .07);
//&.wide {
// width: initial;
// max-width: initial;
//}
//
//&.medium {
// max-width: 1200px;
//}
//
//.Valfield {
// display: inline-block;
// min-width: 10em;
//}
}
body {
position: relative;
padding: dist(0);
@include media($phone) {
padding: dist(-1);
}
overflow-y: auto;
& > * {
margin-left: auto;
margin-right: auto;
}
}
h1,h2 {
@include noselect();
}
h1 {
text-align: center;
font-size: fsize(6);
margin-top: 0;
margin-bottom: dist(0);
@include media($phone) {
font-size: fsize(3);
margin-bottom: dist(-1);
}
@include media($tablet) {
font-size: fsize(5);
}
}
h2 {
font-size: fsize(2);
margin-bottom: dist(-1);
//&:first-child{margin-top:0}
}
td, th {
padding: dist(-2);
white-space: nowrap;
@include media($phone) {
padding: dist(-3);
}
}
tbody th {
text-align: right;
width: $form-label-w;
color: $c-form-label-fg;
@include media($phone) {
width: auto;
}
}
tbody td {
input[type="text"], input[type="number"] {
width: 10em;
@include media($phone) {
width: 8em;
}
}
}
// Loader wheel in top right corner
#loader {
position: absolute;
right: dist(1);
top: dist(1);
transition: opacity .2s;
opacity: 0;
@include media($phone) {
top: dist(0);
right: dist(0);
}
&.show {
opacity:1;
}
}
ul > * {
padding-top: .1em;
padding-bottom: .1em;
}
#botnav {
padding-top: 1.5em;
text-align: center;
a {
padding: 0 dist(-2);
text-decoration: underline;
&, &:visited, &:link {
color: #2e4d6e;
}
&:hover {
color: #5abfff;
}
}
}
html_orig/sass/app.scss
+5 -14
View File
@@ -6,15 +6,15 @@
@import "utils";
$form-label-w: 130px;
$form-label-w: 160px;
$form-label-gap: 8px;
$form-field-w: 250px;
$c-form-label-fg: white;
$c-form-field-bg: #303030;
$c-form-field-bg: #3c3c3c;
$c-form-field-fg: white;
$c-form-highlight: #214e7a;
$c-form-highlight-a: #2972ba;
$c-form-highlight: #2972ba;
$c-form-highlight-a: #2ea1f9;
@function dist($x) {
@return modular-scale($x, 1rem, $golden);
@@ -24,16 +24,7 @@ $c-form-highlight-a: #2972ba;
@return modular-scale($x, 1em, $major-second);
}
.hidden {
display: none !important;
}
[onclick] {
cursor: pointer;
}
@import "modal";
@import "layout";
@import "layout/index";
@import "form/index";
// import all our pages
html_orig/sass/form/_form_elements.scss
+41
View File
@@ -16,6 +16,47 @@
}
}
.Row.checkbox {
$h: 27px;
line-height: $h;
.box {
width: $h;
height: $h;
border: 1px solid #808080;
border-radius: 3px;
background: $c-form-field-bg;
display: inline-block;
position: relative;
cursor: pointer;
color: $c-form-highlight-a;
&::before {
font-weight: bold;
position: absolute;
content: '×';
left: 0; top: 0; right: 0; bottom: 0;
line-height: $h - 1px;
text-align: center;
font-size: $h;
vertical-align: middle;
display: none;
}
&.checked::before {
display: block;
}
}
}
.Row.range {
.display {
margin-left: 1ex;
}
label .display { font-weight: normal; }
}
//#{$all-text-inputs} {
// @include can-select();
//}
html_orig/sass/form/_form_layout.scss
+32 -21
View File
@@ -5,13 +5,18 @@ form { @include naked(); }
width: $form-field-w;
}
input[type="number"] {
width: $form-field-w/2;
}
form .Row {
vertical-align: middle;
margin: 14px auto;
margin: 12px auto;
text-align: left;
display: flex;
flex-direction: row;
align-items: center;
&:first-child {
margin-top: 0;
@@ -30,6 +35,7 @@ form .Row {
}
&.buttons {
margin: 16px auto;
input, .button {
margin-right: dist(-1);
}
@@ -80,34 +86,39 @@ form .Row {
align-self: flex-start;
@include noselect;
@include nowrap;
}
.checkbox-wrap {
display: inline-block;
width: $form-label-w;
padding: $form-label-gap;
text-align: right;
align-self: flex-start;
//.checkbox-wrap {
// display: inline-block;
// width: $form-label-w;
// padding: $form-label-gap;
// text-align: right;
// align-self: flex-start;
//
// input[type=checkbox] {
// margin: auto;
// width: auto;
// height: auto;
// }
//
// & + label {
// width: $form-field-w;
// padding-left: 0;
// text-align: left;
// cursor: pointer;
// }
//}
input[type=checkbox] {
margin: auto;
width: auto;
height: auto;
}
& + label {
width: $form-field-w;
padding-left: 0;
text-align: left;
cursor: pointer;
}
input[type="range"] {
width: 200px;
}
// special phone style
@include media($phone) {
flex-direction: column;
&.buttons, &.centered {
&.buttons, &.centered, &.checkbox {
flex-direction: row;
}
@@ -139,7 +150,7 @@ form .Row {
}
}
#{$all-text-inputs}, textarea {
#{$all-text-inputs}, input[type="range"], textarea {
width: 100%;
}
}
html_orig/sass/form/_index.scss
+1 -1
View File
@@ -9,5 +9,5 @@
}
}
//@import 'form_layout';
@import 'form_layout';
//@import 'select';
html_orig/sass/layout/_base.scss
Executable
+31
View File
@@ -0,0 +1,31 @@
html {
font-family: Arial, sans-serif;
color: #D0D0D0;
background: #131315;
}
html, body {
@include naked();
width: 100%;
height: 100%;
overflow: hidden;
}
a, a:visited, a:link {
cursor: pointer;
color: #5abfff;
text-decoration: none;
}
a:hover {
color: #5abfff;
text-decoration: underline;
}
.hidden {
display: none !important;
}
[onclick] {
cursor: pointer;
}
html_orig/sass/layout/_box.scss
Executable
+91
View File
@@ -0,0 +1,91 @@
.Box {
display: block;
max-width: 900px;
margin-top: dist(0);
padding: dist(-1) dist(0);
@include media($phone) {
margin-top: dist(-1);
}
h1 + & {
margin-top: 0;
}
h2 {
margin-top: 0;
}
border-radius: 3px;
background-color: rgba(white, .07);
&.wide {
width: initial;
max-width: initial;
}
&.medium {
max-width: 1200px;
}
//.Valfield {
// display: inline-block;
// min-width: 10em;
//}
&.str {
position: relative;
.Row.buttons {
position: absolute;
right: dist(0);
top: 2.7em;
margin: 12px auto;
}
@include media($tablet-min) {
.Row.buttons {
//position: absolute;
right: 0;
top: 0;
//margin: 12px auto;
}
}
}
}
@include media($phone) {
.Box.mobcol {
h2 {
position: relative;
cursor: pointer;
&::after {
position: absolute;
right: 0;
content: '▸';
top:50%;
font-size: 120%;
font-weight: bold;
transform: translate(0,-50%) rotate(90deg);
}
margin-bottom: 0 !important;
}
&.expanded h2::after {
transform: translate(-25%,-50%) rotate(-90deg);
margin-bottom: dist(0);
}
.Row {
display: none;
}
&.expanded .Row {
display: flex;
}
}
}
html_orig/sass/layout/_content.scss
Executable
+45
View File
@@ -0,0 +1,45 @@
#content {
flex-grow: 1;
position: relative;
padding: dist(0);
@include media($phone) {
padding: dist(-1);
}
overflow-y: auto;
& > * {
margin-left: auto;
margin-right: auto;
}
h1 {
text-align: center;
font-size: fsize(7);
margin-top: 0;
margin-bottom: dist(0);
}
@include media($phone) {
h1 {
font-size: fsize(5);
margin-bottom: dist(-1);
}
}
h2 {
font-size: fsize(3);
margin-bottom: dist(-1);
}
td, th {
padding: dist(-2);
}
tbody th {
text-align: right;
width: $form-label-w;
color: $c-form-label-fg;
}
}
html_orig/sass/layout/_espterm_specific_old.scss
+76
View File
@@ -0,0 +1,76 @@
ul > * {
padding-top: .1em;
padding-bottom: .1em;
}
h1,h2 {
@include noselect();
}
h1 {
text-align: center;
font-size: fsize(6);
margin-top: 0;
margin-bottom: dist(0);
@include media($phone) {
font-size: fsize(3);
margin-bottom: dist(-1);
}
@include media($tablet) {
font-size: fsize(5);
}
}
h2 {
font-size: fsize(2);
margin-bottom: dist(-1);
//&:first-child{margin-top:0}
}
td, th {
padding: dist(-2);
white-space: nowrap;
@include media($phone) {
padding: dist(-3);
}
}
tbody th {
text-align: right;
width: $form-label-w;
color: $c-form-label-fg;
@include media($phone) {
width: auto;
}
}
tbody td {
input[type="text"], input[type="number"] {
width: 10em;
@include media($phone) {
width: 8em;
}
}
}
body {
position: relative;
padding: dist(0);
@include media($phone) {
padding: dist(-1);
}
overflow-y: auto;
& > * {
margin-left: auto;
margin-right: auto;
}
}
html_orig/sass/layout/_index.scss
Executable
+9
View File
@@ -0,0 +1,9 @@
@import "base";
@import "outer-wrap";
@import "menu";
@import "content";
@import "loader";
@import "box";
@import "modal";
html_orig/sass/layout/_loader.scss
+18
View File
@@ -0,0 +1,18 @@
// Loader wheel in top right corner
#loader {
position: absolute;
right: dist(1);
top: dist(1);
transition: opacity .2s;
opacity: 0;
@include media($phone) {
top: dist(0);
right: dist(0);
}
&.show {
opacity:1;
}
}
html_orig/sass/layout/_menu.scss
Executable
+98
View File
@@ -0,0 +1,98 @@
#menu {
$menu-bg: #3983CD;
$menu-hl: #5badff; //#1bd886;
$menu-fg: white;
flex: 0 0 15rem;
background: $menu-bg;
& > * {
display: block;
text-decoration: none;
padding: dist(-1) dist(0);
@include nowrap;
@include noselect;
}
#brand {
color: $menu-fg;
background: darken($menu-bg, 10%);
font-size: 120%;
text-align: center;
position:relative;
transition: none;
font-weight: bold;
margin-bottom: dist(0);
@include media($phone) {
background: $menu-bg;
cursor: pointer;
margin-bottom: dist(-2);
&::after {
position: absolute;
color: rgba(black, .4);
right: dist(0);
content: '▸';
top:50%;
font-size: 120%;
font-weight: bold;
transform: translate(0,-50%) rotate(90deg);
}
}
}
&.expanded #brand {
background: darken($menu-bg, 10%);
@include media($phone) {
&:after { transform: translate(-25%,-50%) rotate(-90deg) }
}
}
a {
font-size: 130%;
color: $menu-fg;
transition: background-color 0.2s;
text-shadow: 0 0 5px rgba(black, .4);
&:hover, &.selected {
background: $menu-hl;
text-shadow: 0 0 5px rgba(black, .6);
}
&.selected {
position: relative;
box-shadow: 0 0 5px rgba(black, .5);
}
&::before {
content: "▸";
padding-right: .5rem;
position: relative;
top: -0.1rem;
}
@include media($phone) {
display: none;
}
}
&.expanded a { display:block }
@include media($tablet) {
#brand {
font-size: 95%;
margin-bottom: dist(-1);
}
a { font-size: 105%; }
flex-basis: 10rem;
& > * { padding: dist(-2) dist(-1); }
}
}
html_orig/sass/_modal.scss → html_orig/sass/layout/_modal.scss
+2 -4
View File
@@ -25,8 +25,8 @@
//min-height: 15rem;
background: #1c1c1e;
border-left: 6px solid $c-form-highlight-a;
border-right: 6px solid $c-form-highlight-a;
border-left: 6px solid $c-form-highlight;
border-right: 6px solid $c-form-highlight;
box-shadow: 0 0 2px 0 #434349, 0 0 6px 0 black;
border-radius: 6px;
@@ -40,7 +40,6 @@
}
}
/*
// "toast"
.NotifyMsg {
position: fixed;
@@ -75,4 +74,3 @@
&.visible { opacity: 1 }
&.hidden { display: none }
}
*/
html_orig/sass/layout/_outer-wrap.scss
Executable
+22
View File
@@ -0,0 +1,22 @@
/* Main outer container */
#outer {
display: flex;
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
flex-direction: row;
}
@include media($phone) {
#outer {
display: block;
overflow-y: scroll;
}
}
html_orig/sass/pages/_term.scss
+19 -1
View File
@@ -1,4 +1,4 @@
.page-term {
body.term {
h1 {
font-size: fsize(5);
@include media($phone) {
@@ -42,6 +42,24 @@
font-weight: bold;
}
}
#botnav {
padding-top: 1.5em;
text-align: center;
a {
padding: 0 dist(-2);
text-decoration: underline;
&, &:visited, &:link {
color: #2e4d6e;
}
&:hover {
color: #5abfff;
}
}
}
}
#termwrap {
html_orig/sass/pages/_wifi.scss
+95 -34
View File
@@ -43,6 +43,50 @@
@extend %form-row-spacing;
}
%ap-inner {
cursor: pointer;
@include noselect;
position: relative;
&:active {
left: 0;
top: 1px;
}
border-radius: 3px;
color: #222;
background: #afafaf;
transition: background-color 0.5s;
&:hover { background: white }
display: flex;
.rssi {
min-width: 2.5rem;
flex: 0 0 15%;
text-align: right;
&:after {
padding-left: dist(-5);
content: '%';
font-size: fsize(-1);
}
}
.essid {
flex: 1 1 70%;
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
font-weight: bold;
}
.auth {
flex: 0 0 15%;
}
}
.AP {
// can't use margins inside a column
@@ -56,53 +100,70 @@
top: 0 !important; // no click effect
}
// the actual silver box
.inner {
cursor: pointer;
@include noselect;
position: relative;
&:active {
left: 0;
top: 1px;
}
border-radius: 3px;
color: #222;
background: #afafaf;
transition: background-color 0.5s;
&:hover { background: white }
display: flex;
@extend %ap-inner;
& > * {
padding: dist(-1);
@include nowrap;
}
}
}
.rssi {
min-width: 2.5rem;
flex: 0 0 15%;
text-align: right;
.AP-preview {
.wrap {
@extend %ap-inner;
&:after {
padding-left: dist(-5);
content: '%';
font-size: fsize(-1);
flex-direction: row;
background: #eee !important; // override the hover effect #43de81
cursor: default;
top: 0 !important; // no click effect
overflow: hidden;
.inner {
display: flex;
flex-direction: column;
& > * {
padding: dist(-1);
@include nowrap;
}
}
.forget {
align-self: stretch;
line-height: 100%;
padding: dist(-1);
border-left: 1px solid #bbb;
display: flex;
align-items: center;
&, &:hover {
color: black;
text-decoration: none;
}
font-size: 28px;
&:hover {
background: #dc4a6a;
color: white;
border-left: 1px solid #666;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
&:active {
position: relative;
padding-top: calc(#{dist(-1)} + 1px);
}
}
.essid {
flex: 1 1 70%;
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
font-weight: bold;
.essid, .passwd {
padding-bottom: 0;
}
.auth {
flex: 0 0 15%;
.passwd {
font-family: monospace;
}
}
}
html_orig/sass/utils/_background-tiling.scss
Executable
+68
View File
@@ -0,0 +1,68 @@
// Utilities for background tiling
// Use a tile as background (w, h - size of time)
@mixin tile_xy($w, $h, $x, $y) {
background-position: (-$x*$w) (-$y*$h);
}
// Use a square tile as background (size - w & h of time)
@mixin tile($size, $x, $y) {
@include tile_xy($size, $size, $x, $y);
}
// Button with sprite-sheet
// A B
// B:hover B:hover
@mixin tile_btn_h($w, $h, $x) {
@include tile_xy($w, $h, $x, 0);
&:hover {
@include tile_xy($w, $h, $x, 1);
}
}
// active the same as hover
@mixin tile_btn_h_act($w, $h, $x) {
@include tile_xy($w, $h, $x, 0);
&:hover, &.active {
@include tile_xy($w, $h, $x, 1);
}
}
// Button with sprite-sheet
// A A:hover
// B B:hover
@mixin tile_btn_v($w, $h, $y) {
@include tile_xy($w, $h, 0, $y);
&:hover {
@include tile_xy($w, $h, 1, $y);
}
}
// active the same as hover
@mixin tile_btn_v_act($w, $h, $y) {
@include tile_xy($w, $h, 0, $y);
&:hover, &.active {
@include tile_xy($w, $h, 1, $y);
}
}
@mixin inset-shadow-top($w, $c) {
box-shadow: inset 0 $w ($w*2) (-$w) $c;
}
@mixin inset-shadow-bottom($w, $c) {
box-shadow: inset 0 (-$w) ($w*2) (-$w) $c;
}
@mixin inset-shadow-left($w, $c) {
box-shadow: inset $w 0 ($w*2) (-$w) $c;
}
@mixin inset-shadow-right($w, $c) {
box-shadow: inset (-$w) 0 ($w*2) (-$w) $c;
}
html_orig/sass/utils/_index.scss
Executable
+3
View File
@@ -0,0 +1,3 @@
@import "background-tiling";
@import "pointer";
@import "misc";
html_orig/sass/utils/_misc.scss
Executable
+34
View File
@@ -0,0 +1,34 @@
// Add a highlight for debugging
@mixin highlight($color) {
outline: 1px solid $color;
background: rgba($color, .05);
box-shadow: 0 0 2px 2px rgba($color, .2), inset 0 0 2px 2px rgba($color, .2);
}
// Ellipsis, but for block elements
@mixin block-ellipsis($width: 100%) {
display: block;
max-width: $width;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
// No margins, padding, borders
@mixin naked() {
border: 0 none;
margin: 0;
padding: 0;
text-decoration: none;
}
@mixin translate($x, $y) {
@include transform(translate($x, $y));
}
// Disallow wrapping
@mixin nowrap() {
white-space: nowrap;
word-wrap: normal;
}
html_orig/sass/utils/_pointer.scss
Executable
+26
View File
@@ -0,0 +1,26 @@
@mixin click-through() {
pointer-events: none;
}
// Disallow text selection
@mixin noselect() {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
// Allow text selection
@mixin can-select() {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
cursor: text;
}