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

Footer: Add Compiler line #2460

Merged
merged 3 commits into from
Oct 17, 2024
Merged

Footer: Add Compiler line #2460

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1315c0e
feat(footer): add Compiler line
machikoyasuda Oct 15, 2024
3e6ee60
feat(footer): add Spanish translation
machikoyasuda Oct 16, 2024
7d20a5b
fix(footer): make text white, unlinked and only link Compiler LLC
machikoyasuda Oct 17, 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
13 changes: 13 additions & 0 deletions benefits/core/templates/core/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,9 @@
<li>
<a class="footer-link m-0 p-0" href="https://cdt.ca.gov/privacy-policy/" target="_blank" rel="noopener noreferrer">{% translate "Privacy Policy" %}</a>
</li>
<li class="ms-auto">
Copy link
Member Author

@machikoyasuda machikoyasuda Oct 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

ms-auto means "margin start: auto", and "start" means left if the page is set to a language that reads from left to right.

How this works: https://stackoverflow.com/questions/33924655/position-last-flex-item-at-the-end-of-container

<a class="footer-link m-0 p-0" href="https://compiler.la" target="_blank" rel="noopener noreferrer">{% translate "Powered by Compiler LLC" %}</a>
Copy link
Member

Choose a reason for hiding this comment

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

Sorry, I didn't notice this in the design. I think the link text should not include the "Powered by" copy, that should come before/outside the link text.

This was what I wrote in the original ticket:

Use the following language:

Powered by Compiler LLC

Copy link

Choose a reason for hiding this comment

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

Updated to this:
Screenshot 2024-10-17 at 6 06 21 PM

I think it's a cleaner look to have the entire phrase be a link, and I don't see that being an issue with screenreaders either. HOWEVER, either way is fine by me.

Copy link
Member Author

Choose a reason for hiding this comment

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

Hrm.. this is actually tricky because the footer links change color after they've been visited, but the "Powered by" would stay light blue. So the Powered by always stay light blue, and the Compiler LLC part changes to purple after it's been clicked:

image

Are we okay with this?

Copy link
Member

Choose a reason for hiding this comment

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

I would expect the "Powered by" to be... white text? Making it the same color as the link feels strange.

Copy link
Member

Choose a reason for hiding this comment

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

If this is too complicated, leaving the entire text as the link is fine.

Copy link
Member Author

@machikoyasuda machikoyasuda Oct 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This is how it would look with white/purple visited link or white/blue unvisited link:

image image image image

Hover:
image
Focus:
image

Copy link
Member Author

Choose a reason for hiding this comment

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

Here's the commit for the white text + regular link change: 7d20a5b

</li>
</ul>
</div>

Expand All @@ -131,6 +134,16 @@
</li>
</ul>
</div>
<div class="d-block d-lg-none container-fluid p-0">
<hr class="border border-white border-1 p-0 m-0 w-100 opacity-100">
</div>
<div class="d-block d-lg-none container">
<ul class="col-12 footer-links ps-0 mb-0">
<li>
<a class="footer-link" href="https://compiler.la" target="_blank" rel="noopener noreferrer">{% translate "Powered by Compiler LLC" %}</a>
</li>
</ul>
</div>

</footer>

Expand Down
5 changes: 4 additions & 1 deletion benefits/locale/en/LC_MESSAGES/django.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
msgid ""
msgstr ""
"Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
"POT-Creation-Date: 2024-10-08 13:36-0700\n"
"POT-Creation-Date: 2024-10-15 15:13-0700\n"
"Language: English\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
Expand Down Expand Up @@ -45,6 +45,9 @@ msgstr ""
msgid "Privacy Policy"
msgstr ""

msgid "Powered by Compiler LLC"
msgstr ""

msgid "What is Cal-ITP Benefits?"
msgstr ""

Expand Down
5 changes: 4 additions & 1 deletion benefits/locale/es/LC_MESSAGES/django.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
msgid ""
msgstr ""
"Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
"POT-Creation-Date: 2024-10-08 13:36-0700\n"
"POT-Creation-Date: 2024-10-15 15:13-0700\n"
"Language: Español\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
Expand Down Expand Up @@ -54,6 +54,9 @@ msgstr "Ayuda"
msgid "Privacy Policy"
msgstr "Póliza de Privacidad"

msgid "Powered by Compiler LLC"
msgstr "Desarrollado por Compiler LLC"

msgid "What is Cal-ITP Benefits?"
msgstr "¿Qué es Cal-ITP Benefits?"

Expand Down
Loading