css for Box folding, impl network forget

html_orig/css/app.css

@@ -449,13 +449,16 @@ a:hover {
     font-size: 2.2807em;
     margin-top: 0;
     margin-bottom: 1rem; }
-  @media screen and (max-width: 544px) {
-    #content h1 {
-      font-size: 1.80203em;
-      margin-bottom: 0.61805rem; } }
   #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 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 */

html_orig/messages/en.php

@@ -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!',
 

html_orig/pages/cfg_wifi.php

@@ -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);

html_orig/sass/app.scss

@@ -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; }
 }

html_orig/sass/layout/_box.scss

@@ -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;

html_orig/sass/layout/_content.scss

@@ -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 {

html_orig/sass/pages/_wifi.scss

@@ -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;