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: Eligibility Start #2573

Merged
merged 12 commits into from
Dec 9, 2024
Merged

reCAPTCHA: Eligibility Start #2573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9f61a3e
feat(elig-start): recaptcha - first pass @ col-lg-6 for text and button
machikoyasuda Dec 5, 2024
bf2825a
refactor: eliminate unnecessary div
machikoyasuda Dec 5, 2024
4d0a733
feat(elig-start): widen cta, narrow text for all eligibility start op…
machikoyasuda Dec 5, 2024
207b849
feat(elig-start): widen cta, narrow text for agency card
machikoyasuda Dec 5, 2024
64c3c31
refactor: an attempt to refactor media-item css
machikoyasuda Dec 6, 2024
00f3f38
fix(css): create list-disc class instead
machikoyasuda Dec 6, 2024
6e16a2e
refactor(media-item): delete unnecessary classes, divs in media-item
machikoyasuda Dec 6, 2024
b2b91f1
refactor(elig-start): remove unnecessary class, div from all id media…
machikoyasuda Dec 6, 2024
f41cb98
feat(css): first pass @ get started with login.gov button
machikoyasuda Dec 6, 2024
e27350b
refactor(media-item): remove unused header-wrapper, media-body div/class
machikoyasuda Dec 6, 2024
ed39e8c
fix(css): update h2-sm-p comment
machikoyasuda Dec 6, 2024
00cc296
fix(enrollment-index-calfresh): add list-unstyled, remove media-item …
machikoyasuda Dec 6, 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
18 changes: 7 additions & 11 deletions benefits/core/templates/core/includes/media-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
<li class="media d-flex align-items-stretch w-auto">
<div class="media-body">
{% block heading_wrapper %}
<{{ heading_tag|default:"h3" }} class="media-body--heading h3">
{% block heading %}
{% endblock heading %}
</{{ heading_tag|default:"h3" }}>
{% endblock heading_wrapper %}
{% block body %}
{% endblock body %}
</div>
<li>
<h2 class="h3 pb-1">
thekaveman marked this conversation as resolved.
Show resolved Hide resolved
{% block heading %}
{% endblock heading %}
</h2>
{% block body %}
{% endblock body %}
</li>
12 changes: 5 additions & 7 deletions benefits/eligibility/templates/eligibility/includes/media-item--contactless-card--start.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,11 @@
{% endblock heading %}

{% block body %}
<div class="media-body--details">
<p>
{% translate "Your contactless card must be a debit or credit card by Visa or Mastercard." %}
{% translate "Learn more about contactless cards" as text %}
{% include "core/includes/modal-trigger.html" with modal="modal--contactless" text=text period=True %}
</p>
</div>
<p>
{% translate "Your contactless card must be a debit or credit card by Visa or Mastercard." %}
{% translate "Learn more about contactless cards" as text %}
{% include "core/includes/modal-trigger.html" with modal="modal--contactless" text=text period=True %}
</p>

