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

Reduce menu dropdowns #14484

Merged
merged 5 commits into from
Apr 30, 2024
Merged

Reduce menu dropdowns #14484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
db3ae88
Update products menu
janbrasna Apr 19, 2024
aceb070
Update browsers menu
janbrasna Apr 19, 2024
06d272a
Move some items around
janbrasna Apr 19, 2024
61822c5
(Re)move icons
janbrasna Apr 19, 2024
676df5f
Prune obsolete brand fallbacks
janbrasna Apr 23, 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
11 changes: 1 addition & 10 deletions bedrock/base/templates/includes/protocol/navigation/menus/firefox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<div class="c-menu-panel-container">
<button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-firefox">{{ ftl('navigation-v2-close-firefox-browsers-menu') }}</button>
<div class="c-menu-panel-content">
<ul class="mzp-l-rows-four">
<ul class="mzp-l-rows-three">
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('firefox.new') }}" data-link-text="Firefox Desktop Browser" data-link-type="nav" data-link-position="topnav" data-link-group="firefox">
Expand Down Expand Up @@ -61,15 +61,6 @@ <h4 class="c-menu-item-title">{{ ftl('navigation-v2-firefox-focus') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('firefox.privacy.index') }}" data-link-text="Privacy Promise" data-link-type="nav" data-link-position="topnav" data-link-group="firefox">
<img loading="lazy" src="{{ static('img/nav/icons/icon-privacy-promise.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-privacy-promise') }}</h4>
<p class="c-menu-item-desc">{{ ftl('navigation-v2-learn-how-firefox-treats', fallback='navigation-your-right-to-security') }}</p>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="https://blog.mozilla.org/firefox/?{{ utm_params }}" data-link-text="Firefox Blog" data-link-type="nav" data-link-position="topnav" data-link-group="firefox">
Expand Down
26 changes: 9 additions & 17 deletions bedrock/base/templates/includes/protocol/navigation/menus/innovation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,13 @@

