improved msd rw ui

3 files changed, 16 insertions, 16 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 230ed946..c3a05a06 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -407,7 +407,9 @@
                       <td style="line-height:1.5"><b>Read-write mode is enabled</b></td>
                     </tr>
                     <tr>
-                      <td><sup style="line-height:1">Do not turn off PiKVM during this to prevent filesystem corruption</sup></td>
+                      <td><sup style="line-height:1">Do not turn off PiKVM during this to prevent filesystem<br>
+                          corruption, and don't use this mode unnecessarily.<br>
+                          It can reduce the resource of the memory card.</sup></td>
                     </tr>
                   </table>
                 </div>
@@ -443,7 +445,7 @@
           </table>
           <table class="kv msd-cdrom-emulation feature-disabled">
             <tr>
-              <td>Drive emulation <a target="_blank" href="https://docs.pikvm.org/msd">mode</a>:</td>
+              <td>Drive <a target="_blank" href="https://docs.pikvm.org/msd">mode</a>:</td>
               <td>
                 <div class="radio-box">
                   <input checked type="radio" id="msd-mode-radio-cdrom" name="msd-mode-radio" value="1">
@@ -452,12 +454,9 @@
                   <label for="msd-mode-radio-flash">Flash</label>
                 </div>
               </td>
-            </tr>
-          </table>
-          <table class="kv msd-rw feature-disabled">
-            <tr>
-                  <td>Read-write mode:</td>
-                  <td align="right">
+              <td>&nbsp;</td>
+                  <td class="msd-rw feature-disabled">Writable:</td>
+                  <td class="msd-rw feature-disabled" align="right">
                     <div class="switch-box">
                       <input disabled type="checkbox" id="msd-rw-switch">
                       <label for="msd-rw-switch"><span class="switch-inner"></span><span class="switch"></span></label>
diff --git a/web/kvm/navbar-msd.pug b/web/kvm/navbar-msd.pug
index 2ba68520..55a047a5 100644
--- a/web/kvm/navbar-msd.pug
+++ b/web/kvm/navbar-msd.pug
@@ -25,7 +25,9 @@ li(id="msd-dropdown" class="right feature-disabled")
 			hr
 		div(id="msd-message-rw-enabled" class="hidden")
 			+menu_message("warning", "Read-write mode is enabled")
-				| Do not turn off PiKVM during this to prevent filesystem corruption
+				| Do not turn off PiKVM during this to prevent filesystem#[br]
+				| corruption, and don't use this mode unnecessarily.#[br]
+				| It can reduce the resource of the memory card.
 			hr
 		table(class="kv msd-single-storage feature-disabled")
 			tr
@@ -45,16 +47,15 @@ li(id="msd-dropdown" class="right feature-disabled")
 				td #[button(disabled id="msd-remove-button" title="Remove image") #[b &nbsp;&nbsp;&times;&nbsp;&nbsp;]]
 		table(class="kv msd-cdrom-emulation feature-disabled")
 			tr
-				td Drive emulation #[a(target="_blank" href="https://docs.pikvm.org/msd") mode]:
+				td Drive #[a(target="_blank" href="https://docs.pikvm.org/msd") mode]:
 				td
 					div(class="radio-box")
 						input(checked type="radio" id="msd-mode-radio-cdrom" name="msd-mode-radio" value="1")
 						label(for="msd-mode-radio-cdrom") CD-ROM
 						input(type="radio" id="msd-mode-radio-flash" name="msd-mode-radio" value="0")
 						label(for="msd-mode-radio-flash") Flash
-		table(class="kv msd-rw feature-disabled")
-			tr
-				+menu_switch_notable("msd-rw-switch", "Read-write mode", false, false)
+				td &nbsp;
+				+menu_switch_notable("msd-rw-switch", "Writable", false, false, "msd-rw feature-disabled")
 		div(class="msd-multi-storage feature-disabled")
 			hr
 			div(class="text")
diff --git a/web/kvm/navbar.pug b/web/kvm/navbar.pug
index 3974e319..9703344e 100644
--- a/web/kvm/navbar.pug
+++ b/web/kvm/navbar.pug
@@ -13,9 +13,9 @@ mixin menu_message(icon, short, classes="")
 						sup(style="line-height:1")
 							block
 
-mixin menu_switch_notable(id, title, enabled, checked)
-	td #{title}:
-	td(align="right")
+mixin menu_switch_notable(id, title, enabled, checked, classes="")
+	td(class=`${classes}`) #{title}:
+	td(class=`${classes}` align="right")
 		div(class="switch-box")
 			input(checked=checked disabled=!enabled type="checkbox" id=id)
 			label(for=id)