{% include "eligibility/includes/modal--contactless.html" with id="modal--contactless" size="modal-lg" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
{% endblock body %}
4 changes: 1 addition & 3 deletions ...ty/templates/eligibility/includes/media-item--identification--start--cst-agency-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,5 @@
{% endblock heading %}

{% block body %}
<div class="media-body--details">
<p>{% translate "You do not need to have your physical CST Agency Card, but you will need to know the number." %}</p>
</div>
<p>{% translate "You do not need to have your physical CST Agency Card, but you will need to know the number." %}</p>
{% endblock body %}
26 changes: 11 additions & 15 deletions ...gibility/templates/eligibility/includes/media-item--identification--start--login-gov.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,17 @@
{% endblock heading %}

{% block body %}
<div class="media-body--details">
<p>
{% translate "You will be able to create an account using your email address if you do not already have one. We use your Login.gov account to verify your identity." %}
{% translate "Learn more about identity verification" as text %}
{% include "core/includes/modal-trigger.html" with modal="modal--identity-verification" text=text period=True %}
</p>
<div class="media-body--items">
<p>{% translate "For this process you will need:" %}</p>
<ul>
<li>{% translate "Your state-issued ID card" %}</li>
<li>{% translate "Your Social Security number" %}</li>
<li>{% translate "A phone number with a phone plan associated with your name" %}</li>
</ul>
</div>
</div>
<p>
{% translate "You will be able to create an account using your email address if you do not already have one. We use your Login.gov account to verify your identity." %}
{% translate "Learn more about identity verification" as text %}
{% include "core/includes/modal-trigger.html" with modal="modal--identity-verification" text=text period=True %}
</p>
<p>{% translate "For this process you will need:" %}</p>
<ul class="list-disc ms-lg-5 ms-0">
Copy link
Member Author

Choose a reason for hiding this comment

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

Create a new utility class, list-disc, which turns an unordered list's bullets into the disc shape. Follows Bootstrap's style (list-unstyled).

ms-lg-5 ms-0: Adds a large margin-left on Desktop and none on Mobile, to make the unordered list look indented.

<li>{% translate "Your state-issued ID card" %}</li>
<li>{% translate "Your Social Security number" %}</li>
<li>{% translate "A phone number with a phone plan associated with your name" %}</li>
</ul>

{% include "eligibility/includes/modal--login-gov-start-help.html" with size="modal-lg" id="modal--identity-verification" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
{% endblock body %}
8 changes: 3 additions & 5 deletions ...igibility/templates/eligibility/includes/media-item--identification--start--medicare.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@
{% endblock heading %}

{% block body %}
<div class="media-body--details">
<p>
{% translate "If you do not have an account you will be able to create one using your red, white, and blue Medicare card. We use your Medicare.gov account to verify you qualify." %}
</p>
</div>
<p>
{% translate "If you do not have an account you will be able to create one using your red, white, and blue Medicare card. We use your Medicare.gov account to verify you qualify." %}
</p>
{% endblock body %}
4 changes: 1 addition & 3 deletions ...ty/templates/eligibility/includes/media-item--identification--start--mst-agency-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,5 @@
{% endblock heading %}

{% block body %}
<div class="media-body--details">
<p>{% translate "You do not need to have your physical MST Courtesy Card, but you will need to know the number." %}</p>
</div>
<p>{% translate "You do not need to have your physical MST Courtesy Card, but you will need to know the number." %}</p>
{% endblock body %}
4 changes: 1 addition & 3 deletions .../templates/eligibility/includes/media-item--identification--start--sbmtd-agency-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,5 @@
{% endblock heading %}

{% block body %}
<div class="media-body--details">
<p>{% translate "You do not need to have your physical card, but you will need to know the number." %}</p>
</div>
<p>{% translate "You do not need to have your physical card, but you will need to know the number." %}</p>
{% endblock body %}
6 changes: 3 additions & 3 deletions benefits/eligibility/templates/eligibility/start--calfresh.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% endblock page-title %}

{% block headline %}
<div class="col-lg-8">
<div class="col-lg-6">
<h1>{% translate "You selected a CalFresh Cardholder transit benefit." %}</h1>
</div>
{% endblock headline %}
Expand All @@ -16,8 +16,8 @@ <h1>{% translate "You selected a CalFresh Cardholder transit benefit." %}</h1>
{% endblock media-item %}

{% block call-to-action %}
Copy link
Member Author

Choose a reason for hiding this comment

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

Noting this for the #2540 ticket:

All of these can be {% block call-to-action-button %} instead of overriding all of {% call-to-action %}. {% call-to-action %} only needs to exist for the landing page/agency landing page.

<div class="row d-flex justify-content-lg-end">
<div class="col-lg-4 offset-2 offset-lg-0 col-sm-8 col-8 d-flex justify-content-lg-end justify-content-center">
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
{% translate "Get started with" as button_text %}
<a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary login">
{{ button_text }} <span class="fallback-text white-logo">Login.gov</span>
Expand Down
6 changes: 3 additions & 3 deletions benefits/eligibility/templates/eligibility/start--cst-agency-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% endblock page-title %}

{% block headline %}
<div class="col-lg-8">
<div class="col-lg-6">
<h1>{% translate "You selected an Agency Card transit benefit." %}</h1>
</div>
{% endblock headline %}
Expand All @@ -16,8 +16,8 @@ <h1>{% translate "You selected an Agency Card transit benefit." %}</h1>
{% endblock media-item %}

