From 29134b228b8b3dd2c42a75434f3050bfe63d262f Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Mon, 7 Aug 2023 20:32:10 +0000 Subject: [PATCH 1/6] fix(help): h1 is centered on desktop and mobile --- benefits/core/templates/core/help.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/benefits/core/templates/core/help.html b/benefits/core/templates/core/help.html index b746f5dba..fb1e4d1ac 100644 --- a/benefits/core/templates/core/help.html +++ b/benefits/core/templates/core/help.html @@ -10,7 +10,7 @@
-

{% translate "core.buttons.help" %}

+

{% translate "core.buttons.help" %}

From eb720f8f658688159adb6434313148392c0eda64 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Mon, 7 Aug 2023 20:41:28 +0000 Subject: [PATCH 2/6] fix(help): create and use .h3-sm class --- benefits/core/templates/core/help.html | 14 +++++++------- benefits/static/css/styles.css | 8 ++++++++ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/benefits/core/templates/core/help.html b/benefits/core/templates/core/help.html index fb1e4d1ac..787da9289 100644 --- a/benefits/core/templates/core/help.html +++ b/benefits/core/templates/core/help.html @@ -16,11 +16,11 @@

{% translate "core.buttons.help" %}

-

{% translate "core.pages.help.about" %}

+

{% translate "core.pages.help.about" %}

{% translate "core.pages.help.about.p[0]" %}

{% translate "core.pages.help.about.p[1]" %}

-

{% translate "core.pages.help.payment_options" %}

+

{% translate "core.pages.help.payment_options" %}

{% translate "eligibility.pages.start.modal.p[0]" %}

{% translate "eligibility.pages.start.modal.p[1]" %}

@@ -38,14 +38,14 @@

