Skip to content

Add CTA icon for toast notices and don't display toast notices on smaller screen sizes #24

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

Merged
codycooperross merged 1 commit into from
Mar 18, 2026
Merged

Add CTA icon for toast notices and don't display toast notices on smaller screen sizes #24

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 19 additions & 3 deletions source/javascripts/toast_notifications.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,11 @@
text-decoration: none;
}

.dc-toast__cta::after {
content: '\u2192';
font-size: 14px;
.dc-toast__cta svg {
width: 14px;
height: 14px;
flex-shrink: 0;
fill: currentColor;
}

.dc-toast__dismiss {
Expand Down Expand Up @@ -127,6 +129,12 @@
transform: translateX(0);
}
}

@media (max-width: 640px) {
.dc-toast-wrapper {
display: none;
}
}
`;

const ICONS = {
Expand Down Expand Up @@ -305,6 +313,14 @@
cta.target = toast_cta_target || "_blank";
cta.rel = "noopener noreferrer";
cta.textContent = toast_cta_label;
const ctaIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
ctaIcon.setAttribute('viewBox', '0 0 640 640');
ctaIcon.setAttribute('aria-hidden', 'true');
ctaIcon.setAttribute('focusable', 'false');
const ctaPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
ctaPath.setAttribute('d', 'M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z');
ctaIcon.appendChild(ctaPath);
cta.appendChild(ctaIcon);
textWrap.appendChild(cta);
}

Expand Down
Loading