spoiler for mouse settings

2 files changed, 54 insertions, 43 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 4269a279..7b2a67b0 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -250,39 +250,46 @@
               </tr>
             </table>
           </div>
-          <table class="kv">
-            <tr>
-              <td>Mouse polling rate:</td>
-              <td>
-                <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>
-            </tr>
-            <tr class="feature-disabled" id="hid-mouse-sens">
-              <td>Relative mouse sensitivity:</td>
-              <td>
-                <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>
-            </tr>
-            <tr class="feature-disabled" id="hid-mouse-squash">
-                  <td>Squash relative mouse moves:</td>
-                  <td align="right">
-                    <div class="switch-box">
-                      <input checked type="checkbox" id="hid-mouse-squash-switch">
-                      <label for="hid-mouse-squash-switch"><span class="switch-inner"></span><span class="switch"></span></label>
-                    </div>
+          <details>
+            <summary>Mouse settings</summary>
+            <div class="spoiler">
+              <table class="kv">
+                <tr>
+                  <td>Mouse polling rate:</td>
+                  <td>
+                    <input class="slider" type="range" id="hid-mouse-rate-slider">
                   </td>
-            </tr>
-            <tr>
-                  <td>Reverse mouse scrolling:</td>
-                  <td align="right">
-                    <div class="switch-box">
-                      <input type="checkbox" id="hid-mouse-reverse-scrolling-switch">
-                      <label for="hid-mouse-reverse-scrolling-switch"><span class="switch-inner"></span><span class="switch"></span></label>
-                    </div>
+                  <td class="value" id="hid-mouse-rate-value" style="min-width: 30px; max-width:30px"></td>
+                </tr>
+                <tr class="feature-disabled" id="hid-mouse-sens">
+                  <td>Relative mouse sensitivity:</td>
+                  <td>
+                    <input class="slider" disabled type="range" id="hid-mouse-sens-slider">
                   </td>
-            </tr>
+                  <td class="value" id="hid-mouse-sens-value" style="min-width: 30px; max-width:30px"></td>
+                </tr>
+                <tr class="feature-disabled" id="hid-mouse-squash">
+                      <td>Squash relative mouse moves:</td>
+                      <td align="right">
+                        <div class="switch-box">
+                          <input checked type="checkbox" id="hid-mouse-squash-switch">
+                          <label for="hid-mouse-squash-switch"><span class="switch-inner"></span><span class="switch"></span></label>
+                        </div>
+                      </td>
+                </tr>
+                <tr>
+                      <td>Reverse mouse scrolling:</td>
+                      <td align="right">
+                        <div class="switch-box">
+                          <input type="checkbox" id="hid-mouse-reverse-scrolling-switch">
+                          <label for="hid-mouse-reverse-scrolling-switch"><span class="switch-inner"></span><span class="switch"></span></label>
+                        </div>
+                      </td>
+                </tr>
+              </table>
+            </div>
+          </details>
+          <table class="kv">
             <tr class="feature-disabled" id="hid-connect">
                   <td>Connect HID to Server:</td>
                   <td align="right">
diff --git a/web/kvm/navbar-system.pug b/web/kvm/navbar-system.pug
index 55ec99ab..bf53fd9f 100644
--- a/web/kvm/navbar-system.pug
+++ b/web/kvm/navbar-system.pug
@@ -64,19 +64,23 @@ li(class="right")
 				tr(id="hid-outputs-mouse", class="feature-disabled")
 					td Mouse #[a(target="_blank" href="https://docs.pikvm.org/mouse") mode]:
 					td #[div(id="hid-outputs-mouse-box" class="radio-box")]
+		details
+			summary Mouse settings
+			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")
+					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")
+					tr(id="hid-mouse-squash" class="feature-disabled")
+						+menu_switch_notable("hid-mouse-squash-switch", "Squash relative mouse moves", true, true)
+					tr
+						+menu_switch_notable("hid-mouse-reverse-scrolling-switch", "Reverse mouse scrolling", true, false)
 		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")
-			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")
-			tr(id="hid-mouse-squash" class="feature-disabled")
-				+menu_switch_notable("hid-mouse-squash-switch", "Squash relative mouse moves", true, true)
-			tr
-				+menu_switch_notable("hid-mouse-reverse-scrolling-switch", "Reverse mouse scrolling", true, false)
 			tr(id="hid-connect" class="feature-disabled")
 				+menu_switch_notable("hid-connect-switch", "Connect HID to Server", true, true)
 			tr