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

Jump to bottom

Fixes: Buttons on Help, 200, 400, 404, 500, Unverified, Retry #1042

Merged
merged 16 commits into from
Oct 14, 2022
Merged

Fixes: Buttons on Help, 200, 400, 404, 500, Unverified, Retry #1042

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
84ae609
refactor(help): use Base template for Help; use Bootstrap classes for…
machikoyasuda Oct 12, 2022
d68ceb1
chore: remove all with-agency-links logic
machikoyasuda Oct 12, 2022
ea08415
refactor(unverified): use Base for Unverified; refactor agency-links …
machikoyasuda Oct 12, 2022
58e7c4f
fix: make a temporary 400, 404, 500 design
machikoyasuda Oct 12, 2022
5e72d90
fix(help): constrain H1 and open source tagline on mobile
machikoyasuda Oct 12, 2022
b02d5a3
fix(help): constrain H1 and open source tagline on mobile
machikoyasuda Oct 13, 2022
f00dc31
fix(error pages): make button centered on desktop too
machikoyasuda Oct 12, 2022
291d925
fix: use col-8, not col-lg-10
machikoyasuda Oct 12, 2022
2e8e2e5
fix(icon title): lessen padding top
machikoyasuda Oct 12, 2022
1a29b54
refactor(agency-links): remove Back button from agency-links
machikoyasuda Oct 12, 2022
8d57168
fix(unverified): move signout out of container
machikoyasuda Oct 12, 2022
b1b4141
fix(icon-title): use .h2 class on h1, center icon and text
machikoyasuda Oct 12, 2022
6aa2cb7
fix(retry): update retry page to the same as unverified
machikoyasuda Oct 12, 2022
23b83f4
chore: delete unneeded css
machikoyasuda Oct 13, 2022
d0e3847
fix(200): use error template code, base.html
machikoyasuda Oct 13, 2022
879aed0
chore(200): format correctly w/ 2 spaces, not 4
machikoyasuda Oct 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
86 changes: 51 additions & 35 deletions benefits/core/templates/core/help.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,79 @@
{% extends "core/page.html" %}
{% extends "core/base.html" %}
{% load i18n %}
{% load static %}

{% block main_content %}
<div class="container-fluid">
<div class="container content help">
{% block container_content %}
<div class="container">
<div class="row justify-content-center">
<div class="col-10">
<h1>{{ page.headline }}</h1>
</div>
</div>

<h2 id="what-is-cal-itp">{% translate "core.pages.help.about" %}</h2>
<p>{% translate "core.pages.help.about.p[0]" %}</p>
<p>{% translate "core.pages.help.about.p[1]" %}</p>
<div class="row justify-content-center">
<div class="col-10">
<h2 class="pt-8" id="what-is-cal-itp">{% translate "core.pages.help.about" %}</h2>
<p class="pt-4">{% translate "core.pages.help.about.p[0]" %}</p>
<p class="pt-4">{% translate "core.pages.help.about.p[1]" %}</p>

<h2 id="payment-options">{% translate "core.pages.help.payment_options" %}</h2>
<p>{% translate "core.pages.help.payment_options.p[0]" %}</p>
<h2 class="pt-8" id="payment-options">{% translate "core.pages.help.payment_options" %}</h2>
<p class="pt-4">{% translate "core.pages.help.payment_options.p[0]" %}</p>

<p class="contactless-symbol">
<img class="icon mx-auto d-block"
src="{% static 'img/icon/contactless.svg' %}"
alt="{% translate "core.icons.contactless" context "image alt text" %}"/>
</p>

<p>{% translate "core.pages.help.payment_options.p[1]" %}</p>
<p>
<p class="pt-4">{% translate "core.pages.help.payment_options.p[1]" %}</p>
<p class="pt-4">
{% blocktranslate with website="https://cash.app/help/us/en-us/14425-cal-transit" %}core.pages.help.payment_options.p[2][0]{{ website }}{% endblocktranslate %}
{% blocktranslate with website="https://venmo.com/about/debitcard/" %}core.pages.help.payment_options.p[2][1]{{ website }}{% endblocktranslate %}
</p>
<p>{% translate "core.pages.help.payment_options.p[3]" %}</p>
<p>{% translate "core.pages.help.payment_options.p[4]" %}</p>

<h2 id="login-gov">{% translate "core.pages.help.login_gov" %}</h2>
<p>{% translate "core.pages.help.login_gov.p[0]" %}</p>
<p>{% translate "core.pages.help.login_gov.p[1]" %}</p>
<p>{% translate "core.pages.help.login_gov.p[2]" %}</p>

<h2 id="login-gov-verify">{% translate "core.pages.help.login_gov_verify" %}</h2>
<p>{% translate "core.pages.help.login_gov_verify.p[0]" %}</p>
<p>{% translate "core.pages.help.login_gov_verify.p[1]" %}</p>
<p>{% translate "core.pages.help.login_gov_verify.p[2]" %}</p>
<p>{% translate "core.pages.help.login_gov_verify.p[3]" %}</p>

<h2 id="littlepay">{% translate "core.pages.help.littlepay" %}</h2>
<p>{% translate "core.pages.help.littlepay.p[0]" %}</p>
<p>
<p class="pt-4">{% translate "core.pages.help.payment_options.p[3]" %}</p>
<p class="pt-4">{% translate "core.pages.help.payment_options.p[4]" %}</p>

<h2 class="pt-8" id="login-gov">{% translate "core.pages.help.login_gov" %}</h2>
<p class="pt-4">{% translate "core.pages.help.login_gov.p[0]" %}</p>
<p class="pt-4">{% translate "core.pages.help.login_gov.p[1]" %}</p>
<p class="pt-4">{% translate "core.pages.help.login_gov.p[2]" %}</p>

<h2 class="pt-8" id="login-gov-verify">{% translate "core.pages.help.login_gov_verify" %}</h2>
<p class="pt-4">{% translate "core.pages.help.login_gov_verify.p[0]" %}</p>
<p class="pt-4">{% translate "core.pages.help.login_gov_verify.p[1]" %}</p>
<p class="pt-4">{% translate "core.pages.help.login_gov_verify.p[2]" %}</p>
<p class="pt-4">{% translate "core.pages.help.login_gov_verify.p[3]" %}</p>

<h2 class="pt-8" id="littlepay">{% translate "core.pages.help.littlepay" %}</h2>
<p class="pt-4">{% translate "core.pages.help.littlepay.p[0]" %}</p>
<p class="pt-4">
{% blocktranslate with website="https://littlepay.com" %}core.pages.help.littlepay.p[1]{{ website }}{% endblocktranslate %}
</p>

<h2 id="questions">{% translate "core.pages.help.questions" %}</h2>
<p>{% translate "core.pages.help.questions.p[0]" %}</p>
<h2 class="pt-8" id="questions">{% translate "core.pages.help.questions" %}</h2>
<p class="pt-4">{% translate "core.pages.help.questions.p[0]" %}</p>
</div>
</div>

<div class="row justify-content-center">
<div class="col-10">{% include "core/includes/agency-links.html" with buttons=page.buttons %}</div>
</div>

{% block buttons %}
{% include "core/includes/agency-links.html" with buttons=page.buttons %}
{% endblock buttons %}
{% for back_button in page.buttons %}
{% if "btn-primary" in back_button.classes %}
<div class="row pt-8">
<div class="col-lg-3 offset-lg-8 col-8 offset-2">{% include "core/includes/button.html" with button=back_button %}</div>
</div>
{% endif %}
{% endfor %}

<p class="mt-4">
<div class="row justify-content-center">
<div class="col-8 col-lg-10 mt-4">
<p class="pt-4">
{% translate "core.pages.help.foss.text" %}
<a href="https://www.github.com/cal-itp/benefits" target="_blank" rel="noopener noreferrer">{% translate "core.pages.help.foss.link" %}</a>.
</p>
{% endblock container_content %}
</div>
</div>
</div>
{% endblock main_content %}
26 changes: 9 additions & 17 deletions benefits/core/templates/core/includes/agency-links.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,11 @@

<div class="buttons-agencies">
{% for agency_button in buttons %}
{% if "agency" in agency_button.classes %}
{% if agency_button.label %}<label>{{ agency_button.label }}</label>{% endif %}
<a {% if agency_button.target %}target="{{ agency_button.target }}"{% endif %}
{% if agency_button.rel %}rel="{{ agency_button.rel }}"{% endif %}
href="{{ agency_button.url }}">
{{ agency_button.text }}
</a>
{% endif %}
{% endfor %}
</div>