{% block call-to-action %}
<div class="row d-flex justify-content-lg-end">
<div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<a href="{% url routes.ELIGIBILITY_CONFIRM %}" class="btn btn-lg btn-primary" role="button">{% translate "Continue" %}</a>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions benefits/eligibility/templates/eligibility/start--medicare.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% endblock page-title %}

{% block headline %}
<div class="col-lg-8">
<div class="col-lg-6">
<h1>{% translate "You selected a Medicare Cardholder transit benefit." %}</h1>
</div>
{% endblock headline %}
Expand All @@ -16,8 +16,8 @@ <h1>{% translate "You selected a Medicare Cardholder transit benefit." %}</h1>
{% endblock media-item %}

{% block call-to-action %}
<div class="row d-flex justify-content-lg-end">
<div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary" role="button">{% translate "Continue to Medicare.gov" %}</a>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions benefits/eligibility/templates/eligibility/start--senior.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% endblock page-title %}

{% block headline %}
<div class="col-lg-8">
<div class="col-lg-6">
<h1>{% translate "You selected an Older Adult transit benefit." %}</h1>
</div>
{% endblock headline %}
Expand All @@ -16,8 +16,8 @@ <h1>{% translate "You selected an Older Adult transit benefit." %}</h1>
{% endblock media-item %}

{% block call-to-action %}
<div class="row d-flex justify-content-lg-end">
<div class="col-lg-4 offset-2 offset-lg-0 col-sm-8 col-8 d-flex justify-content-lg-end justify-content-center">
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
{% translate "Get started with" as button_text %}
<a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary login">
{{ button_text }} <span class="fallback-text white-logo">Login.gov</span>
Expand Down
6 changes: 3 additions & 3 deletions benefits/eligibility/templates/eligibility/start--veteran.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% endblock page-title %}

{% block headline %}
<div class="col-lg-8">
<div class="col-lg-6">
<h1>{% translate "You selected a Veteran transit benefit." %}</h1>
</div>
{% endblock headline %}
Expand All @@ -16,8 +16,8 @@ <h1>{% translate "You selected a Veteran transit benefit." %}</h1>
{% endblock media-item %}

{% block call-to-action %}
<div class="row d-flex justify-content-lg-end">
<div class="col-lg-4 offset-2 offset-lg-0 col-sm-8 col-8 d-flex justify-content-lg-end justify-content-center">
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
{% translate "Get started with" as button_text %}
<a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary login">
{{ button_text }} <span class="fallback-text white-logo">Login.gov</span>
Expand Down
6 changes: 3 additions & 3 deletions benefits/eligibility/templates/eligibility/start.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
{% endblock nav-buttons %}

{% block inner-content %}
<div class="col-12 col-sm-12 col-lg-8">
<h2 class="media-title h2-sm-p">{% translate "You will need a few items to continue:" %}</h2>
<ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
<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 pb-5 mb-3">
angela-tran marked this conversation as resolved.
Show resolved Hide resolved
{% block media-item %}
{% endblock media-item %}
{% include "eligibility/includes/media-item--contactless-card--start.html" %}
Expand Down
4 changes: 0 additions & 4 deletions benefits/enrollment/templates/enrollment/includes/media-item--contactless-card--index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
{% extends "core/includes/media-item.html" %}
{% load i18n %}

{% block heading_wrapper %}
{% with heading_tag="h2" %}{{ block.super }}{% endwith %}
{% endblock heading_wrapper %}

{% block heading %}
{% translate "The next step is to enroll the contactless card you will use to tap to ride for a reduced fare." %}
{% endblock heading %}
Expand Down
2 changes: 1 addition & 1 deletion benefits/enrollment/templates/enrollment/index--calfresh.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

