Use bootstrap switch for preview toggle

MaMpf-HD · Nov 13, 2023 · 327f724 · 327f724
1 parent fbfa6f5
commit 327f724
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 14 deletions.
diff --git a/app/assets/stylesheets/annotations.scss b/app/assets/stylesheets/annotations.scss
@@ -24,14 +24,6 @@
   #annotation-modal-content {
     width: 100%;
   }
-  #preview-toggle {
-    input:checked + .slider {
-      background-color: #0D6EFD;
-    }
-    .switch {
-      vertical-align: middle;
-    }
-  }
   #annotation-modal-preview {
     height: 543px;
     width: 35%;

diff --git a/app/views/annotations/_form.html.erb b/app/views/annotations/_form.html.erb
@@ -24,13 +24,12 @@
     <%= f.text_area :comment, class: 'form-control' %>
 
     <!--- PREVIEW TOGGLE -->
-    <div id="preview-toggle">
-      <label class="switch">
-        <input id="preview-toggle-check" type="checkbox">
-        <span class="slider round"></span>
+    <div class="form-check form-switch pt-2" id="preview-toggle">
+      <input id="preview-toggle-check"
+            class="form-check-input" type="checkbox" role="switch">
+      <label class="form-check-label" for="preview-toggle-check">
+        <%= t('admin.remark.preview') %>
       </label>
-      &nbsp
-      <%= t('admin.remark.preview') %>
     </div>
 
     <!--- COLOR SELECTION -->