refactor: refactor form to allow for a mb-fix that shortens space und…

…er text for elig-confirm
cal-itp · Dec 11, 2024 · 303a5b1 · 303a5b1
1 parent 581e023
commit 303a5b1
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 49 deletions.
diff --git a/benefits/core/templates/core/includes/form.html b/benefits/core/templates/core/includes/form.html
@@ -3,41 +3,39 @@
 
   {% url form.action_url as form_action %}
 
-  <form id="{{ form.id }}" action="{{ form_action }}" method="{{ form.method | default:"post" | upper }}" role="form">
+  <form id="{{ form.id }}"
+        class="col-lg-6 {{ form.classes }}"
+        action="{{ form_action }}"
+        method="{{ form.method | default:"post" | upper }}"
+        role="form">
     {% csrf_token %}
 
-    <div class="row form-container justify-content-center">
-      <div class="{{ form.classes }}">
-        {% for field in form %}
-          <div class="row form-group mb-0">
-            <div class="col-12">
-              {# djlint:off #}
-              {% if field.label %}
-              <label for="{{ field.id_for_label }}" class="form-control-label">{{ field.label }}{% if field.field.required %}<span class="required-label text-body">*</span>{% endif %}
-              </label>
-              {% endif %}
-              {# djlint:on #}
-
-              {{ field }}
-
-              {% if field.help_text %}<small class="d-block mt-2 pt-1 form-text text-body">{{ field.help_text }}</small>{% endif %}
-            </div>
-          </div>
-        {% endfor %}
-      </div>
+    <div class="form-field-container d-flex flex-column gap-4">
+      {% for field in form %}
+        <div class="form-group mb-0">
+          {# djlint:off #}
+          {% if field.label %}
+          <label for="{{ field.id_for_label }}" class="form-control-label">{{ field.label }}{% if field.field.required %}<span class="required-label text-body">*</span>{% endif %}
+          </label>
+          {% endif %}
+          {# djlint:on #}
+
+          {{ field }}
+
+          {% if field.help_text %}<small class="d-block mt-2 pt-1 form-text text-body">{{ field.help_text }}</small>{% endif %}
+        </div>
+      {% endfor %}
     </div>
 
     {% if form.submit_value %}
-      <div class="row d-flex justify-content-center pt-8">
-        <div class="col-lg-6">
-          <button class="btn btn-lg btn-primary spinner-hidden d-flex justify-content-center align-items-center"
-                  data-action="submit"
-                  type="submit"
-                  form="{{ form.id }}">
-            <span class="btn-text">{{ form.submit_value }}</span>
-            <span class="spinner-border spinner-border-sm"></span>
-          </button>
-        </div>
+      <div class="pt-8">
+        <button class="btn btn-lg btn-primary spinner-hidden d-flex justify-content-center align-items-center"
+                data-action="submit"
+                type="submit"
+                form="{{ form.id }}">
+          <span class="btn-text">{{ form.submit_value }}</span>
+          <span class="spinner-border spinner-border-sm"></span>
+        </button>
       </div>
     {% endif %}
 
@@ -94,6 +92,8 @@
       {% endcomment %}
       <input type="hidden" name="{{ request.recaptcha.data_field }}" value="">
 
+      <div class="pt-8">{% include "core/includes/recaptcha-text.html" %}</div>
+
       <script nonce="{{ request.csp_nonce }}">
         function recaptchaSubmit($event) {
           // checks the validity of the form. Return if invalid; HTML5 validation errors should display
@@ -122,7 +122,4 @@
       </script>
     {% endif %}
   </form>
-
-  <div class="pt-8 col-lg-6">{% include "core/includes/recaptcha-text.html" %}</div>
-
 {% endif %}
diff --git a/benefits/eligibility/forms.py b/benefits/eligibility/forms.py
@@ -28,7 +28,6 @@ def __init__(self, agency: models.TransitAgency, *args, **kwargs):
         super().__init__(*args, **kwargs)
         flows = agency.enrollment_flows.filter(supported_enrollment_methods__contains=models.EnrollmentMethods.DIGITAL)
 
-        self.classes = "col-lg-6"
         # second element is not used since we render the whole label using selection_label_template,
         # therefore set to None
         flow_field = self.fields["flow"]
@@ -110,7 +109,7 @@ def __init__(
         self.headline = headline
         self.blurb = blurb
 
-        self.classes = "col-lg-6"
+        self.classes = "mb-fix"
         sub_widget = widgets.FormControlTextInput(placeholder=sub_placeholder)
         if sub_pattern:
             sub_widget.attrs.update({"pattern": sub_pattern})

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -58,6 +58,8 @@ li {
   margin: 0;
 }
 
+/* Utility Classes */
+
 @media (min-width: 992px) {
   /* Utility Class: Padding bottom 64px on Desktop */
   /* Pair with pb-4 on Form pages to get 24px on Mobile, 64px on Desktop */
@@ -86,6 +88,10 @@ li {
   list-style-type: disc;
 }
 
+.mb-fix {
+  margin-bottom: -40px;
+}
+
 /* Links */
 /* Same sizes for all screen widths: 18px */
 a:not(.btn):not(.card) {
@@ -527,26 +533,18 @@ footer .footer-links li a.footer-link:visited {
 }
 
 /* Forms: Text Inputs */
-/* Form Container: Must use .form-container parent to use these styles */
-
-:root {
-  --form-input-gap: calc(24rem / 16);
-}
-
-.form-container .form-group:not(:first-child) {
-  padding-top: var(--form-input-gap);
-}
+/* Form Field Container: Must use .form-container parent to use these styles */
 
-.form-container .form-control-label,
-.form-container .required-label {
+.form-field-container .form-control-label,
+.form-field-container .required-label {
   font-size: var(--font-size-16px);
   font-weight: var(--medium-font-weight);
   line-height: var(--form-field-text-line-height);
   letter-spacing: calc(var(--font-size-16px) * var(--letter-spacing-5));
   padding-bottom: calc(12rem / 16);
 }
 
-.form-container .form-control {
+.form-field-container .form-control {
   border-width: var(--border-width);
   border-radius: var(--border-radius);
   border-color: var(--primary-color);
@@ -556,8 +554,8 @@ footer .footer-links li a.footer-link:visited {
   /* Input height should be 60px */
 }
 
-.form-container .form-control:focus,
-.form-container .form-control:focus-visible {
+.form-field-container .form-control:focus,
+.form-field-container .form-control:focus-visible {
   outline: 3px solid var(--focus-color) !important;
   outline-offset: 2px !important;
   box-shadow: none !important;