CONCD-997 Just some aesthetic tweaks. (#2630)

* CONCD-997 filter should be slightly indented * CONCD-997 outside corners of dropdown/ button should be rounded and inside should be sharp to make it look like a single entity * CONCD-1007 when browser window is narrowed, thumbnail overlaps text * CONCD-997 The dropdowns on loc.gov do not have rounded corners
LibraryOfCongress · Dec 10, 2024 · 6471e21 · 6471e21
1 parent 2843b38
commit 6471e21
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
@@ -552,6 +552,38 @@ hr {
     color: $secondary;
 }
 
+.row .campaign-thumbnail {
+    flex: 0 0 auto;
+
+    @include media-breakpoint-up(lg) {
+        width: 16.6667%;
+    }
+
+    @include media-breakpoint-down(lg) {
+        width: 25%;
+    }
+
+    @include media-breakpoint-down(md) {
+        width: 33.3333%;
+    }
+}
+
+.row .campaign-text {
+    flex: 0 0 auto;
+
+    @include media-breakpoint-up(lg) {
+        width: 83.3333%;
+    }
+
+    @include media-breakpoint-down(lg) {
+        width: 75%;
+    }
+
+    @include media-breakpoint-down(md) {
+        width: 66.6667%;
+    }
+}
+
 .navbar-brand {
     @include media-breakpoint-down(lg) {
         max-width: 350px;
@@ -1063,6 +1095,8 @@ body .disabled > .page-link {
 }
 
 #campaign-options {
+    margin-left: 1px;
+
     select {
         background-color: $white;
         border-color: $blue;

diff --git a/concordia/templates/transcriptions/campaign_list_small_blocks.html b/concordia/templates/transcriptions/campaign_list_small_blocks.html
@@ -30,7 +30,7 @@ <h1>Completed Campaigns</h1>
                 {% for campaign in campaigns %}
                     <li{% if forloop.counter > 10 %} hidden{% endif %}>
                         <div class="row">
-                            <div class="col-2">
+                            <div class="campaign-thumbnail">
                                 <div class="aspect-ratio-box">
                                     <div class="aspect-ratio-box-inner-wrapper">
                                         <a href="{% url 'transcriptions:campaign-detail' campaign.slug %}">
@@ -39,7 +39,7 @@ <h1>Completed Campaigns</h1>
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-10">
+                            <div class="campaign-text">
                                 <p class="mb-2">
                                     <a href="{% url 'transcriptions:campaign-detail' campaign.slug %}">
                                         <span class="d-block h4">