diff --git a/benefits/core/templates/core/includes/form.html b/benefits/core/templates/core/includes/form.html index 456227a63..4ff9c81a5 100644 --- 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 %} -
+ {% csrf_token %} -
-
- {% for field in form %} -
-
- {# djlint:off #} - {% if field.label %} - - {% endif %} - {# djlint:on #} - - {{ field }} - - {% if field.help_text %}{{ field.help_text }}{% endif %} -
-
- {% endfor %} -
+
+ {% for field in form %} +
+ {# djlint:off #} + {% if field.label %} + + {% endif %} + {# djlint:on #} + + {{ field }} + + {% if field.help_text %}{{ field.help_text }}{% endif %} +
+ {% endfor %}
{% if form.submit_value %} -
-
- -
+
+
{% endif %} @@ -94,6 +92,8 @@ {% endcomment %} +
{% include "core/includes/recaptcha-text.html" %}
+ {% endif %} - {% endif %} diff --git a/benefits/core/templates/core/includes/recaptcha-text.html b/benefits/core/templates/core/includes/recaptcha-text.html new file mode 100644 index 000000000..dbdf54c22 --- /dev/null +++ b/benefits/core/templates/core/includes/recaptcha-text.html @@ -0,0 +1,7 @@ +{% load i18n %} + +

+ {% blocktranslate trimmed %} + This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply. + {% endblocktranslate %} +

diff --git a/benefits/eligibility/forms.py b/benefits/eligibility/forms.py index 00baf1eff..0ef9dc6b1 100644 --- 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,6 @@ def __init__( self.headline = headline self.blurb = blurb - self.classes = "col-lg-6" sub_widget = widgets.FormControlTextInput(placeholder=sub_placeholder) if sub_pattern: sub_widget.attrs.update({"pattern": sub_pattern}) diff --git a/benefits/eligibility/templates/eligibility/confirm.html b/benefits/eligibility/templates/eligibility/confirm.html index 42b2743e7..770d9a6da 100644 --- a/benefits/eligibility/templates/eligibility/confirm.html +++ b/benefits/eligibility/templates/eligibility/confirm.html @@ -26,7 +26,11 @@

{{ form.headline }}

{% endblock explanatory-text-wrapper %} {% block inner-content %} -
-
{% include "core/includes/form.html" with form=form %}
+
+
{% include "core/includes/form.html" with form=form %}
{% endblock inner-content %} + +{% comment %} Override with empty block to prevent rendering empty divs {% endcomment %} +{% block call-to-action %} +{% endblock call-to-action %} diff --git a/benefits/eligibility/templates/eligibility/index.html b/benefits/eligibility/templates/eligibility/index.html index 428e2e8c8..69135ddc5 100644 --- a/benefits/eligibility/templates/eligibility/index.html +++ b/benefits/eligibility/templates/eligibility/index.html @@ -30,7 +30,9 @@

{% translate "Choose the transit benefit you would like to enroll in" %}

+
{% include "core/includes/form.html" with form=form %}
+
{% endblock inner-content %} + +{% comment %} Override with empty block to prevent rendering empty divs {% endcomment %} +{% block call-to-action %} +{% endblock call-to-action %} diff --git a/benefits/locale/en/LC_MESSAGES/django.po b/benefits/locale/en/LC_MESSAGES/django.po index 1b40940fa..d64f88b19 100644 --- a/benefits/locale/en/LC_MESSAGES/django.po +++ b/benefits/locale/en/LC_MESSAGES/django.po @@ -6,7 +6,7 @@ msgid "" msgstr "" "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n" -"POT-Creation-Date: 2024-12-09 13:27-0800\n" +"POT-Creation-Date: 2024-12-11 12:16-0800\n" "Language: English\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" @@ -320,6 +320,14 @@ msgid "" "JavaScript. Please enable JavaScript for this website and" msgstr "" +msgid "" +"This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service " +"apply." +msgstr "" + msgid "Get a reduced fare on CST public transportation when you tap to ride" msgstr "" diff --git a/benefits/locale/es/LC_MESSAGES/django.po b/benefits/locale/es/LC_MESSAGES/django.po index 1f40c5888..257b882ce 100644 --- a/benefits/locale/es/LC_MESSAGES/django.po +++ b/benefits/locale/es/LC_MESSAGES/django.po @@ -6,7 +6,7 @@ msgid "" msgstr "" "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n" -"POT-Creation-Date: 2024-12-09 13:27-0800\n" +"POT-Creation-Date: 2024-12-11 12:16-0800\n" "Language: Español\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" @@ -434,6 +434,19 @@ msgstr "" "Para funcionar correctamente, este sitio web requiere un navegador que " "admita JavaScript. Por favor, active JavaScript por este sitio web y" +msgid "" +"This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service " +"apply." +msgstr "" +"Este sitio está protegido por reCAPTCHA y se aplican la Política de privacidad y las Condiciones de " +"servicio de Google." + msgid "Get a reduced fare on CST public transportation when you tap to ride" msgstr "" "Obtenga una tarifa reducida en el transporte público CST cuando toque para " diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index e791d7009..02ca1777e 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -14,6 +14,11 @@ html { scroll-padding-top: 101px; /* Header Height (80px) + Skip Nav Height (21px) = 101px */ } +/* reCAPTCHA: Do not display badge */ +.grecaptcha-badge { + display: none; +} + body { font-size: 100%; color: var(--text-primary-color); @@ -53,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 */ @@ -106,6 +113,11 @@ a:visited:not(.btn) { color: var(--selected-color); } +:root { + --external-link-icon-size: var(--font-size-24px); + --external-link-icon-size-small: var(--font-size-18px); +} + a[target="_blank"]::after { content: " "; background-color: currentColor; @@ -119,12 +131,19 @@ a[target="_blank"]::after { display: inline-block; position: relative; - width: 24px; - height: 24px; + width: var(--external-link-icon-size); + height: var(--external-link-icon-size); margin-left: 2px; vertical-align: text-bottom; } +.form-text a[target="_blank"]::after { + width: var(--external-link-icon-size-small); + height: var(--external-link-icon-size-small); + mask-size: contain; + -webkit-mask-size: contain; +} + /* Headlines */ /* All headlines */ h1, @@ -513,18 +532,10 @@ 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 Field Container: Must use .form-field-container parent to use these styles */ -.form-container .form-group:not(:first-child) { - padding-top: var(--form-input-gap); -} - -.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); @@ -532,7 +543,7 @@ footer .footer-links li a.footer-link:visited { 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); @@ -542,8 +553,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; @@ -552,7 +563,7 @@ footer .footer-links li a.footer-link:visited { .form-text { font-size: var(--font-size-14px); line-height: var(--form-field-text-line-height); - letter-spacing: var(--letter-spacing-5); + letter-spacing: calc(var(--font-size-14px) * var(--letter-spacing-5)); } /* Forms: Radio Buttons */