{% block media-items %}
<div class="col-12 col-sm-12 col-lg-8">
<ul class="media-list mb-5 mx-0 px-0 d-flex justify-content-center flex-column">
<ul class="mb-5 mx-0 px-0 d-flex list-unstyled justify-content-center flex-column">
thekaveman marked this conversation as resolved.
Show resolved Hide resolved
{% include "enrollment/includes/media-item--contactless-card--index--calfresh.html" %}
</ul>
</div>
Expand Down
2 changes: 1 addition & 1 deletion benefits/enrollment/templates/enrollment/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h1 class="pb-lg-8 pb-4">
{% block inner-content %}
{% block media-items %}
<div class="col-12 col-sm-12 col-lg-8">
<ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
<ul class="d-flex list-unstyled ps-0 pb-5 mb-3">
thekaveman marked this conversation as resolved.
Show resolved Hide resolved
{% include "enrollment/includes/media-item--contactless-card--index.html" %}
</ul>
</div>
Expand Down
64 changes: 22 additions & 42 deletions benefits/static/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@ li {
letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
}

.list-disc {
list-style-type: disc;
}

/* Links */
/* Same sizes for all screen widths: 18px */
a:not(.btn):not(.card) {
Expand Down Expand Up @@ -178,7 +182,7 @@ h2,
}

/* H2: 18px, up to Small width */
/* Only used on Landing Page, Eligibility Start */
/* Only used on Landing Page */
.h2-sm-p {
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
Expand Down Expand Up @@ -383,24 +387,24 @@ footer .footer-links li a.footer-link:visited {

:root {
--login-gov-button-font-size: var(--font-size-20px);
--login-gov-button-max-width: 310px;
--login-gov-button-padding: 0.5rem;
--login-gov-button-line-height: 1;
}

@media (min-width: 992px) {
:root {
--login-gov-button-font-size: var(--font-size-16px);
--login-gov-button-max-width: 289px;
--login-gov-button-padding: 1rem;
--login-gov-button-line-height: 1.5;
}
}

.login {
cursor: pointer;
line-height: 1;
text-transform: none;
letter-spacing: 0;
font-size: var(--login-gov-button-font-size) !important;
font-family: "Public Sans", Roboto, system-ui;
max-width: var(--login-gov-button-max-width);
line-height: var(--login-gov-button-line-height);
text-transform: none;
text-decoration: none;
}

Expand All @@ -420,6 +424,11 @@ footer .footer-links li a.footer-link:visited {
line-height: 1;
}

.eligibility-start .btn.btn-lg.btn-primary.login {
border-width: calc(4rem / 16);
padding: var(--login-gov-button-padding);
}

@media (min-width: 992px) {
.login .fallback-text {
margin: 0 0 0 5px;
Expand All @@ -428,19 +437,18 @@ footer .footer-links li a.footer-link:visited {
}
}

/* Sign in with Login.gov (white logo) on Eligibility Start, System Enrollment Error */

.eligibility-start .btn.btn-lg.btn-primary.login,
.system-enrollment-error .btn.btn-lg.btn-primary.login {
padding: 10px 0;
}

.login .fallback-text.white-logo {
background-image: url("/static/img/login-gov-logo-rev.svg");
width: 130.9887px;
height: 17px;
}

/* Sign in with Login.gov (white logo) on System Enrollment Error */

.system-enrollment-error .btn.btn-lg.btn-primary.login {
padding: 10px 0;
}

Comment on lines +446 to +451
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.

I decided to just keept his code as is, and will fix it if need be in #2545

Sidenote: This button CSS around the Login.gov buttons is really messy. Hard for me to tell which code is for which button (Modal button vs. Get started with vs. whatever else).. and I wrote it all! Needs a good look over after this is all settled.

/* Login.gov modal button (color logo) on Eligibility Index */

.login .fallback-text.color-logo {
Expand Down Expand Up @@ -588,50 +596,22 @@ footer .footer-links li a.footer-link:visited {

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

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

.media-body--details p:not(:first-of-type) {
/* All the p within .media-body--details, except for the first p - Any media item with more than one p */
padding-top: calc(24rem / 16);
}

.media-title {
margin-top: var(--media-title-margin-top);
margin-bottom: calc(24rem / 16);
}

.media-list {
gap: var(--media-item-gap);
margin-bottom: calc(64rem / 16);
}

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

.media-list .media .media-body--details,
.media-list .media .media-body--items li:first-child {
padding-top: calc(5rem / 16);
}

.media-list .media .media-body--items li {
list-style-type: disc;
}

/* Cards */

:root {
Expand Down
Loading