{% for back_button in buttons %}
{% if "btn-primary" in back_button.classes %}
<div class="button-back">{% include "core/includes/button.html" with button=back_button %}</div>
{% for agency_button in buttons %}
{% if "agency" in agency_button.classes %}
{% if agency_button.label %}<label class="mt-4 d-block fs-base ls-base">{{ agency_button.label }}</label>{% endif %}
<a class="d-table fs-base ls-base"
{% if agency_button.target %}target="{{ agency_button.target }}"{% endif %}
{% if agency_button.rel %}rel="{{ agency_button.rel }}"{% endif %}
href="{{ agency_button.url }}">
{{ agency_button.text }}
</a>
{% endif %}
{% endfor %}
4 changes: 2 additions & 2 deletions benefits/core/templates/core/includes/icon-title.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

<h1 class="icon-title">
<span class="icon">{% include "core/includes/icon.html" with icon=icon alt=alt %}</span>
<h1 class="icon-title h2 text-center">
<span class="icon d-block pb-5">{% include "core/includes/icon.html" with icon=icon alt=alt %}</span>
{{ title }}
</h1>
14 changes: 5 additions & 9 deletions benefits/core/templates/core/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,11 @@ <h1>{{ page.headline }}</h1>
{% block buttons %}
{% if page.buttons|length_is:"0" %}
{% else %}
{% if "with-agency-links" in page.classes %}
{% include "core/includes/agency-links.html" with buttons=page.buttons %}
{% else %}
<div class="buttons">
{% for b in page.buttons %}
{% include "core/includes/button.html" with button=b %}
{% endfor %}
</div>
{% endif %}
<div class="buttons">
{% for b in page.buttons %}
{% include "core/includes/button.html" with button=b %}
{% endfor %}
</div>
{% endif %}
{% endblock buttons %}

Expand Down
26 changes: 24 additions & 2 deletions benefits/eligibility/templates/eligibility/unverified.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,28 @@
{% extends "core/page.html" %}
{% extends "core/base.html" %}

{% block main_content %}
{% include "core/includes/sign-out-link.html" %}
{{ block.super }}

<div class="container">
{% include "core/includes/icon-title.html" with title=page.headline icon=page.icon %}

<div class="row justify-content-center">
<div class="col-lg-8 pt-4">
{% for p in page.paragraphs %}<p>{{ p }}</p>{% endfor %}
</div>
</div>

<div class="row justify-content-center">
<div class="col-lg-8">{% include "core/includes/agency-links.html" with buttons=page.buttons %}</div>
</div>

{% for back_button in page.buttons %}
{% if "btn-primary" in back_button.classes %}
<div class="row pt-8 justify-content-center">
<div class="col-lg-3 col-8">{% include "core/includes/button.html" with button=back_button %}</div>
</div>
{% endif %}
{% endfor %}

</div>
{% endblock main_content %}
1 change: 0 additions & 1 deletion benefits/eligibility/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,6 @@ def unverified(request):

page = viewmodels.Page(
title=_(verifier.unverified_title),
classes="with-agency-links",
headline=_(verifier.unverified_headline),
icon=viewmodels.Icon("idcardquestion", pgettext("image alt text", "core.icons.idcardquestion")),
paragraphs=[_(verifier.unverified_blurb)],
Expand Down
26 changes: 24 additions & 2 deletions benefits/enrollment/templates/enrollment/retry.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,28 @@
{% extends "core/page.html" %}
{% extends "core/base.html" %}

{% block main_content %}
{% include "core/includes/sign-out-link.html" %}
{{ block.super }}

<div class="container">
{% include "core/includes/icon-title.html" with title=page.headline icon=page.icon %}

<div class="row justify-content-center">
<div class="col-lg-8 pt-4">
{% for p in page.paragraphs %}<p>{{ p }}</p>{% endfor %}
</div>
</div>

<div class="row justify-content-center">
<div class="col-lg-8">{% include "core/includes/agency-links.html" with buttons=page.buttons %}</div>
</div>

{% for back_button in page.buttons %}
{% if "btn-primary" in back_button.classes %}
<div class="row pt-8 justify-content-center">
<div class="col-lg-3 col-8">{% include "core/includes/button.html" with button=back_button %}</div>
</div>
{% endif %}
{% endfor %}

</div>
{% endblock main_content %}
65 changes: 8 additions & 57 deletions benefits/static/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,14 @@ li {
padding-top: 64px;
}

.fs-base {
font-size: var(--bs-body-font-size);
}

.ls-base {
letter-spacing: var(--body-letter-spacing);
}

/* Links */
/* Same sizes for all screen widths: 18px */
a:not(.btn) {
Expand Down Expand Up @@ -564,63 +572,6 @@ h1 + .media-list, /* A .media-list immediately following the h1: Enrollment Succ
margin-left: var(--logout-paragraph-margin-left);
}

/* 404 Page */

.container.content h1.icon-title {
padding-bottom: 1.5rem;
}

.container.content h1.icon-title span.icon {
display: block;
padding-bottom: 3rem;
}

.container.content h1.icon-title img.icon {
width: 150px;
height: 150px;
}

/* Help */

.container.content.help {
margin: 4rem auto 2rem auto;
}

.container.content.help h1 {
margin-bottom: 4rem;
}

.container.content.help h2 {
margin-bottom: 3rem;
margin-top: 3rem;
}

.container.content.help p {
margin-bottom: 2rem;
}

.container.content .buttons-agencies {
font-size: 18px;
letter-spacing: 0.05rem;
margin-bottom: 3rem;
}

.container.content .buttons-agencies a {
display: table;
margin-bottom: 0.2rem;
}

.container.content .buttons-agencies label {
display: block;
margin-top: 2rem;
font-size: 18px;
}

.container.content.help .button-back {
margin-top: 5rem;
margin-bottom: 5rem;
}

/* Agency Index */
/* This page has a full-width and full-height background image, creating the need to re-set the Footer margin top to 0 */

Expand Down
20 changes: 19 additions & 1 deletion benefits/templates/200_user_error.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,19 @@
{% extends "core/page.html" %}
{% extends "core/base.html" %}

{% block main_content %}
<div class="container">
{% include "core/includes/icon-title.html" with title=page.headline icon=page.icon %}

<div class="row justify-content-center">
<div class="col-lg-8 pt-4">
{% for p in page.paragraphs %}<p>{{ p }}</p>{% endfor %}
</div>
</div>

<div class="row pt-8 justify-content-center">
{% for b in page.buttons %}
<div class="col-lg-3 col-8">{% include "core/includes/button.html" with button=b %}</div>
{% endfor %}
</div>
</div>
{% endblock main_content %}
20 changes: 19 additions & 1 deletion benefits/templates/400.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,19 @@
{% extends "core/page.html" %}
{% extends "core/base.html" %}

{% block main_content %}
<div class="container">
{% include "core/includes/icon-title.html" with title=page.headline icon=page.icon %}

<div class="row justify-content-center">
<div class="col-lg-8 pt-4">
Copy link
Member

Choose a reason for hiding this comment

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

I noticed that b02d5a3 (which added pt-4 here) has the same commit message as 5e72d90 and doesn't match what the duplicate message is saying. Looks like it was more of re-formatting and adding padding in a few places?

Copy link
Member

Choose a reason for hiding this comment

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

I also noticed in b02d5a3 and some other commits like f00dc31, the same change needed to be made across 400.html, 404.html, and 500.html.

I see where you're coming from with

In the future, the 400, 404, 500 pages could all inherit from a the same template. I'm think we should wait for this level of refactor until Design finishes redesigning these pages. #978

If the pages are just exact copies of each other though, I think it would be really easy to make an error_page.html template with that code and have 200_user_error.html, 400.html, 404.html, 500.html, and (maybe) unverified.html extend that. That's my two cents at least, but I'll leave it up to you.

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks for the feedback! My preference at the time being would be to prioritize #1054 first, which would allow us to then clean up the hacky button-filtering in unverified and retry templates, refactor the agency-links template to work for both help and unverified/retry, and then template-ize all the pages.

I noticed the 200 page html was somehow not formatted with 2 spaces so I also just made a commit to make it formatted the same as the others. I don't know how/why the linter/formatter allows this.

{% for p in page.paragraphs %}<p>{{ p }}</p>{% endfor %}
</div>
</div>

<div class="row pt-8 justify-content-center">
{% for b in page.buttons %}
<div class="col-lg-3 col-8">{% include "core/includes/button.html" with button=b %}</div>
{% endfor %}
</div>
</div>
{% endblock main_content %}
20 changes: 19 additions & 1 deletion benefits/templates/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,19 @@
{% extends "core/page.html" %}
{% extends "core/base.html" %}

{% block main_content %}
<div class="container">
{% include "core/includes/icon-title.html" with title=page.headline icon=page.icon %}

<div class="row justify-content-center">
<div class="col-lg-8 pt-4">
{% for p in page.paragraphs %}<p>{{ p }}</p>{% endfor %}
</div>
</div>

<div class="row pt-8 justify-content-center">
{% for b in page.buttons %}
<div class="col-lg-3 col-8">{% include "core/includes/button.html" with button=b %}</div>
{% endfor %}
</div>
</div>
{% endblock main_content %}