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 index page - Align page and refactor #2570

Merged
merged 6 commits into from
Dec 6, 2024
Merged

reCAPTCHA: Eligibility index page - Align page and refactor #2570

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
0ed1e18
feat(recaptcha): all H1s are now left-aligned on desktop and mobile
machikoyasuda Dec 5, 2024
a10e1ac
feat(recaptcha): convert elig page to all col-lg-6
machikoyasuda Dec 5, 2024
eb69d78
feat(recaptcha): eligibility - remove 64px margin from all agency ind…
machikoyasuda Dec 5, 2024
d844dec
refactor(css): use class to position, instead of declaring styles
machikoyasuda Dec 5, 2024
e945960
refactor(css): use gap-4 (24px), gap-md-3 (16px); bump up 15px to 16px
machikoyasuda Dec 5, 2024
1342b24
refactor: remove unused css class
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
4 changes: 2 additions & 2 deletions benefits/core/templates/core/includes/form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@
</div>

{% if form.submit_value %}
<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-lg-6">
<button class="btn btn-lg btn-primary spinner-hidden d-flex justify-content-center align-items-center"
data-action="submit"
type="submit"
Expand Down
6 changes: 3 additions & 3 deletions benefits/core/templates/core/widgets/flow-radio-select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

{% with id=widget.attrs.id %}

<label for="{{ id }}" class="pb-4 h2">{% translate "Which transit benefit would you like to enroll in?" %}</label>
<label for="{{ id }}" class="h2">{% translate "Which transit benefit would you like to enroll in?" %}</label>

<div {% if id %}id="{{ id }}"{% endif %} class="ps-3 ps-md-0 ps-lg-0 offset-md-1 offset-lg-1 radio-container">
Copy link
Member Author

Choose a reason for hiding this comment

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

I didn't see the radio-container class name used in any CSS or JS, so I deleted it. I can't remember why I made this class name, perhaps purely for naming/reading purposes(!?!)

<div {% if id %}id="{{ id }}"{% endif %}>
{% for group, options, index in widget.optgroups %}
{% if group %}
<div>
Expand All @@ -13,7 +13,7 @@
{% endif %}

{% for option in options %}
<div class="radio-input-group d-flex">{% include option.template_name with widget=option %}</div>
<div class="gap-4 gap-md-3 d-flex pt-4">{% include option.template_name with widget=option %}</div>
{% endfor %}

{% if group %}
Expand Down
2 changes: 1 addition & 1 deletion benefits/eligibility/forms.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ 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-8"
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"]
Expand Down
2 changes: 1 addition & 1 deletion benefits/eligibility/templates/eligibility/index--cst.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% load i18n %}

{% block explanatory-text %}
<p class="pt-4 pb-4 pb-lg-8">
<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 %}
2 changes: 1 addition & 1 deletion benefits/eligibility/templates/eligibility/index--mst.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% load i18n %}

{% block explanatory-text %}
<p class="pt-4 pb-4 pb-lg-8">
<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 %}
2 changes: 1 addition & 1 deletion benefits/eligibility/templates/eligibility/index--nevco.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% load i18n %}

{% block explanatory-text %}
<p class="pt-4 pb-4 pb-lg-8">
<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 %}
2 changes: 1 addition & 1 deletion benefits/eligibility/templates/eligibility/index--sacrt.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<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 pb-lg-8">
<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 %}
2 changes: 1 addition & 1 deletion benefits/eligibility/templates/eligibility/index--sbmtd.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% load i18n %}

{% block explanatory-text %}
<p class="pt-4 pb-4 pb-lg-8">
<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 %}
4 changes: 2 additions & 2 deletions benefits/eligibility/templates/eligibility/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@
{% endblock nav-buttons %}

{% block headline %}
<div class="col-lg-8">
<div class="col-lg-6">
<h1>{% translate "Choose the transit benefit you would like to enroll in" %}</h1>
</div>
{% endblock headline %}

{% block explanatory-text-wrapper %}
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="col-lg-6">
{% block explanatory-text %}
{% endblock explanatory-text %}
</div>
Expand Down
17 changes: 0 additions & 17 deletions benefits/static/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,6 @@ h4 {
@media (min-width: 992px) {
:root {
--h1-font-size: var(--font-size-35px);
--h1-text-align: center;
--h1-letter-spacing-percent: var(--letter-spacing-5);
--font-size-35px: 2.1875rem;
}
Expand All @@ -154,7 +153,6 @@ h4 {
h1,
.h1 {
font-size: var(--h1-font-size);
text-align: var(--h1-text-align);
padding-top: calc(70rem / 16);
line-height: var(--heading-line-height);
letter-spacing: calc(var(--h1-font-size) * var(--h1-letter-spacing-percent));
Expand Down Expand Up @@ -558,27 +556,12 @@ footer .footer-links li a.footer-link:visited {
:root {
--radio-button-size: calc(24rem / 16);
--radio-input-color: var(--standout-color);
--radio-input-gap: calc(24rem / 16);
}

@media (min-width: 992px) {
:root {
--radio-input-gap: calc(15rem / 16);
}
}

.radio-label {
cursor: pointer;
}

.radio-input-group {
gap: var(--radio-input-gap);
}
Comment on lines -561 to -576
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 is a refactor that I made by:

  • Bumping up the 15px gap on desktop to 16px,
  • Allows us to get to place where we are only using 8pt values for both desktop (16px) and mobile (24px)
  • Which then allows us to use gap-4 (4 is 24px) and gap-md-3 (3 is 16px) in the template code.

Now all the radio button CSS styles are around who the element looks, and all the positioning (margin, padding) are done with classes on the page the elements are on.

Copy link
Member

Choose a reason for hiding this comment

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

Bullet points make sense 👍

Not sure I'm following this part:

Now all the radio button CSS styles are around who the element looks

Copy link
Member Author

Choose a reason for hiding this comment

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

how the element looks, rather than how the elements as a whole are positioned onto the page. sorry typo!

Copy link
Member

Choose a reason for hiding this comment

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

Ah, got it


.radio-input-group:not(:first-child) {
padding-top: calc(24rem / 16);
}

.radio-input {
cursor: pointer;
-webkit-appearance: none;
Expand Down
Loading