From cf21cf26d35f6632b19d3c117e1c86572a2515c4 Mon Sep 17 00:00:00 2001 From: Jingwen Zhu <42974891+wen-2018@users.noreply.github.com> Date: Fri, 13 Sep 2024 17:11:21 -0300 Subject: [PATCH] Navigation refresh (#14966) --- .../navigation/menus-refresh/about-us.html | 60 +++ .../navigation/menus-refresh/firefox.html | 63 +++ .../navigation/menus-refresh/products.html | 82 +++ .../navigation/navigation-refresh.html | 29 + .../protocol/navigation/navigation.html | 71 +-- bedrock/settings/base.py | 1 + l10n/en/navigation_refresh.ftl | 38 ++ media/css/m24/base-navigation-and-footer.scss | 1 + .../m24/components/navigation-refresh.scss | 498 ++++++++++++++++++ media/css/m24/vars/color.scss | 3 + media/img/m24/arrow-dark-up.svg | 1 + 11 files changed, 812 insertions(+), 35 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/firefox.html create mode 100644 bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html create mode 100644 bedrock/base/templates/includes/protocol/navigation/navigation-refresh.html create mode 100644 l10n/en/navigation_refresh.ftl create mode 100644 media/css/m24/components/navigation-refresh.scss create mode 100644 media/img/m24/arrow-dark-up.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..377c3654f7a --- /dev/null +++ b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/about-us.html @@ -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/. + #} + +
  • + {{ ftl('navigation-refresh-about-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..51ef8770caf --- /dev/null +++ b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/firefox.html @@ -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' %} + +
  • + + + {{ ftl('navigation-refresh-firefox-browsers') }} + +
    +
    + +
    + +
    +
    +
    +
    • 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..085b78af9cf --- /dev/null +++ b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html @@ -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' %} + +
  • + {{ ftl('navigation-refresh-products') }} +
    +
    + +
    + +

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

    +
    +
    +
    +
    • diff --git a/bedrock/base/templates/includes/protocol/navigation/navigation-refresh.html b/bedrock/base/templates/includes/protocol/navigation/navigation-refresh.html new file mode 100644 index 00000000000..7d14e132f44 --- /dev/null +++ b/bedrock/base/templates/includes/protocol/navigation/navigation-refresh.html @@ -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/. + #} + +
    +
    +
    + + +
    +
    + +
    +
    +
    +
    +
    diff --git a/bedrock/base/templates/includes/protocol/navigation/navigation.html b/bedrock/base/templates/includes/protocol/navigation/navigation.html index f869e1f2702..2e75b4b7615 100644 --- a/bedrock/base/templates/includes/protocol/navigation/navigation.html +++ b/bedrock/base/templates/includes/protocol/navigation/navigation.html @@ -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 %} -
    -
    -
    - - + +
    + {% include 'includes/protocol/navigation/nav-cta.html' %} +
    + +
    +
    +
    +
    +
    +{% endif %} diff --git a/bedrock/settings/base.py b/bedrock/settings/base.py index af57b79e6f7..6ab551876c3 100644 --- a/bedrock/settings/base.py +++ b/bedrock/settings/base.py @@ -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", diff --git a/l10n/en/navigation_refresh.ftl b/l10n/en/navigation_refresh.ftl new file mode 100644 index 00000000000..6e55a0ba1b6 --- /dev/null +++ b/l10n/en/navigation_refresh.ftl @@ -0,0 +1,38 @@ +# 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-mozilla = { -brand-name-mozilla } + +## About us + +navigation-refresh-about-us = About us +navigation-refresh-close-about-us-menu = Close About us menu +navigation-refresh-mozilla-manifesto = { -brand-name-mozilla } manifesto +navigation-refresh-mozilla-foundation = { -brand-name-mozilla-foundation } +navigation-refresh-get-involved = Get involved +navigation-refresh-innovation-projects = Innovation Projects +navigation-refresh-blog = Blog + +## 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-firefox-for-android = { -brand-name-firefox } for { -brand-name-android } +navigation-refresh-firefox-for-ios = { -brand-name-firefox } for { -brand-name-ios } +navigation-refresh-firefox-focus = { -brand-name-firefox-focus } +navigation-refresh-firefox-relay = { -brand-name-firefox-relay } +navigation-refresh-all-products = All products +navigation-refresh-firefox-blog = { -brand-name-firefox } Blog + +## Products + +navigation-refresh-products = Products +navigation-refresh-close-products-menu = Close Products menu +navigation-refresh-mozilla-monitor = { -brand-name-monitor } +navigation-refresh-pocket = { -brand-name-pocket } +navigation-refresh-mozilla-vpn = { -brand-name-vpn } +navigation-refresh-mdn-plus = { -brand-name-mdn-plus } +navigation-refresh-fakespot = { -brand-name-fakespot } +navigation-refresh-thunderbird = { -brand-name-thunderbird } diff --git a/media/css/m24/base-navigation-and-footer.scss b/media/css/m24/base-navigation-and-footer.scss index 5929b878237..3366eb01fa7 100644 --- a/media/css/m24/base-navigation-and-footer.scss +++ b/media/css/m24/base-navigation-and-footer.scss @@ -15,3 +15,4 @@ // global components @import 'components/footer-refresh'; +@import 'components/navigation-refresh'; diff --git a/media/css/m24/components/navigation-refresh.scss b/media/css/m24/components/navigation-refresh.scss new file mode 100644 index 00000000000..af83a43aadb --- /dev/null +++ b/media/css/m24/components/navigation-refresh.scss @@ -0,0 +1,498 @@ +// 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/. + +.moz24-navigation-refresh { + display: flex; + width: 100%; + position: fixed; + z-index: 100; + top: 0; + left: 0; + box-shadow: none; + background-color: $m24-color-medium-gray; + + @media #{$mq-md} { + position: sticky; + display: block; + } + + .c-navigation-container { + width: 100%; + padding: 0; + + @media #{$mq-md} { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + } + + .c-navigation-items { + // mobile specfic styles + @media (max-width: $screen-md) { + display: flex; + position: fixed; + z-index: 100; + top: 0; + right: 0; + width: 100%; + height: calc(100vh - 48px); // 48px margin top + background-color: #fff; + transition: 0.45s; + transform: translateX(100%); + margin-top: 48px; + padding-top: 0; + overflow: hidden auto; + + &.mzp-is-open { + transform: translateX(0); + } + } + } + + .c-navigation-logo { + padding: 0; + margin: 0; + + .c-navigation-logo-image { + height: 21px; + } + } + + .c-navigation-menu { + width: 100%; + margin-bottom: 0; + + @media #{$mq-md} { + width: auto; + } + } + + .c-menu-category > .c-menu-title { + position: relative; + font-family: $primary-font; + font-size: $text-button-sm; + border-bottom: 2px solid $token-color-light-gray; + padding: 0; + + &::before { + background: url('/media/img/m24/arrow-dark-up.svg') top left repeat; + transform: rotate(90deg); + } + + @media #{$mq-md} { + border-bottom: transparent; + + &::after { + display: block; + background: $color-black; + bottom: 7px; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } + } + + @media(min-width: $screen-lg) { + &::after { + bottom: 7px; + left: 0; + width: 100%; + } + } + } + + .c-menu-category-list { + padding: 0; + position: relative; + + @media #{$mq-md} { + position: unset; + display: flex; + justify-content: space-between; + gap: 48px; + } + } + + // Common navigation styles + .c-navigation-l-content { + position: relative; + padding: $spacer-xs $spacer-md; + width: 100%; + display: flex; + + @media #{$mq-md} { + padding: $spacer-sm $spacer-md; + width: auto; + display: block; + } + } + + .c-navigation { + background-color: $color-black; + color: $color-white; + } + + button.c-navigation-menu-button { + background-color: $m24-color-medium-gray; + margin: 0; + color: $color-black; + position: relative; + font-family: $primary-font; + + &::after { + display: block; + background: $color-black; + bottom: 7px; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: 100% + } + + &.mzp-is-active { + &::after { + display: none; + } + } + + &:not(.mzp-is-active) { + text-indent: unset; + background-image: none; + width: fit-content; + } + + @media (min-width: $screen-md) { + margin: 24px 0; + } + } + + .c-menu-category.mzp-has-drop-down { + .c-menu-panel { + background-color: $color-white; + color: $color-black; + + @media (min-width: $screen-md) { + left: 0; + right: auto; + top: 64px; + width: 100%; + padding: 0; + border-bottom: 4px solid $m24-color-medium-gray; + } + } + } + + .c-menu-panel .c-menu-panel-container { + max-width: unset; + box-shadow: none; + + @media (min-width: $screen-md) { + border-radius: 0; + padding: $spacer-lg 0; + } + } + + .c-menu.mzp-is-enhanced .c-menu-category { + position: unset; + border: transparent; + padding: 8px 16px; + + @media (min-width: $screen-md) { + padding: 0; + } + + &.mzp-is-selected { + position: absolute; + top: 0; + left: 0; + z-index: 1000; + min-width: 100%; + background-color: $color-white; + + @media (min-width: $screen-md) { + position: unset; + min-width: unset; + } + + .c-menu-title { + border-bottom: transparent; + padding: 0 0 0 48px; + + @media (min-width: $screen-md) { + color: $m24-color-dark-green; + border-bottom: transparent; + padding: 0; + background-color: $m24-color-medium-gray; + } + + &::before { + left: 0; + transform: rotate(-90deg); + } + + &::after { + background: $m24-color-dark-green; + height: 1px; + width: 100%; + left: 0; + bottom: 7px; + } + } + + .c-menu-panel { + transform: translateX(0); + } + } + } + + .c-menu-panel { + // mobile specfic styles + @media (max-width: $screen-md) { + display: block; + position: fixed; + z-index: 100; + top: 0; + right: 0; + width: 100%; + height: auto; + background-color: #fff; + overflow: hidden auto; + transition: 0.45s; + margin-top: 50px; + transform: translateX(100%); + } + + @media (min-width: $screen-md) { + padding: 0; + } + } + + h4.c-menu-item-title { + font-size: $text-button-sm; + font-family: $primary-font; + font-weight: 600; + margin-bottom: 0; + } + + .mzp-l-content { + min-width: unset; + padding: $spacer-md 0; + + @media (min-width: $screen-md) { + padding: 0; + } + } + + .c-menu-item { + min-width: unset; + max-width: 100%; + padding: 0; + + @media (min-width: $screen-md) { + min-width: 216px; + width: auto; + } + + .c-menu-item-link { + display: flex; + align-items: center; + padding: 8px 0; + width: fit-content; + + h4.c-menu-item-title { + border: none; + + &::after { + display: block; + background: $color-black; + 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 { + h4.c-menu-item-title { + border: none; + + &::after { + display: block; + background: $color-black; + bottom: 11px; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } + } + + svg path { + fill: $color-black; + } + } + + .c-menu-item .c-menu-item-link:hover, + .c-menu-item .c-menu-item-link:visited:hover { + h4.c-menu-item-title { + color: $m24-color-dark-green; + border: none; + + &::after { + background: $m24-color-dark-green; + } + } + + svg path { + fill: $m24-color-dark-green; + } + } + + .c-menu-item:hover, + .c-menu-item:focus, + .c-menu-item:active { + background-color: unset; + } + + .c-menu-panel .c-menu-panel-content > ul.mzp-l-content { + display: flex; + flex-direction: column; + margin: 0 auto; + padding: $spacer-md $grid-margin; + + @media (min-width: $screen-md) { + padding: 0 $grid-margin; + } + + & > li { + border-bottom: 2px solid transparent; + width: 100%; + + @media (min-width: $screen-md) { + border-bottom: 2px solid $token-color-light-gray; + } + + .c-menu-item { + border-bottom: transparent; + } + } + } + + .c-menu-panel .c-menu-category-link { + display: flex; + justify-content: flex-end; + padding: 0; + margin: $spacer-lg $spacer-lg 0; + font-family: $primary-font; + font-size: $text-button-sm; + border: none; + } + + .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 { + position: relative; + display: flex; + width: fit-content; + border: none; + + svg path { + fill: $color-black; + } + } + + .c-menu-panel .c-menu-category-link a:hover { + color: $m24-color-dark-green; + + .c-menu-item-title::after { + display: block; + background: $m24-color-dark-green; + bottom: -2px; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } + + svg path { + fill: $m24-color-dark-green; + } + } + + .mzp-has-icon .c-menu-item-link { + .c-menu-item-icon { + height: 16px; + width: 16px; + position: unset; + @include bidi(((padding-right, 4px, 0), (padding-left, 0, 4px))); + } + } + + .mzp-has-icon.c-menu-item .c-menu-item-link, + .mzp-has-icon.c-menu-item .c-menu-item-link:link, + .mzp-has-icon.c-menu-item .c-menu-item-link:active, + .mzp-has-icon.c-menu-item .c-menu-item-link:visited { + h4.c-menu-item-title { + font-weight: 600; + border: none; + position: relative; + + &::after { + display: block; + background: $color-black; + bottom: 1px; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } + } + } + + .mzp-has-icon.c-menu-item .c-menu-item-link:hover, + .mzp-has-icon.c-menu-item .c-menu-item-link:visited:hover { + h4.c-menu-item-title { + border: none; + + &::after { + background: $m24-color-dark-green; + } + } + } + + .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: 24px; + width: calc(100% - 24px); + } + } +} + +// page content +#outer-wrapper { + margin-top: 48px; + + @media (min-width: $screen-md) { + margin-top: 0; + } +} diff --git a/media/css/m24/vars/color.scss b/media/css/m24/vars/color.scss index 997fc995763..721ee0957cc 100644 --- a/media/css/m24/vars/color.scss +++ b/media/css/m24/vars/color.scss @@ -7,6 +7,7 @@ // do not reference these directly, use the $m24-color-* variables as they will adapt for dark mode $token-color-black: #000; $token-color-light-gray: #f4f4f4; +$token-color-medium-gray: #e8e8e8; $token-color-dark-gray: #181818; $token-color-functional-gray-on-white: #707070; $token-color-functional-gray-on-black: #828282; @@ -33,6 +34,7 @@ $token-color-feedback-error: $token-color-orange; // gray --m24-light-gray: #{$token-color-light-gray}; + --m24-medium-gray: #{$token-color-medium-gray}; --m24-dark-gray: #{$token-color-dark-gray}; --m24-functional-gray: #{$token-color-functional-gray-on-white}; @@ -62,6 +64,7 @@ $m24-color-black: var(--m24-black); // gray $m24-color-light-gray: var(--m24-light-gray); +$m24-color-medium-gray: var(--m24-medium-gray); $m24-color-dark-gray: var(--m24-dark-gray); $m24-color-functional-gray: var(--m24-functional-gray); diff --git a/media/img/m24/arrow-dark-up.svg b/media/img/m24/arrow-dark-up.svg new file mode 100644 index 00000000000..29dcd64929c --- /dev/null +++ b/media/img/m24/arrow-dark-up.svg @@ -0,0 +1 @@ + \ No newline at end of file