fix: arrange agencies in a two-column modal

cal-itp · Nov 12, 2024 · 1d80b26 · 1d80b26
1 parent 2e2e4f4
commit 1d80b26
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 24 deletions.
diff --git a/benefits/core/templates/core/includes/modal--agency-selector.html b/benefits/core/templates/core/includes/modal--agency-selector.html
@@ -3,27 +3,30 @@
 {% load static %}
 
 {% block modal-content %}
-    <div class="container text-center">
-        <h3 id="{{ aria_labelledby_id }}" class="modal-title h1 p-0 mb-4 pb-lg-2s text-center">
-            {% translate "Please choose your transit provider:" %}
-        </h3>
-        <div class="card-row row d-flex flex-column flex-lg-row text-start text-lg-center justify-content-center">
+    <h3 id="{{ aria_labelledby_id }}" class="modal-title h1 p-0 mb-4 pb-lg-2s text-center">
+        {% translate "Please choose your transit provider:" %}
+    </h3>
+    <div class="container text-center agency-container-width">
+        <h3 class="modal-title h1 p-0 mb-4 pb-lg-2s text-center"></h3>
+        <div class="row row-cols-1 row-cols-md-2 g-3 text-start text-lg-center justify-content-center">
             {% for agency in active_agencies %}
-                <a href="{{ agency.eligibility_index_url }}" class="card m-0 d-inline-block">
-                    <div class="card-body d-flex flex-row-reverse flex-lg-column justify-content-center align-items-center">
-                        <img class="sm d-lg-none ms-auto"
-                             src="{% get_static_prefix %}img/agencies/{{ agency.slug }}-sm.svg"
-                             width="52"
-                             height="36"
-                             alt="{% blocktranslate with agency=agency.short_name %}{{ agency }} logo{% endblocktranslate %}">
-                        <img class="lg d-none d-lg-block"
-                             src="{% get_static_prefix %}img/agencies/{{ agency.slug }}-lg.svg"
-                             width="148"
-                             height="72"
-                             alt="{% blocktranslate with agency=agency.short_name %}{{ agency }} logo{% endblocktranslate %}">
-                        <h4 class="mt-lg-2 mb-0">{{ agency.long_name }}</h4>
-                    </div>
-                </a>
+                <div class="col">
+                    <a href="{{ agency.eligibility_index_url }}" class="card m-0 d-inline-block">
+                        <div class="card-body d-flex flex-row-reverse flex-lg-column justify-content-center align-items-center">
+                            <img class="sm d-lg-none ms-auto"
+                                 src="{% get_static_prefix %}img/agencies/{{ agency.slug }}-sm.svg"
+                                 width="52"
+                                 height="36"
+                                 alt="{% blocktranslate with agency=agency.short_name %}{{ agency }} logo{% endblocktranslate %}">
+                            <img class="lg d-none d-lg-block"
+                                 src="{% get_static_prefix %}img/agencies/{{ agency.slug }}-lg.svg"
+                                 width="148"
+                                 height="72"
+                                 alt="{% blocktranslate with agency=agency.short_name %}{{ agency }} logo{% endblocktranslate %}">
+                            <h4 class="mt-lg-2 mb-0">{{ agency.long_name }}</h4>
+                        </div>
+                    </a>
+                </div>
             {% endfor %}
         </div>
     </div>

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -654,7 +654,6 @@ footer .footer-links li a.footer-link:visited {
   --card-border-width: calc(13rem / 16);
   --card-width: 100%;
   --card-height: 100%;
-  --card-gap: 1rem;
 }
 
 @media (min-width: 992px) {
@@ -663,7 +662,6 @@ footer .footer-links li a.footer-link:visited {
     --card-border-width: calc(15rem / 16);
     --card-width: calc(200rem / 16);
     --card-height: calc(178rem / 16);
-    --card-gap: calc(44rem / 16);
   }
 }
 
@@ -696,8 +694,8 @@ a.card:focus-visible {
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
 }
 
-.card-row {
-  gap: var(--card-gap);
+.agency-container-width {
+  width: 75%;
 }
 
 .card .card-body {