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

Feat: external link icon #1540

Merged
merged 4 commits into from
Jul 18, 2023
Merged

Feat: external link icon #1540

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c2d20fa
feat: add external link CSS based on USWDS example, apply to footer link
angela-tran Jul 17, 2023
d98ce33
refactor: adjust CSS selector to apply to any external link
angela-tran Jul 17, 2023
c1483c1
fix: set target to browsing context name _target
angela-tran Jul 17, 2023
228acc1
refactor: specify element in selector for external link style
angela-tran Jul 18, 2023
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
2 changes: 1 addition & 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 @@ -199,7 +199,7 @@ msgstr ""
"tool to support the Courtesy Card program. This benefit may need to be "
"renewed in the future based on the expiration date of the Courtesy Card. "
"Learn more at the <a href='https://mst.org/riders-guide/how-to-ride/courtesy-"
"card/' target =\"blank\" rel=\"noopener noreferrer\">MST Riders Guide</a>."
"card/' target=\"_blank\" rel=\"noopener noreferrer\">MST Riders Guide</a>."

msgid "core.pages.help.littlepay"
msgstr "What is Littlepay?"
Expand Down
2 changes: 1 addition & 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 @@ -207,7 +207,7 @@ msgstr ""
"Tarjeta de Cortesía. Es posible que este beneficio deba renovarse en el "
"futuro según la fecha de vencimiento de la Tarjeta de Cortesía. Obtenga más "
"información <a href='https://mst.org/riders-guide/how-to-ride/courtesy-"
"card/' target =\"blank\" rel=\"noopener noreferrer\">MST Riders Guide</a>."
"card/' target=\"_blank\" rel=\"noopener noreferrer\">MST Riders Guide</a>."

msgid "core.pages.help.littlepay"
msgstr "¿Qué es Littlepay?"
Expand Down
19 changes: 19 additions & 0 deletions benefits/static/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,25 @@ a:visited:not(.btn) {
color: var(--selected-color);
}

[target="_blank"]::after {
Copy link
Member

Choose a reason for hiding this comment

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

I think at a minimum we want to add the element here:

Suggested change
[target="_blank"]::after {
a[target="_blank"]::after {

Is targeting all links with _blank enough? Too much? Is it consistent practice to make external links open in new tabs?

Asking Sarah some related questions on the Figma board:

content: " ";
background-color: currentColor;

mask-image: url("/static/img/external-link.svg"),
linear-gradient(transparent, transparent);
mask-position: center center;
-webkit-mask-image: url("/static/img/external-link.svg"),
linear-gradient(transparent, transparent);
-webkit-mask-position: center center;

display: inline-block;
position: relative;
width: 24px;
height: 24px;
margin-left: 2px;
vertical-align: text-bottom;
}

/* Headlines */
/* All headlines */
/* All headlines share font-weight, letter-spacing, line-height and margin */
Expand Down
11 changes: 11 additions & 0 deletions benefits/static/img/external-link.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading