From e7f78a7ecd3576012ace675b266b4f12eb3c9692 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 19 Nov 2024 14:52:59 -0500 Subject: [PATCH 01/12] Update hero with flag animation (fixes #15515) no-js: no animation button, static svg reduced motion pref: animation button available, static by default button click: toggles current animation state and updates text --- .../templates/mozorg/home/home-m24.html | 4 + .../mozorg/home/includes/m24/hero.html | 53 ++- l10n/en/mozorg/home-m24.ftl | 2 + media/css/m24/flag.scss | 313 +++++++++++++++++- media/img/home/2024/hero-symbol-white.svg | 1 - media/img/m24/icon-pause.svg | 1 + media/img/m24/icon-play.svg | 1 + media/js/m24/animation-play-state.es6.js | 36 ++ media/static-bundles.json | 6 + 9 files changed, 404 insertions(+), 13 deletions(-) delete mode 100644 media/img/home/2024/hero-symbol-white.svg create mode 100644 media/img/m24/icon-pause.svg create mode 100644 media/img/m24/icon-play.svg create mode 100644 media/js/m24/animation-play-state.es6.js diff --git a/bedrock/mozorg/templates/mozorg/home/home-m24.html b/bedrock/mozorg/templates/mozorg/home/home-m24.html index 9c43b5e422b..9aefde0bdf8 100644 --- a/bedrock/mozorg/templates/mozorg/home/home-m24.html +++ b/bedrock/mozorg/templates/mozorg/home/home-m24.html @@ -54,3 +54,7 @@ {% include 'includes/protocol/footer/footer.html' %} {% endwith %} {% endblock %} + +{% block js %} + {{ js_bundle('m24-animation') }} +{% endblock %} diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html index a69f790c276..984ae064c28 100644 --- a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html +++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html @@ -5,15 +5,60 @@ #}
-
-
- -
+
+

{{ ftl('m24-home-welcome-to-mozilla') }}

{{ ftl('m24-home-from-trustworthy-tech') }}

{{ ftl('m24-home-learn-about-us') }}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/l10n/en/mozorg/home-m24.ftl b/l10n/en/mozorg/home-m24.ftl index 07e87d4c1cb..3aa36512acc 100644 --- a/l10n/en/mozorg/home-m24.ftl +++ b/l10n/en/mozorg/home-m24.ftl @@ -13,6 +13,8 @@ m24-home-page-desc = Did you know? { -brand-name-mozilla } — the maker of { -b ## Intro +m24-home-pause-animation = Pause animation +m24-home-play-animation = Play animation m24-home-welcome-to-mozilla = Welcome to { -brand-name-mozilla } m24-home-from-trustworthy-tech = From trustworthy tech to policies that defend your digital rights, we put you first — always. m24-home-learn-about-us = Learn about us diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss index 8ad503f3c46..9f7f16dde3f 100644 --- a/media/css/m24/flag.scss +++ b/media/css/m24/flag.scss @@ -6,7 +6,7 @@ .m24-c-flag { @include container; - padding-top: $spacer-2xl; + padding-top: $spacer-xl; padding-bottom: $spacer-xl; } @@ -20,17 +20,78 @@ .m24-c-flag-subtitle { font-size: $text-title-md; - text-wrap: balance; - text-wrap-style: balance; margin-bottom: $spacer-xl; } +.m24-c-flag-cta { + margin-bottom: 0; +} + .m24-c-flag-media { + --duration: 40s; + --delay: 1s; // leave some space to read before introducing movement + --bounce-h: 12px; + --wave-h: 8px; display: block; - margin-bottom: 16px; - img { + svg { + transform: translateZ(0); width: 100px; + height: auto; + fill: $m24-color-black; // inverts to white in dark theme section + } +} + +.m24-c-flag-button { + all: unset; + background-color: $m24-color-medium-gray; + color: $m24-color-white; + font-family: $primary-font; + font-size: 0.75rem; + font-weight: 600; + line-height: 1; + padding: 8px; + cursor: pointer; + transition: background-color $fast; + + &:hover, + &:focus { + background-color: $m24-color-black; // inverts to white in dark theme section + } + + &:active { + background-color: $m24-color-medium-gray; + } +} + +.m24-c-flag-button-pause, +.m24-c-flag-button-play { + align-items: center; + display: flex; + gap: 8px; +} + +@media screen and (width < #{$screen-lg}) { + .m24-c-flag-cta { + margin-bottom: $spacer-xl; + } + + .m24-c-flag-button { + border-radius: 50%; + display: block; + margin-bottom: $spacer-md; + margin-inline-start: auto; + } + + .m24-c-flag-button-text { + @include visually-hidden; + } + + .m24-c-flag-media { + svg { + display: block; + margin-inline-start: auto; + } } } @@ -44,21 +105,28 @@ @media #{$mq-lg} { .m24-c-flag { @include grid; + grid-template-rows: [button-row-start] auto [button-row-end] auto; padding-bottom: $spacer-2xl; } + .m24-c-flag-button { + grid-column: 1 / -1; + grid-row: button-row; + justify-self: end; + } + .m24-c-flag-subtitle { font-size: 24px; } .m24-c-flag-media { grid-column: 10/12; - grid-row: 1/2; + grid-row-start: button-row-end; display: flex; place-content: center center; margin-bottom: 0; - img { + svg { width: 100%; max-width: 216px; } @@ -66,7 +134,7 @@ .m24-c-flag-text { grid-column: 2/9; - grid-row: 1/2 + grid-row-start: button-row-end; } .m24-c-flag-cta { @@ -86,3 +154,232 @@ .m24-c-products { background-color: $m24-color-white; } + +// static fallback +.m24-c-flag-media-static { + display: none; +} + +// When no JS +// - hide animation SVG and button +// - show static SVG +.no-js { + .m24-c-flag-button { + display: none; + } + + .m24-c-flag-media-animation { + display: none; + } + + .m24-c-flag-media-static { + display: block; + } +} + +/* +Note from Inclusive Components, "Changing labels": https://inclusive-components.design/toggle-button/ +As a rule of thumb, you should never change pressed state and label together. +If the label changes, the button has already changed state in a sense, +just not via explicit WAI-ARIA state management. +*/ +[data-animation-running="false"] { + .m24-c-flag-button-pause { + display: none; + } + + .flag-one, + .flag-two, + .flag-three, + .flag-four, + .flag-five, + .pole, + .stationary, + .wave, + .blink-bounce, + .blink-bounce .head, + .blink-bounce .eye { + animation-play-state: paused; + } +} + +[data-animation-running="true"] { + .m24-c-flag-button-play { + display: none; + } + + .flag-one, + .flag-two, + .flag-three, + .flag-four, + .flag-five, + .pole, + .stationary, + .wave, + .blink-bounce, + .blink-bounce .head, + .blink-bounce .eye { + animation-play-state: running; + } +} + +/* Common Element Styles */ +.flag, +.flag-one, +.flag-two, +.flag-three, +.flag-four, +.flag-five, +.pole, +.head, +.pole-one, +.pole-two, +.eye, +.mouth { + shape-rendering: crispEdges; + -webkit-font-smoothing: none; + -moz-osx-font-smoothing: none; +} + +/* Wave Animations Base */ +.flag-one, +.flag-two, +.flag-three, +.flag-four, +.flag-five, +.pole { + animation: 1s linear infinite; + will-change: transform; + filter: url("#dilate"); +} + +/* Flag Animation Names */ +.flag-one { animation-name: flag-one; } +.flag-two { animation-name: flag-two; } +.flag-three { animation-name: flag-three; } +.flag-four { animation-name: flag-four; } +.flag-five { animation-name: flag-five; } + +/* Shared Animation Properties */ +.stationary, +.wave, +.blink-bounce { + animation: var(--duration) var(--delay) linear infinite; + will-change: opacity; +} + +.wave, +.blink-bounce { + opacity: 0; +} + +/* Animation Names */ +.stationary { animation-name: switch-stationary; } +.wave { animation-name: switch-animation-wave; } +.blink-bounce { animation-name: switch-animation-blink-bounce; } + +/* Head & Eye Animations */ +.blink-bounce .head { + animation: bounce 10s linear infinite; + will-change: transform; +} + +.blink-bounce .eye { + animation: blink-cycle var(--duration) var(--delay) cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; + will-change: fill; +} + +/* Flag Movement Keyframes */ +@keyframes flag-one { + 0%, 15% { + transform: translate3d(0, 0, 0); + animation-timing-function: ease-in; +} + 16%, 40% { transform: translate3d(0, var(--wave-h), 0); } + 41%, 65% { transform: translate3d(0, 0, 0); } + 66%, 91% { transform: translate3d(0, calc(-1 * var(--wave-h)), 0); } + 92%, 100% { transform: translate3d(0, 0, 0); } +} + +@keyframes flag-two { + 0%, 24% { transform: translate3d(0, 0, 0); } + 25%, 49% { transform: translate3d(0, var(--wave-h), 0); } + 50%, 74% { transform: translate3d(0, 0, 0); } + 75%, 99% { transform: translate3d(0, calc(-1 * var(--wave-h)), 0); } + 100% { transform: translate3d(0, 0, 0); } +} + +@keyframes flag-three { + 0%, 7% { transform: translate3d(0, calc(-1 * var(--wave-h)), 0); } + 8%, 32% { transform: translate3d(0, 0, 0); } + 33%, 57% { transform: translate3d(0, var(--wave-h), 0); } + 58%, 82% { transform: translate3d(0, 0, 0); } + 83%, 100% { transform: translate3d(0, calc(-1 * var(--wave-h)), 0); } +} + +@keyframes flag-four { + 0%, 15% { transform: translate3d(0, calc(-1 * var(--wave-h)), 0); } + 16%, 49% { transform: translate3d(0, 0, 0); } + 50%, 65% { transform: translate3d(0, var(--wave-h), 0); } + 66%, 100% { transform: translate3d(0, 0, 0); } +} + +@keyframes flag-five { + 0%, 24% { transform: translate3d(0, calc(-1 * var(--wave-h)), 0); } + 25%, 49% { transform: translate3d(0, 0, 0); } + 50%, 74% { transform: translate3d(0, var(--wave-h), 0); } + + 75%, 100% { + transform: translate3d(0, 0, 0); + animation-timing-function: ease-out; + } +} + +/* Bounce Animation */ +@keyframes bounce { + 0%, 76% { transform: translate3d(0, 0, 0); } + 80% { transform: translate3d(0, var(--bounce-h), 0); } + 84% { transform: translate3d(0, 0, 0); } + 88% { transform: translate3d(0, var(--bounce-h), 0); } + 92% { transform: translate3d(0, 0, 0); } + 96% { transform: translate3d(0, var(--bounce-h), 0); } + 100% { transform: translate3d(0, 0, 0); } +} + +/* Blink Animation */ +@keyframes blink-cycle { + 0%, 49.9% { opacity: 1; } + + /* First blink */ + 57.4% { opacity: 1; } + 57.5% { opacity: 0; } + 57.6% { opacity: 1; } + + /* Pause */ + 57.61%, 58.2% { opacity: 1; } + + /* Second blink */ + 58.25% { opacity: 1; } + 58.35% { opacity: 0; } + 58.45% { opacity: 1; } + + /* Finish */ + 58.46%, 74.9%, 75%, 100% { opacity: 1; } +} + +/* Opacity Transitions */ +@keyframes switch-animation-wave { + 0%, 49.9% { opacity: 1; } + 50%, 100% { opacity: 0; } +} + +@keyframes switch-animation-blink-bounce { + 0%, 49.9% { opacity: 0; } + 50%, 74.9% { opacity: 1; } + 75%, 100% { opacity: 0; } +} + +@keyframes switch-stationary { + 0%, 74.9% { opacity: 0; } + 75%, 100% { opacity: 1; } +} diff --git a/media/img/home/2024/hero-symbol-white.svg b/media/img/home/2024/hero-symbol-white.svg deleted file mode 100644 index 93be3814d15..00000000000 --- a/media/img/home/2024/hero-symbol-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/media/img/m24/icon-pause.svg b/media/img/m24/icon-pause.svg new file mode 100644 index 00000000000..bd6393c733c --- /dev/null +++ b/media/img/m24/icon-pause.svg @@ -0,0 +1 @@ + diff --git a/media/img/m24/icon-play.svg b/media/img/m24/icon-play.svg new file mode 100644 index 00000000000..707ee641df0 --- /dev/null +++ b/media/img/m24/icon-play.svg @@ -0,0 +1 @@ + diff --git a/media/js/m24/animation-play-state.es6.js b/media/js/m24/animation-play-state.es6.js new file mode 100644 index 00000000000..274c661c22e --- /dev/null +++ b/media/js/m24/animation-play-state.es6.js @@ -0,0 +1,36 @@ +/* + * 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/. + */ + +const ANIMATION_RUNNING = 'data-animation-running'; + +function togglePlayState(e) { + const animationContainer = e.target.closest(`[${ANIMATION_RUNNING}]`); + if (animationContainer.getAttribute(ANIMATION_RUNNING) === 'true') { + animationContainer.setAttribute(ANIMATION_RUNNING, 'false'); + } else { + animationContainer.setAttribute(ANIMATION_RUNNING, 'true'); + } +} + +function init() { + // play animations if motion is allowed + if (window.Mozilla.Utils.allowsMotion()) { + const animationContainers = document.querySelectorAll( + `[${ANIMATION_RUNNING}]` + ); + animationContainers.forEach((container) => + container.setAttribute(ANIMATION_RUNNING, 'true') + ); + } + + // play or pause animations on button click + const playStateButtons = document.querySelectorAll('.js-animation-button'); + playStateButtons.forEach((button) => + button.addEventListener('click', (e) => togglePlayState(e)) + ); +} + +init(); diff --git a/media/static-bundles.json b/media/static-bundles.json index d7f90a58d5b..4375ca53a3d 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -1849,6 +1849,12 @@ ], "name": "monitor-banner" }, + { + "files": [ + "js/m24/animation-play-state.es6.js" + ], + "name": "m24-animation" + }, { "files": [ "js/mozorg/rise25/rise25.js" From 777e48d0d3b848ba98839e358f7365f78791fc4f Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 3 Dec 2024 11:56:27 -0500 Subject: [PATCH 02/12] Move animation strings to ui file for global use --- bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html | 4 ++-- l10n/en/mozorg/home-m24.ftl | 2 -- l10n/en/ui.ftl | 2 ++ 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html index 984ae064c28..5aa6c314e4f 100644 --- a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html +++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html @@ -7,8 +7,8 @@

{{ ftl('m24-home-welcome-to-mozilla') }}

diff --git a/l10n/en/mozorg/home-m24.ftl b/l10n/en/mozorg/home-m24.ftl index 3aa36512acc..07e87d4c1cb 100644 --- a/l10n/en/mozorg/home-m24.ftl +++ b/l10n/en/mozorg/home-m24.ftl @@ -13,8 +13,6 @@ m24-home-page-desc = Did you know? { -brand-name-mozilla } — the maker of { -b ## Intro -m24-home-pause-animation = Pause animation -m24-home-play-animation = Play animation m24-home-welcome-to-mozilla = Welcome to { -brand-name-mozilla } m24-home-from-trustworthy-tech = From trustworthy tech to policies that defend your digital rights, we put you first — always. m24-home-learn-about-us = Learn about us diff --git a/l10n/en/ui.ftl b/l10n/en/ui.ftl index 96bcbe92da6..b3c725e26ce 100644 --- a/l10n/en/ui.ftl +++ b/l10n/en/ui.ftl @@ -20,6 +20,8 @@ ui-show-all = Show All ui-hide-all = Hide All ui-learn-more = Learn more ui-view = View +ui-pause-animation = Pause animation +ui-play-animation = Play animation # An accessible label used to describe the purpose of a cross-promotional page element. ui-promo-label = Promotion From 87af09146858e7eccf6b7744ff1205b12b1a77a6 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 3 Dec 2024 12:03:01 -0500 Subject: [PATCH 03/12] Fix duplicate flag on mobile --- media/css/m24/flag.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss index 9f7f16dde3f..c71b8ab8397 100644 --- a/media/css/m24/flag.scss +++ b/media/css/m24/flag.scss @@ -32,7 +32,6 @@ --delay: 1s; // leave some space to read before introducing movement --bounce-h: 12px; --wave-h: 8px; - display: block; svg { transform: translateZ(0); @@ -88,10 +87,8 @@ } .m24-c-flag-media { - svg { - display: block; - margin-inline-start: auto; - } + width: fit-content; + margin-inline-start: auto; } } From b043a3dc47ac058926ac21f94b4b061f8272d781 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 3 Dec 2024 13:31:53 -0500 Subject: [PATCH 04/12] Feedback: reduce animation to only wave --- .../mozorg/home/includes/m24/hero.html | 13 --- media/css/m24/flag.scss | 100 +----------------- 2 files changed, 4 insertions(+), 109 deletions(-) diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html index 5aa6c314e4f..25c577e29e7 100644 --- a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html +++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html @@ -23,10 +23,6 @@

{{ ftl('m24-home-welcome-to-mozilla') }}

- - - {{ ftl('m24-home-welcome-to-mozilla') }} - - - - - - - -
diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss index c71b8ab8397..93e18f14f76 100644 --- a/media/css/m24/flag.scss +++ b/media/css/m24/flag.scss @@ -28,9 +28,7 @@ } .m24-c-flag-media { - --duration: 40s; --delay: 1s; // leave some space to read before introducing movement - --bounce-h: 12px; --wave-h: 8px; svg { @@ -189,13 +187,7 @@ just not via explicit WAI-ARIA state management. .flag-two, .flag-three, .flag-four, - .flag-five, - .pole, - .stationary, - .wave, - .blink-bounce, - .blink-bounce .head, - .blink-bounce .eye { + .flag-five { animation-play-state: paused; } } @@ -209,13 +201,7 @@ just not via explicit WAI-ARIA state management. .flag-two, .flag-three, .flag-four, - .flag-five, - .pole, - .stationary, - .wave, - .blink-bounce, - .blink-bounce .head, - .blink-bounce .eye { + .flag-five { animation-play-state: running; } } @@ -243,9 +229,8 @@ just not via explicit WAI-ARIA state management. .flag-two, .flag-three, .flag-four, -.flag-five, -.pole { - animation: 1s linear infinite; +.flag-five { + animation: 1s var(--delay) $bezier infinite; will-change: transform; filter: url("#dilate"); } @@ -257,34 +242,6 @@ just not via explicit WAI-ARIA state management. .flag-four { animation-name: flag-four; } .flag-five { animation-name: flag-five; } -/* Shared Animation Properties */ -.stationary, -.wave, -.blink-bounce { - animation: var(--duration) var(--delay) linear infinite; - will-change: opacity; -} - -.wave, -.blink-bounce { - opacity: 0; -} - -/* Animation Names */ -.stationary { animation-name: switch-stationary; } -.wave { animation-name: switch-animation-wave; } -.blink-bounce { animation-name: switch-animation-blink-bounce; } - -/* Head & Eye Animations */ -.blink-bounce .head { - animation: bounce 10s linear infinite; - will-change: transform; -} - -.blink-bounce .eye { - animation: blink-cycle var(--duration) var(--delay) cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; - will-change: fill; -} /* Flag Movement Keyframes */ @keyframes flag-one { @@ -331,52 +288,3 @@ just not via explicit WAI-ARIA state management. animation-timing-function: ease-out; } } - -/* Bounce Animation */ -@keyframes bounce { - 0%, 76% { transform: translate3d(0, 0, 0); } - 80% { transform: translate3d(0, var(--bounce-h), 0); } - 84% { transform: translate3d(0, 0, 0); } - 88% { transform: translate3d(0, var(--bounce-h), 0); } - 92% { transform: translate3d(0, 0, 0); } - 96% { transform: translate3d(0, var(--bounce-h), 0); } - 100% { transform: translate3d(0, 0, 0); } -} - -/* Blink Animation */ -@keyframes blink-cycle { - 0%, 49.9% { opacity: 1; } - - /* First blink */ - 57.4% { opacity: 1; } - 57.5% { opacity: 0; } - 57.6% { opacity: 1; } - - /* Pause */ - 57.61%, 58.2% { opacity: 1; } - - /* Second blink */ - 58.25% { opacity: 1; } - 58.35% { opacity: 0; } - 58.45% { opacity: 1; } - - /* Finish */ - 58.46%, 74.9%, 75%, 100% { opacity: 1; } -} - -/* Opacity Transitions */ -@keyframes switch-animation-wave { - 0%, 49.9% { opacity: 1; } - 50%, 100% { opacity: 0; } -} - -@keyframes switch-animation-blink-bounce { - 0%, 49.9% { opacity: 0; } - 50%, 74.9% { opacity: 1; } - 75%, 100% { opacity: 0; } -} - -@keyframes switch-stationary { - 0%, 74.9% { opacity: 0; } - 75%, 100% { opacity: 1; } -} From 48980cdb3a9b82ab45f5923f3604e7bfc156f491 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 3 Dec 2024 13:33:37 -0500 Subject: [PATCH 05/12] Feedback: update SVG to zilla green --- .../migrations/0002_auto_20241203_1102.py | 34 +++++++++++++++++++ .../templates/mozorg/home/home-m24.html | 8 +++-- .../mozorg/home/includes/m24/hero.html | 4 +-- media/css/m24/flag.scss | 7 ++-- 4 files changed, 45 insertions(+), 8 deletions(-) create mode 100644 bedrock/base/migrations/0002_auto_20241203_1102.py diff --git a/bedrock/base/migrations/0002_auto_20241203_1102.py b/bedrock/base/migrations/0002_auto_20241203_1102.py new file mode 100644 index 00000000000..6bde67d3b99 --- /dev/null +++ b/bedrock/base/migrations/0002_auto_20241203_1102.py @@ -0,0 +1,34 @@ +# 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/. + +from django.db import migrations + +from waffle.models import Switch + +# The name of the switch must be unique. +SWITCH_NAME = "M24_HERO_ANIMATION" + + +def create_switch(apps, schema_editor): + Switch.objects.get_or_create( + name=SWITCH_NAME, + defaults={"active": False}, # Set initial state, True or False. + ) + + +def remove_switch(apps, schema_editor): + Switch.objects.filter(name=SWITCH_NAME).delete() + + +class Migration(migrations.Migration): + dependencies = [ + ( + "base", + "0001_initial", + ), # Keep whatever the makemigrations command generated here. + ] + + operations = [ + migrations.RunPython(create_switch, remove_switch), + ] diff --git a/bedrock/mozorg/templates/mozorg/home/home-m24.html b/bedrock/mozorg/templates/mozorg/home/home-m24.html index 9aefde0bdf8..3083c1789aa 100644 --- a/bedrock/mozorg/templates/mozorg/home/home-m24.html +++ b/bedrock/mozorg/templates/mozorg/home/home-m24.html @@ -55,6 +55,8 @@ {% endwith %} {% endblock %} -{% block js %} - {{ js_bundle('m24-animation') }} -{% endblock %} +{% if switch('m24-hero-animation') %} + {% block js %} + {{ js_bundle('m24-animation') }} + {% endblock %} +{% endif %} diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html index 25c577e29e7..e5391c517e2 100644 --- a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html +++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html @@ -4,7 +4,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -
+
- + diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss index 93e18f14f76..752907ffd47 100644 --- a/media/css/m24/flag.scss +++ b/media/css/m24/flag.scss @@ -35,7 +35,7 @@ transform: translateZ(0); width: 100px; height: auto; - fill: $m24-color-black; // inverts to white in dark theme section + fill: $m24-color-green; // zilla green } } @@ -158,9 +158,10 @@ // When no JS // - hide animation SVG and button // - show static SVG -.no-js { +.no-js, +[data-m24-hero-animation="false"] { .m24-c-flag-button { - display: none; + visibility: hidden; // reserve space } .m24-c-flag-media-animation { From 3820b30c0346d009477ae090557fa3483136549a Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 3 Dec 2024 14:20:27 -0500 Subject: [PATCH 06/12] Add text alignment --- media/css/m24/flag.scss | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss index 752907ffd47..c59f2416ccf 100644 --- a/media/css/m24/flag.scss +++ b/media/css/m24/flag.scss @@ -40,13 +40,14 @@ } .m24-c-flag-button { + $font-size: 0.75; all: unset; background-color: $m24-color-medium-gray; color: $m24-color-white; font-family: $primary-font; - font-size: 0.75rem; + font-size: calc(#{$font-size} * 1rem); font-weight: 600; - line-height: 1; + line-height: $font-size; padding: 8px; cursor: pointer; transition: background-color $fast; @@ -68,6 +69,13 @@ gap: 8px; } +.m24-c-flag-button-pause { + .m24-c-flag-button-text { + position: relative; + top: 0.0175rem; // flex alignment isn't totally centered, so we're manually adjusting + } +} + @media screen and (width < #{$screen-lg}) { .m24-c-flag-cta { margin-bottom: $spacer-xl; @@ -155,7 +163,7 @@ display: none; } -// When no JS +// When no JS or M24_HERO_ANIMATION switch is off // - hide animation SVG and button // - show static SVG .no-js, From 4e20349022a0e63d65f640dfa16a588f1b31831e Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 3 Dec 2024 15:24:04 -0500 Subject: [PATCH 07/12] Remove migrations file to fix tests, use cli locally for switch --- .../migrations/0002_auto_20241203_1102.py | 34 ------------------- 1 file changed, 34 deletions(-) delete mode 100644 bedrock/base/migrations/0002_auto_20241203_1102.py diff --git a/bedrock/base/migrations/0002_auto_20241203_1102.py b/bedrock/base/migrations/0002_auto_20241203_1102.py deleted file mode 100644 index 6bde67d3b99..00000000000 --- a/bedrock/base/migrations/0002_auto_20241203_1102.py +++ /dev/null @@ -1,34 +0,0 @@ -# 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/. - -from django.db import migrations - -from waffle.models import Switch - -# The name of the switch must be unique. -SWITCH_NAME = "M24_HERO_ANIMATION" - - -def create_switch(apps, schema_editor): - Switch.objects.get_or_create( - name=SWITCH_NAME, - defaults={"active": False}, # Set initial state, True or False. - ) - - -def remove_switch(apps, schema_editor): - Switch.objects.filter(name=SWITCH_NAME).delete() - - -class Migration(migrations.Migration): - dependencies = [ - ( - "base", - "0001_initial", - ), # Keep whatever the makemigrations command generated here. - ] - - operations = [ - migrations.RunPython(create_switch, remove_switch), - ] From 7210c349a7319ba5e7e986f1830491512ac8b249 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 3 Dec 2024 15:37:04 -0500 Subject: [PATCH 08/12] Update button color vars --- media/css/m24/flag.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss index c59f2416ccf..417231cbef3 100644 --- a/media/css/m24/flag.scss +++ b/media/css/m24/flag.scss @@ -42,7 +42,7 @@ .m24-c-flag-button { $font-size: 0.75; all: unset; - background-color: $m24-color-medium-gray; + background-color: $m24-color-dark-mid-gray; color: $m24-color-white; font-family: $primary-font; font-size: calc(#{$font-size} * 1rem); @@ -58,7 +58,7 @@ } &:active { - background-color: $m24-color-medium-gray; + background-color: $m24-color-dark-mid-gray; } } From 78d41fe700e9b036a4fa1a2800fd22f45198c3fa Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 3 Dec 2024 17:42:35 -0500 Subject: [PATCH 09/12] Use older media query syntax for better support --- media/css/m24/flag.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss index 417231cbef3..9afb6882689 100644 --- a/media/css/m24/flag.scss +++ b/media/css/m24/flag.scss @@ -76,7 +76,8 @@ } } -@media screen and (width < #{$screen-lg}) { +// less than $screen-lg +@media screen and (max-width: 1023px) { .m24-c-flag-cta { margin-bottom: $spacer-xl; } From f7ef8a31df92caa0bf7d046c5c81b86aa2770809 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 3 Dec 2024 17:44:01 -0500 Subject: [PATCH 10/12] Remove all: unset in favour of more targeted overrides --- media/css/m24/flag.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss index 9afb6882689..687fca602d3 100644 --- a/media/css/m24/flag.scss +++ b/media/css/m24/flag.scss @@ -41,8 +41,9 @@ .m24-c-flag-button { $font-size: 0.75; - all: unset; background-color: $m24-color-dark-mid-gray; + border: none; + box-shadow: none; color: $m24-color-white; font-family: $primary-font; font-size: calc(#{$font-size} * 1rem); From 1f0ba0a82b82ee77c6e2e8847ee122064d0c775e Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Wed, 4 Dec 2024 10:32:07 -0800 Subject: [PATCH 11/12] Update media/css/m24/flag.scss --- media/css/m24/flag.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss index 687fca602d3..169f29fa8fa 100644 --- a/media/css/m24/flag.scss +++ b/media/css/m24/flag.scss @@ -20,6 +20,8 @@ .m24-c-flag-subtitle { font-size: $text-title-md; + text-wrap: balance; + text-wrap-style: balance; margin-bottom: $spacer-xl; } From cf081a07fbcee97f128fbc12ed2b3b16180ca8f8 Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Wed, 4 Dec 2024 10:37:24 -0800 Subject: [PATCH 12/12] Update media/css/m24/flag.scss Co-authored-by: Jan Brasna <1784648+janbrasna@users.noreply.github.com> --- media/css/m24/flag.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss index 169f29fa8fa..618da08fa93 100644 --- a/media/css/m24/flag.scss +++ b/media/css/m24/flag.scss @@ -79,8 +79,7 @@ } } -// less than $screen-lg -@media screen and (max-width: 1023px) { +@media screen and (max-width: #{$screen-lg - 1}) { .m24-c-flag-cta { margin-bottom: $spacer-xl; }