Use bootstrap switch for annotation toggle

Also removed unwanted string concatenation artifacts
MaMpf-HD · Nov 13, 2023 · 8b83c5a · 8b83c5a
1 parent 327f724
commit 8b83c5a
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 11 deletions.
diff --git a/app/assets/javascripts/thyme/annotations/annotation.js b/app/assets/javascripts/thyme/annotations/annotation.js
@@ -59,7 +59,7 @@ class Annotation {
                           stroke:${strokeColor};
                           stroke-width:${strokeWidth};
                           fill-rule:evenodd;"/>
-                        </svg>' +
+                        </svg>
                       </span>`;
     $('#' + thymeAttributes.markerBarId).append(markerStr);
 

diff --git a/app/assets/stylesheets/annotations.scss b/app/assets/stylesheets/annotations.scss
@@ -9,10 +9,8 @@
   position: absolute;
   display: flex;
   left: 89%;
-  top: 40%;
-  transform: translateY(-50%);
-  input:checked + .slider {
-    background-color: #2196F3;
+  input:checked {
+    background-color: #2196F3; // TODO: outsource common video control colors
   }
 }
 

diff --git a/app/assets/stylesheets/thyme.scss b/app/assets/stylesheets/thyme.scss
@@ -21,7 +21,6 @@
 }
 
 #hypervideo-container {
-  font-size: 0;
   position: relative;
   background: white;
   margin: 0;

diff --git a/app/views/media/play.html.erb b/app/views/media/play.html.erb
@@ -61,6 +61,7 @@
                 <option value="2">2x</option>
               </select>
             </div>
+
             <!--- ANNOTATION BUTTON -->
             <% if user_signed_in? %>
               <div id="annotation-button">
@@ -69,13 +70,14 @@
                 </i>
               </div>
             <% end %>
+
             <!--- TOGGLE FOR TURNING ON/OFF VISIBLE ANNOTATIONS -->
-            <div id="annotations-toggle" style="display: none;">
-              <label class="switch">
-                <input id="annotations-toggle-check" type="checkbox" checked="true">
-                <span class="slider round"></span>
-              </label>
+            <div id="annotations-toggle" class="form-check form-switch"
+                style="display: none;">
+              <input id="annotations-toggle-check"
+                    class="form-check-input" type="checkbox" role="switch" checked>
             </div>
+
             <div id="size-buttons">
               <i id="ia-active" class="material-icons clickable"
                  data-status="true">