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

Add l10n for Klar (Focus) branding #14490

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Add l10n for Klar (Focus) branding #14490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ffa29a
Enable Focus/Klar screen l10n
janbrasna Apr 22, 2024
481bae3
Add Klar branding
janbrasna Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion bedrock/firefox/templates/firefox/browsers/mobile/focus.html
View file
Open in desktop
Expand Up @@ -57,7 +57,7 @@
media_include='firefox/browsers/mobile/includes/s2d-focus.html',
media_after=True
) %}
<div class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-focus">{{ ftl('mobile-focus-firefox-focus') }}</div>
<div class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-focus{% if LANG=='de' %} mzp-t-product-klar{% endif %}">{{ ftl('mobile-focus-firefox-focus') }}</div>
Copy link
Contributor

Choose a reason for hiding this comment

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

To Do: If this is waiting for mozilla/protocol#932 before merging, please don't put both mzp-t-product-focus and mzp-t-product-klar on the element together. Focus could over-write klar if the includes are in the wrong order.

Suggested change
<div class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-focus{% if LANG=='de' %} mzp-t-product-klar{% endif %}">{{ ftl('mobile-focus-firefox-focus') }}</div>
<div class="mzp-c-wordmark mzp-t-wordmark-md {% if LANG=='de' %} mzp-t-product-klar{% else %}mzp-t-product-focus{% endif %}">{{ ftl('mobile-focus-firefox-focus') }}</div>

Copy link
Contributor

Choose a reason for hiding this comment

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

ah good catch!

<h1 class="mzp-u-title-xl">{{ ftl('mobile-focus-simply-private-mobile') }}</h1>
<p class="c-tagline">{{ ftl('mobile-focus-firefox-focus-dedicated-with-v2') }}</p>
<p>{{ ftl('mobile-focus-firefox-focus-is-available') }}</p>
Expand Down
5 changes: 3 additions & 2 deletions bedrock/firefox/templates/firefox/browsers/mobile/index.html
View file
Open in desktop
Expand Up @@ -117,11 +117,12 @@ <h2 class="c-landing-grid-title"><a href="{{ url('firefox.browsers.mobile.ios')

<div class="c-landing-grid-item">
{{ resp_img(
url='img/firefox/browsers/mobile/index/firefox-focus.jpg',
url='img/firefox/mobile/firefox-focus.jpg',
srcset={
'img/firefox/browsers/mobile/index/firefox-focus-high-res.jpg': '2x'
'img/firefox/mobile/firefox-focus-high-res.jpg': '2x'
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 have left the default imgs in their original location too for now, but wondering what's the best practice? Remove them and keep only in l10/en-US? (I'd ideally symlink them, from img/l10n/en-US/* to img/firefox/browsers/*, but not sure how the tooling likes that…)

},
optional_attributes={
'l10n': True,
'class': 'c-landing-grid-img',
'width': '350',
'height': '218'
Expand Down
5 changes: 5 additions & 0 deletions media/css/firefox/browsers/mobile.scss
View file
Open in desktop
Expand Up @@ -53,6 +53,11 @@ $image-path: '/media/protocol/img';
margin-left: 0;
margin-right: 0;
}

// define '.mzp-t-product-klar' until https://github.com/mozilla/protocol/issues/930
&.mzp-t-product-focus.mzp-t-product-klar {
background-image: url('/media/protocol/img/logos/firefox/browser/klar/logo-word-hor.svg');
}
Comment on lines +57 to +60
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've opened an issue upstream:

that is not too hard to resolve, so once/if confirmed as valid and not intentional wontfix, I might do the fix there, but until resolved, released and updated here, this is the least painful shim.

}

.c-tagline {
Expand Down
Binary file added media/img/l10n/de/firefox/mobile/firefox-focus-high-res.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/img/l10n/de/firefox/mobile/firefox-focus.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed media/img/l10n/de/firefox/mobile/focus-privacy-high-res.png
View file
Open in desktop
Binary file not shown.
Binary file removed media/img/l10n/de/firefox/mobile/focus-privacy.png
View file
Open in desktop
Binary file not shown.
Binary file added media/img/l10n/en-US/firefox/mobile/firefox-focus-high-res.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/img/l10n/en-US/firefox/mobile/firefox-focus.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed media/img/l10n/en-US/firefox/mobile/focus-privacy-high-res.png
View file
Open in desktop
Binary file not shown.
Binary file removed media/img/l10n/en-US/firefox/mobile/focus-privacy.png
View file
Open in desktop
Binary file not shown.