Modals: Mobile - Get alignment right (#1599)

cal-itp · Aug 2, 2023 · 862ff63 · 862ff63
2 parents 88f9a97 + dd9273c
commit 862ff63
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 7 deletions.
diff --git a/benefits/core/templates/core/includes/modal-info.html b/benefits/core/templates/core/includes/modal-info.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 fade modal-info" id="{{ id }}" tabindex="-1" aria-labelledby="{{ aria_labelledby_id }}" aria-hidden="true">
         <div class="modal-dialog {{ size }} modal-dialog-centered modal-dialog-scrollable">
             <div class="modal-content">
-                <div class="modal-header border-0 p-2">
+                <div class="modal-header border-0 p-md-2 p-3">
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-body pt-0 mt-0 p-4 m-2">
+                <div class="modal-body pb-md-3 mb-md-3 mx-md-3 py-0 pt-0">
                     {% block modal-content %}
                     {% endblock modal-content %}
                 </div>

diff --git a/benefits/eligibility/templates/eligibility/includes/modal--contactless.html b/benefits/eligibility/templates/eligibility/includes/modal--contactless.html
@@ -3,7 +3,7 @@
 {% load static %}
 
 {% block modal-content %}
-    <h2 id="contactless-modal">{% translate "eligibility.pages.start.modal.title" %}</h2>
+    <h2 id="contactless-modal" class="me-4 me-md-0">{% translate "eligibility.pages.start.modal.title" %}</h2>
     <div class="row">
         <p class="pt-3">{% translate "eligibility.pages.start.modal.p[0]" %}</p>
         <p class="pt-4">{% translate "eligibility.pages.start.modal.p[1]" %}</p>

diff --git a/benefits/eligibility/templates/eligibility/includes/modal--senior-help.html b/benefits/eligibility/templates/eligibility/includes/modal--senior-help.html
@@ -3,7 +3,7 @@
 {% load static %}
 
 {% block modal-content %}
-    <h2>
+    <h2 class="me-4 me-md-0">
         {% translate "eligibility.pages.index.senior.help.headline" %}
         <img class="icon" width="197" height="26" src="{% static "img/login-gov-logo.svg" %}" alt="{% translate "core.logos.login_gov" context "image alt text" %}" />
     </h2>

diff --git a/benefits/eligibility/templates/eligibility/includes/modal--senior-start-help.html b/benefits/eligibility/templates/eligibility/includes/modal--senior-start-help.html
@@ -3,7 +3,7 @@
 {% load static %}
 
 {% block modal-content %}
-    <h2>
+    <h2 class="me-4 me-md-0">
         {% translate "eligibility.pages.start.senior.help.headline" %}
         <img class="icon" width="197" height="26" src="{% static "img/login-gov-logo.svg" %}" alt="{% translate "core.logos.login_gov" context "image alt text" %}" />
     </h2>

diff --git a/benefits/enrollment/templates/enrollment/includes/modal--littlepay.html b/benefits/enrollment/templates/enrollment/includes/modal--littlepay.html
@@ -3,7 +3,7 @@
 {% load static %}
 
 {% block modal-content %}
-    <h2 id="littlepay-modal">{% translate "enrollment.pages.index.modal.title" %}</h2>
+    <h2 id="littlepay-modal" class="me-4 me-md-0">{% translate "enrollment.pages.index.modal.title" %}</h2>
     <div class="row">
         <p class="pt-3">{% translate "enrollment.pages.index.modal.p[0]" %}</p>
         <p class="pt-4">{% translate "enrollment.pages.index.modal.p[1]" %}</p>

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -667,6 +667,13 @@ a.card:focus-visible {
 :root {
   --modal-title-font-size: var(--font-size-24px);
   --modal-border-radius: 8px;
+  --modal-body-top: -36px;
+}
+
+@media (min-width: 768px) {
+  :root {
+    --modal-body-top: 0;
+  }
 }
 
 @media (min-width: 992px) {
@@ -710,6 +717,15 @@ a.card:focus-visible {
   font-size: var(--modal-title-font-size);
 }
 
+.modal-info .modal-header {
+  z-index: 1057;
+}
+
+.modal-info .modal-body {
+  top: var(--modal-body-top);
+  z-index: 1056;
+}
+
 /* Modal Trigger */
 /* All links/image buttons that open modals have a question mark icon after them */
 /* Buttons that open modals (like the Agency Selector) do not have the icon */