From 585e61bb73df44ec773758b54670a4aa60dee7be Mon Sep 17 00:00:00 2001
From: Rajit Sarkar <rsar@loc.gov>
Date: Wed, 20 Mar 2024 14:42:17 -0400
Subject: [PATCH 1/5] CONCD-715 tutorial sometimes appears collapsed

---
 concordia/templates/base.html                       | 13 +++++++++++++
 .../templates/transcriptions/asset_detail.html      |  7 +------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/concordia/templates/base.html b/concordia/templates/base.html
index 5584cce6e..c02c69039 100644
--- a/concordia/templates/base.html
+++ b/concordia/templates/base.html
@@ -279,6 +279,18 @@ <h2 class="h3 font-weight-normal text-center text-lg-left">Follow
 
         {% include "fragments/common-scripts.html" %}
 
+        <script type="text/javascript">
+            function setTutorialHeight() {
+                var $carouselItems = $("#card-carousel .carousel-item");
+                var heights = $carouselItems.map(function() {
+                    return $(this).height();
+                });
+                var maxHeight = Math.max.apply(this, heights);
+                $carouselItems.height(maxHeight);
+            }
+        </script>
+
+
         {% block body_scripts %}{% endblock body_scripts %}
 
         <script type="text/javascript">
@@ -309,6 +321,7 @@ <h2 class="h3 font-weight-normal text-center text-lg-left">Follow
                                 clearCache();
                             {% endif %}
                             {% if asset %}
+                                setTutorialHeight();
                                 $('#tutorial-popup').modal('show');
                                 localStorage.setItem(keyName, "true");
                             {% endif %}
diff --git a/concordia/templates/transcriptions/asset_detail.html b/concordia/templates/transcriptions/asset_detail.html
index 133558124..f0b5bb5f6 100644
--- a/concordia/templates/transcriptions/asset_detail.html
+++ b/concordia/templates/transcriptions/asset_detail.html
@@ -1185,12 +1185,7 @@ <h5>{{ card.display_heading }}</h5>
     </script>
     <script>
         $("#tutorial-popup").on("shown.bs.modal", function() {
-            var $carouselItems = $("#card-carousel .carousel-item");
-            var heights = $carouselItems.map(function() {
-                return $(this).height();
-            });
-            var maxHeight = Math.max.apply(this, heights);
-            $carouselItems.height(maxHeight);
+            setTutorialHeight();
         });
     </script>
 {% endblock body_scripts %}

From 4d4d0d32d2935ecbd3df7058ecd3fac8bdb5f94b Mon Sep 17 00:00:00 2001
From: Rajit Sarkar <rsar@loc.gov>
Date: Mon, 25 Mar 2024 15:30:07 -0400
Subject: [PATCH 2/5] CONCD-744 set position dynamically

---
 concordia/templates/transcriptions/asset_detail.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/concordia/templates/transcriptions/asset_detail.html b/concordia/templates/transcriptions/asset_detail.html
index f0b5bb5f6..619eab79a 100644
--- a/concordia/templates/transcriptions/asset_detail.html
+++ b/concordia/templates/transcriptions/asset_detail.html
@@ -1141,13 +1141,18 @@ <h5>{{ card.display_heading }}</h5>
         });
     </script>
     <script>
