-
Notifications
You must be signed in to change notification settings - Fork 516
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.
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
feat(pong): bottom banner #9883
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Haven't tested on stage yet, but from reading through code mostly looks good, a few questions:
].filter(([_, v]) => Boolean(v)) | ||
); | ||
return !placementData ? ( | ||
<section className="place bottom-banner"></section> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should this also be surrounded by a <div className="bottom-banner-container">
like the rendered banner in RenderBottomBanner
?
<a | ||
className="pong" | ||
data-glean={`pong: pong->click ${typ}`} | ||
href={`/pong/click?code=${encodeURIComponent( | ||
click | ||
)}&version=${version}`} | ||
target="_blank" | ||
rel="noreferrer" | ||
> | ||
<img | ||
src={`/pimg/${encodeURIComponent(image || "")}`} | ||
alt={copy} | ||
width={imageWidth} | ||
height={imageHeight} | ||
></img> | ||
</a> | ||
<a | ||
href="/en-US/advertising" | ||
className="pong-note" | ||
data-glean="pong: pong->about" | ||
target="_blank" | ||
rel="noreferrer" | ||
> | ||
Mozilla ads | ||
</a> | ||
<a | ||
className="no-pong" | ||
data-glean={ | ||
"pong: " + (user?.isSubscriber ? "pong->settings" : "pong->plus") | ||
} | ||
href={ | ||
user?.isSubscriber | ||
? "/en-US/plus/settings?ref=nope" | ||
: "/en-US/plus?ref=nope#subscribe" | ||
} | ||
> | ||
Don't want to see ads? | ||
</a> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: I think we could DRY up all this across all the renderers? But ok for now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree.
} | ||
|
||
.pong-note { | ||
color: var(--place-bottom-banner-color); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does this also need a fallback in the var
in case --place-bottom-banner-color
isn't set?
} | ||
|
||
.no-pong { | ||
color: var(--place-bottom-banner-color); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same as above
Thanks, added the fallback and not showing anything ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, just some nits.
imageWidth={728} | ||
imageHeight={90} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: Should these constants live somewhere else?
></img> | ||
</a> | ||
<a | ||
href="/en-US/advertising" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: Why en-US
, not ${locale}
? The page is available in other locales: https://developer.allizom.org/fr/advertising
Co-authored-by: Claas Augner <[email protected]>
Summary
Adding a banner above the footer.
How did you test this change?
stage