navbar change

10 files changed, 130 insertions, 143 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 1572a39d..01911ae1 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -107,85 +107,85 @@
       </div>
       <li class="right"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="link-led" src="/share/svg/led-link.svg"><img class="led-gray" data-dont-hide-menu id="stream-led" src="/share/svg/led-stream.svg"><img class="led-gray" data-dont-hide-menu id="hid-keyboard-led" src="/share/svg/led-hid-keyboard.svg"><img class="led-gray" data-dont-hide-menu id="hid-mouse-led" src="/share/svg/led-hid-mouse.svg">System</a>
         <div class="menu" data-dont-hide-menu>
-          <div class="buttons">
-            <button disabled data-force-hide-menu id="stream-screenshot-button">&bull; Take a screenshot</button>
-            <hr>
-            <button data-force-hide-menu id="show-stream-button">&bull; Show stream</button>
-            <button data-force-hide-menu id="show-keyboard-button">&bull; Show keyboard</button>
-            <button data-force-hide-menu id="show-about-button">&bull; Show about</button>
-          </div>
-          <div class="feature-disabled" id="stream-resolution">
-            <hr>
-            <div class="text">Stream resolution:
-              <div class="stream-param-box">
+          <div class="text"><b>Runtime settings &amp; tools<br></b><sub>Lower stream params may improve performance in a poor network</sub></div>
+          <hr>
+          <table class="kv" style="width: calc(100% - 20px)">
+            <tr class="feature-disabled" id="stream-resolution">
+              <td>Resolution:</td>
+              <td>
                 <select disabled data-dont-hide-menu id="stream-resolution-selector"></select>
-              </div>
-            </div>
-          </div>
-          <div class="feature-disabled" id="stream-quality">
-            <hr>
-            <div class="text">Stream quality: <span id="stream-quality-value">80%</span>
-              <div class="stream-param-box">
+              </td>
+            </tr>
+            <tr class="feature-disabled" id="stream-quality">
+              <td>Image quality:</td>
+              <td>
                 <input class="slider" disabled type="range" id="stream-quality-slider">
-              </div>
-            </div>
-          </div>
+              </td>
+              <td class="value" id="stream-quality-value">80%</td>
+            </tr>
+            <tr>
+              <td>Max FPS:</td>
+              <td>
+                <input class="slider" disabled type="range" id="stream-desired-fps-slider">
+              </td>
+              <td class="value" id="stream-desired-fps-value">0</td>
+            </tr>
+            <tr>
+              <td>Stream size:</td>
+              <td>
+                <input class="slider" type="range" id="stream-size-slider">
+              </td>
+              <td class="value" id="stream-size-value" style="width: 4em">100%</td>
+            </tr>
+          </table>
           <hr>
-          <div class="text">Stream FPS: <span id="stream-desired-fps-value">0</span>
-            <div class="stream-param-box">
-              <input class="slider" disabled type="range" id="stream-desired-fps-slider">
-            </div>
-          </div>
+              <table class="kv">
+                <td>Auto-resize stream window:</td>
+                <td align="right">
+                  <div class="switch-box">
+                    <input checked type="checkbox" id="stream-auto-resize-checkbox">
+                    <label for="stream-auto-resize-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
+                  </div>
+                </td>
+              </table>
           <hr>
-          <div class="text">Stream size: <span id="stream-size-value">100%</span>
-            <div class="stream-param-box">
-              <input class="slider" type="range" id="stream-size-slider">
-            </div>
+          <div class="buttons buttons-row">
+            <button class="row33" data-force-hide-menu id="show-stream-button">&bull; Show stream</button>
+            <button class="row33" disabled data-force-hide-menu id="stream-screenshot-button">&bull; Screenshot</button>
+            <button class="row33" disabled id="stream-reset-button">Reset stream</button>
           </div>
