css for Box folding, impl network forget

pull/30/head
Ondřej Hruška 8 years ago
parent 856a694f0b
commit 357a9b6513
  1. 40
      html_orig/css/app.css
  2. 4
      html_orig/messages/en.php
  3. 29
      html_orig/pages/cfg_wifi.php
  4. 8
      html_orig/sass/app.scss
  5. 20
      html_orig/sass/layout/_box.scss
  6. 13
      html_orig/sass/layout/_content.scss
  7. 7
      html_orig/sass/pages/_wifi.scss

@ -449,13 +449,16 @@ a:hover {
font-size: 2.2807em;
margin-top: 0;
margin-bottom: 1rem; }
#content h2 {
font-size: 1.42383em;
margin-bottom: 0.61805rem; }
@media screen and (max-width: 544px) {
#content h1 {
font-size: 1.80203em;
margin-bottom: 0.61805rem; }
#content h2 {
font-size: 1.26563em;
margin-bottom: 0.61805rem; } }
#content h2 {
font-size: 1.42383em;
margin-bottom: 0.61805rem; }
#content td, #content th {
padding: 0.38198rem; }
#content tbody th {
@ -497,20 +500,21 @@ a:hover {
max-width: 1200px; }
.Box.str {
position: relative; }
.Box.str .Row.buttons {
.Box.str .Row.mq-phone {
position: absolute;
right: 1rem;
top: 2.7em;
margin: 12px auto; }
@media screen and (min-width: 545px) {
.Box.str .Row.buttons {
right: 0;
top: 0; } }
margin: 1rem auto; }
.Box.str .Row.mq-no-phone {
position: absolute;
right: 0;
top: 0;
margin-top: 0.61805rem; }
@media screen and (max-width: 544px) {
.Box.mobcol h2 {
position: relative;
cursor: pointer;
padding-right: 1.3rem;
margin-bottom: 0 !important; }
.Box.mobcol h2::after {
position: absolute;
@ -899,6 +903,12 @@ form span.required {
white-space: nowrap;
word-wrap: normal; }
.AP-preview-nil {
padding: 0.38198rem 0.61805rem;
background: rgba(0, 0, 0, 0.1);
border-radius: 3px;
border: 2px dashed black; }
.AP-preview .wrap {
flex-direction: row;
background: #eee !important;
@ -1128,15 +1138,15 @@ body.term #botnav {
@media screen and (min-width: 545px) {
.mq-phone {
display: none; } }
display: none !important; } }
@media screen and (max-width: 544px) {
.mq-tablet-min {
display: none; } }
.mq-tablet-min, .mq-no-phone {
display: none !important; } }
@media screen and (min-width: 1001px) {
.mq-tablet-max {
display: none; } }
display: none !important; } }
@media screen and (max-width: 1000px) {
.mq-normal-min {
display: none; } }
display: none !important; } }
/*# sourceMappingURL=app.css.map */

