From 8e1eee38941f9a185b682e9ac905b2aed6ec4a13 Mon Sep 17 00:00:00 2001 From: Craig Cook Date: Mon, 2 Dec 2024 08:38:13 -0800 Subject: [PATCH] Refresh: nav tweaks [fix #15564] * Change Mozilla AI to Mozilla.ai [fix #15606] * Add Relay to products list [fix #15586] * Update close button style * Constrain dropdown width * Add transition to all category link arrow * Remove underlines from links (hover only) * Fix mobile category titles * Use small icons * RTL fixes --- .../navigation/menus-refresh/about-us.html | 2 +- .../navigation/menus-refresh/products.html | 4 +- .../mozorg/home/includes/m24/products.html | 6 + l10n/en/brands.ftl | 2 +- l10n/en/mozorg/home-m24.ftl | 2 + .../m24/components/navigation-refresh.scss | 125 +++++++++++------- media/css/m24/components/pencil-banner.scss | 13 +- media/css/m24/launchpad.scss | 4 + 8 files changed, 101 insertions(+), 57 deletions(-) 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 index 457ef51a2f2..4410fe745df 100644 --- a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/about-us.html +++ b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/about-us.html @@ -64,7 +64,7 @@

{{ ftl('navigation-refresh-mozilla-foundation'
  • - +

    {{ ftl('navigation-refresh-mozilla-ai-v2') }}
    diff --git a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html index 45928f1d22c..99e9c198ead 100644 --- a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html +++ b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/products.html @@ -73,7 +73,9 @@

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

    diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/products.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/products.html index f7a400d3115..49b5d6cc286 100644 --- a/bedrock/mozorg/templates/mozorg/home/includes/m24/products.html +++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/products.html @@ -48,6 +48,12 @@

    {{ ftl('m24-home-love-the-internet') }}

    {{ ftl('m24-home-get-a-headsup') }}
    • +
  • + + {{ ftl('m24-home-firefox-relay') }} + {{ ftl('m24-home-mask-your-email') }} + +

    • {{ ftl('m24-home-explore-our-products') }}

    diff --git a/l10n/en/brands.ftl b/l10n/en/brands.ftl index 3faa0fb91e8..d66bc11cdcc 100644 --- a/l10n/en/brands.ftl +++ b/l10n/en/brands.ftl @@ -123,7 +123,7 @@ -brand-name-mozilla-account = Mozilla account -brand-name-mozilla-accounts = Mozilla accounts -brand-name-mozilla-social = Mozilla.social --brand-name-mozilla-ai = Mozilla AI +-brand-name-mozilla-ai = Mozilla.ai -brand-name-mozilla-ventures = Mozilla Ventures -brand-name-rise25 = Rise25 -brand-name-thunderbird = Thunderbird diff --git a/l10n/en/mozorg/home-m24.ftl b/l10n/en/mozorg/home-m24.ftl index e1d59a75db9..07e87d4c1cb 100644 --- a/l10n/en/mozorg/home-m24.ftl +++ b/l10n/en/mozorg/home-m24.ftl @@ -34,6 +34,8 @@ m24-home-mozilla-vpn = { -brand-name-mozilla-vpn } m24-home-keep-your-location = Keep your location and online adventures private — stream like a local, anywhere. m24-home-mozilla-monitor = { -brand-name-mozilla-monitor } m24-home-get-a-headsup = Get a heads-up if your personal info is at risk and lock it down like a pro. +m24-home-firefox-relay = { -brand-name-firefox-relay } +m24-home-mask-your-email = Mask your email and phone number so you only get the messages you want. ## Donate diff --git a/media/css/m24/components/navigation-refresh.scss b/media/css/m24/components/navigation-refresh.scss index 41aeb5e3657..c019e078850 100644 --- a/media/css/m24/components/navigation-refresh.scss +++ b/media/css/m24/components/navigation-refresh.scss @@ -102,17 +102,17 @@ $margin-top: 54px; // top margin offset for mobile navigation menu } .js .m24-c-navigation-menu-button { - background-color: inherit; + background-color: transparent; border: none; color: $color-black; display: block; + float: right; font-family: $primary-font; font-weight: 600; height: 32px; margin: 4px 0 0; padding: 0; position: relative; - @include bidi(((float, right, left),)); &::after { background: $color-black; @@ -141,6 +141,10 @@ $margin-top: 54px; // top margin offset for mobile navigation menu } } +[dir='rtl'].js .m24-c-navigation-menu-button { + float: left; +} + .m24-c-navigation-logo-link { display: inline-block; } @@ -228,12 +232,17 @@ $margin-top: 54px; // top margin offset for mobile navigation menu border-bottom: transparent; .m24-c-menu-title { - @include bidi(((padding-left, 48px, padding-right, 48px),)); + @include bidi(((padding-left, $spacing-md, padding-right, $spacing-md),)); + + &::before { + content: '/'; + padding: 0 $spacing-xs; + } } .m24-c-menu-panel { display: block; - @include bidi(((animation, nav-slide-in 0.45s ease, nav-slide-in-reverse 0.45s ease),)); + @include bidi(((animation, nav-slide-in 450ms ease, nav-slide-in-reverse 450ms ease),)); @media (prefers-reduced-motion: reduce) { @include bidi(((animation, none, none),)); @@ -242,20 +251,22 @@ $margin-top: 54px; // top margin offset for mobile navigation menu } // Arrow styles for mobile menu items. - &::before { - background: url('/media/img/m24/arrow-dark-up.svg') top left repeat; + &::after { + background: url('/media/img/icons/m24-small/up-arrow.svg') center center no-repeat; content: ''; height: 20px; position: absolute; - top: 10px; + top: 0; width: 20px; + padding: $spacing-xs 0; @include bidi(( (transform, rotate(90deg), rotate(-90deg)), (right, 8px, left, auto), )); + @include background-size(14px, 14px); } - &.mzp-is-selected::before { + &.mzp-is-selected::after { @include bidi(( (transform, rotate(-90deg), rotate(90deg)), (left, 8px, right, auto), @@ -271,6 +282,11 @@ $margin-top: 54px; // top margin offset for mobile navigation menu .m24-c-menu-title { color: $m24-color-dark-green; @include bidi(((padding-left, 0, padding-right, 0),)); + + &::before { + content: none; + display: none; + } } &::after { @@ -282,7 +298,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu } } - &::before { + &::after { display: none; } } @@ -310,7 +326,7 @@ $margin-top: 54px; // top margin offset for mobile navigation menu .m24-c-menu-category-has-icon { .m24-c-menu-title-icon { - @include bidi(((margin-right, 8px, margin-right, 8px),)); + @include bidi(((margin, 0 8px 0 0, 0 0 0 8px),)); } .m24-c-menu-title::after { @@ -329,9 +345,10 @@ $margin-top: 54px; // top margin offset for mobile navigation menu } .m24-c-menu-title { + align-items: center; border: none; color: $color-black; - display: block; + display: flex; font-family: $primary-font; font-size: $text-button-sm; font-weight: 600; @@ -340,6 +357,10 @@ $margin-top: 54px; // top margin offset for mobile navigation menu text-decoration: none; width: 100%; + .m24-c-menu-title-icon { + @include bidi(((margin, 0 8px 0 0, 0 0 0 8px),)); + } + @media #{$mq-md} { &::after { background: $color-black; @@ -388,9 +409,15 @@ $margin-top: 54px; // top margin offset for mobile navigation menu } .m24-c-menu-panel .m24-c-menu-panel-container { + margin: 0 auto; + @media #{$mq-md} { padding: $spacer-lg 0; } + + @media #{$mq-lg} { + max-width: grid(8); + } } .m24-c-menu-item-title { @@ -423,17 +450,6 @@ $margin-top: 54px; // top margin offset for mobile navigation menu .m24-c-menu-item-title { border: none; position: relative; - - &::after { - background: $color-black; - bottom: 1px; - content: ""; - display: block; - height: 1px; - left: 0; - position: absolute; - width: 100%; - } } } } @@ -458,6 +474,13 @@ $margin-top: 54px; // top margin offset for mobile navigation menu &::after { background: $m24-color-dark-green; + bottom: 1px; + content: ""; + display: block; + height: 1px; + left: 0; + position: absolute; + width: 100%; } } @@ -534,16 +557,33 @@ $margin-top: 54px; // top margin offset for mobile navigation menu text-decoration: none; width: fit-content; - svg path { - fill: $color-black; + svg { + @include bidi(( + (left, auto, 0), + (margin-left, $spacing-xs, 0), + (margin-right, 0, $spacing-xs), + (right, 0, auto), + (transition-property, right, left), + (transform, none, rotate(-180deg)), + )); + height: 0.8em; + position: relative; + top: 0.15em; + transition-duration: $fast; + transition-timing-function: $bezier; + width: auto; } } -.m24-c-menu-panel .m24-c-menu-category-link a:hover { +.m24-c-menu-panel .m24-c-menu-category-link a:hover, +.m24-c-menu-panel .m24-c-menu-category-link a:focus { color: $m24-color-dark-green; - svg path { - fill: $m24-color-dark-green; + svg { + @include bidi(( + (right, -$spacing-sm, auto), + (left, auto, -$spacing-sm), + )); } } @@ -565,17 +605,6 @@ $margin-top: 54px; // top margin offset for mobile navigation menu border: none; font-weight: 600; position: relative; - - &::after { - background: $color-black; - bottom: 1px; - content: ""; - display: block; - height: 1px; - left: 0; - position: absolute; - width: 100%; - } } } @@ -583,19 +612,16 @@ $margin-top: 54px; // top margin offset for mobile navigation menu .mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:visited:hover { .m24-c-menu-item-title { border: none; - - &::after { - background: $m24-color-dark-green; - } } } // Menu panel close button shown on desktop sized view ports. .m24-c-menu-button-close { + @include bidi(((right, 15px, left, auto), (left, auto, right, 15px))); + @include image-replaced; background: $color-white url('/media/protocol/img/icons/close.svg') center center no-repeat; - border-radius: $border-radius-sm; - border: none; - box-shadow: $box-shadow-sm; + @include background-size(20px, 20px); + border: $border-width solid transparent; cursor: pointer; display: none; height: 24px; @@ -603,9 +629,12 @@ $margin-top: 54px; // top margin offset for mobile navigation menu position: absolute; top: 15px; width: 24px; - @include background-size(20px, 20px); - @include bidi(((right, 15px, left, auto), (left, auto, right, 15px))); - @include image-replaced; + transition: border-color $fast $bezier; + + &:hover, + &:focus { + border-color: $m24-color-medium-gray; + } } // page content - hide all content except for the nav when mobile nav menu is open diff --git a/media/css/m24/components/pencil-banner.scss b/media/css/m24/components/pencil-banner.scss index 55a1cc7e188..38da771aea8 100644 --- a/media/css/m24/components/pencil-banner.scss +++ b/media/css/m24/components/pencil-banner.scss @@ -21,21 +21,22 @@ } .m24-pencil-banner-close { + @include bidi(((right, $spacer-sm, auto), (left, auto, $spacer-sm))); + @include image-replaced; background: transparent url('/media/img/icons/m24-small/close.svg') center center no-repeat; - border: none; + @include background-size(20px 20px); + border: $border-width solid transparent; cursor: pointer; height: 24px; + padding: var(--spacer-xs); position: absolute; top: $spacer-sm; + transition: border-color $fast $bezier; width: 24px; - @include background-size(24px 24px); - @include bidi(((right, $spacer-sm, auto), (left, auto, $spacer-sm))); - @include image-replaced; &:hover, &:focus { - @include transition(transform 0.1s ease-in-out); - @include transform(scale(1.1)); + border-color: $m24-color-green; } } } diff --git a/media/css/m24/launchpad.scss b/media/css/m24/launchpad.scss index b4bcd6514e2..c12a8e0e61e 100644 --- a/media/css/m24/launchpad.scss +++ b/media/css/m24/launchpad.scss @@ -106,6 +106,10 @@ $launchpad-logo-spacing: $launchpad-logo-width + $launchpad-logo-padding; &.m24-t-product-thunderbird::before { background-image: url('/media/img/logos/thunderbird/logo-thunderbird.svg'); } + + &.m24-t-product-relay::before { + background-image: url('/media/protocol/img/logos/firefox/relay/logo.svg'); + } } .m24-c-launchpad-title {