CONCD-903 Update How-to instructions in transcription view to a button (

#2492) * CONCD-903 Update How-to instructions in transcription view to a button (WiP) * CONCD-903 don't hide the button * CONCD-903 as long as the guide is open, the button should be navy * CONCD-903 adding a little margin
LibraryOfCongress · Aug 15, 2024 · 78b0b63 · 78b0b63
1 parent 7aa2263
commit 78b0b63
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 13 deletions.
diff --git a/concordia/static/js/src/guide.js b/concordia/static/js/src/guide.js
@@ -6,20 +6,20 @@ function openOffcanvas() {
     guide.style.borderWidth = '0 0 thick thick';
     guide.style.borderStyle = 'solid';
     guide.style.borderColor = '#0076ad';
-    document.getElementById('open-guide').style.display = 'none';
     document.addEventListener('keydown', function (event) {
         if (event.key == 'Escape') {
             closeOffcanvas();
         }
     });
+    document.getElementById('open-guide').style.background = '#002347';
 }
 
 function closeOffcanvas() {
     let guide = document.getElementById('guide-sidebar');
     guide.classList.add('offscreen');
-
     guide.style.border = 'none';
-    document.getElementById('open-guide').style.display = 'block';
+
+    document.getElementById('open-guide').style.background = '#0076AD';
 }
 
 $('#open-guide').on('click', openOffcanvas);

diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
@@ -1116,16 +1116,8 @@ $card-progress-height: 12px;
 
 /* How to Guide */
 #open-guide {
-    transform: rotate(-90deg) translateY(-50%);
-    position: absolute;
     border-radius: 0;
-    right: 0;
-    font-size: 0.75rem;
-    margin-right: -55px;
-    margin-top: 39px;
-    max-height: 32px;
     white-space: nowrap;
-    width: 110px;
 }
 
 #close-guide {
@@ -1139,7 +1131,7 @@ $card-progress-height: 12px;
     width: 450px;
     position: absolute; /* Stay in place */
     z-index: 1; /* Stay on top */
-    top: 129px;
+    top: 135px;
     right: 0;
     overflow: hidden auto; /* Disable horizontal scrolling */
     transition: 0.3s;

diff --git a/concordia/templates/transcriptions/asset_detail/editor.html b/concordia/templates/transcriptions/asset_detail/editor.html
@@ -49,6 +49,9 @@ <h2 id="message-contributors" {% if transcription_status == 'not_started' %}hidd
                     <a class="font-weight-bold" id="quick-tips" data-toggle="modal" data-target="#tutorial-popup" role="button">
                         <u>Campaign Tips</u>
                     </a>
+                    {% if guides %}
+                        <button id="open-guide" class="btn btn-primary mx-1" type="button">How-To Guide</button>
+                    {% endif %}
                 </div>
             {% endif %}
         </div>
@@ -64,7 +67,6 @@ <h2 id="message-contributors" {% if transcription_status == 'not_started' %}hidd
                     {{ transcription.text }}
                 </textarea>
                 {% if guides %}
-                    <button id="open-guide" class="btn btn-primary" type="button">How-To Guide</button>
                     {% include "transcriptions/asset_detail/guide.html" %}
                 {% endif %}
             </div>