Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

reCAPTCHA: Enrollment index #2575

Merged
merged 6 commits into from
Dec 10, 2024
Merged

reCAPTCHA: Enrollment index #2575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
32d41d4
feat(copy): remove <br> from headings
machikoyasuda Dec 6, 2024
f2ca459
feat(enrollment-index): use col-lg-6 for heading, content and set bas…
machikoyasuda Dec 6, 2024
2eb8197
feat(enrollment-index-calfresh): realign calfresh enrollment index, r…
machikoyasuda Dec 6, 2024
d559c19
fix(enrollment-index-agency-card): remove large padding bottom
machikoyasuda Dec 6, 2024
e187a60
refactor(media-item): rename media-item to info, remove unnecessary u…
machikoyasuda Dec 6, 2024
56b9322
refactor(media-item): remove template entirely, render content direct…
machikoyasuda Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions benefits/core/templates/core/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,8 @@
{% endblock inner-content %}
</div>
{% block call-to-action %}
<div class="row d-flex justify-content-lg-end pt-8">
<div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
<div class="row d-flex justify-content-center pt-8">
<div class="col-12 col-lg-6">
{% block call-to-action-button %}
{% endblock call-to-action-button %}
Comment on lines 89 to 93
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This block is only used by enrollment-index.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note for #2540

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm interesting observation 👍 Sounds like you're leaving any potential clean-up on this to be done in #2540?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah and this is turning into a true PR rabbit hole, but in the next PR for Enrollment Success/Logged Out, https://github.com/cal-itp/benefits/pull/2579/files#r1876743474, I moved some code out of call-to-action to clean it up further. After https://github.com/cal-itp/benefits/pull/2579/files#r1876743474, in #2540 will be able to consolidate some of the blocks in base.

</div>
Expand Down
2 changes: 1 addition & 1 deletion benefits/enrollment/templates/enrollment/includes/alert-box--warning--calfresh.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{% load i18n %}

{% block alert-wrapper %}
{% with alert_class="alert-box--warning media-list-icon-left-margin" %}{{ block.super }}{% endwith %}
{% with alert_class="alert-box--warning" %}{{ block.super }}{% endwith %}
{% endblock alert-wrapper %}

{% block alert-heading %}
Expand Down
18 changes: 0 additions & 18 deletions ...rollment/templates/enrollment/includes/media-item--contactless-card--index--calfresh.html
View file
Open in desktop

This file was deleted.

19 changes: 0 additions & 19 deletions benefits/enrollment/templates/enrollment/includes/media-item--contactless-card--index.html
View file
Open in desktop

This file was deleted.

6 changes: 2 additions & 4 deletions benefits/enrollment/templates/enrollment/index--agency-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@
{% load i18n %}

{% block headline %}
<div class="col-lg-8">
<h1 class="pb-lg-8 pb-4">
{% translate "We found your record!<br>Now let’s enroll your contactless card." %}
</h1>
<div class="col-lg-6">
<h1 class="pb-4">{% translate "We found your record! Now let’s enroll your contactless card." %}</h1>
</div>
{% endblock headline %}
24 changes: 13 additions & 11 deletions benefits/enrollment/templates/enrollment/index--calfresh.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
{% extends "enrollment/index.html" %}
{% load i18n %}

{% block media-items %}
<div class="col-12 col-sm-12 col-lg-8">
<ul class="mb-5 mx-0 px-0 d-flex list-unstyled justify-content-center flex-column">
{% include "enrollment/includes/media-item--contactless-card--index--calfresh.html" %}
</ul>
</div>
{% endblock media-items %}

{% block additional-info %}
<div class="col-12 col-sm-12 col-lg-8">{% include "enrollment/includes/alert-box--warning--calfresh.html" %}</div>
{% endblock additional-info %}
{% block info %}
<h2 class="h3 pb-1">{% translate "The next step is to connect your contactless card to your transit benefit" %}</h2>

<p class="mb-4">
{% translate "You will be directed to our payment partner, " %}
{% include "core/includes/modal-trigger.html" with modal="modal--littlepay" text="Littlepay" period=True %}
{% translate "We don’t store your information, and you won’t be charged." %}
</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" %}

{% include "enrollment/includes/alert-box--warning--calfresh.html" %}
{% endblock info %}
31 changes: 18 additions & 13 deletions benefits/enrollment/templates/enrollment/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,28 @@
{% endblock nav-buttons %}

{% block headline %}
<div class="col-lg-8">
<h1 class="pb-lg-8 pb-4">
{% translate "Your eligibility is confirmed!<br>You’re almost there." %}
</h1>
<div class="col-lg-6">
<h1 class="pb-4">{% translate "Your eligibility is confirmed! You’re almost there." %}</h1>
</div>
{% endblock headline %}

{% block inner-content %}
{% block media-items %}
<div class="col-12 col-sm-12 col-lg-8">
<ul class="d-flex list-unstyled ps-0 pb-5 mb-3">
{% include "enrollment/includes/media-item--contactless-card--index.html" %}
</ul>
</div>
{% endblock media-items %}
{% block additional-info %}
{% endblock additional-info %}
<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>
{% 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 %}
Expand Down
26 changes: 13 additions & 13 deletions benefits/locale/en/LC_MESSAGES/django.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
msgid ""
msgstr ""
"Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
"POT-Creation-Date: 2024-11-12 10:35-0800\n"
"POT-Creation-Date: 2024-12-09 13:27-0800\n"
"Language: English\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
Expand Down Expand Up @@ -719,6 +719,12 @@ msgid ""
"card issued by Visa or Mastercard and use that card to pay for transit."
msgstr ""

msgid "Learn more about Littlepay"
msgstr ""

msgid "We found your record! Now let’s enroll your contactless card."
msgstr ""

msgid ""
"The next step is to connect your contactless card to your transit benefit"
msgstr ""
Expand All @@ -729,6 +735,12 @@ msgstr ""
msgid "We don’t store your information, and you won’t be charged."
msgstr ""

msgid "Eligibility confirmation"
msgstr ""

msgid "Your eligibility is confirmed! You’re almost there."
msgstr ""

msgid ""
"The next step is to enroll the contactless card you will use to tap to ride "
"for a reduced fare."
Expand All @@ -743,18 +755,6 @@ msgstr ""
msgid "Please use a debit or credit card by Visa or Mastercard."
msgstr ""

msgid "Learn more about Littlepay"
msgstr ""

msgid "We found your record!<br>Now let’s enroll your contactless card."
msgstr ""

msgid "Eligibility confirmation"
msgstr ""

msgid "Your eligibility is confirmed!<br>You’re almost there."
msgstr ""

msgid "Please wait..."
msgstr ""

Expand Down
29 changes: 14 additions & 15 deletions benefits/locale/es/LC_MESSAGES/django.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
msgid ""
msgstr ""
"Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
"POT-Creation-Date: 2024-11-12 10:35-0800\n"
"POT-Creation-Date: 2024-12-09 13:27-0800\n"
"Language: Español\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
Expand Down Expand Up @@ -919,6 +919,13 @@ msgstr ""
"o crédito sin contacto emitida por Visa o Mastercard y use esa tarjeta para "
"pagar el transporte público."

msgid "Learn more about Littlepay"
msgstr "Más información sobre Littlepay"

msgid "We found your record! Now let’s enroll your contactless card."
msgstr ""
"¡Encontramos su registro! Ahora inscribamos su tarjeta de pago sin contacto."

msgid ""
"The next step is to connect your contactless card to your transit benefit"
msgstr ""
Expand All @@ -931,6 +938,12 @@ msgstr "Será dirigido a nuestro socio de pagos, "
msgid "We don’t store your information, and you won’t be charged."
msgstr "No almacenamos su información y no se le cobrará."

msgid "Eligibility confirmation"
msgstr "Confirmación de elegibilidad"

msgid "Your eligibility is confirmed! You’re almost there."
msgstr "¡Su elegibilidad está confirmada! Ya falta poco."

msgid ""
"The next step is to enroll the contactless card you will use to tap to ride "
"for a reduced fare."
Expand All @@ -947,20 +960,6 @@ msgstr ", para introducir los datos de su tarjeta de pago sin contacto."
msgid "Please use a debit or credit card by Visa or Mastercard."
msgstr "Utilice una tarjeta de débito o crédito de Visa o Mastercard."

msgid "Learn more about Littlepay"
msgstr "Más información sobre Littlepay"

msgid "We found your record!<br>Now let’s enroll your contactless card."
msgstr ""
"¡Encontramos su registro!<br>Ahora inscribamos su tarjeta de pago sin "
"contacto."

msgid "Eligibility confirmation"
msgstr "Confirmación de elegibilidad"

msgid "Your eligibility is confirmed!<br>You’re almost there."
msgstr "¡Su elegibilidad está confirmada!<br>Ya falta poco."

msgid "Please wait..."
msgstr "Espere por favor..."

Expand Down
20 changes: 0 additions & 20 deletions benefits/static/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -592,26 +592,6 @@ footer .footer-links li a.footer-link:visited {
outline-offset: 1px !important;
}

/* Media List */

:root {
--media-item-icon-size: calc(64rem / 16);
--media-item-icon-margin: calc(24rem / 16);
}

@media (min-width: 992px) {
:root {
--media-item-icon-size: calc(90rem / 16);
--media-item-icon-margin: calc(32rem / 16);
}
}

.media-list-icon-left-margin {
margin-left: calc(
var(--media-item-icon-size) + var(--media-item-icon-margin)
);
}

Comment on lines -595 to -614
Copy link
Member Author

@machikoyasuda machikoyasuda Dec 6, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are officially zero Media Item classes now. It's just a single <ul> with some <li>s in them, where there's always a <h2> and some <p>s.

Media items are used on two pages:

  • Eligibility Start - There are 2 media items per flow. The content is semantically and stylistically a list. There is no "media" though, so it could be renamed to heading-list or something.
  • Enrollment Index - There is only 1 item, so it's not even really a list. On this page it really feels like a stretch to semantically even use a ul and li. Just look at it:
image

Should this PR refactor Enrollment Index so it doesn't use the media-item block and just has a <h2> and <p> in inner-content? @angela-tran

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@thekaveman jinx!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Media item now removed from Enrollment Index.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this PR refactor Enrollment Index so it doesn't use the media-item block and just has a <h2> and <p> in inner-content? @angela-tran

(this question was essentially the same as the one in #2575 (comment))

Done by @machikoyasuda in 56b9322

/* Cards */

:root {
Expand Down
Loading