+        var openGuide = document.getElementById("open-guide");
+        var rect = document.getElementById("transcription-input").getBoundingClientRect();
+        var top = rect.top;
+        openGuide.style.top = rect.top - 179 + "px";
+
         function openOffcanvas() {
             var 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.getElementById("open-guide").style.display = "none";
+            openGuide.style.display = "none";
             document.addEventListener('keydown', function(e) {
                 if (e.key == "Escape") {
                     closeOffcanvas();

From dafcf421198f7acc085640dd5749e5aab2477ee2 Mon Sep 17 00:00:00 2001
From: rasarkar <105652044+rasarkar@users.noreply.github.com>
Date: Mon, 25 Mar 2024 15:35:22 -0400
Subject: [PATCH 3/5] Update base.scss

---
 concordia/static/scss/base.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
index 856c39f0b..55d16b58c 100644
--- a/concordia/static/scss/base.scss
+++ b/concordia/static/scss/base.scss
@@ -1086,7 +1086,6 @@ $card-progress-height: 12px;
     position: absolute;
     border-radius: 0;
     right: 0;
-    top: 129px;
     font-size: 0.75rem;
     margin-right: -55px;
     margin-top: 39px;

From 1b0122c9726e4884fea79d70fe1d833db238682e Mon Sep 17 00:00:00 2001
From: rasarkar <105652044+rasarkar@users.noreply.github.com>
Date: Tue, 26 Mar 2024 09:25:47 -0400
Subject: [PATCH 4/5] Update base.scss

---
 concordia/static/scss/base.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
index 55d16b58c..626f20fe0 100644
--- a/concordia/static/scss/base.scss
+++ b/concordia/static/scss/base.scss
@@ -272,7 +272,7 @@ ul.nav-secondary {
     flex: initial !important;
 }
 
-#transcription-input {
+#transcription-input-container {
     width: 99% !important;
 }
 
@@ -482,7 +482,6 @@ $card-progress-height: 12px;
     .view-transcriptions--item-detail & {
         top: 0;
     }
-
 }
 
 .concordia-object-card .card-actions .btn {

From f47dfc368c151fba09d8554341c7719126165dd5 Mon Sep 17 00:00:00 2001
From: Rajit Sarkar <rsar@loc.gov>
Date: Tue, 26 Mar 2024 09:23:55 -0400
Subject: [PATCH 5/5] CONCD-744 it might be better to just restructure the html
 (rather than setting styles with javascript)

---
 .../transcriptions/asset_detail.html          | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/concordia/templates/transcriptions/asset_detail.html b/concordia/templates/transcriptions/asset_detail.html
index 619eab79a..73f0641b5 100644
--- a/concordia/templates/transcriptions/asset_detail.html
+++ b/concordia/templates/transcriptions/asset_detail.html
@@ -430,9 +430,15 @@ <h2 id="message-contributors" {% if transcription_status == 'not_started' %}hidd
                                     <span class="sr-only">Loading...</span>
                                 </div>
                             </div>
-                            <textarea readonly class="form-control rounded flex-grow-1 d-print-none" name="text" id="transcription-input" placeholder="{% if transcription_status == 'not_started' or transcription_status == 'in_progress' %}Go ahead, start typing. You got this!{% else %}Nothing to transcribe{% endif %}" aria-label="Transcription input">
-                                {{ transcription.text }}
-                            </textarea>
+                            <div class="d-flex flex-column flex-grow-1" id="transcription-input-container">
+                                <textarea readonly class="form-control rounded flex-grow-1 d-print-none" name="text" id="transcription-input" placeholder="{% if transcription_status == 'not_started' or transcription_status == 'in_progress' %}Go ahead, start typing. You got this!{% else %}Nothing to transcribe{% endif %}" aria-label="Transcription input">
+                                    {{ 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>
 
                             <div class="print-transcription-text" aria-hidden="true" style="display: none;">{{ transcription.text }}</div>
 
@@ -522,10 +528,6 @@ <h2 id="tag-label" class="border-top pt-3 pb-2"><a
                     </form>
                 </div>
             </div>
-            {% 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>
         <div id="help-container" class="mt-1 d-print-none">
             <div class="row p-3 bg-light justify-content-sm-between">
@@ -1141,11 +1143,6 @@ <h5>{{ card.display_heading }}</h5>
         });
     </script>
     <script>
-        var openGuide = document.getElementById("open-guide");
-        var rect = document.getElementById("transcription-input").getBoundingClientRect();
-        var top = rect.top;
-        openGuide.style.top = rect.top - 179 + "px";
-
         function openOffcanvas() {
             var guide = document.getElementById("guide-sidebar");
             guide.classList.remove("offscreen");