CONCD-674 rsar reduce padding (#2270)

* CONCD-674 reduce some padding slightly * CONCD-674 close button should align with header * CONCD-674 set height dynamically
LibraryOfCongress · Feb 7, 2024 · 0e539c6 · 0e539c6
1 parent e34b410
commit 0e539c6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
@@ -1046,12 +1046,18 @@ $card-progress-height: 12px;
 /*
  * Tutorial popup and cards navigation
  */
-#card-carousel {
-    height: 30.35rem;
+#tutorial-popup .modal-header {
+    padding-bottom: 0.25rem;
 }
 
-#card-carousel .carousel-item {
-    height: 30.25rem;
+#tutorial-popup .modal-body {
+    padding-top: 0.25rem;
+}
+
+#tutorial-popup .close {
+    position: absolute;
+    right: 1rem;
+    top: 0.75rem;
 }
 
 #card-carousel .carousel-item img {
@@ -1060,6 +1066,14 @@ $card-progress-height: 12px;
     padding-bottom: 1rem;
 }
 
+#card-carousel .carousel-item h5 {
+    margin-bottom: 0;
+}
+
+#card-carousel .carousel-item p {
+    margin-bottom: 0.75rem;
+}
+
 #card-carousel ul {
     padding-left: 1.5rem;
 }

diff --git a/concordia/templates/transcriptions/asset_detail.html b/concordia/templates/transcriptions/asset_detail.html
@@ -1185,4 +1185,14 @@ <h5>{{ card.display_heading }}</h5>
             document.getElementById('guide-nav').classList.add('show', 'active');
         }
     </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);
+        });
+    </script>
 {% endblock body_scripts %}