improved sliders in the system menu

5 files changed, 48 insertions, 37 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 9c956003..329d6117 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -141,7 +141,7 @@
       </div>
       <li class="right" id="system-dropdown"><a class="menu-button" href="#"><img class="led-gray" id="link-led" src="/share/svg/led-link.svg"><img class="led-gray" id="stream-led" src="/share/svg/led-stream.svg"><img class="led-gray" id="hid-keyboard-led" src="/share/svg/led-hid-keyboard.svg"><img class="led-gray" id="hid-mouse-led" src="/share/svg/led-hid-mouse.svg"><span>System</span></a>
         <div class="menu" id="system-menu">
-          <table class="kv" style="width: calc(100% - 20px)">
+          <table class="kv">
             <tr>
               <td class="value">Runtime settings &amp; tools</td>
               <td class="feature-disabled" id="system-tool-webterm">
@@ -181,7 +181,7 @@
                 </div>
             <hr>
           </div>
-          <table class="kv" style="width: calc(100% - 20px)">
+          <table class="kv">
             <tr class="feature-disabled" id="stream-resolution">
               <td>Resolution:</td>
               <td>
@@ -190,24 +190,24 @@
             </tr>
             <tr class="feature-disabled" id="stream-quality">
               <td>JPEG quality:</td>
-              <td>
+              <td class="value-slider">
                 <input class="slider" disabled type="range" id="stream-quality-slider">
               </td>
-              <td class="value" id="stream-quality-value" style="min-width: 30px; max-width:30px"></td>
+              <td class="value-number" id="stream-quality-value"></td>
             </tr>
             <tr class="feature-disabled" id="stream-h264-bitrate">
               <td>H.264 kbps:</td>
-              <td>
+              <td class="value-slider">
                 <input class="slider" disabled type="range" id="stream-h264-bitrate-slider">
               </td>
-              <td class="value" id="stream-h264-bitrate-value" style="min-width: 30px; max-width:30px"></td>
+              <td class="value-number" id="stream-h264-bitrate-value"></td>
             </tr>
             <tr>
               <td>Max FPS:</td>
-              <td>
+              <td class="value-slider">
                 <input class="slider" disabled type="range" id="stream-desired-fps-slider">
               </td>
-              <td class="value" id="stream-desired-fps-value" style="min-width: 30px; max-width:30px"></td>
+              <td class="value-number" id="stream-desired-fps-value"></td>
             </tr>
             <tr class="feature-disabled" id="stream-mode">
               <td>Video <a target="_blank" href="https://docs.pikvm.org/webrtc">mode</a>:</td>
@@ -222,10 +222,10 @@
             </tr>
             <tr class="feature-disabled" id="stream-audio">
               <td>Audio volume:</td>
-              <td>
+              <td class="value-slider">
                 <input class="slider" type="range" id="stream-audio-volume-slider">
               </td>
-              <td class="value" id="stream-audio-volume-value" style="min-width: 30px; max-width:30px"></td>
+              <td class="value-number" id="stream-audio-volume-value"></td>
             </tr>
           </table>
           <hr>
@@ -256,21 +256,21 @@
             <div class="spoiler">
               <table class="kv">
                 <tr>
-                  <td>Mouse polling rate:</td>
-                  <td>
+                  <td>Polling rate:</td>
+                  <td class="value-slider">
                     <input class="slider" type="range" id="hid-mouse-rate-slider">
                   </td>
-                  <td class="value" id="hid-mouse-rate-value" style="min-width: 30px; max-width:30px"></td>
+                  <td class="value-number" id="hid-mouse-rate-value"></td>
                 </tr>
                 <tr class="feature-disabled" id="hid-mouse-sens">
-                  <td>Relative mouse sensitivity:</td>
-                  <td>
+                  <td>Relative sensitivity:</td>
+                  <td class="value-slider">
                     <input class="slider" disabled type="range" id="hid-mouse-sens-slider">
                   </td>
