From bcf602714a12b7b96242337a57f9c2ac7475ee19 Mon Sep 17 00:00:00 2001
From: Rajit Sarkar <rsar@loc.gov>
Date: Mon, 12 Aug 2024 09:59:28 -0400
Subject: [PATCH 1/4] CONCD-903 Update How-to instructions in transcription
 view to a button (WiP)

---
 concordia/static/scss/base.scss                           | 8 --------
 .../templates/transcriptions/asset_detail/editor.html     | 4 +++-
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
index 12e860531..747051d24 100644
--- 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 {
diff --git a/concordia/templates/transcriptions/asset_detail/editor.html b/concordia/templates/transcriptions/asset_detail/editor.html
index 92a09da5e..d4e4cb76c 100644
--- a/concordia/templates/transcriptions/asset_detail/editor.html
+++ b/concordia/templates/transcriptions/asset_detail/editor.html
@@ -48,6 +48,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" onclick="openOffcanvas()">How-To Guide</button>
+                {% endif %}
             </div>
         </div>
 
@@ -62,7 +65,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" onclick="openOffcanvas()">How-To Guide</button>
                     {% include "fragments/_how-to-guide.html" %}
                 {% endif %}
             </div>

From fb21af47c6f4919375a0acbd0db7563464c56b8d Mon Sep 17 00:00:00 2001
From: Rajit Sarkar <rsar@loc.gov>
Date: Tue, 13 Aug 2024 12:37:48 -0400
Subject: [PATCH 2/4] CONCD-903 don't hide the button

---
 concordia/static/js/src/guide.js | 2 --
 concordia/static/scss/base.scss  | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/concordia/static/js/src/guide.js b/concordia/static/js/src/guide.js
index 2bfe28570..ab81346a9 100644
--- a/concordia/static/js/src/guide.js
+++ b/concordia/static/js/src/guide.js
@@ -7,7 +7,6 @@ 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();
@@ -20,7 +19,6 @@ function closeOffcanvas() {
     guide.classList.add('offscreen');
 
     guide.style.border = 'none';
-    document.getElementById('open-guide').style.display = 'block';
 }
 
 function showPane(elementId) {
diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
index 747051d24..c4320e9aa 100644
--- a/concordia/static/scss/base.scss
+++ b/concordia/static/scss/base.scss
@@ -1131,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;

From 9a15f1a60d3cba799c6c3ab6b6bd2f9eb86453ce Mon Sep 17 00:00:00 2001
From: Rajit Sarkar <rsar@loc.gov>
Date: Wed, 14 Aug 2024 15:05:29 -0400
Subject: [PATCH 3/4] CONCD-903 as long as the guide is open, the button should
 be navy

---
 concordia/static/js/src/guide.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/concordia/static/js/src/guide.js b/concordia/static/js/src/guide.js
index ab81346a9..ff7ea0cd2 100644
--- a/concordia/static/js/src/guide.js
+++ b/concordia/static/js/src/guide.js
@@ -12,13 +12,15 @@ function openOffcanvas() {
             closeOffcanvas();
         }
     });
+    document.getElementById('open-guide').style.background = '#002347';
 }
 
 function closeOffcanvas() {
     var guide = document.getElementById('guide-sidebar');
     guide.classList.add('offscreen');
-
     guide.style.border = 'none';
+
+    document.getElementById('open-guide').style.background = '#0076AD';
 }
 
 function showPane(elementId) {

From 35933e6e0e639143cbe6a726c4df34c8b8fcdf4f Mon Sep 17 00:00:00 2001
From: Rajit Sarkar <rsar@loc.gov>
Date: Wed, 14 Aug 2024 15:24:10 -0400
Subject: [PATCH 4/4] CONCD-903 adding a little margin

---
 concordia/templates/transcriptions/asset_detail/editor.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/concordia/templates/transcriptions/asset_detail/editor.html b/concordia/templates/transcriptions/asset_detail/editor.html
index de98041c7..2a7d1528c 100644
--- a/concordia/templates/transcriptions/asset_detail/editor.html
+++ b/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" type="button">How-To Guide</button>
+                        <button id="open-guide" class="btn btn-primary mx-1" type="button">How-To Guide</button>
                     {% endif %}
                 </div>
             {% endif %}