-          <hr>
-              <div class="text">
-                <table class="one-line-switch">
-                  <td>Auto-resize stream:</td>
+          <div class="feature-disabled" id="mouse-squash">
+            <hr>
+                <table class="kv">
+                  <td>Squash mouse moves:</td>
                   <td align="right">
                     <div class="switch-box">
-                      <input checked type="checkbox" id="stream-auto-resize-checkbox">
-                      <label for="stream-auto-resize-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
+                      <input checked type="checkbox" id="mouse-squash-checkbox">
+                      <label for="mouse-squash-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
                     </div>
                   </td>
                 </table>
-              </div>
-          <div class="feature-disabled" id="mouse-squash">
-            <hr>
-                <div class="text">
-                  <table class="one-line-switch">
-                    <td>Squash mouse moves:</td>
-                    <td align="right">
-                      <div class="switch-box">
-                        <input checked type="checkbox" id="mouse-squash-checkbox">
-                        <label for="mouse-squash-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
-                      </div>
-                    </td>
-                  </table>
-                </div>
           </div>
           <hr>
-          <div class="buttons">
-            <button disabled data-force-hide-menu id="stream-reset-button">&bull; Reset stream</button>
-            <button disabled data-force-hide-menu id="hid-reset-button">&bull; Reset keyboard &amp; mouse</button>
-            <button class="feature-disabled" disabled data-force-hide-menu id="msd-reset-button">&bull; Reset drive</button>
+          <div class="buttons buttons-row">
+            <button class="row50" data-force-hide-menu id="show-keyboard-button">&bull; Show keyboard</button>
+            <button class="row50" disabled id="hid-reset-button">Reset HID</button>
           </div>
           <hr>
-          <div class="buttons">
-            <button data-force-hide-menu id="open-log-button">&bull; Open log</button>
+          <div class="buttons buttons-row">
+            <button class="row50" data-force-hide-menu id="show-about-button">&bull; Show about</button>
+            <button class="row50" data-force-hide-menu id="open-log-button">&bull; Open log</button>
           </div>
           <div class="buttons feature-disabled" id="wol">
             <hr>
-            <button disabled id="wol-wakeup-button">&bull; Wake on LAN server</button>
+            <button disabled id="wol-wakeup-button">&bull; Wake-on-LAN server</button>
           </div>
         </div>
       </li>
       <li class="right feature-disabled" id="atx-dropdown"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="atx-power-led" src="/share/svg/led-atx-power.svg"><img class="led-gray" data-dont-hide-menu id="atx-hdd-led" src="/share/svg/led-atx-hdd.svg">ATX</a>
         <div class="menu">
+          <div class="text"><b>Control the server's power<br></b><sub>Use the short click for ACPI shutdown</sub></div>
+          <hr>
           <div class="buttons">
             <button disabled id="atx-power-button">&bull; Click Power <sup><i>short</i></sup></button>
             <button disabled id="atx-power-button-long">&bull; Click Power <sup><i>long</i></sup></button>
@@ -196,6 +196,8 @@
       </li>
       <li class="right feature-disabled" id="msd-dropdown"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="msd-led" src="/share/svg/led-msd.svg">Drive</a>
         <div class="menu" data-dont-hide-menu id="msd-menu">
+          <div class="text"><b>Mass Storage Device emulator<br></b></div>
+          <hr>
           <div class="hidden" id="msd-message-offline">
                 <div class="text">
                   <table>
@@ -338,7 +340,8 @@
           </div>
           <div class="buttons buttons-row">
             <button class="row50" disabled id="msd-connect-button">Connect drive to Server</button>
-            <button class="row50" disabled id="msd-disconnect-button">Disconnect drive</button>
+            <button class="row25" disabled id="msd-disconnect-button">Disconnect</button>
+            <button class="row25" disabled id="msd-reset-button">Reset</button>
           </div>
         </div>
       </li>
@@ -368,17 +371,15 @@
             </tr>
           </table>
           <hr>
