-
Notifications
You must be signed in to change notification settings - Fork 919
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Giving Tuesday fundraising banner (Fixes #15527)
- Loading branch information
1 parent
e775d32
commit c0bce2f
Showing
9 changed files
with
242 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| {# | ||
| 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/. | ||
| #} | ||
|
|
||
| {% extends 'includes/banners/basic.html' %} | ||
|
|
||
| {% block banner_id %}fundraising-banner{% endblock %} | ||
|
|
||
| {% block banner_class %}c-banner-fundraising{% endblock %} | ||
|
|
||
| {% set banner_title = 'Donate to Mozilla for Giving Tuesday' %} | ||
| {% set banner_tagline = 'Together we can reclaim the internet from Big Tech. Donate now.' %} | ||
| {% set banner_button = 'Donate' %} | ||
| {% set banner_ga_label = 'Donate' %} | ||
| {% set banner_link = 'https://foundation.mozilla.org/?form=gt-banner' %} | ||
|
|
||
| {% if variant == "a" %} | ||
| {% set banner_link = 'https://foundation.mozilla.org/?form=gt-banner-a' %} | ||
| {% elif variant == "b" %} | ||
| {% set banner_link = 'https://foundation.mozilla.org/?form=gt-banner-b' %} | ||
| {% set banner_button = 'Give now' %} | ||
| {% set banner_ga_label = 'Give now' %} | ||
| {% elif variant == "c" %} | ||
| {% set banner_link = 'https://foundation.mozilla.org/?form=gt-banner-c' %} | ||
| {% set banner_button = 'Contribute' %} | ||
| {% set banner_ga_label = 'Contribute' %} | ||
| {% endif %} | ||
|
|
||
| {% block banner_content %} | ||
| <div class="mzp-l-content mzp-t-content-xl"> | ||
| {{ picture( | ||
| url='img/banners/fundraiser/eoy-2024-photo-200.png', | ||
| sources=[ | ||
| { | ||
| 'media': '(min-width: 688px)', | ||
| 'srcset': { | ||
| 'img/banners/fundraiser/eoy-2024-photo-200.png': '200w', | ||
| 'img/banners/fundraiser/eoy-2024-photo-200.png': '400w', | ||
| } | ||
| }, | ||
| { | ||
| 'media': '(max-width: 687px)', | ||
| 'srcset': { | ||
| 'img/placeholder.png': 'default' | ||
| } | ||
| } | ||
| ], | ||
| optional_attributes={ | ||
| 'height': '200', | ||
| 'width': '200', | ||
| 'class': 'c-banner-media' | ||
| } | ||
| ) }} | ||
|
|
||
| <div class="c-banner-copy"> | ||
| <h2 class="c-banner-title">{{ banner_title }}</h2> | ||
| <p class="c-banner-tagline">{{ banner_tagline }}</p> | ||
| <a class="c-banner-button mzp-c-button mzp-t-lg" href="{{ banner_link }}" data-cta-text="{{ banner_ga_label }}"> | ||
| {{ banner_button }} | ||
| </a> | ||
| </div> | ||
| </div> | ||
| {% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| // 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/. | ||
|
|
||
| $font-path: '/media/protocol/fonts'; | ||
| $image-path: '/media/protocol/img'; | ||
|
|
||
| @import '~@mozilla-protocol/core/protocol/css/includes/lib'; | ||
| @import 'includes/basic'; | ||
|
|
||
| .c-banner-fundraising { | ||
| background: $color-green-20; | ||
| color: $color-black; | ||
|
|
||
| .mzp-l-content { | ||
| padding-top: $spacing-md; | ||
| padding-bottom: $spacing-md; | ||
| } | ||
|
|
||
| .c-banner-title { | ||
| color: $color-black; | ||
| display: block; | ||
| width: auto; | ||
| margin-bottom: $spacing-sm; | ||
| @include text-display-md; | ||
| } | ||
|
|
||
| .c-banner-tagline { | ||
| margin-bottom: $spacing-md; | ||
| @include text-body-md; | ||
| } | ||
|
|
||
| .c-banner-media { | ||
| display: none; | ||
| } | ||
|
|
||
| .c-banner-button { | ||
| background-color: $color-green-80; | ||
| border-color: $color-green-80; | ||
| margin: 0; | ||
| width: 100%; | ||
| @include text-body-lg; | ||
|
|
||
| &::after { | ||
| @include bidi(((content, ' ♥', '♥ '),)); | ||
| } | ||
| } | ||
|
|
||
| .c-banner-close { | ||
| background-image: url('#{$image-path}/icons/close.svg'); | ||
| } | ||
|
|
||
| @media #{$mq-md} { | ||
| .c-banner-tagline { | ||
| @include text-body-lg; | ||
| } | ||
|
|
||
| .c-banner-media { | ||
| display: block; | ||
| @include bidi(((float, right, left),)); | ||
| } | ||
|
|
||
| .c-banner-copy { | ||
| @include bidi(((padding-right, 280px, padding-left, 0),)); | ||
| } | ||
|
|
||
| .c-banner-button { | ||
| width: auto; | ||
| } | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| /* | ||
| * 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 TrafficCop from '@mozmeao/trafficcop'; | ||
| import { isApprovedToRun } from '../experiment-utils.es6'; | ||
|
|
||
| const href = window.location.href; | ||
|
|
||
| if (typeof window.dataLayer === 'undefined') { | ||
| window.dataLayer = []; | ||
| } | ||
|
|
||
| const init = () => { | ||
| if (href.indexOf('v=a') !== -1) { | ||
| window.dataLayer.push({ | ||
| event: 'experiment_view', | ||
| id: 'home-fundraiser-giving-tues-2024', | ||
| variant: 'home-fundraiser-giving-tues-2024-va' | ||
| }); | ||
| } else if (href.indexOf('v=b') !== -1) { | ||
| window.dataLayer.push({ | ||
| event: 'experiment_view', | ||
| id: 'home-fundraiser-giving-tues-2024', | ||
| variant: 'home-fundraiser-giving-tues-2024-vb' | ||
| }); | ||
| } else if (href.indexOf('v=c') !== -1) { | ||
| window.dataLayer.push({ | ||
| event: 'experiment_view', | ||
| id: 'home-fundraiser-giving-tues-2024', | ||
| variant: 'home-fundraiser-giving-tues-2024-vc' | ||
| }); | ||
| } else if (TrafficCop) { | ||
| if (isApprovedToRun()) { | ||
| const cop = new TrafficCop({ | ||
| variations: { | ||
| 'v=a': 33, | ||
| 'v=b': 33, | ||
| 'v=c': 33 | ||
| } | ||
| }); | ||
| cop.init(); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| init(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| /* | ||
| * 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 MozBanner from './mozilla-banner.es6'; | ||
|
|
||
| function onLoad() { | ||
| MozBanner.init('fundraising-banner', true); | ||
| } | ||
|
|
||
| window.Mozilla.run(onLoad); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters