Skip to content

Commit

Permalink
Help: Mobile - Type fixes (#1623)
Browse files Browse the repository at this point in the history
  • Loading branch information
@machikoyasuda
machikoyasuda authored Aug 8, 2023
2 parents c13715c + 840ef32 commit 5cafeda
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 28 deletions.
56 changes: 28 additions & 28 deletions benefits/core/templates/core/help.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,58 +10,58 @@
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-10">
<h1>{% translate "core.buttons.help" %}</h1>
<h1 class="text-center">{% translate "core.buttons.help" %}</h1>
</div>
</div>

<div class="row justify-content-center">
<div class="col-md-8 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 class="h2-sm pt-4 pt-lg-8" id="what-is-cal-itp">{% translate "core.pages.help.about" %}</h2>
<p class="pt-2 pt-lg-4">{% translate "core.pages.help.about.p[0]" %}</p>
<p class="pt-3 pt-lg-4">{% translate "core.pages.help.about.p[1]" %}</p>

<h2 class="pt-8" id="payment-options">{% translate "core.pages.help.payment_options" %}</h2>
<p class="pt-4">{% translate "eligibility.pages.start.modal.p[0]" %}</p>
<p class="pt-4">{% translate "eligibility.pages.start.modal.p[1]" %}</p>
<h2 class="h2-sm pt-4 pt-lg-8" id="payment-options">{% translate "core.pages.help.payment_options" %}</h2>
<p class="pt-2 pt-lg-4">{% translate "eligibility.pages.start.modal.p[0]" %}</p>
<p class="pt-3 pt-lg-4">{% translate "eligibility.pages.start.modal.p[1]" %}</p>
<p class="contactless-symbol pt-3">
<img class="icon mx-auto d-block"
width="40"
height="50"
src="{% static 'img/icon/contactless.svg' %}"
alt="{% translate "core.icons.contactless" context "image alt text" %}" />
</p>
<p class="pt-4">{% translate "eligibility.pages.start.modal.p[2]" %}</p>
<p class="pt-4">{% translate "eligibility.pages.start.modal.p[3]" %}</p>
<p class="pt-3 pt-lg-4">{% translate "eligibility.pages.start.modal.p[2]" %}</p>
<p class="pt-3 pt-lg-4">{% translate "eligibility.pages.start.modal.p[3]" %}</p>
{% if agency %}
<p class="pt-4">
<p class="pt-3 pt-lg-4">
{% blocktranslate with short_name=agency.short_name website=agency.info_url %}eligibility.pages.start.modal.p[4]{{ short_name }}{{ website }}{% endblocktranslate %}
</p>
{% endif %}

<h2 class="pt-8" id="login-gov">{% translate "eligibility.pages.index.senior.help.sub_headline[0]" %}</h2>
<p class="pt-4">{% translate "eligibility.pages.index.senior.help.p[0]" %}</p>
<p class="pt-4">{% translate "eligibility.pages.index.senior.help.p[2]" %}</p>
<h2 class="h2-sm pt-4 pt-lg-8" id="login-gov">{% translate "eligibility.pages.index.senior.help.sub_headline[0]" %}</h2>
<p class="pt-2 pt-lg-4">{% translate "eligibility.pages.index.senior.help.p[0]" %}</p>
<p class="pt-3 pt-lg-4">{% translate "eligibility.pages.index.senior.help.p[2]" %}</p>

<h2 class="pt-8" id="why-login-gov">{% translate "eligibility.pages.index.senior.help.sub_headline[1]" %}</h2>
<p class="pt-4">{% translate "eligibility.pages.index.senior.help.p[1]" %}</p>
<h2 class="h2-sm pt-4 pt-lg-8" id="why-login-gov">{% translate "eligibility.pages.index.senior.help.sub_headline[1]" %}</h2>
<p class="pt-2 pt-lg-4">{% translate "eligibility.pages.index.senior.help.p[1]" %}</p>

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

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

<h2 class="pt-8" id="littlepay">{% translate "core.pages.help.littlepay" %}</h2>
<p class="pt-4">{% translate "enrollment.pages.index.modal.p[0]" %}</p>
<p class="pt-4">{% translate "enrollment.pages.index.modal.p[1]" %}</p>
<h2 class="h2-sm pt-4 pt-lg-8" id="littlepay">{% translate "core.pages.help.littlepay" %}</h2>
<p class="pt-2 pt-lg-4">{% translate "enrollment.pages.index.modal.p[0]" %}</p>
<p class="pt-3 pt-lg-4">{% translate "enrollment.pages.index.modal.p[1]" %}</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>
<h2 class="h2-sm pt-4 pt-lg-8" id="questions">{% translate "core.pages.help.questions" %}</h2>
<p class="pt-2 pt-lg-4">{% translate "core.pages.help.questions.p[0]" %}</p>
</div>
</div>

Expand All @@ -77,7 +77,7 @@ <h2 class="pt-8" id="questions">{% translate "core.pages.help.questions" %}</h2>
</div>
</div>

<div class="row pt-8">
<div class="row pt-4 pt-lg-8">
<div class="col-lg-2 offset-lg-10 col-8 offset-2">
{% translate "core.buttons.back" as button_text %}
{% include "core/includes/button--origin.html" with button_text=button_text %}
Expand All @@ -86,7 +86,7 @@ <h2 class="pt-8" id="questions">{% translate "core.pages.help.questions" %}</h2>

<div class="row justify-content-center">
<div class="col-md-8 col-10 mt-4">
<p class="pt-4">
<p class="pt-3 pt-lg-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>
Expand Down
12 changes: 12 additions & 0 deletions benefits/static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,10 @@ li {
.pb-lg-8 {
padding-bottom: 64px !important;
}

.pt-lg-8 {
padding-top: 64px !important;
}
}

.pt-8 {
Expand Down Expand Up @@ -196,6 +200,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 */
Expand Down

0 comments on commit 5cafeda

Please sign in to comment.