mozilla
/
bedrock
зеркало из https://github.com/mozilla/bedrock.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Update to Protocol v.19.0.0 (#14084) 

* update old call-out instances to new callout
* removed deprecated internships page
* updated newsletter component
* updated instances of call_out macro to callout
* added classname to callout compact for styling
* added analytics events in newsletter
This commit is contained in:
Reem H 2024-02-15 05:15:25 +11:00 коммит произвёл GitHub
Родитель a564fc1271
Коммит 491ba46c67
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: B5690EEEBB952194
100 изменённых файлов: 566 добавлений и 1387 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

47
bedrock/base/templates/macros-protocol.html
Просмотреть файл

@ -114,21 +114,28 @@
{#
Call Out: https://protocol.mozilla.org/components/detail/call-out--default.html
HTML import: {% from "macros-protocol.html" import call_out with context %}
CSS bundle: {% block page_css %} {{ css_bundle('protocol-call-out') }} {% endblock %}
HTML import: {% from "macros-protocol.html" import callout with context %}
CSS bundle: {% block page_css %} {{ css_bundle('protocol-callout') }} {% endblock %}
Macro parameters:
title (Required): String indicating heading text (usually a translation id wrapped in ftl function).
desc: String indicating paragraph text (usually a translation id wrapped in ftl function).
class: String adding class(es) to the section tag.
include_cta: Boolean indicating whether or not to include the body of the macro call (usually a mix of text and html).
heading_level: Number indicating heading level for title text. Should be based on semantic meaning, not presentational styling.
brand: Boolean indicating whether or not to display a Mozilla product logo or wordmark.
brand_product: String indicating what Mozilla product is to be displayed.
brand_type: String for choosing whether a logo or a wordmark is to be displayed.
brand_size: String to indicate size of the logo or wordmark to be added.
brand_text: String naming the branding's product. Used for accessibility purposes. Is optional as it depends on if the logo/wordmark used is for decorative purposes or not.
content_width: String to declare size of the container using Protocol's content width classes (i.e. mzp-t-content-md / mzp-t-content-lg). When using this macro, only declare the T-shirt sizing strings we have in place (i.e. 'sm', 'md', 'lg', 'xl'). Content width of the Callout container's macro is defaulted to mzp-t-content-lg.
#}
{% macro call_out(title, desc=None, class=None, include_cta=False, heading_level=2) -%}
<section class="mzp-c-call-out {% if class %}{{ class }}{% endif %}">
<div class="mzp-l-content">
<h{{ heading_level }} class="mzp-c-call-out-title">{{ title }}</h{{ heading_level }}>
{% macro callout(title, desc=None, class=None, include_cta=False, heading_level=2, brand=False, brand_product=None, brand_type=None, brand_size=None, brand_text=None, content_width=None) -%}
<section class="mzp-c-callout {% if class %}{{ class }}{% endif %}">
<div class="mzp-l-content {% if content_width %}mzp-t-content-{{content_width}} {% else %} mzp-t-content-lg {% endif %}">
{% if brand %}<div class="mzp-t-callout-brand mzp-c-{{ brand_type }} mzp-t-{{ brand_type }}-{{ brand_size }} mzp-t-product-{{ brand_product }}">{{ brand_text }}</div>{% endif %}
<h{{ heading_level }} class="mzp-c-callout-title">{{ title }}</h{{ heading_level }}>
{% if desc %}
<p class="mzp-c-call-out-desc">{{ desc }}</p>
<p class="mzp-c-callout-desc">{{ desc }}</p>
{% endif %}
{% if include_cta %}
{{ caller() }}
@ -139,28 +146,30 @@
{#
Call Out (compact): https://protocol.mozilla.org/components/detail/compact-call-out--default.html
HTML import: {% from "macros-protocol.html" import call_out with context %}
CSS bundle: {% block page_css %} {{ css_bundle('protocol-call-out') }} {% endblock %}
Call Out (compact): https://protocol.mozilla.org/components/detail/compact-callout--default.html
HTML import: {% from "macros-protocol.html" import callout with context %}
CSS bundle: {% block page_css %} {{ css_bundle('protocol-callout') }} {% endblock %}
Marco Parameters:
title (Required): String indicating heading text (usually a translation id wrapped in ftl function).
desc: String indicating paragraph text (usually a translation id wrapped in ftl function).
class: tring adding class(es) to the section tag.
heading_level: Number indicating heading level for title text. Should be based on semantic meaning, not presentational styling.
#}
{% macro call_out_compact(title, desc=None, class=None, heading_level=2) -%}
<section class="mzp-c-call-out-compact {% if class %}{{ class }}{% endif %}">
<div class="mzp-l-content">
<div class="mzp-c-call-out-content">
<div class="mzp-c-call-out-container">
<h{{ heading_level }} class="mzp-c-call-out-title">{{ title }}</h{{ heading_level }}>
{% macro callout_compact(title, desc=None, class=None, heading_level=2, brand=False, brand_product=None, brand_type=None, brand_size=None, brand_text=None) -%}
<section class="mzp-c-callout mzp-l-compact {% if class %}{{ class }}{% endif %}">
<div class="mzp-l-content mzp-t-content-lg">
<div class="mzp-c-callout-content {% if brand %}mzp-c-callout-content-has-brand{% endif %}">
{% if brand %}<div class="mzp-t-callout-compact-brand mzp-c-{{ brand_type }} mzp-t-{{ brand_type }}-{{ brand_size }} mzp-t-product-{{ brand_product }}">{{ brand_text }}</div>{% endif %}
<div class="mzp-c-callout-container">
<h{{ heading_level }} class="mzp-c-callout-title">{{ title }}</h{{ heading_level }}>
{% if desc %}
<p class="mzp-c-call-out-desc">{{ desc }}</p>
<p class="mzp-c-callout-desc">{{ desc }}</p>
{% endif %}
</div>
</div>
<div class="mzp-c-call-out-cta">
<div class="mzp-c-call-out-cta-container">
<div class="mzp-c-callout-cta">
<div class="mzp-c-callout-cta-container">
{{ caller() }}
</div>
</div>

240
bedrock/careers/templates/careers/internships.html
Просмотреть файл

@ -1,240 +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/.
#}
{% extends "careers/base.html" %}
{% block page_title %}Mozilla Careers — Experience an internship at Mozilla{% endblock %}
{% block page_desc %}Interns at Mozilla work alongside industry leaders on meaningful projects like online privacy protection.{% endblock %}
{% block body_class %}internships-page{% endblock %}
{% block careers_content %}
<section class="mzp-l-content c-hero mzp-t-dark">
<div class="c-hero-body">
<h1 class="c-hero-title">Make an Impact</h1>
<div class="c-hero-desc">
<p>Ready to work on meaningful projects that will reshape privacy and safety on the internet? Mozilla is the
right spot for you.</p>
</div>
<p class="c-hero-cta">
<a class="mzp-c-button mzp-t-dark" href="{{ url('careers.listings')|urlparams(position_type='Intern') }}">Apply
for an internship</a>
</p>
</div>
</section>
<section class="l-internships-section">
<div class="mzp-l-content c-section-heading">
<h2>What to Expect</h2>
<p>Besides working alongside the brightest and kindest minds— here’s what else you’ll do.</p>
</div>
<div class="mzp-l-content mzp-l-card-half">
<div class="mzp-c-card mzp-c-card-medium">
<div class="mzp-c-card-content">
<h2 class="mzp-c-card-title">Contribute to important projects</h2>
<div class="mzp-c-card-desc">
<p>Working alongside fellow Mozillians, you'll be hands-on and all-in on projects. You’ll even have
opportunities to meet with leaders across Mozilla and Pocket.</p>
</div>
</div>
</div>
<div class="mzp-c-card mzp-c-card-medium mzp-has-aspect-16-9">
<div class="mzp-c-card-media-wrapper">
<img src="{{ static('img/careers/internships/important-projects.jpg') }}"
srcset="{{ static('img/careers/internships/important-projects-high-res.jpg') }} 1.5x"
alt=""
class="mzp-c-card-image"
width="480"
height="320">
</div>
</div>
</div>
<div class="mzp-l-content mzp-l-card-half">
<div class="mzp-c-card mzp-c-card-medium mzp-has-aspect-16-9">
<div class="mzp-c-card-media-wrapper">
<img src="{{ static('img/careers/internships/team.jpg') }}"
srcset="{{ static('img/careers/internships/team-high-res.jpg') }} 1.5x"
alt=""
class="mzp-c-card-image"
width="480"
height="270">
</div>
</div>
<div class="mzp-c-card mzp-c-card-medium">
<div class="mzp-c-card-content">
<h2 class="mzp-c-card-title">Become part of the team</h2>
<div class="mzp-c-card-desc">
<p>At Mozilla, interns are essential members of our teams and work on initiatives that have true impact.</p>
</div>
</div>
</div>
</div>
<div class="mzp-l-content mzp-l-card-half">
<div class="mzp-c-card mzp-c-card-medium">
<div class="mzp-c-card-content">
<h2 class="mzp-c-card-title">Gain a mentor</h2>
<div class="mzp-c-card-desc">
<p>You'll be mentored by a teammate, who will answer your questions and provide 1-on-1 support.</p>
</div>
</div>
</div>
<div class="mzp-c-card mzp-c-card-medium mzp-has-aspect-16-9">
<div class="mzp-c-card-media-wrapper">
<img src="{{ static('img/careers/internships/mentor.jpg') }}"
srcset="{{ static('img/careers/internships/mentor-high-res.jpg') }} 1.5x"
alt=""
class="mzp-c-card-image"
width="480"
height="320">
</div>
</div>
</div>
<div class="mzp-l-content mzp-l-card-half">
<div class="mzp-c-card mzp-c-card-medium mzp-has-aspect-16-9">
<div class="mzp-c-card-media-wrapper">
<img src="{{ static('img/careers/internships/benefits.jpg') }}"
srcset="{{ static('img/careers/internships/benefits-high-res.jpg') }} 1.5x"
alt=""
class="mzp-c-card-image"
width="480"
height="320">
</div>
</div>
<div class="mzp-c-card mzp-c-card-medium">
<div class="mzp-c-card-content">
<h2 class="mzp-c-card-title">Enjoy the benefits</h2>
<div class="mzp-c-card-desc">
<p>You’ll receive competitive pay, housing, transportation to/from one of our global internship locations,
attendance at our All Hands, and more.</p>
</div>
<a href="https://blog.mozilla.org/careers/make-your-mark/?utm_source=www.mozilla.org"
class="mzp-c-cta-link">Learn more</a>
</div>
</div>
</div>
<div class="mzp-l-content mzp-l-card-half">
<div class="mzp-c-card mzp-c-card-medium">
<div class="mzp-c-card-content">
<h2 class="mzp-c-card-title">It’s not all work</h2>
<div class="mzp-c-card-desc">
<p>Get to know your fellow interns with several Mozilla-sponsored outings.</p>
</div>
</div>
</div>
<div class="mzp-c-card mzp-c-card-medium mzp-has-aspect-16-9">
<div class="mzp-c-card-media-wrapper">
<img src="{{ static('img/careers/internships/work.jpg') }}"
srcset="{{ static('img/careers/internships/work-high-res.jpg') }} 1.5x"
alt=""
class="mzp-c-card-image"
width="480"
height="270">
</div>
</div>
<div class="mzp-l-content centered">
<a class="mzp-c-button" href="{{ url('careers.listings')|urlparams(position_type='Intern') }}">Apply for an
internship</a>
</div>
</div>
</section>
<section class="internships-grey-section">
<div class="l-internships-apply mzp-l-content c-section-heading">
<h2>Application process</h2>
<p>Invest in your future and the future of internet privacy with a Mozilla internship. We hire on a rolling basis
from September through March, so please apply early!</p>
</div>
<div class="l-internships-apply mzp-l-content mzp-l-card-half">
<div class="mzp-c-card-picto">
<div class="mzp-c-card-picto-content" id="step-1">
<h2 class="mzp-c-card-picto-title">Step 1</h2>
<p class="mzp-c-card-picto-desc">Submit your application.</p>
</div>
</div>
<div class="mzp-c-card-picto">
<div class="mzp-c-card-picto-content" id="step-2">
<h2 class="mzp-c-card-picto-title">Step 2</h2>
<p class="mzp-c-card-picto-desc">Coding challenge or take home assignment.</p>
</div>
</div>
</div>
<div class="l-internships-apply mzp-l-content mzp-l-card-half">
<div class="mzp-c-card-picto">
<div class="mzp-c-card-picto-content" id="step-3">
<h2 class="mzp-c-card-picto-title">Step 3</h2>
<p class="mzp-c-card-picto-desc">Team and hiring manager interviews.</p>
</div>
</div>
<div class="mzp-c-card-picto">
<div class="mzp-c-card-picto-content" id="step-4">
<h2 class="mzp-c-card-picto-title">Step 4</h2>
<p class="mzp-c-card-picto-desc">Accept your offer!</p>
</div>
</div>
</div>
<div class="mzp-l-content centered">
<a class="mzp-c-button" href="{{ url('careers.listings')|urlparams(position_type='Intern') }}">Apply for an
internship</a>
</div>
</section>
<section class="l-internships-section">
<div class="mzp-l-content c-section-heading">
<h2>Meet some of our past Mozilla interns</h2>
<p>Hear what they have to say about their experience.</p>
</div>
<div class="mzp-l-card-third mzp-l-content">
<div class="mzp-c-card-picto">
<div class="mzp-c-card-picto-content" id="quote-1">
<blockquote class="mzp-c-card-picto-title">
“This summer feels like the start of an even longer-term collaboration.”
</blockquote>
<cite>— Julia Cambre</cite>
<p class="mzp-c-card-picto-desc">
CS PhD student at Carnegie Mellon University<br>
Mozilla Project: Speech and Voice Technology
</p>
</div>
</div>
<div class="mzp-c-card-picto">
<div class="mzp-c-card-picto-content" id="quote-2">
<blockquote class="mzp-c-card-picto-title">
<p>“I’m surprised at how down-to-earth and helpful people are at Mozilla.” </p>
</blockquote>
<cite>— Abdoulaye Oumar Ly</cite>
<p class="mzp-c-card-picto-desc">
CS Graduate student at Université de Moncton<br>
Mozilla Project: Fission (site isolation)
</p>
</div>
</div>
<div class="mzp-c-card-picto">
<div class="mzp-c-card-picto-content" id="quote-3">
<blockquote class="mzp-c-card-picto-title">
<p>“It’s been really interesting to see how people consider something from different angles.”</p>
</blockquote>
<cite>— Maliha Islam</cite>
<p class="mzp-c-card-picto-desc">
ECE Undergratuate student at University of Toronto<br>
Mozilla Project: Color Accessibility: Firefox Developer Tools
</p>
</div>
</div>
</div>
<div class="mzp-l-content centered">
<a class="mzp-c-button" href="{{ url('careers.listings')|urlparams(position_type='Intern') }}">Apply for an
internship</a>
</div>
</section>
{% endblock %}

8
bedrock/careers/templates/careers/position.html
Просмотреть файл

@ -68,10 +68,10 @@
</section>
</div>
<section id="why" class="mzp-c-call-out">
<div class="mzp-l-content">
<h2 class="mzp-c-call-out-title">Why Mozilla?</h2>
<p class="mzp-c-call-out-desc">
<section id="why" class="mzp-c-callout">
<div class="mzp-l-content mzp-t-content-md">
<h2 class="mzp-c-callout-title">Why Mozilla?</h2>
<p class="mzp-c-callout-desc">
At Mozilla, we’re serving humanity—by maintaining a safe, open internet—while also
helping the individual humans employed here to reach their personal and
professional goals. With a relatively small team serving hundreds of millions of

4
bedrock/careers/views.py
Просмотреть файл

@ -57,10 +57,6 @@ class LocationsView(L10nTemplateView):
template_name = "careers/locations.html"
class InternshipsView(L10nTemplateView):
template_name = "careers/internships.html"
class BenefitsView(L10nTemplateView):
template_name = "careers/benefits.html"

4
bedrock/contentful/templates/includes/contentful/all.html
Просмотреть файл

@ -5,12 +5,12 @@
#}
{% from "macros-protocol.html" import call_out_compact, card, split, picto with context %}
{% from "macros-protocol.html" import callout_compact, card, split, picto with context %}
{% for entry in entries -%}
{% if entry.component == 'callout' %}
{% call call_out_compact(
{% call callout_compact(
title=entry.title,
desc=entry.body|external_html,
class=entry.theme_class + ' ' + entry.product_class,

12
bedrock/firefox/templates/firefox/browsers/best-browser.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out_compact with context %}
{% from "macros-protocol.html" import callout_compact with context %}
{% extends "firefox/base/base-protocol.html" %}
@ -16,7 +16,7 @@
{% block page_css %}
{{ css_bundle('protocol-article') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('best-browser') }}
{% endblock %}
@ -118,9 +118,13 @@
</article>
</div>
{% call call_out_compact(
{% call callout_compact(
title=ftl('best-browser-take-control-of-your'),
class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark'
class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark',
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg',
) %}
<div class="download-firefox">
{{ download_firefox(dom_id='safebrowser-bottom-download', download_location='secondary cta') }}

6
bedrock/firefox/templates/firefox/browsers/browser-history.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out_compact with context %}
{% from "macros-protocol.html" import callout_compact with context %}
{% extends "firefox/base/base-protocol.html" %}
@ -15,7 +15,7 @@
{% endblock %}
{% block page_css %}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-article') }}
{{ css_bundle('browser-history') }}
{% endblock %}
@ -110,7 +110,7 @@
</article>
</div>
{% call call_out_compact(
{% call callout_compact(
title=ftl('browser-history-take-control-of'),
class='mzp-t-product-firefox mzp-t-firefox'
) %}

12
bedrock/firefox/templates/firefox/browsers/incognito-browser.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out_compact with context %}
{% from "macros-protocol.html" import callout_compact with context %}
{% extends "firefox/base/base-protocol.html" %}
@ -15,7 +15,7 @@
{% endblock %}
{% block page_css %}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-article') }}
{{ css_bundle('incognito-browser') }}
{% endblock %}
@ -187,9 +187,13 @@
</article>
</div>
{% call call_out_compact(
{% call callout_compact(
title='Take control of your browser.',
class='mzp-t-product-firefox mzp-t-firefox'
class='mzp-t-product-firefox mzp-t-firefox mzp-t-background-secondary',
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg',
) %}
<div class="download-firefox">
{{ download_firefox_thanks(dom_id='download-button-secondary', download_location='secondary') }}

3
bedrock/firefox/templates/firefox/browsers/mobile/android.html
Просмотреть файл

@ -5,7 +5,7 @@
#}
{% from "macros.html" import google_play_button with context %}
{% from "macros-protocol.html" import split, call_out_compact with context %}
{% from "macros-protocol.html" import split with context %}
{% extends "firefox/base/base-protocol.html" %}
@ -15,7 +15,6 @@
{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('firefox-browsers-mobile') }}
{% if show_firefox_app_store_banner %}

3
bedrock/firefox/templates/firefox/browsers/mobile/focus.html
Просмотреть файл

@ -5,7 +5,7 @@
#}
{% from "macros.html" import google_play_button, apple_app_store_button with context %}
{% from "macros-protocol.html" import split, call_out_compact with context %}
{% from "macros-protocol.html" import split with context %}
{% extends "firefox/base/base-protocol.html" %}
@ -21,7 +21,6 @@
{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('firefox-browsers-mobile') }}
{% if show_firefox_app_store_banner %}

3
bedrock/firefox/templates/firefox/browsers/mobile/ios.html
Просмотреть файл

@ -5,7 +5,7 @@
#}
{% from "macros.html" import apple_app_store_button with context %}
{% from "macros-protocol.html" import split, call_out_compact with context %}
{% from "macros-protocol.html" import split with context %}
{% extends "firefox/base/base-protocol.html" %}
@ -15,7 +15,6 @@
{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('firefox-browsers-mobile') }}
{% if show_firefox_app_store_banner %}

12
bedrock/firefox/templates/firefox/browsers/update-browser.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out_compact with context %}
{% from "macros-protocol.html" import callout_compact with context %}
{% extends "firefox/base/base-protocol.html" %}
@ -15,7 +15,7 @@
{% endblock %}
{% block page_css %}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-article') }}
{{ css_bundle('update-browser') }}
{% endblock %}
@ -76,9 +76,13 @@
</article>
</div>
{% call call_out_compact(
{% call callout_compact(
title='Take control of your browser.',
class='mzp-t-product-firefox mzp-t-firefox'
class='mzp-t-product-firefox mzp-t-firefox mzp-t-background-secondary',
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg',
) %}
<div class="download-firefox">
{{ download_firefox_thanks(dom_id='download-button-secondary', download_location='secondary') }}

14
bedrock/firefox/templates/firefox/browsers/windows-64-bit.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out_compact, hero with context %}
{% from "macros-protocol.html" import callout_compact, hero with context %}
{% from "firefox/includes/macros.html" import firefox_download_desktop_button_windows with context %}
{% extends "firefox/base/base-protocol.html" %}
@ -16,7 +16,7 @@
{% endblock %}
{% block page_css %}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-article') }}
{{ css_bundle('windows-64-bit') }}
{% endblock %}
@ -73,9 +73,13 @@
</article>
</div>
{% call call_out_compact(
title=ftl('windows-64-bit-take-control-of-your'),
class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark'
{% call callout_compact(
title=ftl('windows-64-bit-take-control-of-your'),
class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark',
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg',
) %}
<div class="download-firefox">
{{ firefox_download_desktop_button_windows(cta_copy=ftl('windows-64-bit-download-firefox', fallback='download-button-download-firefox'), id='win64-bottom-download', build='64', position='secondary cta') }}

16
bedrock/firefox/templates/firefox/channel/android.html
Просмотреть файл

@ -21,10 +21,14 @@
{% block channels %}
<section id="beta" class="mzp-is-anchor-link">
{% call call_out_compact(
{% call callout_compact(
title=ftl('firefox-channel-beta'),
desc=ftl('firefox-channel-try-the-latest-android-features'),
class='mzp-t-product-beta mzp-t-firefox') %}
class='mzp-t-product-beta mzp-t-firefox',
brand=True,
brand_product='beta',
brand_type='logo',
brand_size='xl') %}
{{ download_firefox('beta', platform='android', alt_copy=ftl('download-button-download'), dom_id="android-beta-download") }}
{% endcall %}
@ -52,10 +56,14 @@
</section>
<section id="nightly" class="mzp-is-anchor-link">
{% call call_out_compact(
{% call callout_compact(
title=ftl('firefox-channel-nightly'),
desc=ftl('firefox-channel-check-out-new-android-features'),
class='mzp-t-product-nightly mzp-t-firefox') %}
class='mzp-t-product-nightly mzp-t-firefox',
brand=True,
brand_product='nightly',
brand_type='logo',
brand_size='xl') %}
{{ download_firefox('nightly', platform='android', alt_copy=ftl('download-button-download'), dom_id="android-nightly-download") }}
{% endcall %}

14
bedrock/firefox/templates/firefox/channel/base.html
Просмотреть файл

@ -7,14 +7,14 @@
{% extends "firefox/base/base-protocol.html" %}
{% from "macros.html" import sub_nav with context %}
{% from "macros-protocol.html" import call_out, call_out_compact, picto with context %}
{% from "macros-protocol.html" import callout, callout_compact, picto with context %}
{% block page_og_title %}{{ self.page_title() }}{% endblock %}
{% block page_css %}
{{ css_bundle('protocol-picto') }}
{{ css_bundle('protocol-newsletter') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('firefox_channel') }}
{% endblock %}
@ -49,12 +49,16 @@
{% block content %}
<main>
{% call call_out(
{% call callout(
title=ftl('firefox-channel-take-a-browse-on-the-wild-side'),
desc=ftl('firefox-channel-be-among-the-first-to-explore'),
class='mzp-t-hero mzp-t-firefox mzp-t-product-firefox',
class='mzp-t-hero mzp-t-firefox mzp-t-product-firefox mzp-t-background-secondary',
include_cta=False,
heading_level=1) %}
heading_level=1,
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='xl') %}
{% endcall %}
{% block channels %}{% endblock %}

24
bedrock/firefox/templates/firefox/channel/desktop.html
Просмотреть файл

@ -18,10 +18,14 @@
{% block channels %}
<section id="beta" class="mzp-is-anchor-link">
{% call call_out_compact(
{% call callout_compact(
title=ftl('firefox-channel-beta'),
desc=ftl('firefox-channel-test-about-to-be-released'),
class='mzp-t-product-beta mzp-t-firefox') %}
class='mzp-t-product-beta mzp-t-firefox',
brand=True,
brand_product='beta',
brand_type='logo',
brand_size='xl') %}
{{ download_firefox('beta', platform='desktop', force_direct=True, force_full_installer=True, alt_copy=ftl('download-button-download'), dom_id="desktop-beta-download") }}
{% endcall %}
@ -50,10 +54,14 @@
</section>
<section id="developer" class="mzp-is-anchor-link">
{% call call_out_compact(
{% call callout_compact(
title=ftl('firefox-channel-developer-edition'),
desc=ftl('firefox-channel-build-test-scale-and-more'),
class='mzp-t-product-developer mzp-t-firefox') %}
class='mzp-t-product-developer mzp-t-firefox',
brand=True,
brand_product='developer',
brand_type='logo',
brand_size='xl') %}
{{ download_firefox('alpha', platform='desktop', force_direct=True, alt_copy=ftl('download-button-download'), dom_id="desktop-developer-download") }}
{% endcall %}
@ -81,10 +89,14 @@
</section>
<section id="nightly" class="mzp-is-anchor-link">
{% call call_out_compact(
{% call callout_compact(
title=ftl('firefox-channel-nightly'),
desc=ftl('firefox-channel-get-a-sneak-peek-at-our', fallback='firefox-channel-test-brand-new-features'),
class='mzp-t-product-nightly mzp-t-firefox') %}
class='mzp-t-product-nightly mzp-t-firefox',
brand=True,
brand_product='nightly',
brand_type='logo',
brand_size='xl') %}
{{ download_firefox('nightly', platform='desktop', force_direct=True, alt_copy=ftl('download-button-download'), dom_id="desktop-nightly-download") }}
{% endcall %}

8
bedrock/firefox/templates/firefox/channel/ios.html
Просмотреть файл

@ -18,10 +18,14 @@
{% block channels %}
<section id="testflight" class="mzp-is-anchor-link">
{% call call_out_compact(
{% call callout_compact(
title=ftl('firefox-channel-test-flight'),
desc=ftl('firefox-channel-test-beta-versions-of-firefox-ios'),
class='mzp-t-product-beta mzp-t-firefox') %}
class='mzp-t-product-beta mzp-t-firefox',
brand=True,
brand_product='beta',
brand_type='logo',
brand_size='xl') %}
<a href="{{ url('firefox.ios.testflight') }}" class="mzp-c-button mzp-t-product testflight-cta">{{ ftl('firefox-channel-sign-up-now') }}</a>
<small class="learn-more">

3
bedrock/firefox/templates/firefox/enterprise/index.html
Просмотреть файл

@ -6,14 +6,13 @@
{% extends "firefox/base/base-protocol.html" %}
{% from "macros-protocol.html" import call_out_compact, picto, split with context %}
{% from "macros-protocol.html" import picto, split with context %}
{% block page_title_full %}{{ ftl('firefox-enterprise-get-firefox-for-your-enterprise-with') }}{% endblock %}
{% block page_desc %}{{ ftl('firefox-enterprise-get-unmatched-data-protection') }}{% endblock %}
{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-picto') }}
{{ css_bundle('firefox-enterprise') }}
{% endblock %}

12
bedrock/firefox/templates/firefox/facebookcontainer/index.html
Просмотреть файл

@ -5,7 +5,7 @@
#}
{% from "macros.html" import google_play_button, apple_app_store_button with context %}
{% from "macros-protocol.html" import split, call_out_compact with context %}
{% from "macros-protocol.html" import split, callout_compact with context %}
{% extends "firefox/base/base-protocol.html" %}
@ -17,7 +17,7 @@
{% block page_css %}
{{ css_bundle('protocol-split')}}
{{ css_bundle('protocol-card')}}
{{ css_bundle('protocol-call-out')}}
{{ css_bundle('protocol-callout')}}
{{ css_bundle('firefox_facebook_container') }}
{% endblock %}
@ -83,10 +83,14 @@
</section>
<section class="firefox-cta">
{% call call_out_compact(
{% call callout_compact(
title=ftl('facebook-container-browse-freely-with-firefox'),
class='mzp-t-dark',
heading_level=2)
heading_level=2,
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg')
%}
{{ download_firefox(alt_copy=ftl('download-button-download-now'), dom_id="download-firefox-today") }}
{% endcall %}

4
bedrock/firefox/templates/firefox/features/index.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from 'macros-protocol.html' import card, call_out %}
{% from 'macros-protocol.html' import card, callout %}
{% extends "firefox/base/base-protocol.html" %}
@ -33,7 +33,7 @@
{% block body_class %}features-index{% endblock %}
{% block content %}
{{ call_out (
{{ callout (
title=self.page_title(),
desc=self.page_desc(),
class='c-feature-header mzp-t-content-md'

24
bedrock/firefox/templates/firefox/features/tips/tips.html
Просмотреть файл

@ -8,7 +8,7 @@
{% block page_image %}{{ static('img/firefox/features/tips/tips-and-tools.png') }}{% endblock %}
{% from "macros-protocol.html" import split, call_out, zap, card, call_out_compact with context %}
{% from "macros-protocol.html" import split, callout, zap, card, callout_compact with context %}
{% block page_title %}Firefox Tips and Tools{% endblock %}
{% block page_desc %}Our favorite Firefox tips, tricks and nerd-friendly features to help you get the most of your time online – it’s kind of like our version of a secret menu.{% endblock %}
@ -18,7 +18,7 @@
{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('firefox_tips') }}
{% endblock %}
@ -213,20 +213,28 @@
)}}
</div>
{% call call_out(
{% call callout(
title='Available now for desktop and mobile',
heading_level=3,
class='mzp-t-product-firefox',
include_cta=True
class='mzp-t-product-firefox mzp-t-background-secondary',
include_cta=True,
brand=True,
brand_type='logo',
brand_product='firefox',
brand_size='lg'
) %}
{{ download_firefox_thanks(dom_id='tips-callout-download', download_location='secondary') }}
{% endcall %}
</section>
{% call call_out_compact(
{% call callout_compact(
title='The account that protects you rather than profits off you.',
class='mzp-t-product-family mzp-t-firefox mzp-t-dark hide-from-legacy-ie',
heading_level=3
class='mzp-t-product-family mzp-t-firefox mzp-t-background-tertiary hide-from-legacy-ie',
heading_level=3,
brand=True,
brand_type='logo',
brand_product='mozilla',
brand_size='lg'
) %}
<a href="{{ url('firefox.accounts') }}" class="mzp-c-button mzp-t-product mzp-t-dark" id="fxa-learn-secondary">{{ ftl('ui-learn-more') }}</a>
{% endcall %}

2
bedrock/firefox/templates/firefox/home/index-master.html
Просмотреть файл

@ -6,7 +6,7 @@
{% extends "firefox/base/base-protocol.html" %}
{% from "macros-protocol.html" import call_out, call_out_compact, split with context %}
{% from "macros-protocol.html" import callout, callout_compact, split with context %}
{% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %}

10
bedrock/firefox/templates/firefox/installer-help.html
Просмотреть файл

@ -5,7 +5,7 @@
#}
{% extends "/firefox/base/base-protocol.html" %}
{% from "macros-protocol.html" import call_out with context %}
{% from "macros-protocol.html" import callout with context %}
{# "noindex" pages should not have the canonical or hreflang tags: bug 1442331 #}
{% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}
@ -16,7 +16,7 @@
{% block page_css %}
{{ css_bundle('protocol-card') }}
{{ css_bundle('installer_help') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{% endblock %}
{% block site_header %}
@ -43,10 +43,10 @@
{% block content %}
<main class="mzp-l-content">
<section class="mzp-c-call-out mzp-t-hero installer-call-out">
<section class="mzp-c-callout mzp-t-hero installer-callout">
<div class="mzp-l-content">
<h1 class="mzp-c-call-out-title">{{ ftl('installer-help-page-title') }}</h1>
<p class="mzp-c-call-out-desc">
<h1 class="mzp-c-callout-title">{{ ftl('installer-help-page-title') }}</h1>
<p class="mzp-c-callout-desc">
{{ ftl('installer-help-main-tagline') }}
<span>{{ call_out_desc }}</span>
</p>

12
bedrock/firefox/templates/firefox/more/misinformation.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out_compact, split, picto with context %}
{% from "macros-protocol.html" import callout_compact, split, picto with context %}
{% extends "firefox/base/base-protocol.html" %}
@ -13,7 +13,7 @@
{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-picto') }}
{{ css_bundle('misinformation') }}
{% endblock %}
@ -190,9 +190,13 @@
</article>
{% call call_out_compact(
{% call callout_compact(
title=ftl('misinformation-designed-to-protect'),
class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark'
class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark',
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg',
) %}
<div class="download-firefox">
{{ download_firefox(dom_id='misinformation-footer-download', download_location='secondary cta') }}

10
bedrock/firefox/templates/firefox/new/basic/thanks.html
Просмотреть файл

@ -14,7 +14,7 @@
{% block extrahead %}
{{ super() }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-emphasis-box') }}
{{ css_bundle('firefox_new_thanks') }}
{% endblock %}
@ -39,13 +39,13 @@
</div>
</div>
<section class="mzp-c-call-out mzp-t-product-firefox">
<section class="mzp-c-callout mzp-t-product-firefox">
<div class="mzp-l-content">
<h1 class="mzp-c-call-out-title show-windows show-mac show-else">{{ ftl('firefox-new-firefox-is-more-than-a-browser') }}</h1>
<h1 class="mzp-c-callout-title show-windows show-mac show-else">{{ ftl('firefox-new-firefox-is-more-than-a-browser') }}</h1>
<h1 class="mzp-c-call-out-title show-linux">{{ ftl('firefox-new-download-almost-there') }}<br>{{ ftl('firefox-new-download-select-linux') }}</h1>
<h1 class="mzp-c-callout-title show-linux">{{ ftl('firefox-new-download-almost-there') }}<br>{{ ftl('firefox-new-download-select-linux') }}</h1>
<h1 class="mzp-c-call-out-title show-unknown">{{ ftl('firefox-new-download-interrupted') }}</h1>
<h1 class="mzp-c-callout-title show-unknown">{{ ftl('firefox-new-download-interrupted') }}</h1>
{% if ftl_has_messages('firefox-new-if-you-see-a-prompt', 'firefox-new-visit-support-for-more') %}
<aside class="c-windows-disclaimer mzp-c-emphasis-box show-windows-10-plus">

1
bedrock/firefox/templates/firefox/new/desktop/thanks.html
Просмотреть файл

@ -14,7 +14,6 @@
{% block extrahead %}
{{ super() }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-emphasis-box') }}
{{ css_bundle('firefox_desktop_download_thanks') }}

12
bedrock/firefox/templates/firefox/nightly/firstrun.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out, picto with context %}
{% from "macros-protocol.html" import callout, picto with context %}
{% extends "/firefox/base/base-protocol.html" %}
@ -13,7 +13,7 @@
{% block page_css %}
{{ css_bundle('protocol-picto') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('nightly_firstrun') }}
{% endblock %}
@ -33,10 +33,14 @@
{% block content %}
<main>
{{ call_out(
{{ callout(
title=ftl('nightly-firstrun-thank-you-for-using'),
class='mzp-t-dark mzp-t-product-nightly main-header mzp-t-hero',
heading_level=1
heading_level=1,
brand=True,
brand_product='nightly',
brand_type='logo',
brand_size='xl',
)}}
<section class="contribute">

7
bedrock/firefox/templates/firefox/nightly/whatsnew.html
Просмотреть файл

@ -11,6 +11,7 @@
{% block page_css %}
{{ css_bundle('protocol-emphasis-box') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('nightly_whatsnew') }}
{% endblock %}
@ -43,10 +44,10 @@
<div class="mzp-c-emphasis-box">
<h2 class="c-emphasis-box-title">{{ self.page_title() }}</h2>
{% if LANG == 'es-ES' and country_code == 'ES' %}
<section class="mzp-c-call-out mzp-t-dark mzp-t-content-xl mzp-l-content-xl">
<section class="mzp-c-callout mzp-t-dark mzp-t-content-xl mzp-l-content-xl">
<div class="mzp-l-content">
<h4 class="mzp-c-call-out-title">¿Quieres ayudar en España?</h4>
<div class="mzp-c-call-out-desc">
<h4 class="mzp-c-callout-title">¿Quieres ayudar en España?</h4>
<div class="mzp-c-callout-desc">
<p>El éxito de Mozilla y de Firefox también depende de la existencia e implicación de comunidades locales en todos los aspectos del proyecto.</p>
<p>¿Quieres implicarte en uno de los proyectos open source más importantes en el mundo y ayudarnos a crear una web más abierta para todos?</p>
</div>

8
bedrock/firefox/templates/firefox/pocket.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import card, call_out, split with context %}
{% from "macros-protocol.html" import card, callout, split with context %}
{% extends "firefox/base/base-protocol.html" %}
@ -19,7 +19,7 @@
{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('product_pocket') }}
{% endblock %}
@ -61,8 +61,8 @@
{% endcall %}
<section id="pocket-features">
<div class="mzp-c-call-out">
{{ call_out(
<div class="mzp-c-callout">
{{ callout(
title='Fill Your Pocket in Firefox',
desc='Use Firefox to browse, log in, save and see suggested content in Pocket.'
)}}

4
bedrock/firefox/templates/firefox/privacy/base.html
Просмотреть файл

@ -14,7 +14,7 @@
{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-picto') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-card') }}
{{ css_bundle('firefox-privacy-common') }}
{% endblock %}
@ -27,7 +27,7 @@
<main>
{% block hub_content %}{% endblock %}
{{ call_out(
{{ callout(
title=ftl('firefox-privacy-hub-read-the-privacy-notice-for', url=url('privacy.notices.firefox')),
class='call-out-privacy')
}}

8
bedrock/firefox/templates/firefox/privacy/book.html
Просмотреть файл

@ -17,7 +17,7 @@
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-picto') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('privacy-book') }}
{% endblock %}
@ -26,11 +26,11 @@
{% endblock %}
{% block content %}
<section class="mzp-c-call-out mzp-t-hero">
<section class="mzp-c-callout mzp-t-hero">
<div class="mzp-l-content">
<img src="{{ static('img/firefox/privacy/book/privacy-eyes.png') }}" width="200" height="200" alt="">
<h1 class="mzp-c-call-out-title">{{ ftl('privacy-book-little-book-of') }}</h1>
<p class="mzp-c-call-out-desc">{{ ftl('privacy-book-how-to-stay') }}</p>
<h1 class="mzp-c-callout-title">{{ ftl('privacy-book-little-book-of') }}</h1>
<p class="mzp-c-callout-desc">{{ ftl('privacy-book-how-to-stay') }}</p>
{{ download_firefox_thanks() }}
</div>
</section>

4
bedrock/firefox/templates/firefox/privacy/index.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out, split, picto with context %}
{% from "macros-protocol.html" import callout, split, picto with context %}
{% extends "firefox/privacy/base.html" %}
@ -56,7 +56,7 @@
<p>{{ ftl('firefox-privacy-hub-you-should-be-able-to-decide') }}</p>
{% endcall %}
{{ call_out(
{{ callout(
title=ftl('firefox-privacy-hub-thats-why-everything-we-make'),
class='call-out-data-promise')
}}

2
bedrock/firefox/templates/firefox/privacy/passwords.html
Просмотреть файл

@ -5,7 +5,7 @@
#}
{% from "macros.html" import fxa_email_form with context %}
{% from "macros-protocol.html" import call_out, split with context %}
{% from "macros-protocol.html" import callout, split with context %}
{% extends "firefox/privacy/base.html" %}

8
bedrock/firefox/templates/firefox/privacy/products.html
Просмотреть файл

@ -5,7 +5,7 @@
#}
{% from "macros.html" import fxa_email_form with context %}
{% from "macros-protocol.html" import call_out, split, picto with context %}
{% from "macros-protocol.html" import callout, split, picto with context %}
{% extends "firefox/privacy/base.html" %}
@ -25,9 +25,9 @@
{% block hub_content %}
{{ call_out(
{{ callout(
title=ftl('firefox-privacy-hub-mozilla-protects-your-privacy-strong', fallback='firefox-privacy-hub-firefox-protects-your-privacy-strong')|safe,
class='privacy-products-call-out-main',
class='privacy-products-callout-main',
heading_level=1)
}}
@ -121,7 +121,7 @@
</ul>
</div>
{% call call_out(
{% call callout(
title=ftl('firefox-privacy-hub-more-than-s-trackers-blocked', trackers=10000000000),
class='privacy-products-tracker-counter mzp-t-dark',
include_cta=True

20
bedrock/firefox/templates/firefox/releases/notes.html
Просмотреть файл

@ -5,7 +5,7 @@
#}
{% from "macros.html" import sub_nav with context %}
{% from "macros-protocol.html" import call_out, call_out_compact %}
{% from "macros-protocol.html" import callout, callout_compact %}
{% extends "firefox/base/base-protocol.html" %}
@ -46,7 +46,7 @@
{% block body_class %}mzp-t-firefox {{ theme_class }}{% endblock %}
{% block page_css %}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-article') }}
{{ css_bundle('firefox_releasenotes') }}
{% endblock %}
@ -111,12 +111,16 @@
{% endif %}
{% set bugzilla_url='https://bugzilla.mozilla.org/' %}
{% set call_out_desc = 'Release Notes tell you what’s new in Firefox. As always, we welcome your <a href="%(feedback)s">feedback</a>. You can also <a href="%(bugzilla)s">file a bug in Bugzilla</a> or see the <a href="%(check)s">system requirements</a> of this release.'|format(feedback=feedback_url, bugzilla=bugzilla_url, check=check_url) %}
{% call call_out(
{% call callout(
heading_level=1,
title=primary_heading,
desc=call_out_desc|safe,
class='mzp-t-firefox ' + product_class,
class='mzp-t-firefox mzp-t-background-tertiary ' + product_class,
include_cta=True,
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg',
) %}
{% if download_button_primary %}
<div class="c-download-cta">
@ -340,9 +344,13 @@
{% endif %}
</section>
{% call call_out_compact(
{% call callout_compact(
title=download_title,
class='mzp-t-firefox ' + product_class
class='mzp-t-firefox mzp-t-background-secondary ' + product_class,
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg'
) %}
{{ download_button_secondary }}
{% endcall %}

12
bedrock/firefox/templates/firefox/releases/system_requirements.html
Просмотреть файл

@ -6,7 +6,7 @@
{% extends "firefox/base/base-protocol.html" %}
{% from "macros-protocol.html" import call_out, call_out_compact %}
{% from "macros-protocol.html" import callout, callout_compact %}
{% block gtm_page_id %}data-gtm-page-id="/firefox/system-requirements/"{% endblock %}
@ -19,7 +19,7 @@
{% block body_class %}mzp-t-firefox mzp-t-{{ channel_name|lower }}{% endblock %}
{% block page_css %}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('firefox_system_requirements') }}
{% endblock %}
@ -33,9 +33,13 @@
</div>
</main>
{% call call_out_compact(
{% call callout_compact(
title='Get the most recent version',
class='mzp-t-firefox mzp-t-product-firefox'
class='mzp-t-firefox mzp-t-product-firefox mzp-t-background-secondary',
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg',
) %}
{{ download_firefox(alt_copy=ftl('download-button-download-firefox'), download_location='primary cta') }}
{% endcall %}

10
bedrock/firefox/templates/firefox/set-as-default/landing.html
Просмотреть файл

@ -6,14 +6,14 @@
#}
{% extends "firefox/base/base-protocol.html" %}
{% from "macros-protocol.html" import call_out, picto with context %}
{% from "macros-protocol.html" import callout, picto with context %}
{% block page_title %}{{ ftl('set-as-default-landing-make-firefox-your-default') }}{% endblock %}
{% block page_desc %}{{ ftl('set-as-default-landing-choose-the-browser') }}{% endblock %}
{% block page_css %}
{{ css_bundle('protocol-picto') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('firefox-default-landing') }}
{% endblock %}
@ -22,12 +22,16 @@
{% block content %}
<main>
{% call call_out(
{% call callout(
title=ftl('set-as-default-landing-make-sure-youre-protected'),
desc=ftl('set-as-default-landing-thanks-for-using-the'),
class='mzp-t-hero mzp-t-product-firefox',
include_cta=True,
heading_level=1,
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg',
) %}
<div class="cta-container">
<div class="mzp-c-button-download-container">

22
bedrock/firefox/templates/firefox/set-as-default/thanks.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out with context %}
{% from "macros-protocol.html" import callout with context %}
{% extends "firefox/base/base-protocol.html" %}
@ -14,7 +14,7 @@
{% block page_title %}{{ ftl('set-as-default-thanks-set-as-default-thanks-for-choosing-firefox') }}{% endblock %}
{% block page_css %}
{{ css_bundle('protocol-call-out')}}
{{ css_bundle('protocol-callout')}}
{{ css_bundle('firefox-default-thanks') }}
{% endblock %}
@ -28,19 +28,23 @@
</div>
</div>
{% call call_out(
{% call callout(
title=ftl('set-as-default-thanks-set-as-default-thanks-for-choosing-firefox'),
class='mzp-t-product-firefox mzp-t-hero thanks-hero',
include_cta=True,
heading_level=1
heading_level=1,
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='xl',
) %}
<div class="thanks-state-not-firefox">
<p class="mzp-c-call-out-desc">
<p class="mzp-c-callout-desc">
{{ ftl('set-as-default-thanks-looks-like-youre-using-a') }}
</p>
{{ download_firefox(alt_copy=ftl('download-button-download-firefox'), download_location='primary cta') }}
</div>
<div class="mzp-c-call-out-desc thanks-state-not-default-desktop hide-from-legacy-ie">
<div class="mzp-c-callout-desc thanks-state-not-default-desktop hide-from-legacy-ie">
<p>{{ ftl('set-as-default-thanks-youre-almost-done-just-change') }}</p>
<p class="thanks-help-text">
@ -49,15 +53,15 @@
</a>
</p>
</div>
<p class="mzp-c-call-out-desc thanks-state-not-default-android hide-from-legacy-ie">
<p class="mzp-c-callout-desc thanks-state-not-default-android hide-from-legacy-ie">
{{ ftl('set-as-default-thanks-heres-everything-you-need-android',
android='https://support.mozilla.org/kb/make-firefox-default-browser-android' ~ utms) }}
</p>
<p class="mzp-c-call-out-desc thanks-state-not-default-ios hide-from-legacy-ie">
<p class="mzp-c-callout-desc thanks-state-not-default-ios hide-from-legacy-ie">
{{ ftl('set-as-default-thanks-heres-everything-you-need-ios',
ios='https://support.mozilla.org/en-US/kb/unable-set-firefox-default-browser-ios' ~ utms) }}
</p>
<p class="mzp-c-call-out-desc thanks-state-is-default hide-from-legacy-ie">
<p class="mzp-c-callout-desc thanks-state-is-default hide-from-legacy-ie">
{{ ftl('set-as-default-thanks-youre-all-set') }}
</p>
{% endcall %}

15
bedrock/firefox/templates/firefox/testflight.html
Просмотреть файл

@ -6,7 +6,7 @@
{% extends "firefox/base/base-protocol.html" %}
{% from "macros-protocol.html" import call_out with context %}
{% from "macros-protocol.html" import callout with context %}
{% block page_title_prefix %}
Firefox for iOS Beta —
@ -20,18 +20,23 @@ Sign up to test pre-release beta versions of Firefox for iOS via Apple’s TestF
{% block page_css %}
{{ css_bundle('protocol-newsletter') }}
{{ css_bundle('protocol-call-out')}}
{{ css_bundle('protocol-callout')}}
{{ css_bundle('protocol-emphasis-box') }}
{{ css_bundle('firefox_ios_testflight') }}
{% endblock %}
{% block content %}
<main>
{% call call_out(
{% call callout(
title='Help shape the future <br>of Firefox for iOS'|safe,
desc='Sign up to test pre-release versions to make Firefox even better.',
class='mzp-t-firefox mzp-t-dark mzp-t-product-firefox mzp-t-hero',
heading_level=1) %}
class='mzp-t-firefox mzp-t-dark mzp-t-hero',
heading_level=1,
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg') %}
{% endcall %}
<section class="mzp-l-content mzp-t-content-sm">

6
bedrock/firefox/templates/firefox/welcome/page1.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out with context %}
{% from "macros-protocol.html" import callout with context %}
{% extends "firefox/welcome/base.html" %}
@ -26,7 +26,7 @@
{%block page_css %}
{{ super()}}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{% endblock %}
{% set _entrypoint = 'mozilla.org-firefox-welcome-1' %}
@ -39,7 +39,7 @@
{% block content_intro %}
{% call call_out(
{% call callout(
title=hero_title,
desc=ftl('welcome-page1-youve-got-the-web-browser'),
class='mzp-t-firefox mzp-t-dark mzp-t-hero',

6
bedrock/firefox/templates/firefox/welcome/page2.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out with context %}
{% from "macros-protocol.html" import callout with context %}
{% extends "firefox/welcome/base.html" %}
@ -16,7 +16,7 @@
{%block page_css %}
{{ super()}}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{% endblock %}
{% set _source = 'ffwelcome2' %}
@ -24,7 +24,7 @@
{% set _utm_campaign = 'welcome-2-pocket' %}
{% block content_intro %}
{% call call_out(
{% call callout(
title=ftl('welcome-page2-your-time-online-is-worth'),
desc=ftl('welcome-page2-discover-and-save-stories'),
class='mzp-t-firefox mzp-t-dark mzp-t-hero',

6
bedrock/firefox/templates/firefox/welcome/page4.html
Просмотреть файл

@ -5,7 +5,7 @@
#}
{% from "macros.html" import google_play_button, apple_app_store_button with context %}
{% from "macros-protocol.html" import call_out with context %}
{% from "macros-protocol.html" import callout with context %}
{% extends "firefox/welcome/base.html" %}
@ -19,14 +19,14 @@
{%block page_css %}
{{ super()}}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{% endblock %}
{% set _entrypoint = 'mozilla.org-firefox-welcome-4' %}
{% set _utm_campaign = 'welcome-4-mobile' %}
{% block content_intro %}
{% call call_out(
{% call callout(
title=ftl('welcome-page4-privacy-every-screen-now', fallback='welcome-page4-wallet-keys-phone-firefox'),
desc=ftl('welcome-page4-privacy-on-by-default', fallback='welcome-page4-take-privacy-with-you-on-every'),
class='mzp-t-firefox mzp-t-hero',

6
bedrock/firefox/templates/firefox/welcome/page6.html
Просмотреть файл

@ -5,7 +5,7 @@
#}
{% from "macros.html" import google_play_button, apple_app_store_button with context %}
{% from "macros-protocol.html" import call_out with context %}
{% from "macros-protocol.html" import callout with context %}
{% extends "firefox/welcome/base.html" %}
@ -22,11 +22,11 @@
{%block page_css %}
{{ super()}}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{% endblock %}
{% block content_intro %}
{% call call_out(
{% call callout(
title=ftl('welcome-page6-make-sure-youre-protected'),
desc=ftl('welcome-page6-when-you-choose-firefox-you'),
class='mzp-t-firefox mzp-t-dark mzp-t-hero',

6
bedrock/firefox/templates/firefox/welcome/page7.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out with context %}
{% from "macros-protocol.html" import callout with context %}
{% extends "firefox/welcome/base.html" %}
@ -17,11 +17,11 @@
{%block page_css %}
{{ super()}}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{% endblock %}
{% block content_intro %}
{% call call_out(
{% call callout(
title=ftl('page7-its-okay-to-like-facebook'),
desc=ftl('page7-if-you-still-kinda-like-facebook'),
class='mzp-t-firefox mzp-t-dark mzp-t-hero',

6
bedrock/firefox/templates/firefox/welcome/page8.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out with context %}
{% from "macros-protocol.html" import callout with context %}
{% extends "firefox/welcome/base.html" %}
@ -18,11 +18,11 @@
{%block page_css %}
{{ super()}}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{% endblock %}
{% block content_intro %}
{% call call_out(
{% call callout(
title=ftl('welcome-page8-your-privacy-respected'),
desc=ftl('welcome-page8-firefox-automatically-protects'),
class='mzp-t-firefox mzp-t-dark mzp-t-hero variation-default',

8
bedrock/firefox/templates/firefox/welcome/page9.de.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out with context %}
{% from "macros-protocol.html" import callout with context %}
{% extends "firefox/welcome/base.html" %}
@ -22,14 +22,14 @@
{%block page_css %}
{{ super()}}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{% endblock %}
{% block content_intro %}
<img class="product-logo" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="65" alt="">
{% call call_out(
{% call callout(
title='Standort ändern, <br>Verbindung sichern, <br><strong>Privatsphäre schützen</strong>.'|safe,
desc='Mozilla VPN (Virtuelles Privates Netzwerk) schützt deine gesamte Internetverbindung – auf all deinen Geräten und überall dort, wo du online gehst.',
class='mzp-t-firefox mzp-t-hero',
@ -37,7 +37,7 @@
heading_level=1
) %}
<p class="mzp-c-call-out-desc">Schnell, zuverlässig und extra sicher mit 30 Tage Geld-zurück-Garantie.</p>
<p class="mzp-c-callout-desc">Schnell, zuverlässig und extra sicher mit 30 Tage Geld-zurück-Garantie.</p>
<p class="primary-cta">
<a href="{{ url('products.vpn.landing') }}{{ _source }}" class="mzp-c-button mzp-t-product mzp-t-xl" data-cta-text="Get Mozilla VPN" data-cta-type="button">Hol dir Mozilla VPN</a>

8
bedrock/firefox/templates/firefox/welcome/page9.fr.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out with context %}
{% from "macros-protocol.html" import callout with context %}
{% extends "firefox/welcome/base.html" %}
@ -22,14 +22,14 @@
{%block page_css %}
{{ super()}}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{% endblock %}
{% block content_intro %}
<img class="product-logo" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="65" alt="">
{% call call_out(
{% call callout(
title='Changez votre localisation, sécurisez votre connexion, <strong>protégez votre vie privée</strong>.'|safe,
desc='Mozilla VPN (Virtual Private Network) protège l’intégralité de votre connexion Internet - sur n’importe quel appareil et peu importe où vous naviguez en ligne.',
class='mzp-t-firefox mzp-t-hero',
@ -37,7 +37,7 @@
heading_level=1
) %}
<p class="mzp-c-call-out-desc">Rapide, fiable et ultra sécurisé avec une garantie de remboursement de 30 jours.</p>
<p class="mzp-c-callout-desc">Rapide, fiable et ultra sécurisé avec une garantie de remboursement de 30 jours.</p>
<p class="primary-cta">
<a href="{{ url('products.vpn.landing') }}{{ _source }}" class="mzp-c-button mzp-t-product mzp-t-xl" data-cta-text="Get Mozilla VPN" data-cta-type="button">Installer Mozilla VPN</a>

12
bedrock/foundation/templates/foundation/reimagine-open.html
Просмотреть файл

@ -13,17 +13,17 @@
{% block page_css %}
{{ css_bundle('reimagine-open') }}
{{ css_bundle('protocol-call-out')}}
{{ css_bundle('protocol-callout')}}
{% endblock %}
{% block content %}
<article>
<header class="mzp-c-call-out mzp-t-hero">
<header class="mzp-c-callout mzp-t-hero">
<div class="mzp-l-content">
<div class="c-call-out-body">
<h1 class="mzp-c-call-out-title">Reimagine Open: Building Better Internet Experiences</h1>
<div class="mzp-c-call-out-desc">
<p class="c-call-out-byline">By Mitchell Baker, Alan Davidson, Alice Munyua, and Amba Kak</p>
<div class="c-callout-body">
<h1 class="mzp-c-callout-title">Reimagine Open: Building Better Internet Experiences</h1>
<div class="mzp-c-callout-desc">
<p class="c-callout-byline">By Mitchell Baker, Alan Davidson, Alice Munyua, and Amba Kak</p>
<p>The internet is at a crossroads. After decades of rapid growth and
global contribution to the human condition, today many are questioning
the health of the internet. At such a time it is natural to examine the

12
bedrock/mozorg/templates/mozorg/about/index.html
Просмотреть файл

@ -20,17 +20,17 @@
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-newsletter') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('about') }}
{% endblock %}
{% block content %}
<section class="mzp-c-call-out mzp-t-hero" {% if variant %}data-variant="{{ variant }}"{% endif%}>
<section class="mzp-c-callout mzp-t-hero" {% if variant %}data-variant="{{ variant }}"{% endif%}>
<div class="mzp-l-content">
<h1 class="mzp-c-call-out-title">{{ ftl('about-mozilla-makes-browsers-apps') }}</h1>
<p class="mzp-c-call-out-desc">{{ ftl('about-our-mission-keep-the-internet') }}</p>
<p class="c-call-out-cta">
<a id="read-mission-button" class="mzp-c-button" href="{{ url('mozorg.mission') }}" data-link-text="Read Our Mission" data-link-type="button" data-cta-position="primary cta">
<h1 class="mzp-c-callout-title">{{ ftl('about-mozilla-makes-browsers-apps') }}</h1>
<p class="mzp-c-callout-desc">{{ ftl('about-our-mission-keep-the-internet') }}</p>
<p class="c-callout-cta">
<a id="read-mission-button" class="mzp-c-button" href="{{ url('mozorg.mission') }}" data-link-name="Read Our Mission" data-link-type="button" data-cta-position="primary cta">
{{ ftl('about-read-our-mission') }}
</a>
</p>

8
bedrock/mozorg/templates/mozorg/about/manifesto.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from "macros-protocol.html" import call_out with context %}
{% from "macros-protocol.html" import callout with context %}
{% extends "base-protocol-mozilla.html" %}
@ -17,7 +17,7 @@
{% block body_id %}manifesto-landing{% endblock %}
{% block page_css %}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-newsletter') }}
{{ css_bundle('manifesto') }}
{% endblock %}
@ -70,11 +70,11 @@
</div>
</section>
{% call call_out(
{% call callout(
title=ftl('manifesto-show-your-support'),
desc=ftl('manifesto-an-internet-with-these'),
class='share-addendum',
include_cta=True
include_cta=True,
) %}
<p>
<a class="mzp-c-button button-manifesto js-manifesto-share" target="_blank" rel="noopener noreferrer" href="{{ twitter_link('custom', ftl('manifesto-i-support-the-vision-of')) }}" data-link-type="social share" data-link-text="Twitter">

16
bedrock/mozorg/templates/mozorg/about/policy/lean-data/build-security.html
Просмотреть файл

@ -20,7 +20,7 @@
{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('lean-data') }}
{% endblock %}
@ -163,15 +163,15 @@
</div>
</section>
<aside class="contact mzp-c-call-out-compact">
<div class="mzp-l-content mzp-t-content-md">
<div class="mzp-c-call-out-content">
<div class="mzp-c-call-out-container">
<h3 class="mzp-c-call-out-title">Drive the conversation in your organization.</h3>
<aside class="contact mzp-c-callout mzp-l-compact mzp-t-background-tertiary">
<div class="mzp-l-content mzp-t-content-xl">
<div class="mzp-c-callout-content">
<div class="mzp-c-callout-container">
<h3 class="mzp-c-callout-title">Drive the conversation in your organization.</h3>
</div>
</div>
<div class="mzp-c-call-out-cta">
<p class="mzp-c-call-out-cta-container">
<div class="mzp-c-callout-cta">
<p class="mzp-c-callout-cta-container">
<a id="contact-button" href="https://docs.google.com/forms/d/191_0cQHpvBAutNRFZSkUjeeHfVRadKPa_v8Ct9x5mDQ/" class="mzp-c-button">Contact Us</a>
</p>
</div>

16
bedrock/mozorg/templates/mozorg/about/policy/lean-data/engage-users.html
Просмотреть файл

@ -20,7 +20,7 @@
{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('lean-data') }}
{% endblock %}
@ -186,15 +186,15 @@
</div>
</section>
<aside class="contact mzp-c-call-out-compact">
<div class="mzp-l-content">
<div class="mzp-c-call-out-content">
<div class="mzp-c-call-out-container">
<h3 class="mzp-c-call-out-title">Drive the conversation in your organization.</h3>
<aside class="contact mzp-c-callout mzp-l-compact mzp-t-background-tertiary">
<div class="mzp-l-content mzp-t-content-xl">
<div class="mzp-c-callout-content">
<div class="mzp-c-callout-container">
<h3 class="mzp-c-callout-title">Drive the conversation in your organization.</h3>
</div>
</div>
<div class="mzp-c-call-out-cta">
<p class="mzp-c-call-out-cta-container">
<div class="mzp-c-callout-cta">
<p class="mzp-c-callout-cta-container">
<a id="contact-button" href="https://docs.google.com/forms/d/191_0cQHpvBAutNRFZSkUjeeHfVRadKPa_v8Ct9x5mDQ/" class="mzp-c-button">Contact Us</a>
</p>
</div>

12
bedrock/mozorg/templates/mozorg/about/policy/lean-data/index.html
Просмотреть файл

@ -19,7 +19,7 @@
{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('lean-data') }}
{% endblock %}
@ -126,10 +126,10 @@
</div>
</section>
<section class="mzp-c-call-out">
<div class="mzp-l-content">
<h2 class="mzp-c-call-out-title">Drive the conversation in your organization.</h2>
<p class="mzp-c-call-out-desc">
<section class="mzp-c-callout">
<div class="mzp-l-content mzp-t-content-lg">
<h2 class="mzp-c-callout-title">Drive the conversation in your organization.</h2>
<p class="mzp-c-callout-desc">
Lean Data works in any sector: business, civil society, government.
It can be spearheaded by any department: marketing, advocacy, engineering,
product, design, compliance, privacy, legal, customer support. You don’t
@ -137,7 +137,7 @@
to make data decisions thoughtfully.
</p>
<p class="c-call-out-cta">
<p class="c-callout-cta">
<a id="contact-button" href="https://docs.google.com/forms/d/191_0cQHpvBAutNRFZSkUjeeHfVRadKPa_v8Ct9x5mDQ/" class="mzp-c-button">Contact Us</a>
</p>
</div>

16
bedrock/mozorg/templates/mozorg/about/policy/lean-data/stay-lean.html
Просмотреть файл

@ -20,7 +20,7 @@
{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('lean-data') }}
{% endblock %}
@ -166,15 +166,15 @@
</div>
</section>
<aside class="contact mzp-c-call-out-compact">
<div class="mzp-l-content">
<div class="mzp-c-call-out-content">
<div class="mzp-c-call-out-container">
<h3 class="mzp-c-call-out-title">Drive the conversation in your organization.</h3>
<aside class="contact mzp-c-callout mzp-l-compact mzp-t-background-tertiary">
<div class="mzp-l-content mzp-t-content-xl">
<div class="mzp-c-callout-content">
<div class="mzp-c-callout-container">
<h3 class="mzp-c-callout-title">Drive the conversation in your organization.</h3>
</div>
</div>
<div class="mzp-c-call-out-cta">
<p class="mzp-c-call-out-cta-container">
<div class="mzp-c-callout-cta">
<p class="mzp-c-callout-cta-container">
<a id="contact-button" href="https://docs.google.com/forms/d/191_0cQHpvBAutNRFZSkUjeeHfVRadKPa_v8Ct9x5mDQ/" class="mzp-c-button">Contact Us</a>
</p>
</div>

8
bedrock/mozorg/templates/mozorg/about/webvision/summary.html
Просмотреть файл

@ -10,7 +10,7 @@
{% block page_css %}
{{ css_bundle("protocol-article") }}
{{ css_bundle("protocol-call-out") }}
{{ css_bundle("protocol-callout") }}
{{ css_bundle("webvision") }}
{% endblock %}
@ -23,10 +23,10 @@
{{ doc.content|safe }}
</article>
</main>
<section class="mzp-c-call-out">
<section class="mzp-c-callout mzp-t-background-secondary">
<div class="mzp-l-content">
<h2 class="mzp-c-call-out-title">Ready for more?</h2>
<p class="mzp-c-call-out-desc">This was just the summary. You can read our <a href="{{ url('mozorg.about.webvision.full') }}">entire vision for the evolution of the Web here</a>.</p>
<h2 class="mzp-c-callout-title">Ready for more?</h2>
<p class="mzp-c-callout-desc">This was just the summary. You can read our <a href="{{ url('mozorg.about.webvision.full') }}">entire vision for the evolution of the Web here</a>.</p>
</div>
</section>
{% endblock %}

20
bedrock/mozorg/templates/mozorg/advertising.html
Просмотреть файл

@ -6,24 +6,28 @@
{% extends "base-protocol-mozilla.html" %}
{% from "macros-protocol.html" import picto, call_out with context %}
{% from "macros-protocol.html" import picto, callout with context %}
{% block page_title %}Advertise with Mozilla{% endblock %}
{% block page_css %}
{{ css_bundle('protocol-picto') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('mozilla-ads') }}
{% endblock %}
{% block content %}
<header class="mzp-c-call-out mzp-t-dark c-header">
<div class="mzp-l-content">
<h1>Find hard-to-reach audiences with Mozilla Ads</h1>
<p>Reach unique audiences while protecting your brand’s safety and your customer’s privacy</p>
<a href="https://mozilla.formstack.com/forms/advertising" class="mzp-c-button mzp-t-dark">Contact us</a>
<header class="mzp-c-callout mzp-t-dark mzp-t-background-secondary c-header">
<div class="mzp-l-content mzp-t-content-lg">
<div class="c-callout-body">
<h1 class="mzp-c-callout-title">Find hard-to-reach audiences with Mozilla Ads</h1>
<div class="mzp-c-callout-desc">
<p>Reach unique audiences while protecting your brand’s safety and your customer’s privacy</p>
<a href="https://mozilla.formstack.com/forms/advertising" class="mzp-c-button mzp-t-dark">Contact us</a>
</div>
</div>
</div>
</header>
<section class="c-info mzp-l-content mzp-l-columns mzp-t-columns-two">
@ -93,7 +97,7 @@
{% endcall %}
</section>
<section class="mzp-c-call-out c-purple-callout">
<section class="mzp-c-callout c-purple-callout">
<div class="mzp-l-content">
<h2>Learn more about advertising on Mozilla</h2>
<a href="https://mozilla.formstack.com/forms/advertising" class="mzp-c-button mzp-t-dark">Contact us</a>

8
bedrock/products/templates/products/vpn/resource-center/landing.html
Просмотреть файл

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}
{% from 'macros-protocol.html' import call_out, split %}
{% from 'macros-protocol.html' import callout, split %}
{% from "products/vpn/includes/macros.html" import vpn_resource_center_cta with context %}
{% extends "products/vpn/base.html" %}
@ -16,7 +16,7 @@
{% block page_css %}
{{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-article') }}
{{ css_bundle('vpn-resource-center') }}
{% endblock page_css %}
@ -38,7 +38,7 @@
{% block content %}
<div class="mzp-l-content">
{{ call_out (
{{ callout (
title=ftl('vpn-resource-center-whats-the-deal'),
desc=ftl('vpn-resource-center-discover-how-they'),
class='resource-center-page-header resource-center-hero'
@ -77,7 +77,7 @@
media_class='resource-center-split-media',
) %}
<h1 class="resource-center-wordmark mzp-c-wordmark mzp-t-wordmark-sm mzp-t-product-vpn">{{ ftl('vpn-resource-center-mozilla-vpn') }}</h1>
<h2 class="mzp-c-call-out-title">{{ ftl('vpn-resource-center-start-protecting') }}</h2>
<h2 class="mzp-c-callout-title">{{ ftl('vpn-resource-center-start-protecting') }}</h2>
{{ vpn_resource_center_cta(
referral_id='vpn-resource-center',
link_text=vpn_saving(country_code=country_code, lang=LANG, ftl_string='vpn-shared-save-percent-on'),

174
media/css/careers/components/internships.scss
Просмотреть файл

@ -1,174 +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/.
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
.internships-page .mzp-c-button {
margin: 60px 0;
}
/* Hero */
.internships-page .c-hero {
background:
linear-gradient(to right, #000, transparent),
url('/media/img/careers/internships/internships-hero-high-res.jpg') center center no-repeat;
background-size: cover;
}
.internships-page .c-hero-body {
margin-left: 50px;
text-align: left;
}
@media
#{$mq-high-res},
(min-resolution: 120dpi) {
.internships-page .c-hero {
background:
linear-gradient(to right, #000, transparent),
url('/media/img/careers/internships/internships-hero.jpg') center center no-repeat;
background-size: cover;
}
}
@media (max-width: 600px) {
.internships-page .c-hero {
background: #20123a;
}
.internships-page .c-hero-body {
margin: 8px;
}
.internships-page .mzp-c-button {
margin: 30px 0 0;
}
.internships-page .c-hero-cta {
text-align: center;
}
}
/* Sections */
.internships-page .c-section-heading {
padding: 100px 5px;
text-align: center;
}
.internships-page .c-section-heading h2 {
font-size: 40px;
}
.internships-page .c-section-heading p {
margin: 0 auto;
max-width: 550px;
}
.internships-grey-section {
background: #ededf0;
}
@media (max-width: 600px) {
.internships-page .c-section-heading {
padding: 50px 10px 30px;
}
.internships-page .mzp-l-content .centered {
padding: 0;
}
.internships-page .mzp-c-button {
margin: 0 0 50px;
}
.internships-page .c-hero-cta .mzp-c-button {
margin: 30px 0 0;
}
}
/* Apply Section */
.l-internships-apply {
max-width: 640px;
}
.l-internships-apply .mzp-c-card-picto-content {
padding-top: 230px;
margin-bottom: 40px;
}
.l-internships-apply .mzp-c-card-picto {
padding: 0;
}
.l-internships-apply .mzp-c-card-picto-content::before {
height: 200px;
margin-left: -100px;
width: 200px;
}
.l-internships-apply #step-1::before {
background: #ffea80 url('/media/img/careers/internships/step1.png') center center no-repeat;
}
.l-internships-apply #step-2::before {
background: #ffea80 url('/media/img/careers/internships/step2.png') center center no-repeat;
}
.l-internships-apply #step-3::before {
background: #ffea80 url('/media/img/careers/internships/step3.png') center center no-repeat;
}
.l-internships-apply #step-4::before {
background: #ffea80 url('/media/img/careers/internships/step4.png') center center no-repeat;
}
/* Quote Section */
.l-internships-section .mzp-c-card-picto {
padding: 0;
}
.l-internships-section .mzp-c-card-picto-content {
max-width: 500px;
padding-top: 130px;
}
.l-internships-section blockquote {
margin-bottom: 0;
}
.l-internships-section .mzp-c-card-picto-desc {
font-size: 16px;
margin-top: 30px;
}
.l-internships-section .mzp-c-card-picto-content::before {
border-radius: 50%;
height: 140px;
margin-left: -60px;
width: 140px;
}
.l-internships-section #quote-1::before {
background: url('/media/img/careers/internships/quote1.png') center center no-repeat;
}
.l-internships-section #quote-2::before {
background: url('/media/img/careers/internships/quote2.png') center center no-repeat;
}
.l-internships-section #quote-3::before {
background: url('/media/img/careers/internships/quote3.png') center center no-repeat;
}
@media (max-width: 768px) {
.internships-page .mzp-c-card-picto {
margin-bottom: 70px;
}
.l-internships-section .mzp-c-card-picto-content {
max-width: none;
}
}

2
media/css/careers/styles.scss
Просмотреть файл

@ -15,7 +15,7 @@
@use '~@mozilla-protocol/core/protocol/css/components/modal';
@use '~@mozilla-protocol/core/protocol/css/components/video';
@use '~@mozilla-protocol/core/protocol/css/components/call-out';
@use '~@mozilla-protocol/core/protocol/css/components/callout';
@use '~@mozilla-protocol/core/protocol/css/templates/card-layout';
@use '../protocol/components/custom-menu-list';

2
media/css/contentful/firefox/c-call-out.scss
Просмотреть файл

@ -7,4 +7,4 @@ $image-path: '/media/protocol/img';
$brand-theme: 'firefox';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/call-out';
@import '~@mozilla-protocol/core/protocol/css/components/callout';

2
media/css/contentful/mozilla/c-call-out.scss
Просмотреть файл

@ -7,4 +7,4 @@ $image-path: '/media/protocol/img';
$brand-theme: 'mozilla';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/call-out';
@import '~@mozilla-protocol/core/protocol/css/components/callout';

5
media/css/firefox/browsers/best-browser.scss
Просмотреть файл

@ -6,7 +6,6 @@ $font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
@ -75,10 +74,10 @@ $image-path: '/media/protocol/img';
/* -------------------------------------------------------------------------- */
// Call out
.mzp-c-call-out-compact.mzp-t-dark {
.mzp-l-compact.mzp-t-dark {
background: $color-purple-90;
.mzp-c-call-out-title {
.mzp-c-callout-title {
color: $color-orange-50;
}
}

2
media/css/firefox/browsers/incognito-browser.scss
Просмотреть файл

@ -6,6 +6,8 @@ $font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
.mzp-c-article {
margin: $layout-lg auto;

2
media/css/firefox/browsers/update-browser.scss
Просмотреть файл

@ -6,6 +6,8 @@ $font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
.mzp-c-article {
margin: $layout-lg auto;

15
media/css/firefox/browsers/windows-64-bit.scss
Просмотреть файл

@ -79,18 +79,13 @@ $image-path: '/media/protocol/img';
// * -------------------------------------------------------------------------- */
// Call out
.mzp-c-call-out-compact.mzp-t-dark {
.mzp-l-compact.mzp-t-dark {
background: $color-purple-90;
.mzp-l-content {
@include grid-column-gap($spacing-sm);
}
@media #{$mq-md} {
.mzp-c-callout-cta-container {
white-space: nowrap;
.mzp-c-call-out-title {
color: $color-orange-50;
}
.mzp-c-button-download-privacy-link {
text-align: center;
}
}
}

3
media/css/firefox/channel.scss
Просмотреть файл

@ -8,6 +8,9 @@ $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-beta';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-developer';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-nightly';
@import '../protocol/components/sub-navigation';
// * -------------------------------------------------------------------------- */

11
media/css/firefox/enterprise/landing.scss
Просмотреть файл

@ -46,17 +46,6 @@ $image-path: '/media/protocol/img';
text-align: center;
}
// * -------------------------------------------------------------------------- */
// Call Out Theme Color
.mzp-c-call-out-compact.mzp-t-dark.enterprise-callout {
background-color: $color-ink-80;
.mzp-c-call-out-desc {
color: $color-white;
}
}
// * -------------------------------------------------------------------------- */
// Split

15
media/css/firefox/facebook-container.scss
Просмотреть файл

@ -19,18 +19,19 @@ $brand-theme: 'firefox';
.mzp-c-split-body {
max-width: 580px;
}
.mzp-c-logo {
margin-left: auto;
margin-right: auto;
.mzp-c-logo {
margin-left: auto;
margin-right: auto;
@media #{$mq-md} {
margin-left: 0;
margin-right: 0;
@media #{$mq-md} {
margin-left: 0;
margin-right: 0;
}
}
}
// * -------------------------------------------------------------------------- */
// Conditional CTAs

6
media/css/firefox/features/article.scss
Просмотреть файл

@ -6,7 +6,7 @@ $font-path: '/media/fonts';
$image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/call-out';
@import '~@mozilla-protocol/core/protocol/css/components/callout';
@import '~@mozilla-protocol/core/protocol/css/components/breadcrumb';
.feature-article-container {
@ -47,7 +47,7 @@ $image-path: '/media/protocol/img';
position: relative;
}
& > .mzp-c-call-out {
& > .mzp-c-callout {
margin: $spacing-lg 0;
padding: $spacing-lg;
}
@ -81,7 +81,7 @@ $image-path: '/media/protocol/img';
@media #{$mq-md} {
padding: $spacing-2xl;
& > .mzp-c-call-out {
& > .mzp-c-callout {
margin: $spacing-xl ($spacing-2xl * -1);
padding: $spacing-xl $spacing-2xl;
}

4
media/css/firefox/features/index.scss
Просмотреть файл

@ -6,7 +6,7 @@ $font-path: '/media/fonts';
$image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/call-out';
@import '~@mozilla-protocol/core/protocol/css/components/callout';
@import '~@mozilla-protocol/core/protocol/css/components/card';
@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
@ -40,7 +40,7 @@ $image-path: '/media/protocol/img';
}
}
.mzp-c-call-out.mzp-t-content-md {
.mzp-c-callout.mzp-t-content-md {
.mzp-l-content {
max-width: $content-md;
}

7
media/css/firefox/features/tips.scss
Просмотреть файл

@ -10,6 +10,8 @@ $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
@import '~@mozilla-protocol/core/protocol/css/components/video';
@import '~@mozilla-protocol/core/protocol/css/components/zap';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-mozilla';
// Play button on videos
.mzp-c-card-media-wrapper {
@ -33,8 +35,3 @@ $image-path: '/media/protocol/img';
transform: scale(1.1);
}
}
// Call-out
.mzp-c-call-out-compact.mzp-t-dark {
background-color: $color-ink-80;
}

8
media/css/firefox/firstrun/nightly.scss
Просмотреть файл

@ -6,20 +6,20 @@ $font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-nightly';
main {
background-color: $color-ink-80;
color: $color-white;
}
.mzp-c-call-out.mzp-t-hero.main-header {
.mzp-c-callout.mzp-t-hero.main-header {
background: linear-gradient($color-black, $color-ink-80);
@media #{$mq-md} {
.mzp-c-call-out-title {
background-size: 160px 160px;
.mzp-c-callout-title {
margin-bottom: $spacing-xl;
padding-top: 200px;
}
}
}

2
media/css/firefox/installer-help.scss
Просмотреть файл

@ -36,7 +36,7 @@ $image-path: '/media/protocol/img';
}
}
.mzp-c-call-out.mzp-t-hero.installer-call-out {
.mzp-c-callout.mzp-t-hero.installer-callout {
background-color: #fff;
.mzp-l-content {

2
media/css/firefox/more/misinformation.scss
Просмотреть файл

@ -159,6 +159,6 @@ $brand-theme: 'firefox';
// -------------------------------------------------------------------------- //
// Call Out
.mzp-c-call-out-compact.mzp-t-dark {
.mzp-c-callout-compact.mzp-t-dark {
background: $color-ink-80;
}

4
media/css/firefox/new/basic/thanks.scss
Просмотреть файл

@ -36,10 +36,10 @@ main {
}
}
.mzp-c-call-out {
.mzp-c-callout {
background: transparent;
.mzp-c-call-out-title {
.mzp-c-callout-title {
@include text-title-xl;
max-width: 610px;
margin: 0 auto;

2
media/css/firefox/privacy/book.scss
Просмотреть файл

@ -96,6 +96,6 @@ body {
}
}
.mzp-c-call-out.mzp-t-hero {
.mzp-c-callout.mzp-t-hero {
background: $color-white;
}

2
media/css/firefox/privacy/common.scss
Просмотреть файл

@ -15,7 +15,7 @@ $brand-theme: 'firefox';
.call-out-privacy {
background-color: $color-white;
.mzp-c-call-out-title {
.mzp-c-callout-title {
@include text-title-xs;
background: url('/media/img/firefox/privacy/icon-privacy.svg') top center no-repeat;
padding-top: 70px + $spacing-lg;

8
media/css/firefox/privacy/products.scss
Просмотреть файл

@ -21,10 +21,10 @@ $image-path: '/media/protocol/img';
// * -------------------------------------------------------------------------- */
// Top Page Call Out
.privacy-products-call-out-main {
.privacy-products-callout-main {
background-color: $color-white;
.mzp-c-call-out-title {
.mzp-c-callout-title {
@include text-title-md;
margin: $spacing-md 0;
@ -96,7 +96,7 @@ $image-path: '/media/protocol/img';
@include light-links;
background-color: $color-violet-80;
.mzp-c-call-out-title {
.mzp-c-callout-title {
margin: 0 auto $spacing-lg;
max-width: 24em;
@ -163,7 +163,7 @@ $image-path: '/media/protocol/img';
}
}
.call-out-privacy {
.callout-privacy {
background-color: $color-marketing-gray-10;
}

2
media/css/firefox/privacy/promise.scss
Просмотреть файл

@ -38,7 +38,7 @@ $image-path: '/media/protocol/img';
.call-out-data-promise {
background: $color-white;
.mzp-c-call-out-title {
.mzp-c-callout-title {
@include text-title-sm;
}
}

36
media/css/firefox/releasenotes.scss
Просмотреть файл

@ -10,22 +10,24 @@ $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/templates/main-with-sidebar';
@import '../protocol/components/sub-navigation';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
// * -------------------------------------------------------------------------- */
// Call out / page header
.mzp-c-call-out.mzp-t-product-firefox,
.mzp-c-call-out.mzp-t-product-beta {
.mzp-c-callout.mzp-t-product-firefox,
.mzp-c-callout.mzp-t-product-beta {
background: $color-marketing-gray-20;
}
// nightly header gradient
.mzp-c-call-out.mzp-t-product-nightly {
.mzp-c-callout.mzp-t-product-nightly {
background: linear-gradient(#000, #001e44);
}
// developer header gradient
.mzp-c-call-out.mzp-t-product-developer {
.mzp-c-callout.mzp-t-product-developer {
background: linear-gradient(#000, #001e44);
}
@ -36,7 +38,7 @@ $image-path: '/media/protocol/img';
.t-quantum {
// firefox release
.mzp-c-call-out.mzp-t-product-firefox .mzp-c-call-out-title {
.mzp-c-callout.mzp-t-product-firefox .mzp-c-callout-title {
background-image: url('/media/img/firefox/releasenotes/release-quantum.png');
@media #{$mq-high-res} {
@ -45,7 +47,7 @@ $image-path: '/media/protocol/img';
}
// firefox beta
.mzp-c-call-out.mzp-t-product-beta .mzp-c-call-out-title {
.mzp-c-callout.mzp-t-product-beta .mzp-c-callout-title {
background-image: url('/media/img/firefox/releasenotes/beta-quantum.png');
@media #{$mq-high-res} {
@ -54,7 +56,7 @@ $image-path: '/media/protocol/img';
}
// firefox nightly
.mzp-c-call-out.mzp-t-product-nightly .mzp-c-call-out-title {
.mzp-c-callout.mzp-t-product-nightly .mzp-c-callout-title {
background-image: url('/media/img/firefox/releasenotes/nightly-quantum.png');
@media #{$mq-high-res} {
@ -63,7 +65,7 @@ $image-path: '/media/protocol/img';
}
// firefox developer edition
.mzp-c-call-out.mzp-t-product-developer .mzp-c-call-out-title {
.mzp-c-callout.mzp-t-product-developer .mzp-c-callout-title {
background-image: url('/media/img/firefox/releasenotes/developer-quantum.png');
@media #{$mq-high-res} {
@ -72,7 +74,7 @@ $image-path: '/media/protocol/img';
}
// pre-dev edition firefox aurora
.mzp-c-call-out.mzp-t-product-developer.t-aurora .mzp-c-call-out-title {
.mzp-c-callout.mzp-t-product-developer.t-aurora .mzp-c-callout-title {
background-image: url('/media/img/firefox/releasenotes/aurora.png');
@media #{$mq-high-res} {
@ -83,7 +85,7 @@ $image-path: '/media/protocol/img';
.t-pre-quantum {
// firefox release
.mzp-c-call-out.mzp-t-product-firefox .mzp-c-call-out-title {
.mzp-c-callout.mzp-t-product-firefox .mzp-c-callout-title {
background-image: url('/media/img/firefox/releasenotes/firefox-old.png');
@media #{$mq-high-res} {
@ -92,7 +94,7 @@ $image-path: '/media/protocol/img';
}
// firefox beta
.mzp-c-call-out.mzp-t-product-beta .mzp-c-call-out-title {
.mzp-c-callout.mzp-t-product-beta .mzp-c-callout-title {
background-image: url('/media/img/firefox/releasenotes/beta-old.png');
@media #{$mq-high-res} {
@ -101,7 +103,7 @@ $image-path: '/media/protocol/img';
}
// firefox nightly
.mzp-c-call-out.mzp-t-product-nightly .mzp-c-call-out-title {
.mzp-c-callout.mzp-t-product-nightly .mzp-c-callout-title {
background-image: url('/media/img/firefox/releasenotes/nightly-old.png');
@media #{$mq-high-res} {
@ -110,7 +112,7 @@ $image-path: '/media/protocol/img';
}
// firefox developer edition
.mzp-c-call-out.mzp-t-product-developer .mzp-c-call-out-title {
.mzp-c-callout.mzp-t-product-developer .mzp-c-callout-title {
background-image: url('/media/img/firefox/releasenotes/developer-old.png');
@media #{$mq-high-res} {
@ -119,7 +121,7 @@ $image-path: '/media/protocol/img';
}
// pre-dev edition firefox aurora
.mzp-c-call-out.mzp-t-product-developer.t-aurora .mzp-c-call-out-title {
.mzp-c-callout.mzp-t-product-developer.t-aurora .mzp-c-callout-title {
background-image: url('/media/img/firefox/releasenotes/aurora.png');
@media #{$mq-high-res} {
@ -361,17 +363,17 @@ $image-path: '/media/protocol/img';
// * -------------------------------------------------------------------------- */
// Compact call out
.mzp-c-call-out-compact {
.mzp-c-callout-compact {
margin-top: $layout-md;
}
// nightly footer gradient
.mzp-c-call-out-compact.mzp-t-product-nightly {
.mzp-c-callout-compact.mzp-t-product-nightly {
background: linear-gradient(#001e44, #002d66);
}
// developer footer gradient
.mzp-c-call-out-compact.mzp-t-product-developer {
.mzp-c-callout-compact.mzp-t-product-developer {
background: linear-gradient(#001e44, #002d66);
}

2
media/css/firefox/seo.scss
Просмотреть файл

@ -37,6 +37,6 @@ $image-path: '/media/protocol/img';
// * -------------------------------------------------------------------------- */
// Call out
.mzp-c-call-out-compact.mzp-t-dark {
.mzp-c-callout-compact.mzp-t-dark {
background: $color-ink-80;
}

6
media/css/firefox/set-as-default/landing.scss
Просмотреть файл

@ -6,11 +6,13 @@ $font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
.mzp-c-call-out.mzp-t-hero.mzp-t-product-firefox {
.mzp-c-callout.mzp-t-hero.mzp-t-product-firefox {
background: $color-white;
.mzp-c-call-out-title {
.mzp-c-callout-title {
@include background-size(64px, 64px);
}
}

6
media/css/firefox/set-as-default/thanks.scss
Просмотреть файл

@ -7,14 +7,16 @@ $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
// * -------------------------------------------------------------------------- */
// Main Hero
.mzp-c-call-out.mzp-t-product-firefox.mzp-t-hero {
.mzp-c-callout.mzp-t-product-firefox.mzp-t-hero {
background: $color-white;
.mzp-c-call-out-desc {
.mzp-c-callout-desc {
@include text-title-xs;
}

8
media/css/firefox/system-requirements.scss
Просмотреть файл

@ -6,6 +6,8 @@ $font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
// * -------------------------------------------------------------------------- */
// Header
@ -111,15 +113,15 @@ $image-path: '/media/protocol/img';
}
// * -------------------------------------------------------------------------- */
// Call-out
// Callout
.mzp-c-call-out-compact,
.mzp-c-callout-compact,
.all-download {
display: none;
}
.is-modern-browser {
.mzp-c-call-out-compact {
.mzp-c-callout-compact {
display: block;
}

4
media/css/firefox/testflight.scss
Просмотреть файл

@ -6,11 +6,13 @@ $font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
// * -------------------------------------------------------------------------- */
// Call-out
.mzp-c-call-out.mzp-t-hero {
.mzp-c-callout.mzp-t-hero {
background-color: $color-ink-80;
}

10
media/css/firefox/welcome.scss
Просмотреть файл

@ -56,9 +56,9 @@ html {
}
// * -------------------------------------------------------------------------- */
// Page call-out
// Page callout
.mzp-c-call-out {
.mzp-c-callout {
&.mzp-t-dark.mzp-t-hero {
background-color: $color-marketing-gray-99;
}
@ -118,7 +118,7 @@ html {
}
}
.mzp-c-call-out.mzp-t-hero .mzp-c-call-out-title {
.mzp-c-callout.mzp-t-hero .mzp-c-callout-title {
@include text-title-lg;
margin-bottom: $layout-sm;
@ -146,7 +146,7 @@ html {
}
}
.mzp-c-call-out.mzp-t-hero .mzp-c-call-out-desc {
.mzp-c-callout.mzp-t-hero .mzp-c-callout-desc {
@include text-body-lg;
margin-bottom: $layout-sm;
@ -296,7 +296,7 @@ html {
// * -------------------------------------------------------------------------- */
// Dark theme
.mzp-c-call-out.mzp-t-dark {
.mzp-c-callout.mzp-t-dark {
@include light-links;
background-color: $color-ink-80;
color: $color-white;

6
media/css/foundation/reimagine-open.scss
Просмотреть файл

@ -9,15 +9,15 @@ $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core//protocol/css/includes/lib';
.mzp-c-call-out.mzp-t-hero {
.mzp-c-callout.mzp-t-hero {
background: $color-moz-neon-green url('/media/img/foundation/reimagine-open/bg-header.png') left bottom no-repeat;
@include background-size(469px, 195px);
.mzp-c-call-out-desc {
.mzp-c-callout-desc {
@include text-body-xl;
}
.c-call-out-byline {
.c-callout-byline {
@include text-body-sm;
font-style: italic;
margin-bottom: $spacing-2xl;

6
media/css/mozorg/about.scss
Просмотреть файл

@ -11,7 +11,7 @@ $image-path: '/media/protocol/img';
// * -------------------------------------------------------------------------- */
// Hero image
.mzp-c-call-out.mzp-t-hero {
.mzp-c-callout.mzp-t-hero {
@include at2x('/media/img/mozorg/about/about-hero-xxs.jpg', auto, 400px);
@include border-box;
background-repeat: no-repeat;
@ -39,12 +39,12 @@ $image-path: '/media/protocol/img';
justify-content: center;
}
.mzp-c-call-out-desc {
.mzp-c-callout-desc {
font-weight: bold;
margin-bottom: $spacing-2xl;
}
.c-call-out-cta {
.c-callout-cta {
margin-bottom: 1.25em;
}
}

4
media/css/mozorg/lean-data.scss
Просмотреть файл

@ -21,7 +21,7 @@ $image-path: '/media/protocol/img';
background: transparent;
}
.c-call-out-cta {
.c-callout-cta {
margin-top: $spacing-lg;
}
@ -57,6 +57,6 @@ $image-path: '/media/protocol/img';
}
}
.mzp-c-call-out-compact.contact {
.mzp-c-callout-compact.contact {
background-color: $color-marketing-gray-30;
}

4
media/css/products/vpn/resource-center.scss
Просмотреть файл

@ -17,11 +17,11 @@ $image-path: '/media/protocol/img';
.mzp-l-content {
max-width: $content-md;
.mzp-c-call-out-title {
.mzp-c-callout-title {
@include font-firefox;
}
.mzp-c-call-out-desc {
.mzp-c-callout-desc {
font-weight: 700;
margin-left: auto;
margin-right: auto;

2
media/css/protocol/components/_download-button.scss
Просмотреть файл

@ -188,7 +188,7 @@ ul.download-list {
}
// Callout styling
.fx-unsupported .mzp-c-call-out-compact {
.fx-unsupported .mzp-c-callout-compact {
.fx-unsupported-message,
.fx-privacy-link,
.mzp-c-button-download-privacy-link {

40
media/css/protocol/components/call-out.scss
Просмотреть файл

@ -1,40 +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/.
$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/call-out';
// Temporary styles for call-out while the hero component has been depreciated. Will be updated with a new component
.mzp-c-call-out.mzp-t-hero {
.mzp-l-content {
box-sizing: border-box;
max-width: $content-sm;
padding: $layout-md $layout-xs;
}
.mzp-c-call-out-title {
@include text-title-lg;
}
@media #{$mq-md} {
.mzp-l-content {
max-width: $content-md;
padding: $layout-md $layout-xl;
}
}
@media #{$mq-lg} {
.mzp-l-content {
padding: $layout-xl 80px;
}
}
}
.mzp-c-call-out[class*='mzp-t-product-'].mzp-t-hero .mzp-c-call-out-title {
background-size: 80px 80px;
padding: 104px 0 0;
}

82
media/css/protocol/components/callout.scss Normal file
Просмотреть файл

@ -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/.
$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/callout';
// Temporary styles for call-out while the hero component has been depreciated. Will be updated with a new component
.mzp-c-callout.mzp-t-hero {
.mzp-l-content {
box-sizing: border-box;
max-width: $content-sm;
padding: $layout-md $layout-xs;
}
.mzp-c-callout-title {
@include text-title-lg;
}
@media #{$mq-md} {
.mzp-l-content {
max-width: $content-md;
padding: $layout-md $layout-xl;
}
}
@media #{$mq-lg} {
.mzp-l-content {
padding: $layout-xl 80px;
}
}
}
.mzp-c-callout[class*='mzp-t-product-'].mzp-t-hero .mzp-c-callout-title {
background-size: 80px 80px;
}
.mzp-c-callout {
.mzp-l-content {
.mzp-t-callout-brand {
margin: $spacing-md auto;
.mzp-c-callout-title {
padding-top: $spacing-lg;
}
}
}
}
.mzp-l-compact {
.mzp-l-content {
.mzp-c-callout-content-has-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
.mzp-t-callout-compact-brand {
flex-shrink: 0;
margin-bottom: 0;
}
.mzp-c-callout-container {
margin-left: 0;
margin-top: $spacing-xl;
}
@media #{$mq-md} {
align-items: center;
flex-direction: row;
.mzp-c-callout-container {
margin-left: $spacing-xl;
margin-top: 0;
}
}
}
}
}

35
media/js/newsletter/newsletter-init.es6.js
Просмотреть файл

@ -5,7 +5,36 @@
*/
import MzpNewsletter from '@mozilla-protocol/core/protocol/js/newsletter';
import NewsletterForm from './newsletter.es6';
MzpNewsletter.init();
NewsletterForm.init();
const successCustomCallback = () => {
const newsletters = Array.from(
document.querySelectorAll(
".mzp-c-newsletter-form input[name='newsletters']:checked"
)
).map((newsletter) => newsletter.value);
if (window.dataLayer) {
// UA
window.dataLayer.push({
event: 'newsletter-signup-success',
newsletter: newsletters
});
// GA4
for (let i = 0; i < newsletters.length; ++i) {
window.dataLayer.push({
event: 'newsletter_subscribe',
newsletter_id: newsletters[i]
});
}
}
// Glean
if (typeof window.Mozilla.Glean !== 'undefined') {
window.Mozilla.Glean.pageEvent({
label: 'newsletter-sign-up-success',
type: newsletters.join(', ')
});
}
};
MzpNewsletter.init(successCustomCallback);

214
media/js/newsletter/newsletter.es6.js
Просмотреть файл

@ -1,214 +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/.
*/
import FormUtils from './form-utils.es6';
let form;
const NewsletterForm = {
handleFormError: (msg) => {
let error;
FormUtils.enableFormFields(form);
form.querySelector('.mzp-c-form-errors').classList.remove('hidden');
switch (msg) {
case FormUtils.errorList.EMAIL_INVALID_ERROR:
error = form.querySelector('.error-email-invalid');
break;
case FormUtils.errorList.NEWSLETTER_ERROR:
form.querySelector(
'.error-newsletter-checkbox'
).classList.remove('hidden');
break;
case FormUtils.errorList.COUNTRY_ERROR:
error = form.querySelector('.error-select-country');
break;
case FormUtils.errorList.LANGUAGE_ERROR:
error = form.querySelector('.error-select-language');
break;
case FormUtils.errorList.PRIVACY_POLICY_ERROR:
error = form.querySelector('.error-privacy-policy');
break;
case FormUtils.errorList.LEGAL_TERMS_ERROR:
error = form.querySelector('.error-terms');
break;
default:
error = form.querySelector('.error-try-again-later');
}
if (error) {
error.classList.remove('hidden');
}
},
handleFormSuccess: () => {
const newsletters = Array.from(
document.querySelectorAll("input[name='newsletters']:checked")
).map((newsletter) => newsletter.value);
form.classList.add('hidden');
document.getElementById('newsletter-thanks').classList.remove('hidden');
if (window.dataLayer) {
// UA
window.dataLayer.push({
event: 'newsletter-signup-success',
newsletter: newsletters
});
// GA4
for (let i = 0; i < newsletters.length; ++i) {
window.dataLayer.push({
event: 'newsletter_subscribe',
newsletter_id: newsletters[i]
});
}
}
// Glean
if (typeof window.Mozilla.Glean !== 'undefined') {
window.Mozilla.Glean.pageEvent({
label: 'newsletter-sign-up-success',
type: newsletters.join(', ')
});
}
},
serialize: () => {
// Email address
const email = encodeURIComponent(
form.querySelector('input[type="email"]').value
);
// Newsletter format
const format = form.querySelector('input[name="format"]:checked').value;
// Country (optional form <select>)
const countrySelect = form.querySelector('select[name="country"]');
const country = countrySelect ? `&country=${countrySelect.value}` : '';
// Language (get by DOM ID as field can be <input> or <select>)
const lang = form.querySelector('#id_lang').value;
// Selected newsletter(s)
let newsletters = Array.from(
form.querySelectorAll('input[name="newsletters"]:checked')
)
.map((newsletter) => {
return `${newsletter.value}`;
})
.join(',');
newsletters = encodeURIComponent(newsletters);
// Source URL (hidden field)
const sourceUrl = encodeURIComponent(
form.querySelector('input[name="source_url"]').value
);
return `email=${email}&format=${format}${country}&lang=${lang}&source_url=${sourceUrl}&newsletters=${newsletters}`;
},
validateFields: () => {
const email = form.querySelector('input[type="email"]').value;
const privacy = form.querySelector('input[name="privacy"]:checked')
? true
: false;
const newsletters = form.querySelectorAll(
'input[name="newsletters"]:checked'
);
const countrySelect = form.querySelector('select[name="country"]');
const lang = form.querySelector('#id_lang').value;
const terms = form.querySelector('input[name="terms"]');
// Really basic client side email validity check.
if (!FormUtils.checkEmailValidity(email)) {
NewsletterForm.handleFormError(
FormUtils.errorList.EMAIL_INVALID_ERROR
);
return false;
}
// Check for country selection value.
if (countrySelect && !countrySelect.value) {
NewsletterForm.handleFormError(FormUtils.errorList.COUNTRY_ERROR);
return false;
}
// Check for language selection value.
if (!lang) {
NewsletterForm.handleFormError(FormUtils.errorList.LANGUAGE_ERROR);
return false;
}
// Confirm at least one newsletter is checked
if (newsletters.length === 0) {
NewsletterForm.handleFormError(
FormUtils.errorList.NEWSLETTER_ERROR
);
return false;
}
// Confirm privacy policy is checked
if (!privacy) {
NewsletterForm.handleFormError(
FormUtils.errorList.PRIVACY_POLICY_ERROR
);
return false;
}
// Terms checkbox only appears on /firefox/ios/testflight/ page.
if (terms && !terms.checked) {
NewsletterForm.handleFormError(
FormUtils.errorList.LEGAL_TERMS_ERROR
);
return false;
}
return true;
},
subscribe: (e) => {
const url = form.getAttribute('action');
const email = form.querySelector('input[type="email"]').value;
e.preventDefault();
e.stopPropagation();
// Disable form fields until POST has completed.
FormUtils.disableFormFields(form);
// Clear any prior messages that might have been displayed.
FormUtils.clearFormErrors(form);
// Perform client side form field validation.
if (!NewsletterForm.validateFields()) {
return;
}
const params = NewsletterForm.serialize();
FormUtils.postToBasket(
email,
params,
url,
NewsletterForm.handleFormSuccess,
NewsletterForm.handleFormError
);
},
init: () => {
form = document.getElementById('newsletter-form');
if (!form) {
return;
}
form.addEventListener('submit', NewsletterForm.subscribe, false);
}
};
export default NewsletterForm;

17
media/static-bundles.json
Просмотреть файл

@ -881,9 +881,9 @@
},
{
"files": [
"css/protocol/components/call-out.scss"
"css/protocol/components/callout.scss"
],
"name": "protocol-call-out"
"name": "protocol-callout"
},
{
"files": [
@ -1478,6 +1478,12 @@
],
"name": "protocol-modal"
},
{
"files": [
"js/newsletter/newsletter-init.es6.js"
],
"name": "newsletter"
},
{
"files": [
"js/firefox/features/tips/tips-youtube.js"
@ -1878,13 +1884,6 @@
],
"name": "firefox-enterprise"
},
{
"files": [
"js/newsletter/newsletter.es6.js",
"js/newsletter/newsletter-init.es6.js"
],
"name": "newsletter"
},
{
"files": [
"js/newsletter/management.es6.js",

10
package-lock.json сгенерированный
Просмотреть файл

@ -11,8 +11,8 @@
"dependencies": {
"@babel/core": "^7.23.6",
"@babel/preset-env": "^7.23.6",
"@mozilla-protocol/core": "^18.0.0",
"@mozilla/glean": "^4.0.0",
"@mozilla-protocol/core": "^19.0.0",
"@mozilla/glean": "^4.0.0-pre.3",
"@mozmeao/cookie-helper": "^1.1.0",
"@mozmeao/dnt-helper": "^1.0.0",
"@mozmeao/trafficcop": "^2.0.1",
@ -2138,9 +2138,9 @@
"dev": true
},
"node_modules/@mozilla-protocol/core": {
"version": "18.0.0",
"resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-18.0.0.tgz",
"integrity": "sha512-jHZQxmr4Ogqg4avz5tznPvUNZvcFgddOPj+KhH14G9QzOUfbrfErdNtocRaa4H30U4vDbL5LiKmrWcF+RXNS3g=="
"version": "19.0.0",
"resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-19.0.0.tgz",
"integrity": "sha512-2kitmeSKbSixV41OUgYAp/nbhXd8ftY4FEG/QKsoinSg7njawQuNCM5NwPWiP9wdhGinxVJU5FBblif7FB5srA=="
},
"node_modules/@mozilla/glean": {
"version": "4.0.0",

4
package.json
Просмотреть файл

@ -6,8 +6,8 @@
"dependencies": {
"@babel/core": "^7.23.6",
"@babel/preset-env": "^7.23.6",
"@mozilla-protocol/core": "^18.0.0",
"@mozilla/glean": "^4.0.0",
"@mozilla-protocol/core": "^19.0.0",
"@mozilla/glean": "^4.0.0-pre.3",
"@mozmeao/cookie-helper": "^1.1.0",
"@mozmeao/dnt-helper": "^1.0.0",
"@mozmeao/trafficcop": "^2.0.1",

2
tests/pages/products/vpn/resource_center.py
Просмотреть файл

@ -11,7 +11,7 @@ class VPNResourceCenterHomePage(BasePage):
_URL_TEMPLATE = "/{locale}/products/vpn/resource-center/"
# Header unit
_resource_center_header_locator = (By.CSS_SELECTOR, ".mzp-c-call-out.resource-center-page-header.resource-center-hero")
_resource_center_header_locator = (By.CSS_SELECTOR, ".mzp-c-callout.resource-center-page-header.resource-center-hero")
# Article link
_resource_center_article_link_locator = (By.CSS_SELECTOR, ".resource-center-articles .mzp-c-card a.mzp-c-card-block-link")

355
tests/unit/spec/newsletter/newsletter.js
Просмотреть файл

@ -1,355 +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/.
*/
import NewsletterForm from '../../../../media/js/newsletter/newsletter.es6';
/**
* Note: There is a `novalidate` attribute added to the <form>
* element below for testing purposes only.
*/
describe('NewsletterForm', function () {
beforeEach(async function () {
const form = `<aside class="mzp-c-newsletter">
<div class="newsletter-content">
<form id="newsletter-form" class="mzp-c-newsletter-form" action="https://basket.mozilla.org/news/subscribe/" method="post" novalidate>
<input type="hidden" name="source_url" value="https://www.mozilla.org/en-US/">
<fieldset class="mzp-c-newsletter-content">
<div class="mzp-c-form-errors hidden" id="newsletter-errors">
<ul class="mzp-u-list-styled">
<li class="error-email-invalid hidden">
Please enter a valid email address
</li>
<li class="error-select-country hidden">
Please select a country or region
</li>
<li class="error-select-language hidden">
Please select a language
</li>
<li class="error-newsletter-checkbox hidden">
Please check at least one of the newsletter options.
</li>
<li class="error-privacy-policy hidden">
You must agree to the privacy notice
</li>
<li class="error-try-again-later hidden">
We are sorry, but there was a problem with our system. Please try again later!
</li>
</ul>
</div>
<label for="id_email">Your email address:</label>
<input type="email" name="email" placeholder="yourname@example.com" class="mzp-js-email-field" id="id_email">
<div id="newsletter-details" class="mzp-c-newsletter-details">
<label for="id_country">Select country or region:</label>
<p>
<select name="country" id="id_country">
<option value="" selected="">Select a country or region</option>
<option value="de">Germany</option>
<option value="fr">France</option>
<option value="us">United States</option>
</select>
</p>
<label for="id_lang">Select language:</label>
<p>
<select name="lang" id="id_lang">
<option value="" selected="">Select a language</option>
<option value="de">Deutsch</option>
<option value="en">English</option>
<option value="fr">Français</option>
</select>
</p>
<fieldset class="mzp-u-inline">
<legend>I want information about:</legend>
<p>
<label for="id_newsletters_0" class="mzp-u-inline">
<input type="checkbox" name="newsletters" value="mozilla-foundation" id="id_newsletters_0" checked=""> Mozilla Foundation
</label>
<label for="id_newsletters_1" class="mzp-u-inline">
<input type="checkbox" name="newsletters" value="mozilla-and-you" id="id_newsletters_1" checked=""> Firefox
</label>
</p>
</fieldset>
<fieldset class="mzp-u-inline">
<legend>Format</legend>
<p>
<label for="format-html" class="mzp-u-inline">
<input type="radio" id="format-html" name="format" value="H" checked=""> HTML
</label>
<label for="format-text" class="mzp-u-inline">
<input type="radio" id="format-text" name="format" value="T"> Text
</label>
</p>
</fieldset>
<p>
<label for="privacy" class="mzp-u-inline">
<input type="checkbox" id="privacy" name="privacy"">
I’m okay with Mozilla handling my info as explained in this Privacy Notice
</label>
</p>
</div>
<p class="mzp-c-form-submit">
<button type="submit" id="newsletter-submit" class="mzp-c-button button-dark">Sign Up Now</button>
</p>
</fieldset>
</form>
<div id="newsletter-thanks" class="mzp-c-newsletter-thanks hidden">
<h3>Thanks!</h3>
</div>
</div>
</aside>`;
document.body.insertAdjacentHTML('beforeend', form);
});
afterEach(function () {
const form = document.querySelector('.mzp-c-newsletter');
form.parentNode.removeChild(form);
});
describe('form submission', function () {
let xhr;
let xhrRequests = [];
beforeEach(function () {
xhr = sinon.useFakeXMLHttpRequest();
xhr.onCreate = (req) => {
xhrRequests.push(req);
};
});
afterEach(function () {
xhr.restore();
xhrRequests = [];
});
it('should handle success', function () {
spyOn(NewsletterForm, 'handleFormSuccess').and.callThrough();
NewsletterForm.init();
document.getElementById('id_email').value = 'fox@example.com';
document.getElementById('id_country').value = 'us';
document.getElementById('id_lang').value = 'en';
document.getElementById('privacy').click();
document.getElementById('newsletter-submit').click();
xhrRequests[0].respond(
200,
{ 'Content-Type': 'application/json' },
'{"status": "ok"}'
);
expect(NewsletterForm.handleFormSuccess).toHaveBeenCalled();
expect(
document
.getElementById('newsletter-thanks')
.classList.contains('hidden')
).toBeFalse();
expect(
document
.getElementById('newsletter-form')
.classList.contains('hidden')
).toBeTrue();
});
it('should handle invalid email', function () {
spyOn(NewsletterForm, 'handleFormError').and.callThrough();
NewsletterForm.init();
document.getElementById('id_email').value = 'invalid@email';
document.getElementById('id_country').value = 'us';
document.getElementById('id_lang').value = 'en';
document.getElementById('privacy').click();
document.getElementById('newsletter-submit').click();
xhrRequests[0].respond(
400,
{ 'Content-Type': 'application/json' },
'{"status": "error", "desc": "Invalid email address"}'
);
expect(NewsletterForm.handleFormError).toHaveBeenCalledWith(
'Invalid email address'
);
expect(
document
.getElementById('newsletter-errors')
.classList.contains('hidden')
).toBeFalse();
expect(
document
.querySelector('.error-email-invalid')
.classList.contains('hidden')
).toBeFalse();
});
it('should handle incomplete country selection', function () {
spyOn(NewsletterForm, 'handleFormError').and.callThrough();
NewsletterForm.init();
document.getElementById('id_email').value = 'fox@example.com';
document.getElementById('id_lang').value = 'en';
document.getElementById('privacy').click();
document.getElementById('newsletter-submit').click();
expect(NewsletterForm.handleFormError).toHaveBeenCalledWith(
'Country not selected'
);
expect(
document
.getElementById('newsletter-errors')
.classList.contains('hidden')
).toBeFalse();
expect(
document
.querySelector('.error-select-country')
.classList.contains('hidden')
).toBeFalse();
});
it('should handle incomplete language selection', function () {
spyOn(NewsletterForm, 'handleFormError').and.callThrough();
NewsletterForm.init();
document.getElementById('id_email').value = 'fox@example.com';
document.getElementById('id_country').value = 'us';
document.getElementById('privacy').click();
document.getElementById('newsletter-submit').click();
expect(NewsletterForm.handleFormError).toHaveBeenCalledWith(
'Language not selected'
);
expect(
document
.getElementById('newsletter-errors')
.classList.contains('hidden')
).toBeFalse();
expect(
document
.querySelector('.error-select-language')
.classList.contains('hidden')
).toBeFalse();
});
it('should handle incomplete newsletter selection', function () {
spyOn(NewsletterForm, 'handleFormError').and.callThrough();
NewsletterForm.init();
document.getElementById('id_email').value = 'fox@example.com';
document.getElementById('id_country').value = 'us';
document.getElementById('id_lang').value = 'en';
document.getElementById('id_newsletters_0').click();
document.getElementById('id_newsletters_1').click();
document.getElementById('newsletter-submit').click();
expect(NewsletterForm.handleFormError).toHaveBeenCalledWith(
'Newsletter not selected'
);
expect(
document
.getElementById('newsletter-errors')
.classList.contains('hidden')
).toBeFalse();
expect(
document
.querySelector('.error-newsletter-checkbox')
.classList.contains('hidden')
).toBeFalse();
});
it('should handle incomplete privacy agreement', function () {
spyOn(NewsletterForm, 'handleFormError').and.callThrough();
NewsletterForm.init();
document.getElementById('id_email').value = 'fox@example.com';
document.getElementById('id_country').value = 'us';
document.getElementById('id_lang').value = 'en';
document.getElementById('newsletter-submit').click();
expect(NewsletterForm.handleFormError).toHaveBeenCalledWith(
'Privacy policy not checked'
);
expect(
document
.getElementById('newsletter-errors')
.classList.contains('hidden')
).toBeFalse();
expect(
document
.querySelector('.error-privacy-policy')
.classList.contains('hidden')
).toBeFalse();
});
it('should handle unknown error', function () {
spyOn(NewsletterForm, 'handleFormError').and.callThrough();
NewsletterForm.init();
document.getElementById('id_email').value = 'fox@example.com';
document.getElementById('id_country').value = 'us';
document.getElementById('id_lang').value = 'en';
document.getElementById('privacy').click();
document.getElementById('newsletter-submit').click();
xhrRequests[0].respond(
400,
{ 'Content-Type': 'application/json' },
'{"status": "error", "desc": "Unknown non-helpful error"}'
);
expect(NewsletterForm.handleFormError).toHaveBeenCalled();
expect(
document
.getElementById('newsletter-errors')
.classList.contains('hidden')
).toBeFalse();
expect(
document
.querySelector('.error-try-again-later')
.classList.contains('hidden')
).toBeFalse();
});
it('should handle failure', function () {
spyOn(NewsletterForm, 'handleFormError').and.callThrough();
NewsletterForm.init();
document.getElementById('id_email').value = 'fox@example.com';
document.getElementById('id_country').value = 'us';
document.getElementById('id_lang').value = 'en';
document.getElementById('privacy').click();
document.getElementById('newsletter-submit').click();
xhrRequests[0].respond(
500,
{ 'Content-Type': 'application/json' },
null
);
expect(NewsletterForm.handleFormError).toHaveBeenCalled();
expect(
document
.getElementById('newsletter-errors')
.classList.contains('hidden')
).toBeFalse();
expect(
document
.querySelector('.error-try-again-later')
.classList.contains('hidden')
).toBeFalse();
});
});
describe('serialize', function () {
it('should serialize form data as expected', function () {
NewsletterForm.init();
document.getElementById('id_email').value = 'fox@example.com';
document.getElementById('id_country').value = 'us';
document.getElementById('id_lang').value = 'en';
const data1 = NewsletterForm.serialize();
expect(data1).toEqual(
'email=fox%40example.com&format=H&country=us&lang=en&source_url=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2F&newsletters=mozilla-foundation%2Cmozilla-and-you'
);
document.getElementById('id_newsletters_0').click();
const data2 = NewsletterForm.serialize();
expect(data2).toEqual(
'email=fox%40example.com&format=H&country=us&lang=en&source_url=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2F&newsletters=mozilla-and-you'
);
document.getElementById('format-text').click();
const data3 = NewsletterForm.serialize();
expect(data3).toEqual(
'email=fox%40example.com&format=T&country=us&lang=en&source_url=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2F&newsletters=mozilla-and-you'
);
});
});
});