-          <table class="kv">
-            <tr>
-              <td>Infinite loop playback:</td>
-              <td colspan="2">
-                <div class="switch-box">
-                  <input disabled type="checkbox" id="hid-recorder-loop-checkbox">
-                  <label for="hid-recorder-loop-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
-                </div>
-              </td>
-            </tr>
-          </table>
+              <table class="kv">
+                <td>Infinite loop playback:</td>
+                <td align="right">
+                  <div class="switch-box">
+                    <input disabled type="checkbox" id="hid-recorder-loop-checkbox">
+                    <label for="hid-recorder-loop-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
+                  </div>
+                </td>
+              </table>
           <hr>
           <input type="file" id="hid-recorder-new-script-file">
           <div class="buttons buttons-row">
diff --git a/web/kvm/navbar-atx.pug b/web/kvm/navbar-atx.pug
index 374e466a..903ea916 100644
--- a/web/kvm/navbar-atx.pug
+++ b/web/kvm/navbar-atx.pug
@@ -4,6 +4,10 @@ li(id="atx-dropdown" class="right feature-disabled")
 		+navbar_led("atx-hdd-led", "led-atx-hdd")
 		| ATX
 	div(class="menu")
+		div(class="text")
+			b Control the server's power#[br]
+			sub Use the short click for ACPI shutdown
+		hr
 		div(class="buttons")
 			button(disabled id="atx-power-button") &bull; Click Power #[sup #[i short]]
 			button(disabled id="atx-power-button-long") &bull; Click Power #[sup #[i long]]
diff --git a/web/kvm/navbar-macro.pug b/web/kvm/navbar-macro.pug
index bc7743ed..d8b5c529 100644
--- a/web/kvm/navbar-macro.pug
+++ b/web/kvm/navbar-macro.pug
@@ -22,16 +22,7 @@ li(class="right")
 				td(id="hid-recorder-events-count" class="value") 0
 				td #[sup #[i include delays]]
 		hr
-		table(class="kv")
-			tr
-				td Infinite loop playback:
-				td(colspan="2")
-					div(class="switch-box")
-						input(disabled type="checkbox" id="hid-recorder-loop-checkbox")
-						label(for="hid-recorder-loop-checkbox")
-							span(class="switch-inner")
-							span(class="switch")
-
+		+menu_switch("hid-recorder-loop-checkbox", "Infinite loop playback", false, false)
 		hr
 		input(type="file" id="hid-recorder-new-script-file")
 		div(class="buttons buttons-row")
diff --git a/web/kvm/navbar-msd.pug b/web/kvm/navbar-msd.pug
index 31a91d6a..ba4347b2 100644
--- a/web/kvm/navbar-msd.pug
+++ b/web/kvm/navbar-msd.pug
@@ -3,6 +3,9 @@ li(id="msd-dropdown" class="right feature-disabled")
 		+navbar_led("msd-led", "led-msd")
 		| Drive
 	div(data-dont-hide-menu id="msd-menu" class="menu")
+		div(class="text")
+			b Mass Storage Device emulator#[br]
+		hr
 		div(id="msd-message-offline" class="hidden")
 			+menu_message("warning", "Mass Storage Drive is offline")
 			hr
@@ -77,4 +80,5 @@ li(id="msd-dropdown" class="right feature-disabled")
 			hr
 		div(class="buttons buttons-row")
 			button(disabled id="msd-connect-button" class="row50") Connect drive to Server
-			button(disabled id="msd-disconnect-button" class="row50") Disconnect drive
+			button(disabled id="msd-disconnect-button" class="row25") Disconnect
+			button(disabled id="msd-reset-button" class="row25") Reset
diff --git a/web/kvm/navbar-system.pug b/web/kvm/navbar-system.pug
index efcc4a6d..eb5980ed 100644
--- a/web/kvm/navbar-system.pug
+++ b/web/kvm/navbar-system.pug
@@ -6,47 +6,44 @@ li(class="right")
 		+navbar_led("hid-mouse-led", "led-hid-mouse")
 		| System
 	div(data-dont-hide-menu class="menu")
