compact system menu

web/kvm/index.html

@@ -108,7 +108,23 @@
       </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="text"><b>Runtime settings &amp; tools<br></b><sub>Lower stream params may improve performance in a poor network</sub></div>
+          <table class="kv" style="width: calc(100% - 20px)">
+            <tr>
+              <td class="value">Runtime settings &amp; tools</td>
+              <td class="feature-disabled" id="webterm">
+                <button class="small" data-force-hide-menu id="show-webterm-button">&bull; Term</button>
+              </td>
+              <td>
+                <button class="small" data-force-hide-menu id="show-about-button">&bull; About</button>
+              </td>
+              <td>
+                <button class="small" data-force-hide-menu id="open-log-button">&bull; Log</button>
+              </td>
+              <td class="feature-disabled" id="wol">
+                <button class="small" disabled data-force-hide-menu id="wol-wakeup-button">&bull; WoL</button>
+              </td>
+            </tr>
+          </table>
           <hr>
           <table class="kv" style="width: calc(100% - 20px)">
             <tr class="feature-disabled" id="stream-resolution">
@@ -207,19 +223,6 @@
             <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 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>
-          </div>
-          <div class="buttons feature-disabled" id="webterm">
-            <hr>
-            <button data-force-hide-menu id="show-webterm-button">&bull; Show terminal</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>

web/kvm/navbar-system.pug

@@ -6,9 +6,13 @@ li(class="right")
 		+navbar_led("hid-mouse-led", "led-hid-mouse")
 		| System
 	div(data-dont-hide-menu class="menu")
-		div(class="text")
+		table(class="kv" style="width: calc(100% - 20px)")
-			b Runtime settings & tools#[br]
+			tr
-			sub Lower stream params may improve performance in a poor network
+				td(class="value") Runtime settings & tools
+				td(id="webterm" class="feature-disabled") #[button(data-force-hide-menu id="show-webterm-button" class="small") • Term]
+				td #[button(data-force-hide-menu id="show-about-button" class="small") • About]
+				td #[button(data-force-hide-menu id="open-log-button" class="small") • Log]
+				td(id="wol" class="feature-disabled") #[button(disabled data-force-hide-menu id="wol-wakeup-button" class="small") • WoL]
 		hr
 		table(class="kv" style="width: calc(100% - 20px)")
 			tr(id="stream-resolution" class="feature-disabled")
@@ -67,13 +71,3 @@ li(class="right")
 		div(class="buttons buttons-row")
 			button(data-force-hide-menu id="show-keyboard-button" class="row50") • Show keyboard
 			button(disabled id="hid-reset-button" class="row50") Reset HID
-		hr
-		div(class="buttons buttons-row")
-			button(data-force-hide-menu id="show-about-button" class="row50") • Show about
-			button(data-force-hide-menu id="open-log-button" class="row50") • Open log
-		div(id="wol" class="buttons feature-disabled")
-			hr
-			button(disabled id="wol-wakeup-button") • Wake-on-LAN server
-		div(id="webterm" class="buttons feature-disabled")
-			hr
-			button(data-force-hide-menu id="show-webterm-button") • Show terminal

web/share/css/main.css

@@ -119,6 +119,10 @@ select {
 	padding-left: 5px;
 	padding-right: 25px;
 }
+button.small {
+	font-size: 12px;
+	height: 20px;
+}
 button.key,
 select.key {
 	border: var(--border-key-thin);