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 Call Out: https://protocol.mozilla.org/components/detail/call-out--default.html
HTML import: {% from "macros-protocol.html" import call_out with context %} HTML import: {% from "macros-protocol.html" import callout with context %}
CSS bundle: {% block page_css %} {{ css_bundle('protocol-call-out') }} {% endblock %} CSS bundle: {% block page_css %} {{ css_bundle('protocol-callout') }} {% endblock %}
Macro parameters: Macro parameters:
title (Required): String indicating heading text (usually a translation id wrapped in ftl function). 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). desc: String indicating paragraph text (usually a translation id wrapped in ftl function).
class: String adding class(es) to the section tag. 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). 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. 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) -%} {% 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-call-out {% if class %}{{ class }}{% endif %}"> <section class="mzp-c-callout {% if class %}{{ class }}{% endif %}">
<div class="mzp-l-content"> <div class="mzp-l-content {% if content_width %}mzp-t-content-{{content_width}} {% else %} mzp-t-content-lg {% endif %}">
<h{{ heading_level }} class="mzp-c-call-out-title">{{ title }}</h{{ heading_level }}> {% 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 %} {% if desc %}
<p class="mzp-c-call-out-desc">{{ desc }}</p> <p class="mzp-c-callout-desc">{{ desc }}</p>
{% endif %} {% endif %}
{% if include_cta %} {% if include_cta %}
{{ caller() }} {{ caller() }}
@ -139,28 +146,30 @@
{# {#
Call Out (compact): https://protocol.mozilla.org/components/detail/compact-call-out--default.html Call Out (compact): https://protocol.mozilla.org/components/detail/compact-callout--default.html
HTML import: {% from "macros-protocol.html" import call_out with context %} HTML import: {% from "macros-protocol.html" import callout with context %}
CSS bundle: {% block page_css %} {{ css_bundle('protocol-call-out') }} {% endblock %} CSS bundle: {% block page_css %} {{ css_bundle('protocol-callout') }} {% endblock %}
Marco Parameters: Marco Parameters:
title (Required): String indicating heading text (usually a translation id wrapped in ftl function). 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). desc: String indicating paragraph text (usually a translation id wrapped in ftl function).
class: tring adding class(es) to the section tag. 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. 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) -%} {% 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-call-out-compact {% if class %}{{ class }}{% endif %}"> <section class="mzp-c-callout mzp-l-compact {% if class %}{{ class }}{% endif %}">
<div class="mzp-l-content">
<div class="mzp-c-call-out-content"> <div class="mzp-l-content mzp-t-content-lg">
<div class="mzp-c-call-out-container"> <div class="mzp-c-callout-content {% if brand %}mzp-c-callout-content-has-brand{% endif %}">
<h{{ heading_level }} class="mzp-c-call-out-title">{{ title }}</h{{ heading_level }}> {% 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 %} {% if desc %}
<p class="mzp-c-call-out-desc">{{ desc }}</p> <p class="mzp-c-callout-desc">{{ desc }}</p>
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="mzp-c-call-out-cta"> <div class="mzp-c-callout-cta">
<div class="mzp-c-call-out-cta-container"> <div class="mzp-c-callout-cta-container">
{{ caller() }} {{ caller() }}
</div> </div>
</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> </section>
</div> </div>
<section id="why" class="mzp-c-call-out"> <section id="why" class="mzp-c-callout">
<div class="mzp-l-content"> <div class="mzp-l-content mzp-t-content-md">
<h2 class="mzp-c-call-out-title">Why Mozilla?</h2> <h2 class="mzp-c-callout-title">Why Mozilla?</h2>
<p class="mzp-c-call-out-desc"> <p class="mzp-c-callout-desc">
At Mozilla, we’re serving humanity—by maintaining a safe, open internet—while also 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 helping the individual humans employed here to reach their personal and
professional goals. With a relatively small team serving hundreds of millions of 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" template_name = "careers/locations.html"
class InternshipsView(L10nTemplateView):
template_name = "careers/internships.html"
class BenefitsView(L10nTemplateView): class BenefitsView(L10nTemplateView):
template_name = "careers/benefits.html" 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 -%} {% for entry in entries -%}
{% if entry.component == 'callout' %} {% if entry.component == 'callout' %}
{% call call_out_compact( {% call callout_compact(
title=entry.title, title=entry.title,
desc=entry.body|external_html, desc=entry.body|external_html,
class=entry.theme_class + ' ' + entry.product_class, 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/. 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" %} {% extends "firefox/base/base-protocol.html" %}
@ -16,7 +16,7 @@
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-article') }} {{ css_bundle('protocol-article') }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('best-browser') }} {{ css_bundle('best-browser') }}
{% endblock %} {% endblock %}
@ -118,9 +118,13 @@
</article> </article>
</div> </div>
{% call call_out_compact( {% call callout_compact(
title=ftl('best-browser-take-control-of-your'), 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"> <div class="download-firefox">
{{ download_firefox(dom_id='safebrowser-bottom-download', download_location='secondary cta') }} {{ 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/. 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" %} {% extends "firefox/base/base-protocol.html" %}
@ -15,7 +15,7 @@
{% endblock %} {% endblock %}
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-article') }} {{ css_bundle('protocol-article') }}
{{ css_bundle('browser-history') }} {{ css_bundle('browser-history') }}
{% endblock %} {% endblock %}
@ -110,7 +110,7 @@
</article> </article>
</div> </div>
{% call call_out_compact( {% call callout_compact(
title=ftl('browser-history-take-control-of'), title=ftl('browser-history-take-control-of'),
class='mzp-t-product-firefox mzp-t-firefox' 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/. 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" %} {% extends "firefox/base/base-protocol.html" %}
@ -15,7 +15,7 @@
{% endblock %} {% endblock %}
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-article') }} {{ css_bundle('protocol-article') }}
{{ css_bundle('incognito-browser') }} {{ css_bundle('incognito-browser') }}
{% endblock %} {% endblock %}
@ -187,9 +187,13 @@
</article> </article>
</div> </div>
{% call call_out_compact( {% call callout_compact(
title='Take control of your browser.', 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"> <div class="download-firefox">
{{ download_firefox_thanks(dom_id='download-button-secondary', download_location='secondary') }} {{ 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.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" %} {% extends "firefox/base/base-protocol.html" %}
@ -15,7 +15,6 @@
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-split') }} {{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('firefox-browsers-mobile') }} {{ css_bundle('firefox-browsers-mobile') }}
{% if show_firefox_app_store_banner %} {% 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.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" %} {% extends "firefox/base/base-protocol.html" %}
@ -21,7 +21,6 @@
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-split') }} {{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('firefox-browsers-mobile') }} {{ css_bundle('firefox-browsers-mobile') }}
{% if show_firefox_app_store_banner %} {% 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.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" %} {% extends "firefox/base/base-protocol.html" %}
@ -15,7 +15,6 @@
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-split') }} {{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('firefox-browsers-mobile') }} {{ css_bundle('firefox-browsers-mobile') }}
{% if show_firefox_app_store_banner %} {% 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/. 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" %} {% extends "firefox/base/base-protocol.html" %}
@ -15,7 +15,7 @@
{% endblock %} {% endblock %}
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-article') }} {{ css_bundle('protocol-article') }}
{{ css_bundle('update-browser') }} {{ css_bundle('update-browser') }}
{% endblock %} {% endblock %}
@ -76,9 +76,13 @@
</article> </article>
</div> </div>
{% call call_out_compact( {% call callout_compact(
title='Take control of your browser.', 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"> <div class="download-firefox">
{{ download_firefox_thanks(dom_id='download-button-secondary', download_location='secondary') }} {{ 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/. 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 %} {% from "firefox/includes/macros.html" import firefox_download_desktop_button_windows with context %}
{% extends "firefox/base/base-protocol.html" %} {% extends "firefox/base/base-protocol.html" %}
@ -16,7 +16,7 @@
{% endblock %} {% endblock %}
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-article') }} {{ css_bundle('protocol-article') }}
{{ css_bundle('windows-64-bit') }} {{ css_bundle('windows-64-bit') }}
{% endblock %} {% endblock %}
@ -73,9 +73,13 @@
</article> </article>
</div> </div>
{% call call_out_compact( {% call callout_compact(
title=ftl('windows-64-bit-take-control-of-your'), title=ftl('windows-64-bit-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"> <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') }} {{ 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 %} {% block channels %}
<section id="beta" class="mzp-is-anchor-link"> <section id="beta" class="mzp-is-anchor-link">
{% call call_out_compact( {% call callout_compact(
title=ftl('firefox-channel-beta'), title=ftl('firefox-channel-beta'),
desc=ftl('firefox-channel-try-the-latest-android-features'), 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") }} {{ download_firefox('beta', platform='android', alt_copy=ftl('download-button-download'), dom_id="android-beta-download") }}
{% endcall %} {% endcall %}
@ -52,10 +56,14 @@
</section> </section>
<section id="nightly" class="mzp-is-anchor-link"> <section id="nightly" class="mzp-is-anchor-link">
{% call call_out_compact( {% call callout_compact(
title=ftl('firefox-channel-nightly'), title=ftl('firefox-channel-nightly'),
desc=ftl('firefox-channel-check-out-new-android-features'), 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") }} {{ download_firefox('nightly', platform='android', alt_copy=ftl('download-button-download'), dom_id="android-nightly-download") }}
{% endcall %} {% endcall %}

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

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

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

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

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

@ -18,10 +18,14 @@
{% block channels %} {% block channels %}
<section id="testflight" class="mzp-is-anchor-link"> <section id="testflight" class="mzp-is-anchor-link">
{% call call_out_compact( {% call callout_compact(
title=ftl('firefox-channel-test-flight'), title=ftl('firefox-channel-test-flight'),
desc=ftl('firefox-channel-test-beta-versions-of-firefox-ios'), 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> <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"> <small class="learn-more">

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

@ -6,14 +6,13 @@
{% extends "firefox/base/base-protocol.html" %} {% 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_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_desc %}{{ ftl('firefox-enterprise-get-unmatched-data-protection') }}{% endblock %}
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-split') }} {{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-picto') }} {{ css_bundle('protocol-picto') }}
{{ css_bundle('firefox-enterprise') }} {{ css_bundle('firefox-enterprise') }}
{% endblock %} {% 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.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" %} {% extends "firefox/base/base-protocol.html" %}
@ -17,7 +17,7 @@
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-split')}} {{ css_bundle('protocol-split')}}
{{ css_bundle('protocol-card')}} {{ css_bundle('protocol-card')}}
{{ css_bundle('protocol-call-out')}} {{ css_bundle('protocol-callout')}}
{{ css_bundle('firefox_facebook_container') }} {{ css_bundle('firefox_facebook_container') }}
{% endblock %} {% endblock %}
@ -83,10 +83,14 @@
</section> </section>
<section class="firefox-cta"> <section class="firefox-cta">
{% call call_out_compact( {% call callout_compact(
title=ftl('facebook-container-browse-freely-with-firefox'), title=ftl('facebook-container-browse-freely-with-firefox'),
class='mzp-t-dark', 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") }} {{ download_firefox(alt_copy=ftl('download-button-download-now'), dom_id="download-firefox-today") }}
{% endcall %} {% 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/. 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" %} {% extends "firefox/base/base-protocol.html" %}
@ -33,7 +33,7 @@
{% block body_class %}features-index{% endblock %} {% block body_class %}features-index{% endblock %}
{% block content %} {% block content %}
{{ call_out ( {{ callout (
title=self.page_title(), title=self.page_title(),
desc=self.page_desc(), desc=self.page_desc(),
class='c-feature-header mzp-t-content-md' 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 %} {% 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_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 %} {% 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 %} {% block page_css %}
{{ css_bundle('protocol-split') }} {{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }} {{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('firefox_tips') }} {{ css_bundle('firefox_tips') }}
{% endblock %} {% endblock %}
@ -213,20 +213,28 @@
)}} )}}
</div> </div>
{% call call_out( {% call callout(
title='Available now for desktop and mobile', title='Available now for desktop and mobile',
heading_level=3, heading_level=3,
class='mzp-t-product-firefox', class='mzp-t-product-firefox mzp-t-background-secondary',
include_cta=True 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') }} {{ download_firefox_thanks(dom_id='tips-callout-download', download_location='secondary') }}
{% endcall %} {% endcall %}
</section> </section>
{% call call_out_compact( {% call callout_compact(
title='The account that protects you rather than profits off you.', 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', class='mzp-t-product-family mzp-t-firefox mzp-t-background-tertiary hide-from-legacy-ie',
heading_level=3 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> <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 %} {% endcall %}

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

@ -6,7 +6,7 @@
{% extends "firefox/base/base-protocol.html" %} {% 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') %} {% 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" %} {% 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 #} {# "noindex" pages should not have the canonical or hreflang tags: bug 1442331 #}
{% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %} {% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}
@ -16,7 +16,7 @@
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-card') }} {{ css_bundle('protocol-card') }}
{{ css_bundle('installer_help') }} {{ css_bundle('installer_help') }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{% endblock %} {% endblock %}
{% block site_header %} {% block site_header %}
@ -43,10 +43,10 @@
{% block content %} {% block content %}
<main class="mzp-l-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"> <div class="mzp-l-content">
<h1 class="mzp-c-call-out-title">{{ ftl('installer-help-page-title') }}</h1> <h1 class="mzp-c-callout-title">{{ ftl('installer-help-page-title') }}</h1>
<p class="mzp-c-call-out-desc"> <p class="mzp-c-callout-desc">
{{ ftl('installer-help-main-tagline') }} {{ ftl('installer-help-main-tagline') }}
<span>{{ call_out_desc }}</span> <span>{{ call_out_desc }}</span>
</p> </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/. 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" %} {% extends "firefox/base/base-protocol.html" %}
@ -13,7 +13,7 @@
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-split') }} {{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-picto') }} {{ css_bundle('protocol-picto') }}
{{ css_bundle('misinformation') }} {{ css_bundle('misinformation') }}
{% endblock %} {% endblock %}
@ -190,9 +190,13 @@
</article> </article>
{% call call_out_compact( {% call callout_compact(
title=ftl('misinformation-designed-to-protect'), 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"> <div class="download-firefox">
{{ download_firefox(dom_id='misinformation-footer-download', download_location='secondary cta') }} {{ 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 %} {% block extrahead %}
{{ super() }} {{ super() }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-emphasis-box') }} {{ css_bundle('protocol-emphasis-box') }}
{{ css_bundle('firefox_new_thanks') }} {{ css_bundle('firefox_new_thanks') }}
{% endblock %} {% endblock %}
@ -39,13 +39,13 @@
</div> </div>
</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"> <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') %} {% 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"> <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 %} {% block extrahead %}
{{ super() }} {{ super() }}
{{ css_bundle('protocol-call-out') }}
{{ css_bundle('protocol-emphasis-box') }} {{ css_bundle('protocol-emphasis-box') }}
{{ css_bundle('firefox_desktop_download_thanks') }} {{ 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/. 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" %} {% extends "/firefox/base/base-protocol.html" %}
@ -13,7 +13,7 @@
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-picto') }} {{ css_bundle('protocol-picto') }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('nightly_firstrun') }} {{ css_bundle('nightly_firstrun') }}
{% endblock %} {% endblock %}
@ -33,10 +33,14 @@
{% block content %} {% block content %}
<main> <main>
{{ call_out( {{ callout(
title=ftl('nightly-firstrun-thank-you-for-using'), title=ftl('nightly-firstrun-thank-you-for-using'),
class='mzp-t-dark mzp-t-product-nightly main-header mzp-t-hero', 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"> <section class="contribute">

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

@ -11,6 +11,7 @@
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-emphasis-box') }} {{ css_bundle('protocol-emphasis-box') }}
{{ css_bundle('protocol-callout') }}
{{ css_bundle('nightly_whatsnew') }} {{ css_bundle('nightly_whatsnew') }}
{% endblock %} {% endblock %}
@ -43,10 +44,10 @@
<div class="mzp-c-emphasis-box"> <div class="mzp-c-emphasis-box">
<h2 class="c-emphasis-box-title">{{ self.page_title() }}</h2> <h2 class="c-emphasis-box-title">{{ self.page_title() }}</h2>
{% if LANG == 'es-ES' and country_code == 'ES' %} {% 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"> <div class="mzp-l-content">
<h4 class="mzp-c-call-out-title">¿Quieres ayudar en España?</h4> <h4 class="mzp-c-callout-title">¿Quieres ayudar en España?</h4>
<div class="mzp-c-call-out-desc"> <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>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> <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> </div>

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

@ -4,7 +4,7 @@
file, You can obtain one at https://mozilla.org/MPL/2.0/. 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" %} {% extends "firefox/base/base-protocol.html" %}
@ -19,7 +19,7 @@
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-split') }} {{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }} {{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('product_pocket') }} {{ css_bundle('product_pocket') }}
{% endblock %} {% endblock %}
@ -61,8 +61,8 @@
{% endcall %} {% endcall %}
<section id="pocket-features"> <section id="pocket-features">
<div class="mzp-c-call-out"> <div class="mzp-c-callout">
{{ call_out( {{ callout(
title='Fill Your Pocket in Firefox', title='Fill Your Pocket in Firefox',
desc='Use Firefox to browse, log in, save and see suggested content in Pocket.' 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 %} {% block page_css %}
{{ css_bundle('protocol-split') }} {{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-picto') }} {{ css_bundle('protocol-picto') }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-card') }} {{ css_bundle('protocol-card') }}
{{ css_bundle('firefox-privacy-common') }} {{ css_bundle('firefox-privacy-common') }}
{% endblock %} {% endblock %}
@ -27,7 +27,7 @@
<main> <main>
{% block hub_content %}{% endblock %} {% block hub_content %}{% endblock %}
{{ call_out( {{ callout(
title=ftl('firefox-privacy-hub-read-the-privacy-notice-for', url=url('privacy.notices.firefox')), title=ftl('firefox-privacy-hub-read-the-privacy-notice-for', url=url('privacy.notices.firefox')),
class='call-out-privacy') class='call-out-privacy')
}} }}

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

@ -17,7 +17,7 @@
{{ css_bundle('protocol-split') }} {{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }} {{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-picto') }} {{ css_bundle('protocol-picto') }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('privacy-book') }} {{ css_bundle('privacy-book') }}
{% endblock %} {% endblock %}
@ -26,11 +26,11 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<section class="mzp-c-call-out mzp-t-hero"> <section class="mzp-c-callout mzp-t-hero">
<div class="mzp-l-content"> <div class="mzp-l-content">
<img src="{{ static('img/firefox/privacy/book/privacy-eyes.png') }}" width="200" height="200" alt=""> <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> <h1 class="mzp-c-callout-title">{{ ftl('privacy-book-little-book-of') }}</h1>
<p class="mzp-c-call-out-desc">{{ ftl('privacy-book-how-to-stay') }}</p> <p class="mzp-c-callout-desc">{{ ftl('privacy-book-how-to-stay') }}</p>
{{ download_firefox_thanks() }} {{ download_firefox_thanks() }}
</div> </div>
</section> </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/. 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" %} {% extends "firefox/privacy/base.html" %}
@ -56,7 +56,7 @@
<p>{{ ftl('firefox-privacy-hub-you-should-be-able-to-decide') }}</p> <p>{{ ftl('firefox-privacy-hub-you-should-be-able-to-decide') }}</p>
{% endcall %} {% endcall %}
{{ call_out( {{ callout(
title=ftl('firefox-privacy-hub-thats-why-everything-we-make'), title=ftl('firefox-privacy-hub-thats-why-everything-we-make'),
class='call-out-data-promise') 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.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" %} {% 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.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" %} {% extends "firefox/privacy/base.html" %}
@ -25,9 +25,9 @@
{% block hub_content %} {% 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, 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) heading_level=1)
}} }}
@ -121,7 +121,7 @@
</ul> </ul>
</div> </div>
{% call call_out( {% call callout(
title=ftl('firefox-privacy-hub-more-than-s-trackers-blocked', trackers=10000000000), title=ftl('firefox-privacy-hub-more-than-s-trackers-blocked', trackers=10000000000),
class='privacy-products-tracker-counter mzp-t-dark', class='privacy-products-tracker-counter mzp-t-dark',
include_cta=True 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.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" %} {% extends "firefox/base/base-protocol.html" %}
@ -46,7 +46,7 @@
{% block body_class %}mzp-t-firefox {{ theme_class }}{% endblock %} {% block body_class %}mzp-t-firefox {{ theme_class }}{% endblock %}
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-article') }} {{ css_bundle('protocol-article') }}
{{ css_bundle('firefox_releasenotes') }} {{ css_bundle('firefox_releasenotes') }}
{% endblock %} {% endblock %}
@ -111,12 +111,16 @@
{% endif %} {% endif %}
{% set bugzilla_url='https://bugzilla.mozilla.org/' %} {% 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) %} {% 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, heading_level=1,
title=primary_heading, title=primary_heading,
desc=call_out_desc|safe, desc=call_out_desc|safe,
class='mzp-t-firefox ' + product_class, class='mzp-t-firefox mzp-t-background-tertiary ' + product_class,
include_cta=True, include_cta=True,
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg',
) %} ) %}
{% if download_button_primary %} {% if download_button_primary %}
<div class="c-download-cta"> <div class="c-download-cta">
@ -340,9 +344,13 @@
{% endif %} {% endif %}
</section> </section>
{% call call_out_compact( {% call callout_compact(
title=download_title, 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 }} {{ download_button_secondary }}
{% endcall %} {% endcall %}

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

@ -6,7 +6,7 @@
{% extends "firefox/base/base-protocol.html" %} {% 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 %} {% 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 body_class %}mzp-t-firefox mzp-t-{{ channel_name|lower }}{% endblock %}
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('firefox_system_requirements') }} {{ css_bundle('firefox_system_requirements') }}
{% endblock %} {% endblock %}
@ -33,9 +33,13 @@
</div> </div>
</main> </main>
{% call call_out_compact( {% call callout_compact(
title='Get the most recent version', 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') }} {{ download_firefox(alt_copy=ftl('download-button-download-firefox'), download_location='primary cta') }}
{% endcall %} {% endcall %}

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

@ -6,14 +6,14 @@
#} #}
{% extends "firefox/base/base-protocol.html" %} {% 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_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_desc %}{{ ftl('set-as-default-landing-choose-the-browser') }}{% endblock %}
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-picto') }} {{ css_bundle('protocol-picto') }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('firefox-default-landing') }} {{ css_bundle('firefox-default-landing') }}
{% endblock %} {% endblock %}
@ -22,12 +22,16 @@
{% block content %} {% block content %}
<main> <main>
{% call call_out( {% call callout(
title=ftl('set-as-default-landing-make-sure-youre-protected'), title=ftl('set-as-default-landing-make-sure-youre-protected'),
desc=ftl('set-as-default-landing-thanks-for-using-the'), desc=ftl('set-as-default-landing-thanks-for-using-the'),
class='mzp-t-hero mzp-t-product-firefox', class='mzp-t-hero mzp-t-product-firefox',
include_cta=True, include_cta=True,
heading_level=1, heading_level=1,
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg',
) %} ) %}
<div class="cta-container"> <div class="cta-container">
<div class="mzp-c-button-download-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/. 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" %} {% 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_title %}{{ ftl('set-as-default-thanks-set-as-default-thanks-for-choosing-firefox') }}{% endblock %}
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-call-out')}} {{ css_bundle('protocol-callout')}}
{{ css_bundle('firefox-default-thanks') }} {{ css_bundle('firefox-default-thanks') }}
{% endblock %} {% endblock %}
@ -28,19 +28,23 @@
</div> </div>
</div> </div>
{% call call_out( {% call callout(
title=ftl('set-as-default-thanks-set-as-default-thanks-for-choosing-firefox'), title=ftl('set-as-default-thanks-set-as-default-thanks-for-choosing-firefox'),
class='mzp-t-product-firefox mzp-t-hero thanks-hero', class='mzp-t-product-firefox mzp-t-hero thanks-hero',
include_cta=True, 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"> <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') }} {{ ftl('set-as-default-thanks-looks-like-youre-using-a') }}
</p> </p>
{{ download_firefox(alt_copy=ftl('download-button-download-firefox'), download_location='primary cta') }} {{ download_firefox(alt_copy=ftl('download-button-download-firefox'), download_location='primary cta') }}
</div> </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>{{ ftl('set-as-default-thanks-youre-almost-done-just-change') }}</p>
<p class="thanks-help-text"> <p class="thanks-help-text">
@ -49,15 +53,15 @@
</a> </a>
</p> </p>
</div> </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', {{ ftl('set-as-default-thanks-heres-everything-you-need-android',
android='https://support.mozilla.org/kb/make-firefox-default-browser-android' ~ utms) }} android='https://support.mozilla.org/kb/make-firefox-default-browser-android' ~ utms) }}
</p> </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', {{ 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) }} ios='https://support.mozilla.org/en-US/kb/unable-set-firefox-default-browser-ios' ~ utms) }}
</p> </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') }} {{ ftl('set-as-default-thanks-youre-all-set') }}
</p> </p>
{% endcall %} {% endcall %}

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

@ -6,7 +6,7 @@
{% extends "firefox/base/base-protocol.html" %} {% 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 %} {% block page_title_prefix %}
Firefox for iOS Beta — 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 %} {% block page_css %}
{{ css_bundle('protocol-newsletter') }} {{ css_bundle('protocol-newsletter') }}
{{ css_bundle('protocol-call-out')}} {{ css_bundle('protocol-callout')}}
{{ css_bundle('protocol-emphasis-box') }} {{ css_bundle('protocol-emphasis-box') }}
{{ css_bundle('firefox_ios_testflight') }} {{ css_bundle('firefox_ios_testflight') }}
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<main> <main>
{% call call_out(
{% call callout(
title='Help shape the future <br>of Firefox for iOS'|safe, title='Help shape the future <br>of Firefox for iOS'|safe,
desc='Sign up to test pre-release versions to make Firefox even better.', 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', class='mzp-t-firefox mzp-t-dark mzp-t-hero',
heading_level=1) %} heading_level=1,
brand=True,
brand_product='firefox',
brand_type='logo',
brand_size='lg') %}
{% endcall %} {% endcall %}
<section class="mzp-l-content mzp-t-content-sm"> <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/. 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" %} {% extends "firefox/welcome/base.html" %}
@ -26,7 +26,7 @@
{%block page_css %} {%block page_css %}
{{ super()}} {{ super()}}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{% endblock %} {% endblock %}
{% set _entrypoint = 'mozilla.org-firefox-welcome-1' %} {% set _entrypoint = 'mozilla.org-firefox-welcome-1' %}
@ -39,7 +39,7 @@
{% block content_intro %} {% block content_intro %}
{% call call_out( {% call callout(
title=hero_title, title=hero_title,
desc=ftl('welcome-page1-youve-got-the-web-browser'), desc=ftl('welcome-page1-youve-got-the-web-browser'),
class='mzp-t-firefox mzp-t-dark mzp-t-hero', 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/. 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" %} {% extends "firefox/welcome/base.html" %}
@ -16,7 +16,7 @@
{%block page_css %} {%block page_css %}
{{ super()}} {{ super()}}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{% endblock %} {% endblock %}
{% set _source = 'ffwelcome2' %} {% set _source = 'ffwelcome2' %}
@ -24,7 +24,7 @@
{% set _utm_campaign = 'welcome-2-pocket' %} {% set _utm_campaign = 'welcome-2-pocket' %}
{% block content_intro %} {% block content_intro %}
{% call call_out( {% call callout(
title=ftl('welcome-page2-your-time-online-is-worth'), title=ftl('welcome-page2-your-time-online-is-worth'),
desc=ftl('welcome-page2-discover-and-save-stories'), desc=ftl('welcome-page2-discover-and-save-stories'),
class='mzp-t-firefox mzp-t-dark mzp-t-hero', 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.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" %} {% extends "firefox/welcome/base.html" %}
@ -19,14 +19,14 @@
{%block page_css %} {%block page_css %}
{{ super()}} {{ super()}}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{% endblock %} {% endblock %}
{% set _entrypoint = 'mozilla.org-firefox-welcome-4' %} {% set _entrypoint = 'mozilla.org-firefox-welcome-4' %}
{% set _utm_campaign = 'welcome-4-mobile' %} {% set _utm_campaign = 'welcome-4-mobile' %}
{% block content_intro %} {% block content_intro %}
{% call call_out( {% call callout(
title=ftl('welcome-page4-privacy-every-screen-now', fallback='welcome-page4-wallet-keys-phone-firefox'), 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'), desc=ftl('welcome-page4-privacy-on-by-default', fallback='welcome-page4-take-privacy-with-you-on-every'),
class='mzp-t-firefox mzp-t-hero', 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.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" %} {% extends "firefox/welcome/base.html" %}
@ -22,11 +22,11 @@
{%block page_css %} {%block page_css %}
{{ super()}} {{ super()}}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{% endblock %} {% endblock %}
{% block content_intro %} {% block content_intro %}
{% call call_out( {% call callout(
title=ftl('welcome-page6-make-sure-youre-protected'), title=ftl('welcome-page6-make-sure-youre-protected'),
desc=ftl('welcome-page6-when-you-choose-firefox-you'), desc=ftl('welcome-page6-when-you-choose-firefox-you'),
class='mzp-t-firefox mzp-t-dark mzp-t-hero', 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/. 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" %} {% extends "firefox/welcome/base.html" %}
@ -17,11 +17,11 @@
{%block page_css %} {%block page_css %}
{{ super()}} {{ super()}}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{% endblock %} {% endblock %}
{% block content_intro %} {% block content_intro %}
{% call call_out( {% call callout(
title=ftl('page7-its-okay-to-like-facebook'), title=ftl('page7-its-okay-to-like-facebook'),
desc=ftl('page7-if-you-still-kinda-like-facebook'), desc=ftl('page7-if-you-still-kinda-like-facebook'),
class='mzp-t-firefox mzp-t-dark mzp-t-hero', 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/. 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" %} {% extends "firefox/welcome/base.html" %}
@ -18,11 +18,11 @@
{%block page_css %} {%block page_css %}
{{ super()}} {{ super()}}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{% endblock %} {% endblock %}
{% block content_intro %} {% block content_intro %}
{% call call_out( {% call callout(
title=ftl('welcome-page8-your-privacy-respected'), title=ftl('welcome-page8-your-privacy-respected'),
desc=ftl('welcome-page8-firefox-automatically-protects'), desc=ftl('welcome-page8-firefox-automatically-protects'),
class='mzp-t-firefox mzp-t-dark mzp-t-hero variation-default', 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/. 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" %} {% extends "firefox/welcome/base.html" %}
@ -22,14 +22,14 @@
{%block page_css %} {%block page_css %}
{{ super()}} {{ super()}}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{% endblock %} {% endblock %}
{% block content_intro %} {% block content_intro %}
<img class="product-logo" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="65" alt=""> <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, 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.', 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', class='mzp-t-firefox mzp-t-hero',
@ -37,7 +37,7 @@
heading_level=1 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"> <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> <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/. 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" %} {% extends "firefox/welcome/base.html" %}
@ -22,14 +22,14 @@
{%block page_css %} {%block page_css %}
{{ super()}} {{ super()}}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{% endblock %} {% endblock %}
{% block content_intro %} {% block content_intro %}
<img class="product-logo" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="65" alt=""> <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, 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.', 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', class='mzp-t-firefox mzp-t-hero',
@ -37,7 +37,7 @@
heading_level=1 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"> <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> <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 %} {% block page_css %}
{{ css_bundle('reimagine-open') }} {{ css_bundle('reimagine-open') }}
{{ css_bundle('protocol-call-out')}} {{ css_bundle('protocol-callout')}}
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<article> <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="mzp-l-content">
<div class="c-call-out-body"> <div class="c-callout-body">
<h1 class="mzp-c-call-out-title">Reimagine Open: Building Better Internet Experiences</h1> <h1 class="mzp-c-callout-title">Reimagine Open: Building Better Internet Experiences</h1>
<div class="mzp-c-call-out-desc"> <div class="mzp-c-callout-desc">
<p class="c-call-out-byline">By Mitchell Baker, Alan Davidson, Alice Munyua, and Amba Kak</p> <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 <p>The internet is at a crossroads. After decades of rapid growth and
global contribution to the human condition, today many are questioning 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 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-split') }}
{{ css_bundle('protocol-card') }} {{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-newsletter') }} {{ css_bundle('protocol-newsletter') }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('about') }} {{ css_bundle('about') }}
{% endblock %} {% endblock %}
{% block content %} {% 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"> <div class="mzp-l-content">
<h1 class="mzp-c-call-out-title">{{ ftl('about-mozilla-makes-browsers-apps') }}</h1> <h1 class="mzp-c-callout-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="mzp-c-callout-desc">{{ ftl('about-our-mission-keep-the-internet') }}</p>
<p class="c-call-out-cta"> <p class="c-callout-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"> <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') }} {{ ftl('about-read-our-mission') }}
</a> </a>
</p> </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/. 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" %} {% extends "base-protocol-mozilla.html" %}
@ -17,7 +17,7 @@
{% block body_id %}manifesto-landing{% endblock %} {% block body_id %}manifesto-landing{% endblock %}
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-newsletter') }} {{ css_bundle('protocol-newsletter') }}
{{ css_bundle('manifesto') }} {{ css_bundle('manifesto') }}
{% endblock %} {% endblock %}
@ -70,11 +70,11 @@
</div> </div>
</section> </section>
{% call call_out( {% call callout(
title=ftl('manifesto-show-your-support'), title=ftl('manifesto-show-your-support'),
desc=ftl('manifesto-an-internet-with-these'), desc=ftl('manifesto-an-internet-with-these'),
class='share-addendum', class='share-addendum',
include_cta=True include_cta=True,
) %} ) %}
<p> <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"> <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 %} {% block page_css %}
{{ css_bundle('protocol-split') }} {{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }} {{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('lean-data') }} {{ css_bundle('lean-data') }}
{% endblock %} {% endblock %}
@ -163,15 +163,15 @@
</div> </div>
</section> </section>
<aside class="contact mzp-c-call-out-compact"> <aside class="contact mzp-c-callout mzp-l-compact mzp-t-background-tertiary">
<div class="mzp-l-content mzp-t-content-md"> <div class="mzp-l-content mzp-t-content-xl">
<div class="mzp-c-call-out-content"> <div class="mzp-c-callout-content">
<div class="mzp-c-call-out-container"> <div class="mzp-c-callout-container">
<h3 class="mzp-c-call-out-title">Drive the conversation in your organization.</h3> <h3 class="mzp-c-callout-title">Drive the conversation in your organization.</h3>
</div> </div>
</div> </div>
<div class="mzp-c-call-out-cta"> <div class="mzp-c-callout-cta">
<p class="mzp-c-call-out-cta-container"> <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> <a id="contact-button" href="https://docs.google.com/forms/d/191_0cQHpvBAutNRFZSkUjeeHfVRadKPa_v8Ct9x5mDQ/" class="mzp-c-button">Contact Us</a>
</p> </p>
</div> </div>

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

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

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

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

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

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

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

@ -10,7 +10,7 @@
{% block page_css %} {% block page_css %}
{{ css_bundle("protocol-article") }} {{ css_bundle("protocol-article") }}
{{ css_bundle("protocol-call-out") }} {{ css_bundle("protocol-callout") }}
{{ css_bundle("webvision") }} {{ css_bundle("webvision") }}
{% endblock %} {% endblock %}
@ -23,10 +23,10 @@
{{ doc.content|safe }} {{ doc.content|safe }}
</article> </article>
</main> </main>
<section class="mzp-c-call-out"> <section class="mzp-c-callout mzp-t-background-secondary">
<div class="mzp-l-content"> <div class="mzp-l-content">
<h2 class="mzp-c-call-out-title">Ready for more?</h2> <h2 class="mzp-c-callout-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> <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> </div>
</section> </section>
{% endblock %} {% endblock %}

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

@ -6,24 +6,28 @@
{% extends "base-protocol-mozilla.html" %} {% 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_title %}Advertise with Mozilla{% endblock %}
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-picto') }} {{ css_bundle('protocol-picto') }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('mozilla-ads') }} {{ css_bundle('mozilla-ads') }}
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<header class="mzp-c-call-out mzp-t-dark c-header"> <header class="mzp-c-callout mzp-t-dark mzp-t-background-secondary c-header">
<div class="mzp-l-content"> <div class="mzp-l-content mzp-t-content-lg">
<h1>Find hard-to-reach audiences with Mozilla Ads</h1> <div class="c-callout-body">
<p>Reach unique audiences while protecting your brand’s safety and your customer’s privacy</p> <h1 class="mzp-c-callout-title">Find hard-to-reach audiences with Mozilla Ads</h1>
<a href="https://mozilla.formstack.com/forms/advertising" class="mzp-c-button mzp-t-dark">Contact us</a> <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>
</div>
</header> </header>
<section class="c-info mzp-l-content mzp-l-columns mzp-t-columns-two"> <section class="c-info mzp-l-content mzp-l-columns mzp-t-columns-two">
@ -93,7 +97,7 @@
{% endcall %} {% endcall %}
</section> </section>
<section class="mzp-c-call-out c-purple-callout"> <section class="mzp-c-callout c-purple-callout">
<div class="mzp-l-content"> <div class="mzp-l-content">
<h2>Learn more about advertising on Mozilla</h2> <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> <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/. 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 %} {% from "products/vpn/includes/macros.html" import vpn_resource_center_cta with context %}
{% extends "products/vpn/base.html" %} {% extends "products/vpn/base.html" %}
@ -16,7 +16,7 @@
{% block page_css %} {% block page_css %}
{{ css_bundle('protocol-split') }} {{ css_bundle('protocol-split') }}
{{ css_bundle('protocol-card') }} {{ css_bundle('protocol-card') }}
{{ css_bundle('protocol-call-out') }} {{ css_bundle('protocol-callout') }}
{{ css_bundle('protocol-article') }} {{ css_bundle('protocol-article') }}
{{ css_bundle('vpn-resource-center') }} {{ css_bundle('vpn-resource-center') }}
{% endblock page_css %} {% endblock page_css %}
@ -38,7 +38,7 @@
{% block content %} {% block content %}
<div class="mzp-l-content"> <div class="mzp-l-content">
{{ call_out ( {{ callout (
title=ftl('vpn-resource-center-whats-the-deal'), title=ftl('vpn-resource-center-whats-the-deal'),
desc=ftl('vpn-resource-center-discover-how-they'), desc=ftl('vpn-resource-center-discover-how-they'),
class='resource-center-page-header resource-center-hero' class='resource-center-page-header resource-center-hero'
@ -77,7 +77,7 @@
media_class='resource-center-split-media', 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> <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( {{ vpn_resource_center_cta(
referral_id='vpn-resource-center', referral_id='vpn-resource-center',
link_text=vpn_saving(country_code=country_code, lang=LANG, ftl_string='vpn-shared-save-percent-on'), 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/modal';
@use '~@mozilla-protocol/core/protocol/css/components/video'; @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 '~@mozilla-protocol/core/protocol/css/templates/card-layout';
@use '../protocol/components/custom-menu-list'; @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'; $brand-theme: 'firefox';
@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @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'; $brand-theme: 'mozilla';
@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @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'; $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @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';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox'; @import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
@ -75,10 +74,10 @@ $image-path: '/media/protocol/img';
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
// Call out // Call out
.mzp-c-call-out-compact.mzp-t-dark { .mzp-l-compact.mzp-t-dark {
background: $color-purple-90; background: $color-purple-90;
.mzp-c-call-out-title { .mzp-c-callout-title {
color: $color-orange-50; 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'; $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @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 { .mzp-c-article {
margin: $layout-lg auto; 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'; $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @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 { .mzp-c-article {
margin: $layout-lg auto; margin: $layout-lg auto;

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

@ -79,18 +79,13 @@ $image-path: '/media/protocol/img';
// * -------------------------------------------------------------------------- */ // * -------------------------------------------------------------------------- */
// Call out // Call out
.mzp-c-call-out-compact.mzp-t-dark { .mzp-l-compact.mzp-t-dark {
background: $color-purple-90; background: $color-purple-90;
.mzp-l-content { @media #{$mq-md} {
@include grid-column-gap($spacing-sm); .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/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; @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-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'; @import '../protocol/components/sub-navigation';
// * -------------------------------------------------------------------------- */ // * -------------------------------------------------------------------------- */

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

@ -46,17 +46,6 @@ $image-path: '/media/protocol/img';
text-align: center; 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 // Split

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

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

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

@ -6,7 +6,7 @@ $font-path: '/media/fonts';
$image-path: '/media/protocol/img'; $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @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'; @import '~@mozilla-protocol/core/protocol/css/components/breadcrumb';
.feature-article-container { .feature-article-container {
@ -47,7 +47,7 @@ $image-path: '/media/protocol/img';
position: relative; position: relative;
} }
& > .mzp-c-call-out { & > .mzp-c-callout {
margin: $spacing-lg 0; margin: $spacing-lg 0;
padding: $spacing-lg; padding: $spacing-lg;
} }
@ -81,7 +81,7 @@ $image-path: '/media/protocol/img';
@media #{$mq-md} { @media #{$mq-md} {
padding: $spacing-2xl; padding: $spacing-2xl;
& > .mzp-c-call-out { & > .mzp-c-callout {
margin: $spacing-xl ($spacing-2xl * -1); margin: $spacing-xl ($spacing-2xl * -1);
padding: $spacing-xl $spacing-2xl; 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'; $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @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/components/card';
@import '~@mozilla-protocol/core/protocol/css/templates/card-layout'; @import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
@import '~@mozilla-protocol/core/protocol/css/templates/multi-column'; @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 { .mzp-l-content {
max-width: $content-md; 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/section-heading';
@import '~@mozilla-protocol/core/protocol/css/components/video'; @import '~@mozilla-protocol/core/protocol/css/components/video';
@import '~@mozilla-protocol/core/protocol/css/components/zap'; @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 // Play button on videos
.mzp-c-card-media-wrapper { .mzp-c-card-media-wrapper {
@ -33,8 +35,3 @@ $image-path: '/media/protocol/img';
transform: scale(1.1); 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'; $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @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 { main {
background-color: $color-ink-80; background-color: $color-ink-80;
color: $color-white; 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); background: linear-gradient($color-black, $color-ink-80);
@media #{$mq-md} { @media #{$mq-md} {
.mzp-c-call-out-title { .mzp-c-callout-title {
background-size: 160px 160px;
margin-bottom: $spacing-xl; 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; background-color: #fff;
.mzp-l-content { .mzp-l-content {

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

@ -159,6 +159,6 @@ $brand-theme: 'firefox';
// -------------------------------------------------------------------------- // // -------------------------------------------------------------------------- //
// Call Out // Call Out
.mzp-c-call-out-compact.mzp-t-dark { .mzp-c-callout-compact.mzp-t-dark {
background: $color-ink-80; 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; background: transparent;
.mzp-c-call-out-title { .mzp-c-callout-title {
@include text-title-xl; @include text-title-xl;
max-width: 610px; max-width: 610px;
margin: 0 auto; 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; background: $color-white;
} }

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

@ -15,7 +15,7 @@ $brand-theme: 'firefox';
.call-out-privacy { .call-out-privacy {
background-color: $color-white; background-color: $color-white;
.mzp-c-call-out-title { .mzp-c-callout-title {
@include text-title-xs; @include text-title-xs;
background: url('/media/img/firefox/privacy/icon-privacy.svg') top center no-repeat; background: url('/media/img/firefox/privacy/icon-privacy.svg') top center no-repeat;
padding-top: 70px + $spacing-lg; 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 // Top Page Call Out
.privacy-products-call-out-main { .privacy-products-callout-main {
background-color: $color-white; background-color: $color-white;
.mzp-c-call-out-title { .mzp-c-callout-title {
@include text-title-md; @include text-title-md;
margin: $spacing-md 0; margin: $spacing-md 0;
@ -96,7 +96,7 @@ $image-path: '/media/protocol/img';
@include light-links; @include light-links;
background-color: $color-violet-80; background-color: $color-violet-80;
.mzp-c-call-out-title { .mzp-c-callout-title {
margin: 0 auto $spacing-lg; margin: 0 auto $spacing-lg;
max-width: 24em; max-width: 24em;
@ -163,7 +163,7 @@ $image-path: '/media/protocol/img';
} }
} }
.call-out-privacy { .callout-privacy {
background-color: $color-marketing-gray-10; 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 { .call-out-data-promise {
background: $color-white; background: $color-white;
.mzp-c-call-out-title { .mzp-c-callout-title {
@include text-title-sm; @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/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/templates/main-with-sidebar'; @import '~@mozilla-protocol/core/protocol/css/templates/main-with-sidebar';
@import '../protocol/components/sub-navigation'; @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 // Call out / page header
.mzp-c-call-out.mzp-t-product-firefox, .mzp-c-callout.mzp-t-product-firefox,
.mzp-c-call-out.mzp-t-product-beta { .mzp-c-callout.mzp-t-product-beta {
background: $color-marketing-gray-20; background: $color-marketing-gray-20;
} }
// nightly header gradient // nightly header gradient
.mzp-c-call-out.mzp-t-product-nightly { .mzp-c-callout.mzp-t-product-nightly {
background: linear-gradient(#000, #001e44); background: linear-gradient(#000, #001e44);
} }
// developer header gradient // developer header gradient
.mzp-c-call-out.mzp-t-product-developer { .mzp-c-callout.mzp-t-product-developer {
background: linear-gradient(#000, #001e44); background: linear-gradient(#000, #001e44);
} }
@ -36,7 +38,7 @@ $image-path: '/media/protocol/img';
.t-quantum { .t-quantum {
// firefox release // 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'); background-image: url('/media/img/firefox/releasenotes/release-quantum.png');
@media #{$mq-high-res} { @media #{$mq-high-res} {
@ -45,7 +47,7 @@ $image-path: '/media/protocol/img';
} }
// firefox beta // 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'); background-image: url('/media/img/firefox/releasenotes/beta-quantum.png');
@media #{$mq-high-res} { @media #{$mq-high-res} {
@ -54,7 +56,7 @@ $image-path: '/media/protocol/img';
} }
// firefox nightly // 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'); background-image: url('/media/img/firefox/releasenotes/nightly-quantum.png');
@media #{$mq-high-res} { @media #{$mq-high-res} {
@ -63,7 +65,7 @@ $image-path: '/media/protocol/img';
} }
// firefox developer edition // 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'); background-image: url('/media/img/firefox/releasenotes/developer-quantum.png');
@media #{$mq-high-res} { @media #{$mq-high-res} {
@ -72,7 +74,7 @@ $image-path: '/media/protocol/img';
} }
// pre-dev edition firefox aurora // 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'); background-image: url('/media/img/firefox/releasenotes/aurora.png');
@media #{$mq-high-res} { @media #{$mq-high-res} {
@ -83,7 +85,7 @@ $image-path: '/media/protocol/img';
.t-pre-quantum { .t-pre-quantum {
// firefox release // 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'); background-image: url('/media/img/firefox/releasenotes/firefox-old.png');
@media #{$mq-high-res} { @media #{$mq-high-res} {
@ -92,7 +94,7 @@ $image-path: '/media/protocol/img';
} }
// firefox beta // 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'); background-image: url('/media/img/firefox/releasenotes/beta-old.png');
@media #{$mq-high-res} { @media #{$mq-high-res} {
@ -101,7 +103,7 @@ $image-path: '/media/protocol/img';
} }
// firefox nightly // 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'); background-image: url('/media/img/firefox/releasenotes/nightly-old.png');
@media #{$mq-high-res} { @media #{$mq-high-res} {
@ -110,7 +112,7 @@ $image-path: '/media/protocol/img';
} }
// firefox developer edition // 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'); background-image: url('/media/img/firefox/releasenotes/developer-old.png');
@media #{$mq-high-res} { @media #{$mq-high-res} {
@ -119,7 +121,7 @@ $image-path: '/media/protocol/img';
} }
// pre-dev edition firefox aurora // 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'); background-image: url('/media/img/firefox/releasenotes/aurora.png');
@media #{$mq-high-res} { @media #{$mq-high-res} {
@ -361,17 +363,17 @@ $image-path: '/media/protocol/img';
// * -------------------------------------------------------------------------- */ // * -------------------------------------------------------------------------- */
// Compact call out // Compact call out
.mzp-c-call-out-compact { .mzp-c-callout-compact {
margin-top: $layout-md; margin-top: $layout-md;
} }
// nightly footer gradient // 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); background: linear-gradient(#001e44, #002d66);
} }
// developer footer gradient // 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); background: linear-gradient(#001e44, #002d66);
} }

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

@ -37,6 +37,6 @@ $image-path: '/media/protocol/img';
// * -------------------------------------------------------------------------- */ // * -------------------------------------------------------------------------- */
// Call out // Call out
.mzp-c-call-out-compact.mzp-t-dark { .mzp-c-callout-compact.mzp-t-dark {
background: $color-ink-80; 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'; $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @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; background: $color-white;
.mzp-c-call-out-title { .mzp-c-callout-title {
@include background-size(64px, 64px); @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/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/notification-bar'; @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 // 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; background: $color-white;
.mzp-c-call-out-desc { .mzp-c-callout-desc {
@include text-title-xs; @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'; $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @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 // Header
@ -111,15 +113,15 @@ $image-path: '/media/protocol/img';
} }
// * -------------------------------------------------------------------------- */ // * -------------------------------------------------------------------------- */
// Call-out // Callout
.mzp-c-call-out-compact, .mzp-c-callout-compact,
.all-download { .all-download {
display: none; display: none;
} }
.is-modern-browser { .is-modern-browser {
.mzp-c-call-out-compact { .mzp-c-callout-compact {
display: block; display: block;
} }

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

@ -6,11 +6,13 @@ $font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img'; $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @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 // Call-out
.mzp-c-call-out.mzp-t-hero { .mzp-c-callout.mzp-t-hero {
background-color: $color-ink-80; 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 { &.mzp-t-dark.mzp-t-hero {
background-color: $color-marketing-gray-99; 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; @include text-title-lg;
margin-bottom: $layout-sm; 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; @include text-body-lg;
margin-bottom: $layout-sm; margin-bottom: $layout-sm;
@ -296,7 +296,7 @@ html {
// * -------------------------------------------------------------------------- */ // * -------------------------------------------------------------------------- */
// Dark theme // Dark theme
.mzp-c-call-out.mzp-t-dark { .mzp-c-callout.mzp-t-dark {
@include light-links; @include light-links;
background-color: $color-ink-80; background-color: $color-ink-80;
color: $color-white; 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'; @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; background: $color-moz-neon-green url('/media/img/foundation/reimagine-open/bg-header.png') left bottom no-repeat;
@include background-size(469px, 195px); @include background-size(469px, 195px);
.mzp-c-call-out-desc { .mzp-c-callout-desc {
@include text-body-xl; @include text-body-xl;
} }
.c-call-out-byline { .c-callout-byline {
@include text-body-sm; @include text-body-sm;
font-style: italic; font-style: italic;
margin-bottom: $spacing-2xl; margin-bottom: $spacing-2xl;

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

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

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

@ -21,7 +21,7 @@ $image-path: '/media/protocol/img';
background: transparent; background: transparent;
} }
.c-call-out-cta { .c-callout-cta {
margin-top: $spacing-lg; 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; 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 { .mzp-l-content {
max-width: $content-md; max-width: $content-md;
.mzp-c-call-out-title { .mzp-c-callout-title {
@include font-firefox; @include font-firefox;
} }
.mzp-c-call-out-desc { .mzp-c-callout-desc {
font-weight: 700; font-weight: 700;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;

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

@ -188,7 +188,7 @@ ul.download-list {
} }
// Callout styling // Callout styling
.fx-unsupported .mzp-c-call-out-compact { .fx-unsupported .mzp-c-callout-compact {
.fx-unsupported-message, .fx-unsupported-message,
.fx-privacy-link, .fx-privacy-link,
.mzp-c-button-download-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 MzpNewsletter from '@mozilla-protocol/core/protocol/js/newsletter';
import NewsletterForm from './newsletter.es6';
MzpNewsletter.init(); const successCustomCallback = () => {
NewsletterForm.init(); 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": [ "files": [
"css/protocol/components/call-out.scss" "css/protocol/components/callout.scss"
], ],
"name": "protocol-call-out" "name": "protocol-callout"
}, },
{ {
"files": [ "files": [
@ -1478,6 +1478,12 @@
], ],
"name": "protocol-modal" "name": "protocol-modal"
}, },
{
"files": [
"js/newsletter/newsletter-init.es6.js"
],
"name": "newsletter"
},
{ {
"files": [ "files": [
"js/firefox/features/tips/tips-youtube.js" "js/firefox/features/tips/tips-youtube.js"
@ -1878,13 +1884,6 @@
], ],
"name": "firefox-enterprise" "name": "firefox-enterprise"
}, },
{
"files": [
"js/newsletter/newsletter.es6.js",
"js/newsletter/newsletter-init.es6.js"
],
"name": "newsletter"
},
{ {
"files": [ "files": [
"js/newsletter/management.es6.js", "js/newsletter/management.es6.js",

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

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

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

@ -6,8 +6,8 @@
"dependencies": { "dependencies": {
"@babel/core": "^7.23.6", "@babel/core": "^7.23.6",
"@babel/preset-env": "^7.23.6", "@babel/preset-env": "^7.23.6",
"@mozilla-protocol/core": "^18.0.0", "@mozilla-protocol/core": "^19.0.0",
"@mozilla/glean": "^4.0.0", "@mozilla/glean": "^4.0.0-pre.3",
"@mozmeao/cookie-helper": "^1.1.0", "@mozmeao/cookie-helper": "^1.1.0",
"@mozmeao/dnt-helper": "^1.0.0", "@mozmeao/dnt-helper": "^1.0.0",
"@mozmeao/trafficcop": "^2.0.1", "@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/" _URL_TEMPLATE = "/{locale}/products/vpn/resource-center/"
# Header unit # 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 # Article link
_resource_center_article_link_locator = (By.CSS_SELECTOR, ".resource-center-articles .mzp-c-card a.mzp-c-card-block-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'
);
});
});
});