Skip to content

Commit

Permalink
Navigation refresh (#14966)
Browse files Browse the repository at this point in the history
  • Loading branch information
@wen-2018
wen-2018 authored Sep 13, 2024
1 parent 6e9c24b commit cf21cf2
Show file tree
Hide file tree
Showing 11 changed files with 812 additions and 35 deletions.
60 changes: 60 additions & 0 deletions bedrock/base/templates/includes/protocol/navigation/menus-refresh/about-us.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
{#
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

<li class="c-menu-category mzp-has-drop-down mzp-js-expandable">
<a class="c-menu-title" href="{{ url('mozorg.about.index') }}" aria-haspopup="true" aria-controls="c-menu-panel-about" data-testid="navigation-link-about-us">{{ ftl('navigation-refresh-about-us') }}</a>
<div class="c-menu-panel" id="c-menu-panel-about" data-testid="navigation-menu-about-us">
<div class="c-menu-panel-container">
<button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-about">{{ ftl('navigation-refresh-close-about-us-menu') }}</button>
<div class="c-menu-panel-content">
<ul class="mzp-l-content">
<li>
<section class="c-menu-item">
<a class="c-menu-item-link" href="{{ url('mozorg.about.index') }}" data-link-text="About us" data-link-type="nav" data-link-position="topnav" data-link-group="about-us">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-about-us') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item">
<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="about-us">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-mozilla-manifesto') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item">
<a class="c-menu-item-link" href="https://foundation.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Foundation" data-link-type="nav" data-link-position="topnav" data-link-group="about-us">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-mozilla-foundation') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item">
<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="about-us">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-get-involved') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item">
<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="about-us">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-innovation-projects') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item">
<a class="c-menu-item-link" href="https://blog.mozilla.org/?{{ utm_params }}" data-link-text="Blog" data-link-type="nav" data-link-position="topnav" data-link-group="about-us">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-blog') }}</h4>
</a>
</section>
</li>
</ul>
</div>
</div><!-- close .c-menu-panel-container -->
</div><!-- close .c-menu-panel -->
</li><!-- close about us -->
63 changes: 63 additions & 0 deletions bedrock/base/templates/includes/protocol/navigation/menus-refresh/firefox.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
{#
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

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

<li class="c-menu-category mzp-has-drop-down mzp-js-expandable c-menu-category-has-icon">
<a class="c-menu-title" href="{{ url('firefox') }}" aria-haspopup="true" aria-controls="c-menu-panel-firefox" data-testid="navigation-link-firefox">
<img class="c-menu-title-icon" loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" class="c-menu-item-icon" width="16" height="16" alt="">
{{ ftl('navigation-refresh-firefox-browsers') }}
</a>
<div class="c-menu-panel" id="c-menu-panel-firefox">
<div class="c-menu-panel-container" data-testid="navigation-menu-firefox">
<button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-firefox">{{ ftl('navigation-refresh-close-firefox-browsers-menu') }}</button>
<div class="c-menu-panel-content">
<ul class="mzp-l-content">
<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" data-testid="navigation-menu-link-firefox-desktop">
<img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-firefox-for-desktop') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('firefox.browsers.mobile.ios') }}" data-link-text="Firefox for iOS" data-link-type="nav" data-link-position="topnav" data-link-group="firefox">
<img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-firefox-for-ios') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('firefox.browsers.mobile.android') }}" data-link-text="Firefox for Android" data-link-type="nav" data-link-position="topnav" data-link-group="firefox">
<img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-firefox-for-android') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="{{ url('firefox.browsers.mobile.focus') }}" data-link-text="Firefox Focus" data-link-type="nav" data-link-position="topnav" data-link-group="firefox">
<img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/focus/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-firefox-focus') }}</h4>
</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">
<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="M21.1 7.5c-.2-.2-.2-.5 0-.7l.5-.5c.8-.8 2.1-.8 2.9 0l1.2 1.2c.8.8.8 2.1 0 2.9l-.5.5c-.2.2-.5.2-.7 0l-3.4-3.4zm2.3 4.5c.2.2.2.5 0 .7L12.7 23.4c-.2.2-.4.3-.6.4l-5.7 2.4c-.3.1-.6 0-.7-.3-.1-.1-.1-.3 0-.4L8.1 20c.1-.2.3-.5.4-.6L19.2 8.6c.2-.2.5-.2.7 0l3.5 3.4zM11.5 22.7l-3.9 1.7 1.7-3.9c0-.1.1-.2.2-.2l2.3 2.3c-.1 0-.2.1-.3.1z"></path></svg>
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-firefox-blog') }}</h4>
</a>
</section>
</li>
</ul>
</div>
</div><!-- close .c-menu-panel-container -->
</div><!-- close .c-menu-panel -->
</li><!-- close firefox -->
82 changes: 82 additions & 0 deletions bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
{#
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

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

<li class="c-menu-category mzp-has-drop-down mzp-js-expandable">
<a class="c-menu-title" href="{{ url('products.landing') }}" aria-haspopup="true" aria-controls="c-menu-panel-products" data-testid="navigation-link-products">{{ ftl('navigation-refresh-products') }}</a>
<div class="c-menu-panel" id="c-menu-panel-products" data-testid="navigation-menu-products">
<div class="c-menu-panel-container">
<button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-products">{{ ftl('navigation-refresh-close-products-menu') }}</button>
<div class="c-menu-panel-content">
<ul class="mzp-l-content">
<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">
<img loading="lazy" src="{{ static('protocol/img/logos/mozilla/vpn/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-mozilla-vpn') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<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="">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-mozilla-monitor') }}</h4>
</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="products">
<img loading="lazy" src="{{ static('protocol/img/logos/firefox/relay/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-firefox-relay') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="https://getpocket.com/firefox_learnmore/?{{ utm_params }}" data-link-text="Pocket" data-link-type="nav" data-link-position="topnav" data-link-group="products">
<img loading="lazy" src="{{ static('protocol/img/logos/pocket/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-pocket') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="https://developer.mozilla.org/plus?{{ utm_params }}" data-link-text="MDN Plus" data-link-type="nav" data-link-position="topnav" data-link-group="products">
<img loading="lazy" src="{{ static('img/nav/icons/icon-mdn-plus.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-mdn-plus') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="https://fakespot.com/?{{ utm_params }}" data-link-text="Fakespot" data-link-type="nav" data-link-position="topnav" data-link-group="projects">
<img loading="lazy" src="{{ static('img/logos/fakespot/logo-blue.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-fakespot') }}</h4>
</a>
</section>
</li>
<li>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="https://www.thunderbird.net/{{ referrals }}" data-link-text="Thunderbird" data-link-type="nav" data-link-position="topnav" data-link-group="products">
<img loading="lazy" src="{{ static('img/logos/thunderbird/logo-thunderbird.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-refresh-thunderbird') }}</h4>
</a>
</section>
</li>
</ul>
<p class="c-menu-category-link">
<a href="{{ url('products.landing') }}" data-link-text="Go to all browsers and products" data-link-type="nav" data-link-position="topnav" data-link-group="firefox">
{{ ftl('navigation-refresh-all-products') }}
<svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath><g clip-path="url(#a)"><path d="M10.45 10.789v1.806H5V10.79zm8.55.903L10.45 4.5v6.289h1.806v-2.41l3.938 3.313-3.938 3.312v-2.409H10.45v6.289z" fill="#fff"/></g></svg>
</a>
</p>
</div>
</div><!-- close .c-menu-panel-container -->
</div><!-- close .c-menu-panel -->
</li><!-- close products -->
29 changes: 29 additions & 0 deletions bedrock/base/templates/includes/protocol/navigation/navigation-refresh.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{#
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

<div class="c-navigation mzp-is-sticky moz24-navigation-refresh">
<div class="c-navigation-l-content">
<div class="c-navigation-container">
<button class="c-navigation-menu-button" type="button" aria-controls="c-navigation-items" data-testid="navigation-refresh-menu-button">{{ ftl('ui-menu') }}</button>
<div class="c-navigation-logo">
<a href="{{ url('mozorg.home') }}" data-link-text="mozilla home icon" data-link-type="nav">
<img loading="lazy" class="c-navigation-logo-image" src="{{ static('img/logos/m24/lockup-black.svg') }}" alt="{{ ftl('navigation-refresh-mozilla') }}" width="88" height="21">
</a>
</div>
<div class="c-navigation-items" id="c-navigation-items" data-testid="navigation-menu-items">
<div class="c-navigation-menu">
<nav class="c-menu mzp-is-basic">
<ul class="c-menu-category-list">
{% include 'includes/protocol/navigation/menus-refresh/firefox.html' %}
{% include 'includes/protocol/navigation/menus-refresh/products.html' %}
{% include 'includes/protocol/navigation/menus-refresh/about-us.html' %}
</ul>
</nav>
</div><!-- close .c-navigation-menu -->
</div><!-- close .c-navigation-items -->
</div>
</div>
</div>
71 changes: 36 additions & 35 deletions bedrock/base/templates/includes/protocol/navigation/navigation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,42 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{# Bug 1438302 Avoid duplicate content for en-CA and en-GB pages. #}
{% if LANG == 'en-CA' %}
{% set logo_alt = ftl('navigation-v2-mozilla') + ' (CA)' %}
{% elif LANG == 'en-GB' %}
{% set logo_alt = ftl('navigation-v2-mozilla') + ' (UK)' %}
{% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
{% include 'includes/protocol/navigation/navigation-refresh.html' %}
{% else %}
{% set logo_alt = ftl('navigation-v2-mozilla') %}
{% endif %}
{# Bug 1438302 Avoid duplicate content for en-CA and en-GB pages. #}
{% if LANG == 'en-CA' %}
{% set logo_alt = ftl('navigation-v2-mozilla') + ' (CA)' %}
{% elif LANG == 'en-GB' %}
{% set logo_alt = ftl('navigation-v2-mozilla') + ' (UK)' %}
{% else %}
{% set logo_alt = ftl('navigation-v2-mozilla') %}
{% endif %}

<div class="c-navigation top-header-navigation mzp-is-sticky">
<div class="c-navigation-l-content">
<div class="c-navigation-container">
<button class="c-navigation-menu-button" type="button" aria-controls="c-navigation-items" data-testid="navigation-menu-button">{{ ftl('navigation-v2-menu') }}</button>
<div class="c-navigation-logo">
<a href="{{ url('mozorg.home') }}" data-link-text="mozilla home icon" data-link-type="nav">
{% if switch('m24-logo') %}
<img class="c-navigation-logo-image m24-logo" src="{{ static('img/logos/m24/lockup-black.svg') }}" alt="{{ logo_alt }}" width="88" height="21">
{% else %}
<div class="c-navigation top-header-navigation mzp-is-sticky">
<div class="c-navigation-l-content">
<div class="c-navigation-container">
<button class="c-navigation-menu-button" type="button" aria-controls="c-navigation-items" data-testid="navigation-menu-button">{{ ftl('navigation-v2-menu') }}</button>
<div class="c-navigation-logo">
<a href="{{ url('mozorg.home') }}" data-link-text="mozilla home icon" data-link-type="nav">
<img class="c-navigation-logo-image" src="{{ static('protocol/img/logos/mozilla/logo-word-hor.svg') }}" alt="{{ logo_alt }}" width="112" height="32">
{% endif %}
</a>
</div>
<div class="c-navigation-items" id="c-navigation-items" data-testid="navigation-menu-items">
{% include 'includes/protocol/navigation/nav-cta.html' %}
<div class="c-navigation-menu">
<nav class="c-menu mzp-is-basic">
<ul class="c-menu-category-list">
{% include 'includes/protocol/navigation/menus/firefox.html' %}
{% include 'includes/protocol/navigation/menus/products.html' %}
{% include 'includes/protocol/navigation/menus/whoweare.html' %}
{% include 'includes/protocol/navigation/menus/innovation.html' %}
</ul>
</nav>
</div><!-- close .c-navigation-menu -->
</div><!-- close .c-navigation-items -->
</div><!-- close .c-navigation-container -->
</div><!-- close .c-navigation-l-content -->
</div><!-- close .c-navigation -->
</a>
</div>

<div class="c-navigation-items" id="c-navigation-items" data-testid="navigation-menu-items">
{% include 'includes/protocol/navigation/nav-cta.html' %}
<div class="c-navigation-menu">
<nav class="c-menu mzp-is-basic">
<ul class="c-menu-category-list">
{% include 'includes/protocol/navigation/menus/firefox.html' %}
{% include 'includes/protocol/navigation/menus/products.html' %}
{% include 'includes/protocol/navigation/menus/whoweare.html' %}
{% include 'includes/protocol/navigation/menus/innovation.html' %}
</ul>
</nav>
</div><!-- close .c-navigation-menu -->
</div><!-- close .c-navigation-items -->
</div><!-- close .c-navigation-container -->
</div><!-- close .c-navigation-l-content -->
</div><!-- close .c-navigation -->
{% endif %}
1 change: 1 addition & 0 deletions bedrock/settings/base.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,7 @@ def _put_default_lang_first(langs, default_lang=LANGUAGE_CODE):
"mozorg/about/shared",
"navigation",
"navigation_v2",
"navigation_refresh",
"newsletter_form",
"send_to_device",
"sub_navigation",
Expand Down
Loading

0 comments on commit cf21cf2

Please sign in to comment.