CONCD-904

concordia/static/js/src/contribute.js

@@ -9,7 +9,7 @@ function lockControls($container) {
     // Locks all of the controls in the provided jQuery element
     $container.find('input, textarea').attr('readonly', 'readonly');
     $container.find('input:checkbox').attr('disabled', 'disabled');
-    $container.find('button').attr('disabled', 'disabled');
+    $container.find('button:not(#open-guide)').attr('disabled', 'disabled');
 }
 
 function unlockControls($container) {

concordia/static/js/src/guide.js

@@ -2,16 +2,20 @@
 
 function openOffcanvas() {
     let guide = document.getElementById('guide-sidebar');
-    guide.classList.remove('offscreen');
-    guide.style.borderWidth = '0 0 thick thick';
-    guide.style.borderStyle = 'solid';
-    guide.style.borderColor = '#0076ad';
-    document.addEventListener('keydown', function (event) {
-        if (event.key == 'Escape') {
-            closeOffcanvas();
-        }
-    });
-    document.getElementById('open-guide').style.background = '#002347';
+    if (guide.classList.contains('offscreen')) {
+        guide.classList.remove('offscreen');
+        guide.style.borderWidth = '0 0 thick thick';
+        guide.style.borderStyle = 'solid';
+        guide.style.borderColor = '#0076ad';
+        document.addEventListener('keydown', function (event) {
+            if (event.key == 'Escape') {
+                closeOffcanvas();
+            }
+        });
+        document.getElementById('open-guide').style.background = '#002347';
+    } else {
+        closeOffcanvas();
+    }
 }
 
 function closeOffcanvas() {

concordia/static/scss/base.scss

@@ -1133,6 +1133,7 @@ $card-progress-height: 12px;
 /* How to Guide */
 #open-guide {
     border-radius: 0;
+    margin: 0 5px 0 9px;
     white-space: nowrap;
 }
 

concordia/templates/transcriptions/asset_detail/editor.html

@@ -50,7 +50,7 @@ <h2 id="message-contributors" {% if transcription_status == 'not_started' %}hidd
                         <u>Campaign Tips</u>
                     </a>
                     {% if guides %}
-                        <button id="open-guide" class="btn btn-primary mx-1" type="button">How-To Guide</button>
+                        <button id="open-guide" class="btn btn-primary" type="button">How-To Guide</button>
                     {% endif %}
                 </div>
             {% endif %}