From a5f957ceaac84d5341d8981ae7df5a8c9ee8bdcd Mon Sep 17 00:00:00 2001 From: wen-2018 <42974891+wen-2018@users.noreply.github.com> Date: Tue, 13 Aug 2024 11:12:05 -0300 Subject: [PATCH] Navigation refresh --- .../navigation/menus-refresh/about-us.html | 104 ++++ .../menus-refresh/build-with-us.html | 70 +++ .../navigation/menus-refresh/firefox.html | 92 ++++ .../navigation/menus-refresh/products.html | 73 +++ .../navigation/menus-refresh/take-action.html | 120 +++++ .../protocol/navigation/navigation.html | 96 ++-- bedrock/settings/base.py | 1 + l10n/en/navigation_refresh.ftl | 97 ++++ media/css/base/navigation-refresh.scss | 447 ++++++++++++++++++ media/img/logos/mozilla/brand/logo-lockup.svg | 1 + .../img/logos/mozilla/vpn/vpn-green-logo.svg | 1 + media/static-bundles.json | 6 + 12 files changed, 1076 insertions(+), 32 deletions(-) create mode 100644 bedrock/base/templates/includes/protocol/navigation/menus-refresh/about-us.html create mode 100644 bedrock/base/templates/includes/protocol/navigation/menus-refresh/build-with-us.html create mode 100644 bedrock/base/templates/includes/protocol/navigation/menus-refresh/firefox.html create mode 100644 bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html create mode 100644 bedrock/base/templates/includes/protocol/navigation/menus-refresh/take-action.html create mode 100644 l10n/en/navigation_refresh.ftl create mode 100644 media/css/base/navigation-refresh.scss create mode 100644 media/img/logos/mozilla/brand/logo-lockup.svg create mode 100644 media/img/logos/mozilla/vpn/vpn-green-logo.svg diff --git a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/about-us.html b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/about-us.html new file mode 100644 index 00000000000..7e6a0f351a6 --- /dev/null +++ b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/about-us.html @@ -0,0 +1,104 @@ +{# + 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/. + #} + +
  • + {{ ftl('navigation-refresh-about-us') }} +
    +
    + +
    + +
    +
    +
    +
    • diff --git a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/build-with-us.html b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/build-with-us.html new file mode 100644 index 00000000000..d733ee37aed --- /dev/null +++ b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/build-with-us.html @@ -0,0 +1,70 @@ +{# + 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/. + #} + +
  • + {{ ftl('navigation-refresh-build-with-us') }} +
    +
    + +
    + +
    +
    +
    +
    • diff --git a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/firefox.html b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/firefox.html new file mode 100644 index 00000000000..03c8119fb74 --- /dev/null +++ b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/firefox.html @@ -0,0 +1,92 @@ +{# + 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' %} + +
  • + + + {{ ftl('navigation-refresh-firefox-browsers') }} + +
    +
    + +
    + +

    + + {{ ftl('navigation-refresh-all-browsers-and-products') }} + + +

    +
    +
    +
    +
    • diff --git a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html new file mode 100644 index 00000000000..73b2d786146 --- /dev/null +++ b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html @@ -0,0 +1,73 @@ +{# + 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' %} + +
  • + {{ ftl('navigation-refresh-products') }} +
    +
    + +
    + +

    + + {{ ftl('navigation-refresh-all-browsers-and-products') }} + + +

    +
    +
    +
    +
    • diff --git a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/take-action.html b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/take-action.html new file mode 100644 index 00000000000..51557eeb8f1 --- /dev/null +++ b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/take-action.html @@ -0,0 +1,120 @@ +{# + 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/. + #} + +
  • + {{ ftl('navigation-refresh-take-action') }} +
    +
    + +
    + +
    +
    +
    +
    • diff --git a/bedrock/base/templates/includes/protocol/navigation/navigation.html b/bedrock/base/templates/includes/protocol/navigation/navigation.html index c63a1fe14b6..7022d935d10 100644 --- a/bedrock/base/templates/includes/protocol/navigation/navigation.html +++ b/bedrock/base/templates/includes/protocol/navigation/navigation.html @@ -4,38 +4,70 @@ 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('brand-refresh') %} + {% block page_css %} + {{ css_bundle('navigation-refresh') }} + {% endblock %} +
    +
    +
    + + +
    +
    + +
    +
    + +
    +
    +
    {% 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 %} -
    -
    -
    - - +
    +
    +
    + + -
    - {% include 'includes/protocol/navigation/nav-cta.html' %} -
    - -
    -
    -
    -
    -
    +
    + {% include 'includes/protocol/navigation/nav-cta.html' %} +
    + +
    +
    +
    +
    +
    +{% endif %} diff --git a/bedrock/settings/base.py b/bedrock/settings/base.py index 7884f155b30..9f1feca6850 100644 --- a/bedrock/settings/base.py +++ b/bedrock/settings/base.py @@ -281,6 +281,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", diff --git a/l10n/en/navigation_refresh.ftl b/l10n/en/navigation_refresh.ftl new file mode 100644 index 00000000000..5cc7505f4de --- /dev/null +++ b/l10n/en/navigation_refresh.ftl @@ -0,0 +1,97 @@ +# 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/. + +navigation-refresh-menu = Menu +navigation-refresh-mozilla = { -brand-name-mozilla } + +## About us +navigation-refresh-about-us = About us +navigation-refresh-close-about-us-menu = Close About us menu +navigation-refresh-who-we-are = Who we are +navigation-refresh-what-we-fund = What we fund +navigation-refresh-insights = Insights +navigation-refresh-our-people = Our people +navigation-refresh-philanthropy = Philanthropy +navigation-refresh-mozilla-ventures = { -brand-name-mozilla } ventures +navigation-refresh-innovation = Innovation +navigation-refresh-artificial-intelligence = Artificial Intelligence +navigation-refresh-privacy-and-security = Privacy and security +navigation-refresh-product-innovation = Product innovation +navigation-refresh-mozilla-in-the-news = { -brand-name-mozilla } in the news +navigation-refresh-all-insights = All insights + +## Firefox +navigation-refresh-firefox-browsers = { -brand-name-firefox-browsers } +navigation-refresh-close-firefox-browsers-menu = Close { -brand-name-firefox-browsers } menu +navigation-refresh-firefox-for-desktop = { -brand-name-firefox } for Desktop +navigation-refresh-get-the-not-for-profit-backed = Get the not-for-profit-backed browser on { -brand-name-windows }, { -brand-name-mac-short } or { -brand-name-linux }. +navigation-refresh-firefox-for-android = { -brand-name-firefox } for { -brand-name-android } +navigation-refresh-get-the-customizable-mobile = Get the customizable mobile browser for { -brand-name-android } smartphones. +navigation-refresh-firefox-for-ios = { -brand-name-firefox } for { -brand-name-ios } +navigation-refresh-get-the-mobile-browser = Get the mobile browser for your { -brand-name-iphone } or { -brand-name-ipad }. +navigation-refresh-firefox-for-enterprise = { -brand-name-firefox } for { -brand-name-enterprise } +navigation-refresh-get-unmatched-data = Get unmatched data protection +navigation-refresh-firefox-focus = { -brand-name-firefox-focus } +navigation-refresh-simply-private-mobile = Simply private mobile browsing. +navigation-refresh-firefox-relay = { -brand-name-firefox } +navigation-refresh-sign-up = Sign up for new accounts without handing over your email address. +navigation-refresh-facebook-container = { -brand-name-facebook-container } +navigation-refresh-help-prevent = Help prevent Facebook from collecting your data outside their site. +navigation-refresh-all-browsers-and-products = Go to all browsers and products + +## Products +navigation-refresh-products = Products +navigation-refresh-close-products-menu = Close Products menu +navigation-refresh-mozilla-monitor = { -brand-name-mozilla-monitor } +navigation-refresh-see-if-your-email-has = See if your email has appeared in a company’s data breach. +navigation-refresh-pocket = { -brand-name-pocket } +navigation-refresh-save-and-discover-the-best = Save and discover the best stories from across the web. +navigation-refresh-mozilla-vpn = { -brand-name-mozilla-vpn } +navigation-refresh-get-protection-beyond-your-browser = Get protection beyond your browser, on all your devices. +navigation-refresh-mdn-plus = { -brand-name-mdn-plus} +navigation-refresh-new-features-and-tools = New features and tools for a customized { -brand-name-mdn} experience +navigation-refresh-fakespot = { -brand-name-fakespot } +navigation-refresh-use-ai-to-detect = Use AI to detect fake reviews and scams +navigation-refresh-thunderbird = { -brand-name-thunderbird } +navigation-refresh-access-all = Access all your email, calendars, and contacts in one fast app. Filter and organize them the way you like. + +## Take action +navigation-refresh-take-action = Take action +navigation-refresh-close-take-action-menu = Close Take action menu +navigation-refresh-give = Give +navigation-refresh-make-a-donation = Make a donation +navigation-refresh-donate-your-voice = Donate your voice +navigation-refresh-participate = Participate +navigation-refresh-localize-mozilla = Localize { -brand-name-mozilla } +navigation-refresh-sign-a-petition = Sign a petition +navigation-refresh-attend = Attend +navigation-refresh-event-name = Event name +navigation-refresh-rise25-awards = Rise25 Awards +navigation-refresh-mozfest = MozFest +navigation-refresh-learn = Learn +navigation-refresh-irl-podcast = IRL Podcast +navigation-refresh-dialogues-and-debates = Dialogues & debates +navigation-refresh-join = Join +navigation-refresh-apply-for-a-fellowship = Apply for a fellowship +navigation-refresh-partner-with-us = Partner with us + +## Build with us + +navigation-refresh-build-with-us = Build with us +navigation-refresh-close-build-with-us-menu = Close Build with us menu +navigation-refresh-develop = Develop +navigation-refresh-firefox-developer-edition = { -brand-name-developer-edition } +navigation-refresh-mdn-plus-and-mdb-web-docs = MDN Plus & MDB Web Docs +navigation-refresh-developer-tools = Developer tools +navigation-refresh-beta-and-nightly = Beta & Nightly + +## Take part + +navigation-refresh-take-part = Take part +navigation-refresh-data-futures-lab = Data Futures Lab +navigation-refresh-open-source-audit-tooling-project = Open source audit tooling project + +## Dark mode + +navigation-refresh-dark-mode = Dark mode diff --git a/media/css/base/navigation-refresh.scss b/media/css/base/navigation-refresh.scss new file mode 100644 index 00000000000..6c6bdf3de92 --- /dev/null +++ b/media/css/base/navigation-refresh.scss @@ -0,0 +1,447 @@ +// 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/. + +@import '~@mozilla-protocol/core/protocol/css/includes/lib'; + +$zilla-green: #00d230; +$accent-gray: #181818; + +.c-navigation-container { + @media(min-width: $screen-md) { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } +} + +.c-navigation-dark-mode-button { + display: none; + + @media(min-width: $screen-lg) { + display: inline; + background-color: unset; + color: $color-white; + border: transparent; + font-size: 16px; + line-height: 24px; + font-weight: 600; + position: relative; + + &::after { + display: block; + background: $color-white; + bottom: 4px; + content: ""; + height: 1px; + left: 6px; + position: absolute; + width: calc(100% - 12px); + } + } +} + +.c-navigation-logo { + margin: 24px 32px 24px 0; + + .c-navigation-logo-image { + height: 21px; + } +} + +.c-menu-category > .c-menu-title { + position: relative; + + @media(min-width: $screen-md) { + &::after { + display: block; + background: $color-white; + bottom: 7px; + content: ""; + height: 1px; + left: 8px; + position: absolute; + width: calc(100% - 16px); + } + } + + @media(min-width: $screen-lg) { + &::after { + bottom: 7px; + left: 16px; + width: calc(100% - 32px); + } + } +} + +.c-menu-category-list { + padding: 24px 0; +} + +// Common navigation styles +.c-navigation-l-content { + position: relative; +} + +.c-navigation { + background-color: $color-black; + color: $color-white; +} + +button.c-navigation-menu-button { + background-color: $color-white; + margin: 24px 0; +} + +.c-menu-category.mzp-has-drop-down .c-menu-panel { + border-top: 4px solid $accent-gray; + background-color: $color-black; + color: $color-white; + + @media (min-width: $screen-md) { + left: 0; + right: auto; + top: 80px; + width: 100%; + padding: 64px 32px; + } +} + +.c-menu-panel .c-menu-panel-container { + max-width: unset; + background-color: $color-black; + color: $color-white; + box-shadow: none; + + @media (min-width: $screen-md) { + border-radius: 0; + } +} + +.c-menu-category .c-menu-title { + color: white; +} + +.c-menu.mzp-is-enhanced .c-menu-category { + position: unset; + + &.mzp-is-selected { + .c-menu-title { + color: $zilla-green; + + &::after { + background: $zilla-green; + height: 1px; + bottom: 7px; + } + } + } +} + +.c-menu-panel { + @media (min-width: $screen-md) { + padding: 0; + } +} + +h4.c-menu-item-title { + color: $color-white; + font-size: 18px; + margin-bottom: 0; +} + +.top-header-navigation .mzp-l-content { + @media (min-width: $screen-md) { + padding: 0; + } + + p { + color: #757575; + font-weight: 600; + font-size: 12px; + margin-block-end: 8px; + } +} + +.c-menu-item { + min-width: 216px; + width: auto; + + .c-menu-item-link { + display: flex; + width: max-content; + position: relative; + padding: 8px 0; + + h4.c-menu-item-title { + &::after { + display: block; + background: $color-white; + bottom: 11px; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } + } + } +} + +.c-menu-item .c-menu-item-link +.c-menu-item .c-menu-item-link:link, +.c-menu-item .c-menu-item-link:visited { + color: $color-white; + + h4.c-menu-item-title { + color: $color-white; + + &::after { + display: block; + background: $color-white; + bottom: 11px; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } + } +} + +.c-menu-item .c-menu-item-link:hover { + h4.c-menu-item-title { + color: $zilla-green; + + &::after { + display: block; + background: $zilla-green; + bottom: 11px; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } + } + + svg path { + fill: $zilla-green; + } +} + +.c-menu-item:hover, +.c-menu-item:focus, +.c-menu-item:active { + background-color: unset; +} + +sup { + color: $zilla-green; + font-weight: 600; + font-size: 12px; +} + +// multi column menu design: about us, take action, build with us +.multi-column { + .c-menu-panel .c-menu-panel-content > ul.mzp-l-content { + display: flex; + flex-direction: column; + gap: 16px; + + @media (min-width: $screen-md) { + flex-direction: row; + } + } +} + +// specific to take action menu +.take-action.multi-column { + .c-menu-panel .c-menu-panel-content > ul.mzp-l-content { + @media (min-width: $screen-md) { + flex-direction: column; + } + + @media (min-width: $screen-xl) { + flex-direction: row; + } + } +} + +// single column, has icon menu design: firefox browsers, product +.single-column { + .c-menu-panel .c-menu-panel-content > ul.mzp-l-content { + display: flex; + flex-direction: column; + + & > li { + border-bottom: 4px solid $accent-gray; + + .c-menu-item { + border-bottom: transparent; + } + } + } + + .c-menu-panel .c-menu-category-link { + display: flex; + justify-content: flex-end; + } + + .c-menu-panel .c-menu-category-link a, + .c-menu-panel .c-menu-category-link a:visited, + .c-menu-panel .c-menu-category-link a:link { + color: $color-white; + position: relative; + display: flex; + width: fit-content; + + &::after { + display: block; + background: $color-white; + bottom: -2px; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: calc(100% - 24px); + } + } + + .c-menu-panel .c-menu-category-link a:hover { + color: $zilla-green; + + &::after { + display: block; + background: $zilla-green; + bottom: -2px; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: calc(100% - 24px); + } + + svg path { + fill: $zilla-green; + } + } + + .mzp-has-icon .c-menu-item-link { + display: flex; + flex-direction: column; + justify-content: flex-start; + width: 100%; + + @media(min-width: $screen-lg) { + padding-left: 24px; + flex-direction: row; + justify-content: space-between; + } + + .c-menu-item-title { + position: relative; + + &::after { + display: block; + background: $color-white; + bottom: 1px; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } + } + + p.c-menu-item-desc { + margin-top: 0; + font-weight: 400; + font-size: 16px; + color: $color-white; + + @media(min-width: $screen-lg) { + margin-top: 0; + } + } + + .c-menu-item-icon { + height: 16px; + width: 16px; + position: absolute; + top: 11px; + left: 24px; + + @media(min-width: $screen-lg) { + top: 20px; + left: 4px; + } + } + + @media(min-width: $screen-md) { + display: flex; + } + } + + .c-menu-item .c-menu-item-link + .c-menu-item .c-menu-item-link:active, + .c-menu-item .c-menu-item-link:visited { + color: $color-white; + + h4.c-menu-item-title { + color: $color-white; + font-weight: 600; + padding-left: 16px; + + &::after { + display: block; + background: $color-white; + bottom: 1px; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } + } + } + + .mzp-has-icon.c-menu-item .c-menu-item-link:hover { + background-color: $color-white; + + h4.c-menu-item-title { + color: $color-black; + border-bottom-color: transparent; + + &::after { + background: $color-black; + bottom: 1px; + } + } + + p.c-menu-item-desc { + color: $color-black; + } + } + +} + +.c-menu.mzp-is-enhanced .c-menu-category.c-menu-category-has-icon { + .c-menu-title-icon { + margin-right: 8px; + } + + .c-menu-title::after { + bottom: 7px; + left: 40px; + width: calc(100% - 56px); + } + + .c-menu-item-link:hover .c-menu-title::after { + left: 40px; + width: calc(100% - 56px); + } +} + + diff --git a/media/img/logos/mozilla/brand/logo-lockup.svg b/media/img/logos/mozilla/brand/logo-lockup.svg new file mode 100644 index 00000000000..f942942006a --- /dev/null +++ b/media/img/logos/mozilla/brand/logo-lockup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/media/img/logos/mozilla/vpn/vpn-green-logo.svg b/media/img/logos/mozilla/vpn/vpn-green-logo.svg new file mode 100644 index 00000000000..040a5839959 --- /dev/null +++ b/media/img/logos/mozilla/vpn/vpn-green-logo.svg @@ -0,0 +1 @@ + diff --git a/media/static-bundles.json b/media/static-bundles.json index 5f3940f50cc..410b5f0ffb8 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -249,6 +249,12 @@ ], "name": "firefox-app-store-banner" }, + { + "files": [ + "css/base/navigation-refresh.scss" + ], + "name": "navigation-refresh" + }, { "files": [ "css/protocol/common-old-ie.scss"