-                  <td class="value" id="hid-mouse-sens-value" style="min-width: 30px; max-width:30px"></td>
+                  <td class="value-number" id="hid-mouse-sens-value"></td>
                 </tr>
                 <tr class="feature-disabled" id="hid-mouse-squash">
-                      <td>Squash relative mouse moves:</td>
+                      <td>Squash relative moves:</td>
                       <td align="right">
                         <div class="switch-box">
                           <input checked type="checkbox" id="hid-mouse-squash-switch">
@@ -279,7 +279,7 @@
                       </td>
                 </tr>
                 <tr>
-                      <td>Reverse mouse scrolling:</td>
+                      <td>Reverse scrolling:</td>
                       <td align="right">
                         <div class="switch-box">
                           <input type="checkbox" id="hid-mouse-reverse-scrolling-switch">
diff --git a/web/kvm/navbar-system.pug b/web/kvm/navbar-system.pug
index 7dbd3ebf..207c1841 100644
--- a/web/kvm/navbar-system.pug
+++ b/web/kvm/navbar-system.pug
@@ -6,7 +6,7 @@ li(id="system-dropdown" class="right")
 		+navbar_led("hid-mouse-led", "led-hid-mouse")
 		span System
 	div(id="system-menu" class="menu")
-		table(class="kv" style="width: calc(100% - 20px)")
+		table(class="kv")
 			tr
 				td(class="value") Runtime settings &amp; tools
 				td(id="system-tool-webterm" class="feature-disabled") #[button(data-force-hide-menu data-show-window="webterm-window" class="small") &bull; Term]
@@ -22,22 +22,22 @@ li(id="system-dropdown" class="right")
 		div(id="stream-message-no-h264" class="hidden")
 			+menu_message("warning", "H.264 is not supported by this browser")
 			hr
-		table(class="kv" style="width: calc(100% - 20px)")
+		table(class="kv")
 			tr(id="stream-resolution" class="feature-disabled")
 				td Resolution:
 				td #[select(disabled id="stream-resolution-selector")]
 			tr(id="stream-quality" class="feature-disabled")
 				td JPEG quality:
-				td #[input(disabled type="range" id="stream-quality-slider" class="slider")]
-				td(id="stream-quality-value" class="value" style="min-width: 30px; max-width:30px")
+				td(class="value-slider") #[input(disabled type="range" id="stream-quality-slider" class="slider")]
+				td(id="stream-quality-value" class="value-number")
 			tr(id="stream-h264-bitrate" class="feature-disabled")
 				td H.264 kbps:
-				td #[input(disabled type="range" id="stream-h264-bitrate-slider" class="slider")]
-				td(id="stream-h264-bitrate-value" class="value" style="min-width: 30px; max-width:30px")
+				td(class="value-slider") #[input(disabled type="range" id="stream-h264-bitrate-slider" class="slider")]
+				td(id="stream-h264-bitrate-value" class="value-number")
 			tr
 				td Max FPS:
-				td #[input(disabled type="range" id="stream-desired-fps-slider" class="slider")]
-				td(id="stream-desired-fps-value" class="value" style="min-width: 30px; max-width:30px")
+				td(class="value-slider") #[input(disabled type="range" id="stream-desired-fps-slider" class="slider")]
+				td(id="stream-desired-fps-value" class="value-number")
 			tr(id="stream-mode" class="feature-disabled")
 				td Video #[a(target="_blank" href="https://docs.pikvm.org/webrtc") mode]:
 				td
@@ -48,8 +48,8 @@ li(id="system-dropdown" class="right")
 						label(for="stream-mode-radio-janus") H.264 / WebRTC
 			tr(id="stream-audio", class="feature-disabled")
 				td Audio volume:
-				td #[input(type="range" id="stream-audio-volume-slider" class="slider")]
-				td(id="stream-audio-volume-value" class="value" style="min-width: 30px; max-width:30px")
+				td(class="value-slider") #[input(type="range" id="stream-audio-volume-slider" class="slider")]
+				td(id="stream-audio-volume-value" class="value-number")
 		hr
 		div(class="buttons buttons-row")
 			button(data-force-hide-menu data-show-window="stream-window" class="row33") &bull; Show stream
@@ -69,17 +69,17 @@ li(id="system-dropdown" class="right")
 			div(class="spoiler")
 				table(class="kv")
 					tr
-						td Mouse polling rate:
-						td #[input(type="range" id="hid-mouse-rate-slider" class="slider")]
-						td(id="hid-mouse-rate-value" class="value" style="min-width: 30px; max-width:30px")
+						td Polling rate:
+						td(class="value-slider") #[input(type="range" id="hid-mouse-rate-slider" class="slider")]
+						td(id="hid-mouse-rate-value" class="value-number")
 					tr(id="hid-mouse-sens" class="feature-disabled")
-						td Relative mouse sensitivity:
-						td #[input(disabled type="range" id="hid-mouse-sens-slider" class="slider")]
-						td(id="hid-mouse-sens-value" class="value" style="min-width: 30px; max-width:30px")
+						td Relative sensitivity:
+						td(class="value-slider") #[input(disabled type="range" id="hid-mouse-sens-slider" class="slider")]
+						td(id="hid-mouse-sens-value" class="value-number")
 					tr(id="hid-mouse-squash" class="feature-disabled")
-						+menu_switch_notable("hid-mouse-squash-switch", "Squash relative mouse moves", true, true)
+						+menu_switch_notable("hid-mouse-squash-switch", "Squash relative moves", true, true)
 					tr
-						+menu_switch_notable("hid-mouse-reverse-scrolling-switch", "Reverse mouse scrolling", true, false)
+						+menu_switch_notable("hid-mouse-reverse-scrolling-switch", "Reverse scrolling", true, false)
 		table(class="kv")
 			tr(id="hid-connect" class="feature-disabled")
 				+menu_switch_notable("hid-connect-switch", "Connect HID to Server", true, true)
diff --git a/web/share/css/kvm/system.css b/web/share/css/kvm/system.css
index b2f9c46c..ec064c07 100644
--- a/web/share/css/kvm/system.css
+++ b/web/share/css/kvm/system.css
@@ -22,4 +22,5 @@
 
 div#system-menu {
 	min-width: 400px;
+	max-width: 400px;
 }
diff --git a/web/share/css/navbar.css b/web/share/css/navbar.css
index a083c48f..a33af82c 100644
--- a/web/share/css/navbar.css
+++ b/web/share/css/navbar.css
@@ -158,6 +158,16 @@ ul#navbar li div.menu table.kv td.value {
 	max-width: 310px;
 	overflow: hidden;
 }
+ul#navbar li div.menu table.kv td.value-slider {
+	width: 100%;
+}
+ul#navbar li div.menu table.kv td.value-number {
+	font-weight: bold;
+	max-width: 310px;
+	overflow: hidden;
+	min-width: 40px;
+	max-width: 40px;
+}
 
 ul#navbar li div.menu div.buttons button,
 ul#navbar li div.menu div.buttons select {
diff --git a/web/share/js/kvm/mouse.js b/web/share/js/kvm/mouse.js
index a2c7e2c9..f78c56f9 100644
--- a/web/share/js/kvm/mouse.js
+++ b/web/share/js/kvm/mouse.js
@@ -105,7 +105,7 @@ export function Mouse(__getGeometry, __recordWsEvent) {
 	};
 
 	var __updateRate = function(value) {
-		$("hid-mouse-rate-value").innerHTML = value;
+		$("hid-mouse-rate-value").innerHTML = value + " ms";
 		tools.storage.set("hid.mouse.rate", value);
 		if (__timer) {
 			clearInterval(__timer);