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.

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

Merged
merged 9 commits into from
Oct 27, 2023
Merged

feat(pong): bottom banner #9883

merged 9 commits into from
Oct 27, 2023

Conversation

fiji-flo
Copy link
Contributor

Summary

Adding a banner above the footer.


How did you test this change?

stage

@fiji-flo fiji-flo requested a review from caugner October 26, 2023 09:25
@fiji-flo fiji-flo marked this pull request as draft October 26, 2023 10:48
@fiji-flo fiji-flo marked this pull request as ready for review October 26, 2023 11:23
@fiji-flo fiji-flo requested a review from a team as a code owner October 26, 2023 11:23
@fiji-flo fiji-flo marked this pull request as draft October 26, 2023 12:23
@fiji-flo fiji-flo removed the request for review from caugner October 26, 2023 12:23
@fiji-flo fiji-flo marked this pull request as ready for review October 26, 2023 15:12
Copy link
Member

@LeoMcA LeoMcA left a 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>
Copy link
Member

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?

Comment on lines +442 to +479
<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>
Copy link
Member

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.

Copy link
Contributor Author

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);
Copy link
Member

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);
Copy link
Member

Choose a reason for hiding this comment

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

Same as above

@fiji-flo
Copy link
Contributor Author

Thanks, added the fallback and not showing anything (null) if there's no data.

Copy link
Contributor

@caugner caugner left a 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.

Comment on lines +210 to +211
imageWidth={728}
imageHeight={90}
Copy link
Contributor

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?

libs/pong/pong.js Outdated Show resolved Hide resolved
></img>
</a>
<a
href="/en-US/advertising"
Copy link
Contributor

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

fiji-flo and others added 2 commits October 27, 2023 10:08
Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com>
@fiji-flo fiji-flo merged commit d533e90 into main Oct 27, 2023
15 checks passed
@fiji-flo fiji-flo deleted the bottom-banner branch October 27, 2023 08:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants