Agency Modal: New design + modal includes refactor (#1646)

cal-itp · Aug 15, 2023 · d9aed34 · d9aed34
2 parents 43e61b4 + 1a5af00
commit d9aed34
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 101 deletions.
diff --git a/benefits/core/templates/core/includes/modal--agency-selector.html b/benefits/core/templates/core/includes/modal--agency-selector.html
@@ -4,28 +4,26 @@
 
 {% block modal-content %}
     <div class="container text-center">
-        <h3 id="{{ aria_labelledby_id }}" class="modal-title h1 p-0 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="row gx-lg-5 mx-lg-1 d-flex flex-column flex-lg-row text-start text-lg-center">
+        <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 %}
-                <div class="col">
-                    <a href="{{ agency.eligibility_index_url }}" class="card mt-lg-4 mx-lg-auto">
-                        <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 mt-lg-3 mx-lg-auto"
-                                 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-3 mb-0 mb-lg-3">{{ agency.long_name }}</h4>
-                        </div>
-                    </a>
-                </div>
+                <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>
             {% endfor %}
         </div>
     </div>

diff --git a/benefits/core/templates/core/includes/modal-info.html b/benefits/core/templates/core/includes/modal-info.html
diff --git a/benefits/core/templates/core/includes/modal.html b/benefits/core/templates/core/includes/modal.html
@@ -1,12 +1,12 @@
 <!-- Modal -->
 {% with id|add:"-modal-label" as aria_labelledby_id %}
     <div class="modal fade" id="{{ id }}" tabindex="-1" aria-labelledby="{{ aria_labelledby_id }}" aria-hidden="true">
-        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
+        <div class="modal-dialog w-auto h-auto {{ size }} modal-dialog-centered modal-dialog-scrollable">
             <div class="modal-content">
-                <div class="modal-header border-0">
+                <div class="modal-header border-0 {{ header }}">
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body {{ body }}">
                     {% block modal-content %}
                     {% endblock modal-content %}
                 </div>

diff --git a/benefits/core/templates/core/index.html b/benefits/core/templates/core/index.html
@@ -12,5 +12,5 @@
 {% block call-to-action %}
   {% translate "Choose your Provider" as text %}
   {% include "core/includes/modal-trigger.html" with modal="modal--agency-selector" classes="btn btn-lg btn-primary" text=text period=False %}
-  {% include "core/includes/modal--agency-selector.html" with id="modal--agency-selector" %}
+  {% include "core/includes/modal--agency-selector.html" with id="modal--agency-selector" size="modal-lg" body="pt-0 pb-4 pb-lg-5 mb-lg-1 px-lg-5 mx-lg-1" %}
 {% endblock call-to-action %}
diff --git a/benefits/eligibility/templates/eligibility/includes/media-item--bankcardcheck--start.html b/benefits/eligibility/templates/eligibility/includes/media-item--bankcardcheck--start.html
@@ -19,5 +19,5 @@
         </p>
     </div>
 
-    {% include "eligibility/includes/modal--contactless.html" with id="modal--contactless" size="modal-lg" %}
+    {% include "eligibility/includes/modal--contactless.html" with id="modal--contactless" size="modal-lg" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
 {% endblock body %}
diff --git a/...ts/eligibility/templates/eligibility/includes/media-item--idcardcheck--start--senior.html b/...ts/eligibility/templates/eligibility/includes/media-item--idcardcheck--start--senior.html
@@ -23,5 +23,5 @@
         </div>
     </div>
 
-    {% include "eligibility/includes/modal--senior-start-help.html" with size="modal-lg" id="modal--identity-verification" %}
+    {% include "eligibility/includes/modal--senior-start-help.html" with size="modal-lg" id="modal--identity-verification" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
 {% endblock body %}
diff --git a/benefits/eligibility/templates/eligibility/includes/modal--contactless.html b/benefits/eligibility/templates/eligibility/includes/modal--contactless.html
@@ -1,4 +1,4 @@
-{% extends "core/includes/modal-info.html" %}
+{% extends "core/includes/modal.html" %}
 {% load i18n %}
 {% load static %}
 

diff --git a/benefits/eligibility/templates/eligibility/includes/modal--senior-help.html b/benefits/eligibility/templates/eligibility/includes/modal--senior-help.html
@@ -1,4 +1,4 @@
-{% extends "core/includes/modal-info.html" %}
+{% extends "core/includes/modal.html" %}
 {% load i18n %}
 {% load static %}
 

diff --git a/benefits/eligibility/templates/eligibility/includes/modal--senior-start-help.html b/benefits/eligibility/templates/eligibility/includes/modal--senior-start-help.html
@@ -1,4 +1,4 @@
-{% extends "core/includes/modal-info.html" %}
+{% extends "core/includes/modal.html" %}
 {% load i18n %}
 {% load static %}
 

diff --git a/benefits/eligibility/templates/eligibility/includes/selection-label--senior.html b/benefits/eligibility/templates/eligibility/includes/selection-label--senior.html
@@ -10,5 +10,5 @@
 
     {% include "core/includes/modal-trigger.html" with classes="border-0 bg-transparent p-0" id="login" modal="modal--login-gov" login=True period=True %}
 
-    {% include "eligibility/includes/modal--senior-help.html" with id="modal--login-gov" size="modal-lg" %}
+    {% include "eligibility/includes/modal--senior-help.html" with id="modal--login-gov" size="modal-lg" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
 {% endblock description %}
diff --git a/benefits/enrollment/templates/enrollment/includes/media-item--bankcardcheck--index.html b/benefits/enrollment/templates/enrollment/includes/media-item--bankcardcheck--index.html
@@ -20,5 +20,5 @@
         <p>{% translate "Please use a debit or credit card by Visa or Mastercard." %}</p>
     </div>
 
-    {% include "enrollment/includes/modal--littlepay.html" with id="modal--littlepay" size="modal-md" %}
+    {% include "enrollment/includes/modal--littlepay.html" with id="modal--littlepay" size="modal-md" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
 {% endblock body %}
diff --git a/benefits/enrollment/templates/enrollment/includes/modal--littlepay.html b/benefits/enrollment/templates/enrollment/includes/modal--littlepay.html
@@ -1,4 +1,4 @@
-{% extends "core/includes/modal-info.html" %}
+{% extends "core/includes/modal.html" %}
 {% load i18n %}
 {% load static %}
 

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -122,7 +122,7 @@ a:not(.btn):not(.card) {
   text-decoration: underline;
   text-decoration-style: solid;
   font-weight: var(--bold-font-weight);
-  border-radius: 2px; /* for the focus ring */
+  border-radius: calc(2rem / 16); /* for the focus ring */
 }
 
 a:hover:not(.btn) {
@@ -374,9 +374,7 @@ footer .footer-links li a.footer-link:visited {
 .btn-outline-dark:focus,
 .btn-outline-dark:focus-visible,
 .btn-outline-light:focus,
-.btn-ouline-dark:focus-visible,
-.btn-close:focus,
-.btn-close:focus-visible {
+.btn-ouline-dark:focus-visible {
   outline: 3px solid var(--focus-color) !important;
   outline-offset: 2px !important;
   box-shadow: none !important; /* override CA State Web Template */
@@ -679,22 +677,20 @@ h1 + .media-list, /* A .media-list immediately following the h1: Enrollment Succ
 /* Cards */
 
 :root {
-  --card-x-padding: calc(10rem / 16);
-  --card-body-x-padding: 0;
-  --card-body-y-padding: 0.75rem;
-  --card-border-width: var(--font-size-12px);
-  --card-max-width: 100%;
-  --card-min-height: 100%;
+  --card-padding: calc(12rem / 16);
+  --card-border-width: calc(13rem / 16);
+  --card-width: 100%;
+  --card-height: 100%;
+  --card-gap: 1rem;
 }
 
 @media (min-width: 992px) {
   :root {
-    --card-x-padding: calc(35rem / 16);
-    --card-body-x-padding: calc(40rem / 16);
-    --card-body-y-padding: 0;
-    --card-border-width: var(--font-size-20px);
-    --card-max-width: calc(340rem / 16);
-    --card-min-height: calc(185rem / 16);
+    --card-padding: 1rem;
+    --card-border-width: calc(15rem / 16);
+    --card-width: calc(200rem / 16);
+    --card-height: calc(178rem / 16);
+    --card-gap: calc(44rem / 16);
   }
 }
 
@@ -706,15 +702,14 @@ a.card:focus-visible {
 }
 
 .card {
-  height: 75%;
   border: 0;
   border-top: solid var(--card-border-width) var(--primary-color);
-  border-radius: 8px;
+  border-radius: calc(8rem / 16);
   transition: 0.3s;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  padding: var(--card-body-y-padding) var(--card-x-padding);
-  max-width: var(--card-max-width);
-  min-height: var(--card-min-height);
+  padding: var(--card-padding);
+  width: var(--card-width);
+  height: var(--card-height);
 }
 
 .card:hover {
@@ -727,14 +722,18 @@ 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 var(--card-body-x-padding) !important;
+  padding: 0 !important; /* override CA State Web Template */
 }
 
 /* Modal Dialogs */
 
 :root {
-  --modal-border-radius: 8px;
+  --modal-border-radius: calc(8rem / 16);
   --modal-body-top: -36px;
 }
 
@@ -746,21 +745,32 @@ a.card:focus-visible {
 
 @media (min-width: 992px) {
   :root {
-    --modal-border-radius: 4px;
+    --modal-border-radius: calc(4rem / 16);
   }
 }
 
-.btn-close {
+.modal-header .btn-close {
   width: 20px;
   height: 20px;
   opacity: 1;
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23323A45'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
-    center/1em auto no-repeat;
+  padding: 0;
+  margin: -1px -1px -1px auto;
+  border-radius: calc(2rem / 16);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 2.01429L17.9857 0L10 7.98571L2.01429 0L0 2.01429L7.98571 10L0 17.9857L2.01429 20L10 12.0143L17.9857 20L20 17.9857L12.0143 10L20 2.01429Z" fill="%23323A45"/></svg>');
+}
+
+.modal-header .btn-close:focus,
+.modal-header .btn-close:focus-visible {
+  filter: none;
+  outline: 2px solid var(--focus-color) !important;
+  outline-offset: 1px !important;
+  box-shadow: none !important; /* override CA State Web Template */
 }
 
-.modal-dialog {
-  width: auto;
-  height: auto;
+.modal-header .btn-close:hover {
+  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 2.01429L17.9857 0L10 7.98571L2.01429 0L0 2.01429L7.98571 10L0 17.9857L2.01429 20L10 12.0143L17.9857 20L20 17.9857L12.0143 10L20 2.01429Z" fill="%23045B86"/></svg>') !important;
 }
 
 .modal-content {
@@ -776,15 +786,11 @@ a.card:focus-visible {
   color: var(--text-primary-color);
 }
 
-.btn-close {
-  color: var(--text-primary-color);
-}
-
-.modal-info .modal-header {
+.modal-header {
   z-index: 1057;
 }
 
-.modal-info .modal-body {
+.modal-body.absolute-top {
   top: var(--modal-body-top);
   z-index: 1056;
 }
@@ -884,21 +890,3 @@ a.card:focus-visible {
 .landing footer {
   margin-top: 0;
 }
-
-/* Agency Selector */
-
-#modal--agency-selector .modal-body {
-  padding: 0;
-}
-
-#modal--agency-selector .card img {
-  margin-right: -1px;
-}
-
-#modal--agency-selector .col:first-child .card {
-  margin-top: 2rem;
-}
-
-#modal--agency-selector .col:last-child .card {
-  margin-bottom: 2rem;
-}