From e43fa83c393a71042a3a938a27a0f82555defa9d Mon Sep 17 00:00:00 2001
From: rasarkar <105652044+rasarkar@users.noreply.github.com>
Date: Fri, 26 Jan 2024 06:41:10 -0500
Subject: [PATCH] CONCD-650 Initial feedback (#2245)

* CONCD-650 Make the X to escape out always available

* CONCD-650 Also make the guide closeable at any time by hitting ESC

* CONCD-650 the padding around the transcription box is missing

* CONCD-650 Reduce padding around both the How to Guide heading and the section title

* CONCD-650 Campaign.description

* CONCD-650 added padding above Helpful Links

* CONCD-650 reduced font size of Helpful Links
---
 concordia/static/scss/base.scss               |  9 +++++
 .../transcriptions/asset_detail.html          | 38 +++++++++++--------
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
index 0f6474e3d..045d6c8a1 100644
--- a/concordia/static/scss/base.scss
+++ b/concordia/static/scss/base.scss
@@ -271,6 +271,10 @@ ul.nav-secondary {
     flex: initial !important;
 }
 
+#transcription-input {
+    width: 99% !important;
+}
+
 /*
  * vertical and horizontal dividers
  */
@@ -1075,12 +1079,17 @@ $card-progress-height: 12px;
     position: absolute;
     border-radius: 0;
     right: 0;
+    top: 129px;
     font-size: 0.75rem;
     margin-right: -55px;
     margin-top: 39px;
     width: 110px;
 }
 
+#close-guide {
+    margin: -1rem 1rem -1rem auto;
+}
+
 .sidebar {
     height: 580px; /* 100% Full-height */
     width: 0; /* 0 width - change this with JavaScript */
diff --git a/concordia/templates/transcriptions/asset_detail.html b/concordia/templates/transcriptions/asset_detail.html
index 9d2abf85a..9fcfc7f65 100644
--- a/concordia/templates/transcriptions/asset_detail.html
+++ b/concordia/templates/transcriptions/asset_detail.html
@@ -444,26 +444,29 @@ <h2 id="message-contributors" {% if transcription_status == 'not_started' %}hidd
                                             </ul>
                                         </div>
                                         <div class="carousel-item container">
-                                            <div class="bg-primary px-2 py-3 row text-white">
+                                            <div class="bg-primary px-2 py-1 row text-white">
                                                 <a data-target="#guide-carousel" data-slide-to="0" class="text-white" href="">
                                                     <i class="fas fa-solid fa-bars"></i>
                                                 </a>
                                                 <h3 class="px-2">How to Guide</h3>
+                                                <button id="close-guide" type="button" class="close text-white" onclick="closeOffcanvas()">
+                                                    <span class="fas fa-times"></span>
+                                                </button>
                                             </div>
-                                            <div class="border-bottom justify-content-center mb-3 py-3 row">
+                                            <div class="border-bottom justify-content-center mb-3 py-1 row">
                                                 <h3>About this Campaign</h3>
                                                 <a class="font-weight-bold ml-3" id="next-guide" href="#guide-carousel" data-slide="next">></a>
                                             </div>
-                                            {% if asset.item.project.campaign.long_description %}
+                                            {% if asset.item.project.campaign.description %}
                                                 <h4>About this campaign</h4>
-                                                {{ asset.item.project.campaign.long_description|safe }}
+                                                {{ asset.item.project.campaign.description|safe }}
                                             {% endif %}
                                             {% if asset.item.project.description %}
                                                 <h4>About this project</h4>
                                                 {{ asset.item.project.description|safe }}
                                             {% endif %}
                                             {% if asset.item.project.campaign.resource_set.related_links %}
-                                                <h4>Helpful Links</h4>
+                                                <h5 class="pt-4">Helpful Links</h5>
                                                 {% for resource in campaign.resource_set.related_links %}
                                                     <li class="mb-3">
                                                         <a href="{{ resource.resource_url }}" target="_blank" rel=noopener>
@@ -475,13 +478,16 @@ <h4>Helpful Links</h4>
                                         </div>
                                         {% for guide in guides %}
                                             <div class="carousel-item container" id="pane-{{ forloop.counter }}">
-                                                <div class="bg-primary px-2 py-3 row text-white">
+                                                <div class="bg-primary px-2 py-1 row text-white">
                                                     <a data-target="#guide-carousel" data-slide-to="0">
                                                         <i class="fas fa-solid fa-bars"></i>
                                                     </a>
                                                     <h3 class="px-2">How to Guide</h3>
+                                                    <button id="close-guide" type="button" class="close text-white" onclick="closeOffcanvas()">
+                                                        <span class="fas fa-times"></span>
+                                                    </button>
                                                 </div>
-                                                <div class="border-bottom justify-content-center mb-3 py-3 row">
+                                                <div class="border-bottom justify-content-center mb-3 py-1 row">
                                                     <a class="font-weight-bold mr-3" id="previous-guide" href="#guide-carousel" data-slide="prev"><</a>
                                                     <h3>{{ guide.title }}</h3>
                                                     {% if not forloop.last %}
@@ -502,13 +508,10 @@ <h3>{{ guide.title }}</h3>
                                     <span class="sr-only">Loading...</span>
                                 </div>
                             </div>
-                            <div class="flex-grow-1 row">
-                                <textarea readonly class="form-control rounded 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>
-                                <button id="open-guide" class="btn btn-primary" type="button" onclick="openOffcanvas()">How to Guide</button>
-                            </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>
+                            <button id="open-guide" class="btn btn-primary" type="button" onclick="openOffcanvas()">How to Guide</button>
                             <div class="print-transcription-text" aria-hidden="true" style="display: none;">{{ transcription.text }}</div>
 
                             <div class="my-3 d-print-none d-flex flex-wrap justify-content-center align-items-center">
@@ -1227,8 +1230,13 @@ <h3>{{ card.display_heading }}</h3>
         function openOffcanvas() {
             var guide = document.getElementById("guide-carousel");
             guide.style.width = "450px";
-            document.getElementById("guide-carousel").style.border = "thick solid #0076ad";
+            guide.style.border = "thick solid #0076ad";
             document.getElementById("open-guide").style.display = "none";
+            document.addEventListener('keydown', function(e) {
+                if (e.key == "Escape") {
+                    closeOffcanvas();
+                }
+            });
 
         }
         function closeOffcanvas() {