@ -11,7 +11,7 @@ return [
'menu.term' => 'Back to Terminal',
'box.ap' => 'Built-in Access Point',
'box.sta' => 'Client Mode',
'box.sta' => 'Connect to External Network',
'wifi.enable' => 'Enabled:',
'wifi.tpw' => 'Transmit Power:',
@ -24,7 +24,7 @@ return [
'wifi.sta_ssid' => 'Network SSID:',
'wifi.sta_password' => 'Password:',
'wifi.not_conn' => 'Not connected.',
'wifi.forget' => '',
'wifi.sta_none' => 'None',
'wifi.submit' => 'Apply!',

@ -1,6 +1,10 @@
<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="POST">
<h2><?= tr('box.ap') ?></h2>
<div class="Row buttons mq-phone">
<input type="submit" value="<?= tr('wifi.submit') ?>">
</div>
<div class="Row checkbox">
<label><?= tr('wifi.enable') ?></label><!--
--><span class="box"></span>
@ -28,7 +32,7 @@
<span class="display x-disp1 mq-phone"></span>
</label>
<input type="range" name="tpw" id="tpw" step=1 min=0 max=82 value="%tpw%">
<span class="display x-disp2 mq-tablet-min"></span>
<span class="display x-disp2 mq-no-phone"></span>
</div>
<div class="Row checkbox">
@ -37,7 +41,7 @@
<input type="hidden" name="ap_hidden" value="%ap_hidden%">
</div>
<div class="Row buttons">
<div class="Row buttons mq-no-phone">
<input type="submit" value="<?= tr('wifi.submit') ?>">
</div>
</form>
@ -45,6 +49,10 @@
<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="POST">
<h2><?= tr('box.sta') ?></h2>
<div class="Row buttons mq-phone">
<input type="submit" value="<?= tr('wifi.submit') ?>">
</div>
<div class="Row checkbox">
<label><?= tr('wifi.enable') ?></label><!--
--><span class="box"></span>
@ -56,7 +64,7 @@
<div class="Row sta-info">
<label><?= tr('wifi.sta_info') ?></label>
<div class="AP-preview" id="sta-nw">
<div class="AP-preview hidden" id="sta-nw">
<div class="wrap">
<div class="inner">
<div class="essid"></div>
@ -66,9 +74,12 @@
<a class="forget" id="forget-sta">×</a>
</div>
</div>
<div class="AP-preview-nil" id="sta-nw-nil">
<?= tr('wifi.sta_none') ?>
</div>
</div>
<div class="Row buttons">
<div class="Row buttons mq-no-phone">
<input type="submit" value="<?= tr('wifi.submit') ?>">
</div>
</form>
@ -111,7 +122,17 @@
});
});
$('#forget-sta').on('click', function() {
$('#sta_ssid').val('');
$('#sta_password').val('');
wifiShowSelected('', '', '');
});
function wifiShowSelected(name, password, ip) {
$('#sta-nw').toggleClass('hidden', name.length == 0);
$('#sta-nw-nil').toggleClass('hidden', name.length > 0);
$('#sta-nw .essid').html(e(name));
var nopw = undef(password) || password.length == 0;
$('#sta-nw .passwd').html(e(password)).toggleClass('hidden', nopw);

@ -36,17 +36,17 @@ $c-form-highlight-a: #2ea1f9;
// media queries
@include media($tablet-min) {
.mq-phone { display: none; }
.mq-phone { display: none!important; }
}
@include media($phone) {
.mq-tablet-min { display: none; }
.mq-tablet-min, .mq-no-phone { display: none !important; }
}
@include media($normal-min) {
.mq-tablet-max { display: none; }
.mq-tablet-max { display: none !important; }
}
@include media($tablet-max) {
.mq-normal-min { display: none; }
.mq-normal-min { display: none !important; }
}

@ -36,21 +36,16 @@
&.str {
position: relative;
.Row.buttons {
.Row.mq-phone {
position: absolute;
right: dist(0);
top: 2.7em;
margin: 12px auto;
margin: 1rem auto;
}
@include media($tablet-min) {
.Row.buttons {
//position: absolute;
right: 0;
top: 0;
//margin: 12px auto;
}
.Row.mq-no-phone {
position: absolute;
right: 0;
top: 0;
margin-top: dist(-1);
}
}
}
@ -60,6 +55,7 @@
h2 {
position: relative;
cursor: pointer;
padding-right: 1.3rem;
&::after {
position: absolute;

@ -21,16 +21,21 @@
margin-bottom: dist(0);
}
h2 {
font-size: fsize(3);
margin-bottom: dist(-1);
}
@include media($phone) {
h1 {
font-size: fsize(5);
margin-bottom: dist(-1);
}
}
h2 {
font-size: fsize(3);
margin-bottom: dist(-1);
h2 {
font-size: fsize(2);
margin-bottom: dist(-1);
}
}
td, th {

@ -110,6 +110,13 @@
}
}
.AP-preview-nil {
padding: dist(-2) dist(-1);
background: rgba(black, .1);
border-radius: 3px;
border: 2px dashed black;
}
.AP-preview {
.wrap {
@extend %ap-inner;

Loading…
Cancel
Save