-		div(class="buttons")
-			button(disabled data-force-hide-menu id="stream-screenshot-button") &bull; Take a screenshot
-			hr
-			button(data-force-hide-menu id="show-stream-button") &bull; Show stream
-			button(data-force-hide-menu id="show-keyboard-button") &bull; Show keyboard
-			button(data-force-hide-menu id="show-about-button") &bull; Show about
-		div(id="stream-resolution" class="feature-disabled")
-			hr
-			div(class="text")
-				| Stream resolution:
-				div(class="stream-param-box")
-					select(disabled data-dont-hide-menu id="stream-resolution-selector")
-		div(id="stream-quality" class="feature-disabled")
-			hr
-			div(class="text")
-				| Stream quality: #[span(id="stream-quality-value") 80%]
-				div(class="stream-param-box")
-					input(disabled type="range" id="stream-quality-slider" class="slider")
-		hr
 		div(class="text")
-			| Stream FPS: #[span(id="stream-desired-fps-value") 0]
-			div(class="stream-param-box")
-				input(disabled type="range" id="stream-desired-fps-slider" class="slider")
+			b Runtime settings &amp; tools#[br]
+			sub Lower stream params may improve performance in a poor network
 		hr
-		div(class="text")
-			| Stream size: #[span(id="stream-size-value") 100%]
-			div(class="stream-param-box")
-				input(type="range" id="stream-size-slider" class="slider")
+		table(class="kv" style="width: calc(100% - 20px)")
+			tr(id="stream-resolution" class="feature-disabled")
+				td Resolution:
+				td #[select(disabled data-dont-hide-menu id="stream-resolution-selector")]
+			tr(id="stream-quality" class="feature-disabled")
+				td Image quality:
+				td #[input(disabled type="range" id="stream-quality-slider" class="slider")]
+				td(id="stream-quality-value" class="value") 80%
+			tr
+				td Max FPS:
+				td #[input(disabled type="range" id="stream-desired-fps-slider" class="slider")]
+				td(id="stream-desired-fps-value" class="value") 0
+			tr
+				td Stream size:
+				td #[input(type="range" id="stream-size-slider" class="slider")]
+				td(id="stream-size-value" class="value" style="width: 4em") 100%
+		hr
+		+menu_switch("stream-auto-resize-checkbox", "Auto-resize stream window", true, true)
 		hr
-		+menu_switch("stream-auto-resize-checkbox", "Auto-resize stream")
+		div(class="buttons buttons-row")
+			button(data-force-hide-menu id="show-stream-button" class="row33") &bull; Show stream
+			button(disabled data-force-hide-menu id="stream-screenshot-button" class="row33") &bull; Screenshot
+			button(disabled id="stream-reset-button" class="row33") Reset stream
 		div(id="mouse-squash" class="feature-disabled")
 			hr
-			+menu_switch("mouse-squash-checkbox", "Squash mouse moves")
+			+menu_switch("mouse-squash-checkbox", "Squash mouse moves", true, true)
 		hr
-		div(class="buttons")
-			button(disabled data-force-hide-menu id="stream-reset-button") &bull; Reset stream
-			button(disabled data-force-hide-menu id="hid-reset-button") &bull; Reset keyboard &amp; mouse
-			button(disabled data-force-hide-menu id="msd-reset-button" class="feature-disabled") &bull; Reset drive
+		div(class="buttons buttons-row")
+			button(data-force-hide-menu id="show-keyboard-button" class="row50") &bull; Show keyboard
+			button(disabled id="hid-reset-button" class="row50") Reset HID
 		hr
-		div(class="buttons")
-			button(data-force-hide-menu id="open-log-button") &bull; Open log
+		div(class="buttons buttons-row")
+			button(data-force-hide-menu id="show-about-button" class="row50") &bull; Show about
+			button(data-force-hide-menu id="open-log-button" class="row50") &bull; Open log
 		div(id="wol" class="buttons feature-disabled")
 			hr