{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nav&utm_content=innovation' %}

{% if ftl_has_messages('navigation-v2-mozilla-innovation-projects', 'navigation-v2-discover-ways-to-bring') %}
{% set row_count = 'mzp-l-rows-three' %}
{% else %}
{% set row_count = 'mzp-l-rows-two' %}
{% endif %}

<li class="c-menu-category mzp-has-drop-down mzp-js-expandable">
<a class="c-menu-title" href="https://future.mozilla.org/?{{ utm_params }}" aria-haspopup="true" aria-controls="c-menu-panel-innovation">{{ ftl('navigation-v2-innovation') }}</a>
<div class="c-menu-panel" id="c-menu-panel-innovation">
<div class="c-menu-panel-container">
<button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-innovation">{{ ftl('navigation-v2-close-innovation-menu') }}</button>
<div class="c-menu-panel-content">
<ul class="{{ row_count }}">
<ul class="mzp-l-rows-two">
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('firefox.developer.index') }}" data-link-text="Firefox Developer Edition" data-link-type="nav" data-link-position="topnav" data-link-group="innovation">
Expand All @@ -39,24 +33,22 @@ <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mdn-web-docs') }}</h4>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="https://commonvoice.mozilla.org/?{{ utm_params }}" data-link-text="Common Voice" data-link-type="nav" data-link-position="topnav" data-link-group="innovation">
<img loading="lazy" class="c-menu-item-icon" src="{{ static('img/nav/icons/icon-common-voice.svg') }}" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-common-voice') }}</h4>
<p class="c-menu-item-desc">{{ ftl('navigation-v2-donate-your-voice-so-the-future', fallback='navigation-donate-your-voice-to') }}</p>
<a class="c-menu-item-link" href="https://future.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Innovation Projects" data-link-type="nav" data-link-position="topnav" data-link-group="innovation">
<img loading="lazy" class="c-menu-item-icon" src="{{ static('img/nav/icons/icon-innovation-projects.svg') }}" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-innovation-projects') }}</h4>
<p class="c-menu-item-desc">{{ ftl('navigation-v2-discover-ways-to-bring') }}</p>
</a>
</section>
</li>
{% if ftl_has_messages('navigation-v2-mozilla-innovation-projects', 'navigation-v2-discover-ways-to-bring') %}
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="https://future.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Innovation Projects" data-link-type="nav" data-link-position="topnav" data-link-group="innovation">
<img loading="lazy" class="c-menu-item-icon" src="{{ static('img/nav/icons/icon-innovation-projects.svg') }}" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-innovation-projects') }}</h4>
<p class="c-menu-item-desc">{{ ftl('navigation-v2-discover-ways-to-bring') }}</p>
<a class="c-menu-item-link" href="https://commonvoice.mozilla.org/?{{ utm_params }}" data-link-text="Common Voice" data-link-type="nav" data-link-position="topnav" data-link-group="innovation">
<img loading="lazy" class="c-menu-item-icon" src="{{ static('img/nav/icons/icon-common-voice.svg') }}" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-common-voice') }}</h4>
<p class="c-menu-item-desc">{{ ftl('navigation-v2-donate-your-voice-so-the-future', fallback='navigation-donate-your-voice-to') }}</p>
</a>
</section>
</li>
{% endif %}
</ul>
</div>
</div><!-- close .c-menu-panel-container -->
Expand Down
24 changes: 4 additions & 20 deletions bedrock/base/templates/includes/protocol/navigation/menus/products.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,12 @@
<div class="c-menu-panel-container">
<button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-products">{{ ftl('navigation-v2-close-products-menu') }}</button>
<div class="c-menu-panel-content">
<ul class="mzp-l-rows-four">
<ul class="mzp-l-rows-three">
<li>
<section class="c-menu-item mzp-has-icon">
{% set mozilla_monitor = switch('mozilla-monitor-brand-name') %}
<a class="c-menu-item-link" href="https://monitor.mozilla.org/?{{ utm_params }}" data-link-text="{% if mozilla_monitor %}Mozilla Monitor{% else %}Firefox Monitor{% endif %}" data-link-type="nav" data-link-position="topnav" data-link-group="products">
<a class="c-menu-item-link" href="https://monitor.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Monitor" data-link-type="nav" data-link-position="topnav" data-link-group="products">
<img loading="lazy" src="{{ static('protocol/img/logos/firefox/monitor/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
{% if mozilla_monitor %}
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-monitor', fallback='navigation-v2-firefox-monitor') }}</h4>
{% else %}
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-firefox-monitor', fallback='navigation-firefox-monitor') }}</h4>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggestion: Now that we're using the new Mozilla Monitor string here, feel free to remove the (now obsolete) navigation-v2-firefox-monitor string from the navigation_v2.ftl file :) since it's been (much) more than 2 months (referencing the new rule we implemented of us deciding to remove obsolete strings from our codebase after ~2 months) from when we implemented the new string!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

👍 Makes sense. I felt the nav is rather "sensitive" to do any cleanups but after wandering around the locales I see the typical pattern: whenever the default string is used, it's amid of 80% untranslated elements in English anyways. And for a branding change, it's way better to have a fresh default, than an outdated name, even if localised. You got it.

