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>