-			button(disabled id="wol-wakeup-button") &bull; Wake on LAN server
+			button(disabled id="wol-wakeup-button") &bull; Wake-on-LAN server
diff --git a/web/kvm/navbar.pug b/web/kvm/navbar.pug
index 4c83fc73..d345f1dd 100644
--- a/web/kvm/navbar.pug
+++ b/web/kvm/navbar.pug
@@ -13,16 +13,15 @@ mixin menu_message(icon, short, classes="")
 						sup(style="line-height:1")
 							block
 
-mixin menu_switch(id, title)
-	div(class="text")
-		table(class="one-line-switch")
-			td #{title}:
-			td(align="right")
-				div(class="switch-box")
-					input(checked type="checkbox" id=id)
-					label(for=id)
-						span(class="switch-inner")
-						span(class="switch")
+mixin menu_switch(id, title, enabled, checked)
+	table(class="kv")
+		td #{title}:
+		td(align="right")
+			div(class="switch-box")
+				input(checked=checked disabled=!enabled type="checkbox" id=id)
+				label(for=id)
+					span(class="switch-inner")
+					span(class="switch")
 
 ul(id="navbar")
 	li(class="left")
diff --git a/web/share/css/kvm/stream.css b/web/share/css/kvm/stream.css
index def1a007..64ac0e27 100644
--- a/web/share/css/kvm/stream.css
+++ b/web/share/css/kvm/stream.css
@@ -61,11 +61,6 @@ img.stream-image-inactive {
 	filter: grayscale(100%) brightness(75%) sepia(75%);
 }
 
-div.stream-param-box {
-	margin-top: 5px;
-	display: flex;
-}
-
 div#stream-mouse-buttons {
 	display: none;
 }
diff --git a/web/share/css/main.css b/web/share/css/main.css
index b41ea15a..bfce6518 100644
--- a/web/share/css/main.css
+++ b/web/share/css/main.css
@@ -215,15 +215,20 @@ div.buttons-row {
 	display: inline-block;
 	width: 50%;
 }
+.row33 {
+	display: inline-block;
+	width: 33.33%;
+}
 .row25 {
 	display: inline-block;
 	width: 25%;
 }
 .row16 {
 	display: inline-block;
-	width: 16.66%
+	width: 16.66%;
 }
 .row50:not(:first-child),
+.row33:not(:first-child),
 .row25:not(:first-child),
 .row16:not(:first-child) {
 	border-top-left-radius: 0;
@@ -231,6 +236,7 @@ div.buttons-row {
 	border-left: var(--border-control-thin) !important;
 }
 .row50:not(:last-child),
+.row33:not(:last-child),
 .row25:not(:last-child),
 .row16:not(:last-child) {
 	border-top-right-radius: 0;
diff --git a/web/share/css/navbar.css b/web/share/css/navbar.css
index 47e5810d..e798987d 100644
--- a/web/share/css/navbar.css
+++ b/web/share/css/navbar.css
@@ -132,18 +132,6 @@ ul#navbar li div.menu div.text {
 	font-size: 14px;
 }
 
-ul#navbar li div.menu div.text table.one-line-switch {
-	width: 100%;
-	border-collapse: collapse;
-}
-@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
-	@supports (-webkit-appearance: none) {
-		ul#navbar li div.menu div.text table.one-line-switch {
-			margin: 20px 0 20px 0 !important;
-		}
-	}
-}
-
 ul#navbar li div.menu table.kv {
 	border-spacing: 5px;
 	margin: 0 10px 0 10px;
diff --git a/web/share/css/switch.css b/web/share/css/switch.css
index 73723f70..84f4deec 100644
--- a/web/share/css/switch.css
+++ b/web/share/css/switch.css
@@ -28,6 +28,8 @@ div.switch-box {
 	vertical-align: middle;
 	position: relative;
 	width: 50px;
+	margin-top: 3px;
+	margin-bottom: 3px;
 }
 
 div.switch-box input[type=checkbox] {