{% translate "core.pages.help.payment_opti

{% endif %} -

{% translate "eligibility.pages.index.senior.help.sub_headline[0]" %}

+

{% translate "eligibility.pages.index.senior.help.sub_headline[0]" %}

{% translate "eligibility.pages.index.senior.help.p[0]" %}

{% translate "eligibility.pages.index.senior.help.p[2]" %}

-

{% translate "eligibility.pages.index.senior.help.sub_headline[1]" %}

+

{% translate "eligibility.pages.index.senior.help.sub_headline[1]" %}

{% translate "eligibility.pages.index.senior.help.p[1]" %}

-

{% translate "core.pages.help.login_gov_verify" %}

+

{% translate "core.pages.help.login_gov_verify" %}

{% translate "eligibility.pages.start.senior.help.p[0]" %}

{% translate "eligibility.pages.start.senior.help.p[1]" %}

{% translate "eligibility.pages.start.senior.help.p[2]" %}

@@ -56,11 +56,11 @@

{% translate "core.pages.help.login_gov_v {% include agency.help_template %} {% endif %} -

{% translate "core.pages.help.littlepay" %}

+

{% translate "core.pages.help.littlepay" %}

{% translate "enrollment.pages.index.modal.p[0]" %}

{% translate "enrollment.pages.index.modal.p[1]" %}

-

{% translate "core.pages.help.questions" %}

+

{% translate "core.pages.help.questions" %}

{% translate "core.pages.help.questions.p[0]" %}

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index a77c44660..42b5d5357 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -204,6 +204,14 @@ h3, line-height: var(--heading-line-height); } +@media (max-width: 992px) { + /* H3: H3, up to Small width */ + .h3-sm { + font-size: var(--h3-font-size); + line-height: var(--heading-line-height); + } +} + /* H4 */ /* Desktop only: Used for Agency Selector card, agency name */ h4 { From 0cc46a8c1890a42b809c540199a593e6b097179f Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Mon, 7 Aug 2023 20:44:31 +0000 Subject: [PATCH 3/6] fix(help): use pt-4 for mobile, pt-lg-8 for desktop --- benefits/core/templates/core/help.html | 16 ++++++++-------- benefits/static/css/styles.css | 4 ++++ 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/benefits/core/templates/core/help.html b/benefits/core/templates/core/help.html index 787da9289..48d9d34a6 100644 --- a/benefits/core/templates/core/help.html +++ b/benefits/core/templates/core/help.html @@ -16,11 +16,11 @@

{% translate "core.buttons.help" %}

-

{% translate "core.pages.help.about" %}

+

{% translate "core.pages.help.about" %}

{% translate "core.pages.help.about.p[0]" %}

{% translate "core.pages.help.about.p[1]" %}

-

{% translate "core.pages.help.payment_options" %}

+

{% translate "core.pages.help.payment_options" %}

{% translate "eligibility.pages.start.modal.p[0]" %}

{% translate "eligibility.pages.start.modal.p[1]" %}

@@ -38,14 +38,14 @@

{% translate "core.pages.help.paymen

{% endif %} -

{% translate "eligibility.pages.index.senior.help.sub_headline[0]" %}

+

{% translate "eligibility.pages.index.senior.help.sub_headline[0]" %}

{% translate "eligibility.pages.index.senior.help.p[0]" %}

{% translate "eligibility.pages.index.senior.help.p[2]" %}

-

{% translate "eligibility.pages.index.senior.help.sub_headline[1]" %}

+

{% translate "eligibility.pages.index.senior.help.sub_headline[1]" %}

{% translate "eligibility.pages.index.senior.help.p[1]" %}

-

{% translate "core.pages.help.login_gov_verify" %}

+

{% translate "core.pages.help.login_gov_verify" %}

{% translate "eligibility.pages.start.senior.help.p[0]" %}

{% translate "eligibility.pages.start.senior.help.p[1]" %}

{% translate "eligibility.pages.start.senior.help.p[2]" %}

@@ -56,11 +56,11 @@

{% translate "core.pages.help.login {% include agency.help_template %} {% endif %} -

{% translate "core.pages.help.littlepay" %}

+

{% translate "core.pages.help.littlepay" %}

{% translate "enrollment.pages.index.modal.p[0]" %}

{% translate "enrollment.pages.index.modal.p[1]" %}

-

{% translate "core.pages.help.questions" %}

+

{% translate "core.pages.help.questions" %}

{% translate "core.pages.help.questions.p[0]" %}

@@ -77,7 +77,7 @@

{% translate "core.pages.help.questions" %

-
+
{% translate "core.buttons.back" as button_text %} {% include "core/includes/button--origin.html" with button_text=button_text %} diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index 42b5d5357..14672824f 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -111,6 +111,10 @@ li { .pb-lg-8 { padding-bottom: 64px !important; } + + .pt-lg-8 { + padding-top: 64px !important; + } } .pt-8 { From b03b9a47113f2543efa4683533487f8e0fa49af7 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Mon, 7 Aug 2023 20:52:44 +0000 Subject: [PATCH 4/6] fix(help): mobile - lessen padding b/w grafs by 4px --- benefits/core/templates/core/help.html | 38 +++++++++++++------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/benefits/core/templates/core/help.html b/benefits/core/templates/core/help.html index 48d9d34a6..99b8234f2 100644 --- a/benefits/core/templates/core/help.html +++ b/benefits/core/templates/core/help.html @@ -17,12 +17,12 @@

{% translate "core.buttons.help" %}

{% translate "core.pages.help.about" %}

-

{% translate "core.pages.help.about.p[0]" %}

-

{% translate "core.pages.help.about.p[1]" %}

+

{% translate "core.pages.help.about.p[0]" %}

+

{% translate "core.pages.help.about.p[1]" %}

{% translate "core.pages.help.payment_options" %}

-

{% translate "eligibility.pages.start.modal.p[0]" %}

-

{% translate "eligibility.pages.start.modal.p[1]" %}

+

{% translate "eligibility.pages.start.modal.p[0]" %}

+

{% translate "eligibility.pages.start.modal.p[1]" %}

{% translate "core.pages.hel src="{% static 'img/icon/contactless.svg' %}" alt="{% translate "core.icons.contactless" context "image alt text" %}" />

-

{% translate "eligibility.pages.start.modal.p[2]" %}

-

{% translate "eligibility.pages.start.modal.p[3]" %}

+

{% translate "eligibility.pages.start.modal.p[2]" %}

+

{% translate "eligibility.pages.start.modal.p[3]" %}

{% if agency %} -

+

{% blocktranslate with short_name=agency.short_name website=agency.info_url %}eligibility.pages.start.modal.p[4]{{ short_name }}{{ website }}{% endblocktranslate %}

{% endif %}

{% translate "eligibility.pages.index.senior.help.sub_headline[0]" %}

-

{% translate "eligibility.pages.index.senior.help.p[0]" %}

-

{% translate "eligibility.pages.index.senior.help.p[2]" %}

+

{% translate "eligibility.pages.index.senior.help.p[0]" %}

+

{% translate "eligibility.pages.index.senior.help.p[2]" %}

{% translate "eligibility.pages.index.senior.help.sub_headline[1]" %}

-

{% translate "eligibility.pages.index.senior.help.p[1]" %}

+

{% translate "eligibility.pages.index.senior.help.p[1]" %}

{% translate "core.pages.help.login_gov_verify" %}

-

{% translate "eligibility.pages.start.senior.help.p[0]" %}

-

{% translate "eligibility.pages.start.senior.help.p[1]" %}

-

{% translate "eligibility.pages.start.senior.help.p[2]" %}

-

{% translate "eligibility.pages.start.senior.help.p[3]" %}

-

{% translate "eligibility.pages.start.senior.help.p[4]" %}

+

{% translate "eligibility.pages.start.senior.help.p[0]" %}

+

{% translate "eligibility.pages.start.senior.help.p[1]" %}

+

{% translate "eligibility.pages.start.senior.help.p[2]" %}

+

{% translate "eligibility.pages.start.senior.help.p[3]" %}

+

{% translate "eligibility.pages.start.senior.help.p[4]" %}

{% if agency and agency.help_template %} {% include agency.help_template %} {% endif %}

{% translate "core.pages.help.littlepay" %}

-

{% translate "enrollment.pages.index.modal.p[0]" %}

-

{% translate "enrollment.pages.index.modal.p[1]" %}

+

{% translate "enrollment.pages.index.modal.p[0]" %}

+

{% translate "enrollment.pages.index.modal.p[1]" %}

{% translate "core.pages.help.questions" %}

-

{% translate "core.pages.help.questions.p[0]" %}

+

{% translate "core.pages.help.questions.p[0]" %}

@@ -86,7 +86,7 @@

{% translate "core.pages.help.ques
-

+

{% translate "core.pages.help.foss.text" %} {% translate "core.pages.help.foss.link" %}.

From 99e8d94c2123074ae1977d0140b70a2f87b111b7 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Mon, 7 Aug 2023 20:55:34 +0000 Subject: [PATCH 5/6] chore: rename class --- benefits/static/css/styles.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index 14672824f..5701cc552 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -199,6 +199,14 @@ h2, line-height: var(--heading-line-height); } +@media (max-width: 992px) { + /* H2: 20px, up to Small width */ + .h2-sm { + font-size: var(--font-size-20px); + line-height: var(--heading-line-height); + } +} + /* H3 */ /* Same sizes for all screen widths: 20px (20rem/16 = 1.25rem) */ /* Also has a class which can be applied to non-headline elements */ @@ -208,14 +216,6 @@ h3, line-height: var(--heading-line-height); } -@media (max-width: 992px) { - /* H3: H3, up to Small width */ - .h3-sm { - font-size: var(--h3-font-size); - line-height: var(--heading-line-height); - } -} - /* H4 */ /* Desktop only: Used for Agency Selector card, agency name */ h4 { From 840ef32253f1342a7fb1af64c094cf5cca11d092 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Mon, 7 Aug 2023 21:00:12 +0000 Subject: [PATCH 6/6] chore: implement re-name --- benefits/core/templates/core/help.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/benefits/core/templates/core/help.html b/benefits/core/templates/core/help.html index 99b8234f2..238c5509b 100644 --- a/benefits/core/templates/core/help.html +++ b/benefits/core/templates/core/help.html @@ -16,11 +16,11 @@

{% translate "core.buttons.help" %}

-

{% translate "core.pages.help.about" %}

+

{% translate "core.pages.help.about" %}

{% translate "core.pages.help.about.p[0]" %}

{% translate "core.pages.help.about.p[1]" %}

-

{% translate "core.pages.help.payment_options" %}

+

{% translate "core.pages.help.payment_options" %}

{% translate "eligibility.pages.start.modal.p[0]" %}

{% translate "eligibility.pages.start.modal.p[1]" %}

@@ -38,14 +38,14 @@

{% translate "core.pages.hel

{% endif %} -

{% translate "eligibility.pages.index.senior.help.sub_headline[0]" %}

+

{% translate "eligibility.pages.index.senior.help.sub_headline[0]" %}

{% translate "eligibility.pages.index.senior.help.p[0]" %}

{% translate "eligibility.pages.index.senior.help.p[2]" %}

-

{% translate "eligibility.pages.index.senior.help.sub_headline[1]" %}

+

{% translate "eligibility.pages.index.senior.help.sub_headline[1]" %}

{% translate "eligibility.pages.index.senior.help.p[1]" %}

-

{% translate "core.pages.help.login_gov_verify" %}

+

{% translate "core.pages.help.login_gov_verify" %}

{% translate "eligibility.pages.start.senior.help.p[0]" %}

{% translate "eligibility.pages.start.senior.help.p[1]" %}

{% translate "eligibility.pages.start.senior.help.p[2]" %}

@@ -56,11 +56,11 @@

{% translate "core.pages.he {% include agency.help_template %} {% endif %} -

{% translate "core.pages.help.littlepay" %}

+

{% translate "core.pages.help.littlepay" %}

{% translate "enrollment.pages.index.modal.p[0]" %}

{% translate "enrollment.pages.index.modal.p[1]" %}

-

{% translate "core.pages.help.questions" %}

+

{% translate "core.pages.help.questions" %}

{% translate "core.pages.help.questions.p[0]" %}