reCAPTCHA: Spacing and template refactor

benefits/core/templates/core/base.html

@@ -1,4 +1,3 @@
-
 {% load i18n %}
 {% load static %}
 {% get_current_language as LANGUAGE_CODE %}
@@ -73,22 +72,16 @@
         {% endblock nav-buttons %}
         <div class="container main-row">
           <div class="row justify-content-center">
-            {% block headline %}
-            {% endblock headline %}
-          </div>
-          {% block explanatory-text-wrapper %}
-            <div class="col-lg-8">
-              {% block explanatory-text %}
-              {% endblock explanatory-text %}
+            <div class="col-lg-6">
+              {% block headline %}
+              {% endblock headline %}
+              {% block inner-content %}
+              {% endblock inner-content %}
             </div>
-          {% endblock explanatory-text-wrapper %}
-          <div class="row justify-content-center">
-            {% block inner-content %}
-            {% endblock inner-content %}
           </div>
           {% block call-to-action %}
-            <div class="row d-flex justify-content-center pt-8">
-              <div class="col-12 col-lg-6">
+            <div class="row justify-content-center pt-8">
+              <div class="col-lg-6">
                 {% block call-to-action-button %}
                 {% endblock call-to-action-button %}
               </div>

benefits/core/templates/core/includes/form.html

@@ -4,7 +4,7 @@
   {% url form.action_url as form_action %}
 
   <form id="{{ form.id }}"
-        class="col-lg-6 {{ form.classes }}"
+        class="{{ form.classes }}"
         action="{{ form_action }}"
         method="{{ form.method | default:"post" | upper }}"
         role="form">

benefits/core/templates/core/agency-index.html → benefits/core/templates/core/index--agency-base.html

@@ -1,4 +1,4 @@
-{% extends "core/landing.html" %}
+{% extends "core/index-base.html" %}
 {% load i18n %}
 
 {% block title %}

benefits/core/templates/core/index--cst.html

@@ -1,4 +1,4 @@
-{% extends "core/agency-index.html" %}
+{% extends "core/index--agency-base.html" %}
 {% load i18n %}
 
 {% block headline %}

benefits/core/templates/core/index--mst.html

@@ -1,4 +1,4 @@
-{% extends "core/agency-index.html" %}
+{% extends "core/index--agency-base.html" %}
 {% load i18n %}
 
 {% block headline %}

benefits/core/templates/core/index--nevco.html

@@ -1,4 +1,4 @@
-{% extends "core/agency-index.html" %}
+{% extends "core/index--agency-base.html" %}
 {% load i18n %}
 
 {% block headline %}

benefits/core/templates/core/index--sacrt.html

@@ -1,4 +1,4 @@
-{% extends "core/agency-index.html" %}
+{% extends "core/index--agency-base.html" %}
 {% load i18n %}
 
 {% block headline %}

benefits/core/templates/core/index--sbmtd.html

@@ -1,5 +1,4 @@
-{% extends "core/agency-index.html" %}
-
+{% extends "core/index--agency-base.html" %}
 {% load i18n %}
 
 {% block headline %}

benefits/core/templates/core/index.html

@@ -1,4 +1,4 @@
-{% extends "core/landing.html" %}
+{% extends "core/index-base.html" %}
 {% load i18n %}
 
 {% block title %}

benefits/core/templates/core/logged-out.html

@@ -5,13 +5,7 @@
   {% translate "Logged out" %}
 {% endblock page-title %}
 
-{% block main-content %}
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-md-6">
-        <div class="py-4 mt-5 text-center">{% include "core/includes/icon.html" with name="happybus" %}</div>
-        <h1 class="h2 pt-0">{% translate "You have successfully logged out. Thank you for using Cal-ITP Benefits!" %}</h1>
-      </div>
-    </div>
-  </div>
-{% endblock main-content %}
+{% block inner-content %}
+  <div class="py-4 mt-5 text-center">{% include "core/includes/icon.html" with name="happybus" %}</div>
+  <h1 class="h2 pt-0">{% translate "You have successfully logged out. Thank you for using Cal-ITP Benefits!" %}</h1>
+{% endblock inner-content %}

benefits/core/views.py

@@ -12,7 +12,7 @@
 from .middleware import pageview_decorator, index_or_agencyindex_origin_decorator, user_error
 
 TEMPLATE_INDEX = "core/index.html"
-TEMPLATE_AGENCY = "core/agency-index.html"
+TEMPLATE_AGENCY = "core/index--agency-base.html"
 TEMPLATE_HELP = "core/help.html"
 TEMPLATE_LOGGED_OUT = "core/logged-out.html"
 

benefits/eligibility/templates/eligibility/confirm.html

@@ -14,22 +14,11 @@
 {% endblock nav-buttons %}
 
 {% block headline %}
-  <div class="col-lg-6">
-    <h1>{{ form.headline }}</h1>
-  </div>
+  <h1>{{ form.headline }}</h1>
 {% endblock headline %}
 
-{% block explanatory-text-wrapper %}
-  <div class="row justify-content-center">
-    <div class="col-lg-6">
-      {% block explanatory-text %}
-        <p class="pt-4 pb-4">{{ form.blurb }}</p>
-      {% endblock explanatory-text %}
-    </div>
-  </div>
-{% endblock explanatory-text-wrapper %}
-
 {% block inner-content %}
+  <p class="pt-4 pb-4">{{ form.blurb }}</p>
   {% include "core/includes/form.html" with form=form %}
 {% endblock inner-content %}
 

benefits/eligibility/templates/eligibility/index--cst.html

@@ -2,8 +2,8 @@
 
 {% load i18n %}
 
-{% block explanatory-text %}
+{% block form-text %}
   <p class="pt-4 pb-4">
     {% translate "Cal-ITP doesn’t save any of your information. All CST transit benefits reduce fares by 50% for bus service on fixed routes." %}
   </p>
-{% endblock explanatory-text %}
+{% endblock form-text %}

benefits/eligibility/templates/eligibility/index--mst.html

@@ -2,8 +2,8 @@
 
 {% load i18n %}
 
-{% block explanatory-text %}
+{% block form-text %}
   <p class="pt-4 pb-4">
     {% translate "Cal-ITP doesn’t save any of your information. All MST transit benefits reduce fares by 50% for bus service on fixed routes." %}
   </p>
-{% endblock explanatory-text %}
+{% endblock form-text %}

benefits/eligibility/templates/eligibility/index--nevco.html

@@ -2,8 +2,8 @@
 
 {% load i18n %}
 
-{% block explanatory-text %}
+{% block form-text %}
   <p class="pt-4 pb-4">
     {% translate "Cal-ITP doesn’t save any of your information. All Nevada County Connects transit benefits reduce fares by 50% for bus service on fixed routes." %}
   </p>
-{% endblock explanatory-text %}
+{% endblock form-text %}

benefits/eligibility/templates/eligibility/index--sacrt.html

@@ -2,11 +2,11 @@
 
 {% load i18n %}
 
-{% block explanatory-text %}
+{% block form-text %}
   <p class="pt-4">
     {% translate "Cal-ITP doesn’t save any of your information. All SacRT transit benefits reduce fares by 50% for bus service on fixed routes." %}
   </p>
   <p class="pt-4 pb-4">
     {% translate "With the new Tap2Ride fare system launching in 2025, SacRT riders that are eligible for discount fares can enroll below. The discount benefit will be available on all SacRT buses beginning in early 2025 and will include light rail tap devices later in the year." %}
   </p>
-{% endblock explanatory-text %}
+{% endblock form-text %}

benefits/eligibility/templates/eligibility/index--sbmtd.html

@@ -2,8 +2,8 @@
 
 {% load i18n %}
 
-{% block explanatory-text %}
+{% block form-text %}
     <p class="pt-4 pb-4">
         {% translate "Cal-ITP doesn’t save any of your information. All SBMTD transit benefits reduce fares by 50% for bus service on fixed routes." %}
     </p>
-{% endblock explanatory-text %}
+{% endblock form-text %}

benefits/eligibility/templates/eligibility/index.html

@@ -15,21 +15,12 @@
 {% endblock nav-buttons %}
 
 {% block headline %}
-  <div class="col-lg-6">
-    <h1>{% translate "Choose the transit benefit you would like to enroll in" %}</h1>
-  </div>
+  <h1>{% translate "Choose the transit benefit you would like to enroll in" %}</h1>
 {% endblock headline %}
 
-{% block explanatory-text-wrapper %}
-  <div class="row justify-content-center">
-    <div class="col-lg-6">
-      {% block explanatory-text %}
-      {% endblock explanatory-text %}
-    </div>
-  </div>
-{% endblock explanatory-text-wrapper %}
-
 {% block inner-content %}
+  {% block form-text %}
+  {% endblock form-text %}
   {% include "core/includes/form.html" with form=form %}
   <script nonce="{{ request.csp_nonce }}">
     $(".modal").on("click", function(event) {

benefits/eligibility/templates/eligibility/start.html

@@ -11,23 +11,19 @@
 {% endblock nav-buttons %}
 
 {% block headline %}
-  <div class="col-lg-6">
-    <h1>
-      {% block headline-text %}
-      {% endblock headline-text %}
-    </h1>
-  </div>
+  <h1>
+    {% block headline-text %}
+    {% endblock headline-text %}
+  </h1>
 {% endblock headline %}
 
 {% block inner-content %}
-  <div class="col-lg-6">
-    <p class="py-4">{% translate "You will need a few items to continue:" %}</p>
-    <ul class="d-flex flex-column gap-4 list-unstyled ps-0 mb-0">
-      {% block eligibility-item %}
-      {% endblock eligibility-item %}
-      {% include "eligibility/includes/eligibility-item--contactless-card--start.html" %}
-    </ul>
-  </div>
+  <p class="py-4">{% translate "You will need a few items to continue:" %}</p>
+  <ul class="d-flex flex-column gap-4 list-unstyled ps-0 mb-0">
+    {% block eligibility-item %}
+    {% endblock eligibility-item %}
+    {% include "eligibility/includes/eligibility-item--contactless-card--start.html" %}
+  </ul>
 {% endblock inner-content %}
 
 {% block call-to-action-button %}

benefits/enrollment/templates/enrollment/index--agency-card.html

@@ -2,7 +2,5 @@
 {% load i18n %}
 
 {% block headline %}
-  <div class="col-lg-6">
-    <h1 class="pb-4">{% translate "We found your record! Now let’s enroll your contactless card." %}</h1>
-  </div>
+  <h1 class="pb-4">{% translate "We found your record! Now let’s enroll your contactless card." %}</h1>
 {% endblock headline %}

benefits/enrollment/templates/enrollment/index--calfresh.html

@@ -1,7 +1,7 @@
 {% extends "enrollment/index.html" %}
 {% load i18n %}
 
-{% block info %}
+{% block paragraphs %}
   <h2 class="h3 pb-1">{% translate "The next step is to connect your contactless card to your transit benefit" %}</h2>
 
   <p class="mb-4">
@@ -13,4 +13,4 @@ <h2 class="h3 pb-1">{% translate "The next step is to connect your contactless c
   {% 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" %}
 
   {% include "enrollment/includes/alert-box--warning--calfresh.html" %}
-{% endblock info %}
+{% endblock paragraphs %}

benefits/enrollment/templates/enrollment/index.html

@@ -12,28 +12,24 @@
 {% endblock nav-buttons %}
 
 {% block headline %}
-  <div class="col-lg-6">
-    <h1 class="pb-4">{% translate "Your eligibility is confirmed! You’re almost there." %}</h1>
-  </div>
+  <h1 class="pb-4">{% translate "Your eligibility is confirmed! You’re almost there." %}</h1>
 {% endblock headline %}
 
 {% block inner-content %}
-  <div class="col-12 col-lg-6">
-    {% block info %}
-      <h2 class="h3 pb-1">
-        {% translate "The next step is to enroll the contactless card you will use to tap to ride for a reduced fare." %}
-      </h2>
-
-      <p>
-        {% translate "You will be directed to our partner, " %}
-        <!-- djlint:off --><a href="modal--littlepay" class="{{ classes }}" data-bs-toggle="modal" data-bs-target="#modal--littlepay">Littlepay</a>{% translate ", to enter your contactless card details." %}<!-- djlint:on -->
-        {% translate "We don’t store your information, and you won’t be charged." %}
-      </p>
-      <p class="pt-4">{% translate "Please use a debit or credit card by Visa or Mastercard." %}</p>
-
-      {% 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 info %}
-  </div>
+  {% block paragraphs %}
+    <h2 class="h3 pb-1">
+      {% translate "The next step is to enroll the contactless card you will use to tap to ride for a reduced fare." %}
+    </h2>
+
+    <p>
+      {% translate "You will be directed to our partner, " %}
+      <!-- djlint:off --><a href="modal--littlepay" class="{{ classes }}" data-bs-toggle="modal" data-bs-target="#modal--littlepay">Littlepay</a>{% translate ", to enter your contactless card details." %}<!-- djlint:on -->
+      {% translate "We don’t store your information, and you won’t be charged." %}
+    </p>
+    <p class="pt-4">{% translate "Please use a debit or credit card by Visa or Mastercard." %}</p>
+
+    {% 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 paragraphs %}
   {% comment %}
     This Javascript code is partially generated by this template and so it must
     come before the forms, which are rendered at just before the {% endblock inner-content %}