{% endif %}
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-monitor') }}</h4>
<p class="c-menu-item-desc">{{ ftl('navigation-v2-see-if-your-email-has', fallback='navigation-see-if-your-personal') }}</p>
</a>
</section>
Expand Down Expand Up @@ -50,23 +45,12 @@ <h4 class="c-menu-item-title">{{ ftl('navigation-v2-pocket') }}</h4>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('products.vpn.landing') }}" data-link-text="Mozilla VPN" data-link-type="nav" data-link-position="topnav" data-link-group="products">
<svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M26 10.4c-2.5 0-4.7 1.7-5.4 4h-9.3c-.1-.4-.3-.7-.4-1.1l2.4-2.4c.8.4 1.7.7 2.7.7 3.1 0 5.6-2.5 5.6-5.6S19.1.4 16 .4 10.4 2.9 10.4 6c0 1 .2 1.9.7 2.7l-2.4 2.4c-.8-.5-1.7-.7-2.7-.7C2.9 10.4.4 12.9.4 16s2.5 5.6 5.6 5.6c2.5 0 4.7-1.7 5.4-4h9.3c.1.4.3.7.4 1.1l-2.4 2.4c-.8-.4-1.7-.7-2.7-.7-3.1 0-5.6 2.5-5.6 5.6s2.5 5.6 5.6 5.6 5.6-2.5 5.6-5.6c0-1-.2-1.9-.7-2.7l2.4-2.4c.8.4 1.7.7 2.7.7 3.1 0 5.6-2.5 5.6-5.6s-2.5-5.6-5.6-5.6zM16 3.6c1.3 0 2.4 1.1 2.4 2.4S17.3 8.4 16 8.4 13.6 7.3 13.6 6s1.1-2.4 2.4-2.4zM6 18.4c-1.3 0-2.4-1.1-2.4-2.4s1.1-2.4 2.4-2.4c1.3 0 2.4 1.1 2.4 2.4S7.3 18.4 6 18.4zm10 10c-.5 0-1-.2-1.3-.4-.3-.2-.5-.4-.6-.6-.3-.4-.4-.8-.4-1.3s.2-1 .4-1.3c.2-.3.4-.5.6-.6.4-.3.8-.4 1.3-.4 1.3 0 2.4 1.1 2.4 2.4s-1.1 2.2-2.4 2.2zm10-10c-1.3 0-2.4-1.1-2.4-2.4s1.1-2.4 2.4-2.4 2.4 1.1 2.4 2.4-1.1 2.4-2.4 2.4z"></path></svg>
<img loading="lazy" src="{{ static('protocol/img/logos/mozilla/vpn/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
reemhamz marked this conversation as resolved.
Show resolved Hide resolved
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-vpn') }}</h4>
<p class="c-menu-item-desc">{{ ftl('navigation-v2-get-protection-beyond-your-browser', fallback='navigation-protect-your-entire-device') }}</p>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('firefox.privacy.products') }}" data-link-text="Hubs" data-link-type="nav" data-link-position="topnav" data-link-group="projects">
<svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M27.3 7.6c0-1.5-1.1-2.8-2.6-3L16 3.1 7.2 4.6c-1.5.2-2.6 1.5-2.6 3 0 2.4 0 5.5.2 7 .4 4.5 1.3 7 3.5 9.8 1.9 2.4 4.6 4 7.6 4.4h.4c3-.5 5.7-2 7.6-4.4 2.2-2.8 3-5.3 3.5-9.8-.1-1.6-.1-5.1-.1-7zm-2.9 6.7c-.4 4-1.1 6-2.9 8.4-1.4 1.7-3.3 2.9-5.5 3.3-2.2-.4-4.1-1.6-5.5-3.3-1.8-2.4-2.5-4.4-2.9-8.4-.1-1.1-.1-3.5-.1-6.7 0-.1.1-.2.2-.2L16 6l8.3 1.4c.1 0 .2.1.2.2 0 3.2 0 5.7-.1 6.7zm-13.9-.2c0-.4-.1-1.5-.1-4.3l5.6-.9v14.2c-1.3-.3-2.4-1.1-3.2-2.1-1.4-1.8-2-3.1-2.3-6.9z"></path></svg>
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-product-promise') }}</h4>
{% if ftl_has_messages('navigation-v2-learn-how-each-firefox-product') %}
<p class="c-menu-item-desc">{{ ftl('navigation-v2-learn-how-each-firefox-product') }}</p>
{% endif %}
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="https://relay.firefox.com/?{{ utm_params }}" data-link-text="Firefox Relay" data-link-type="nav" data-link-position="topnav" data-link-group="projects">
Expand Down
20 changes: 10 additions & 10 deletions bedrock/base/templates/includes/protocol/navigation/menus/whoweare.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<div class="c-menu-panel-container">
<button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-about">{{ ftl('navigation-v2-close-who-we-are-menu', fallback='navigation-close-about-menu') }}</button>
<div class="c-menu-panel-content">
<ul class="mzp-l-rows-four">
<ul class="mzp-l-rows-three">
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('mozorg.about.manifesto') }}" data-link-text="Mozilla Manifesto" data-link-type="nav" data-link-position="topnav" data-link-group="who-we-are">
Expand All @@ -33,15 +33,6 @@ <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-foundation') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('mozorg.contribute') }}" data-link-text="Get Involved" data-link-type="nav" data-link-position="topnav" data-link-group="who-we-are">
<svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M12 22.7l4-3.9c-.5-.1-.9-.1-1.3-.1C11.1 18.7 4 20.5 4 24v2.7h12l-4-4zm2.7-6.7c2.9 0 5.3-2.4 5.3-5.3s-2.4-5.3-5.3-5.3-5.3 2.4-5.3 5.3c-.1 2.9 2.3 5.3 5.3 5.3z"></path><path fill="#42435a" d="M20.6 27.3L16 22.7l1.9-1.9 2.8 2.8 6.8-6.9 1.9 1.9-8.8 8.7z"></path></svg>
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-get-involved', fallback='navigation-get-involved') }}</h4>
<p class="c-menu-item-desc">{{ ftl('navigation-v2-join-the-fight-for-a', fallback='navigation-join-the-fight-for-a') }}</p>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('mozorg.about.leadership.index') }}" data-link-text="Leadership" data-link-type="nav" data-link-position="topnav" data-link-group="who-we-are">
Expand All @@ -53,6 +44,15 @@ <h4 class="c-menu-item-title">{{ ftl('navigation-v2-leadership', fallback='navig
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('mozorg.contribute') }}" data-link-text="Get Involved" data-link-type="nav" data-link-position="topnav" data-link-group="who-we-are">
<svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M12 22.7l4-3.9c-.5-.1-.9-.1-1.3-.1C11.1 18.7 4 20.5 4 24v2.7h12l-4-4zm2.7-6.7c2.9 0 5.3-2.4 5.3-5.3s-2.4-5.3-5.3-5.3-5.3 2.4-5.3 5.3c-.1 2.9 2.3 5.3 5.3 5.3z"></path><path fill="#42435a" d="M20.6 27.3L16 22.7l1.9-1.9 2.8 2.8 6.8-6.9 1.9 1.9-8.8 8.7z"></path></svg>
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-get-involved', fallback='navigation-get-involved') }}</h4>
<p class="c-menu-item-desc">{{ ftl('navigation-v2-join-the-fight-for-a', fallback='navigation-join-the-fight-for-a') }}</p>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('careers.home') }}" data-link-text="Careers" data-link-type="nav" data-link-position="topnav" data-link-group="who-we-are">
Expand Down
8 changes: 0 additions & 8 deletions l10n/en/navigation_v2.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ navigation-v2-firefox-for-ios = { -brand-name-firefox } for { -brand-name-ios }
navigation-v2-get-the-mobile-browser = Get the mobile browser for your { -brand-name-iphone } or { -brand-name-ipad }.
navigation-v2-firefox-focus = { -brand-name-firefox-focus }
navigation-v2-simply-private-mobile = Simply private mobile browsing.
navigation-v2-privacy-promise = Privacy Promise
navigation-v2-learn-how-firefox-treats = Learn how { -brand-name-firefox } treats your data with respect.
navigation-v2-firefox-blog = { -brand-name-firefox } Blog
navigation-v2-read-about-new-firefox-features = Read about new { -brand-name-firefox } features and ways to stay safe online.
navigation-v2-release-notes = Release Notes
Expand All @@ -33,19 +31,13 @@ navigation-v2-view-all-firefox-browsers = View all { -brand-name-firefox-browser
navigation-v2-products = Products
navigation-v2-close-products-menu = Close Products menu
navigation-v2-mozilla-monitor = { -brand-name-mozilla-monitor }

# Obsolete string
navigation-v2-firefox-monitor = { -brand-name-firefox-monitor }

navigation-v2-see-if-your-email-has = See if your email has appeared in a company’s data breach.
navigation-v2-pocket = { -brand-name-pocket }
navigation-v2-save-and-discover-the-best = Save and discover the best stories from across the web.
navigation-v2-facebook-container = { -brand-name-facebook-container }
navigation-v2-help-prevent-facebook-from = Help prevent { -brand-name-facebook } from collecting your data outside their site.
navigation-v2-mozilla-vpn = { -brand-name-mozilla-vpn }
navigation-v2-get-protection-beyond-your-browser = Get protection beyond your browser, on all your devices.
navigation-v2-product-promise = Product Promise
navigation-v2-learn-how-each-firefox-product = Learn how each { -brand-name-firefox } product protects and respects your data.
navigation-v2-firefox-relay = { -brand-name-firefox-relay }
navigation-v2-firefox-relay-beta = { -brand-name-firefox-relay } (beta)
navigation-v2-sign-up-for-new-accounts = Sign up for new accounts without handing over your email address.
Expand Down
0 media/img/nav/icons/icon-privacy-promise.svg → .../firefox/privacy/icon-privacy-promise.svg
View file
Open in desktop
File renamed without changes
3 changes: 0 additions & 3 deletions media/img/nav/icons/icon-mozilla-vpn.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions media/img/nav/icons/icon-product-promise.svg
View file
Open in desktop

This file was deleted.