fix: arrange agencies in a two-column modal

cal-itp · Nov 8, 2024 · 59869fd · 59869fd
1 parent 2e2e4f4
commit 59869fd
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 21 deletions.
diff --git a/benefits/core/templates/core/includes/modal--agency-selector.html b/benefits/core/templates/core/includes/modal--agency-selector.html
@@ -7,23 +7,25 @@
         <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">
-            {% 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="row row-cols-1 row-cols-md-2 g-3 text-start text-lg-center justify-content-center">
+            {% for agency in active_agencies|slice:"0:4" %}
+                <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
@@ -696,10 +696,6 @@ a.card:focus-visible {
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
 }
 
-.card-row {
-  gap: var(--card-gap);
-}
-
 .card .card-body {
   padding: 0 !important; /* override CA State Web Template */
 }