CONCD-650 spacing issues (#2289)

* Menu icon and X should be aligned with How to Guide header * Navigation arrows <> should be aligned w/guide section title * Reduce padding above Helpful links in About this Campaign guide section * CONCD-651 ran pipenv update
LibraryOfCongress · Feb 22, 2024 · c683009 · c683009
1 parent e8543f6
commit c683009
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
@@ -1091,6 +1091,7 @@ $card-progress-height: 12px;
 #close-guide {
     height: 30.5px;
     margin: 0 1rem -1rem auto;
+    padding-top: 0.5rem;
 }
 
 .sidebar {
@@ -1133,6 +1134,7 @@ $card-progress-height: 12px;
 
 #guide-bars {
     color: #fff;
+    padding-top: 0.25rem;
 }
 
 .sidebar .close {

diff --git a/concordia/templates/fragments/_how-to-guide.html b/concordia/templates/fragments/_how-to-guide.html
@@ -3,7 +3,7 @@
         <a id="guide-bars" data-target="#guide-carousel" data-slide-to="0" class="d-none" href="">
             <i class="fas fa-solid fa-bars pl-3 py-2"></i>
         </a>
-        <h3 class="px-2 my-1">How-To Guide</h3>
+        <h3 class="px-2 my-1 py-1">How-To Guide</h3>
         <button id="close-guide" type="button" class="close text-white" onclick="closeOffcanvas()">
             <span class="fas fa-times"></span>
         </button>
@@ -27,7 +27,7 @@ <h3 class="px-2 my-1">How-To Guide</h3>
             <div class="carousel-item container">
                 <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>
+                    <a class="font-weight-bold ml-3 pt-2" id="next-guide" href="#guide-carousel" data-slide="next">></a>
                 </div>
                 {% if campaign.description %}
                     <h4>About this campaign</h4>
@@ -38,7 +38,7 @@ <h4>About this project</h4>
                     <p>{{ asset.item.project.description|safe }}</p>
                 {% endif %}
                 {% if campaign.resource_set.related_links %}
-                    <h5 class="pt-4">Helpful Links</h5>
+                    <h5 class="pt-3">Helpful Links</h5>
                     <p>
                         <ul>
                             {% for resource in campaign.resource_set.related_links %}
@@ -54,10 +54,10 @@ <h5 class="pt-4">Helpful Links</h5>
             {% for guide in guides %}
                 <div class="carousel-item container" id="pane-{{ forloop.counter }}">
                     <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>
+                        <a class="font-weight-bold mr-3 pt-2" id="previous-guide" href="#guide-carousel" data-slide="prev"><</a>
                         <h3>{{ guide.title }}</h3>
                         {% if not forloop.last %}
-                            <a class="font-weight-bold ml-3" id="next-guide" href="#guide-carousel" data-slide="next">></a>
+                            <a class="font-weight-bold ml-3 pt-2" id="next-guide" href="#guide-carousel" data-slide="next">></a>
                         {% endif %}
                     </div>
                     <div class="guide-body">