Skip to content

Commit

Permalink
Update newsletter/firefox page (issue #15075)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexgibson
alexgibson committed Sep 10, 2024
1 parent 01269de commit 9d18938
Show file tree
Hide file tree
Showing 12 changed files with 153 additions and 56 deletions.
72 changes: 65 additions & 7 deletions bedrock/newsletter/templates/newsletter/firefox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,43 @@

{% extends 'base-protocol.html' %}

{% block page_title %}{{ ftl('newsletters-put-more-fox-in-your-inbox') }}{% endblock page_title %}
{% block page_desc %}{{ ftl('newsletters-see-where-the-web-can-take') }}{% endblock %}
{% if LAND == 'de' %}
{% set page_title_copy = 'Entfalte das volle Potential von Firefox' %}
{% set page_desc_copy = 'Melde dich an, um monatliche Updates von Firefox und Infos zu aktuellen Internet-Trends zu erhalten.' %}
{% elif LANG == 'en-GB' %}
{% set page_title_copy = 'Put more fox in your inbox' %}
{% set page_desc_copy = 'Make your Firefox experience work best for you with monthly how-tos and internet security tips.' %}
{% elif LANG == 'en-US' %}
{% set page_title_copy = 'Put more fox in your inbox' %}
{% set page_desc_copy = 'Get the most out of Firefox with monthly how-tos and internet security tips.' %}
{% elif LANG == 'es-ES' %}
{% set page_title_copy = 'Exprime todo el potencial de Firefox' %}
{% set page_desc_copy = 'Regístrate para recibir actualizaciones mensuales de Firefox y las últimas tendencias en Internet que mejoran tu vida online.' %}
{% elif LANG == 'fr' %}
{% set page_title_copy = 'Révélez tout le potentiel de Firefox' %}
{% set page_desc_copy = 'Abonnez-vous et retrouvez les dernières actualités et astuces pour améliorer votre expérience internet.' %}
{% elif LANG == 'it' %}
{% set page_title_copy = 'Goditi tutto il potenziale di Firefox' %}
{% set page_desc_copy = 'Iscriviti per ricevere aggiornamenti da Firefox ogni mese sulle tendenze di internet che migliorano la tua vita online.' %}
{% elif LANG == 'nl' %}
{% set page_title_copy = 'Haal meer uit Firefox' %}
{% set page_desc_copy = 'Meld u aan voor maandelijkse updates van Firefox en internettrends die bepalend zijn voor uw leven online.' %}
{% elif LANG == 'pl' %}
{% set page_title_copy = 'Wyciśnij z Firefoksa, ile się da' %}
{% set page_desc_copy = 'Zarejestruj się, aby co miesiąc otrzymywać nowości od Firefoksa i zawsze wiedzieć, co słychać w internecie.' %}
{% else %}
{% set page_title_copy = ftl('newsletters-make-the-most', fallback='newsletters-put-more-fox-in-your-inbox') %}
{% set page_desc_copy = ftl('newsletters-sign-up-to-receive-monthly', fallback='newsletters-see-where-the-web-can-take') %}
{% endif %}

{% block page_title %}{{ page_title_copy }}{% endblock page_title %}
{% block page_desc %}{{ page_desc_copy }}{% endblock %}

{% block experiments %}
{% if switch('experiment-newsletter-firefox', ['en-US', 'de', 'fr']) %}
{{ js_bundle('newsletter-firefox-experiment') }}
{% endif %}
{% endblock %}

{% block body_class %}{{ super() }} newsletter-mozilla{% endblock %}

Expand All @@ -21,15 +56,38 @@
{% block content %}
<main>
<div class="section-intro">
<div class="mzp-l-content"></div>
<div class="intro-image-container mzp-l-content">
{% if LANG in ['de', 'fr'] and variation == '2' %}
{{ resp_img(
url='img/newsletter/firefox/eu/typing-500.jpg',
srcset={
'img/newsletter/firefox/eu/typing-500.jpg': '500w',
'img/newsletter/firefox/eu/typing-1000.jpg': '1000w'
},
sizes={
'(min-width: 600px)': 'calc(100vw - 50px)',
'default': '500px'
},
optional_attributes={
'class': 'intro-image',
'width': '500',
'height': '250'
}
) }}
{% elif LANG == 'en-US' and variation == '2' %}
<img class="intro-image" src="{{ static('img/newsletter/firefox/na/features.svg') }}" width="600" height="300" alt="">
{% else %}
<img class="intro-image" src="{{ static('img/newsletter/firefox/fox-tail.svg') }}" width="556" height="278" alt="">
{% endif %}
</div>
</div>

<section class="section-subscribe">
<header class="mzp-l-content mzp-t-firefox">
<h1 class="page-title">{{ self.page_title() }}</h1>
<h2 class="section-title">{{ self.page_desc() }}</h2>
<header class="section-main-header mzp-l-content mzp-t-firefox">
<h1 class="page-title">{{ page_title_copy }}</h1>
<p class="tagline">{{ page_desc_copy }}</p>
</header>
<div class="mzp-l-content mzp-t-content-sm">
<div class="section-newsletter-form mzp-l-content mzp-t-content-sm">
{% if ftl_has_messages('multi-newsletter-form-title', 'multi-newsletter-form-desc', 'multi-newsletter-form-checkboxes-legend') %}
{{ email_newsletter_form(
newsletters='mozilla-foundation, mozilla-and-you',
Expand Down
9 changes: 8 additions & 1 deletion bedrock/newsletter/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,14 @@
path("newsletter/opt-out-confirmation/", views.recovery, name="newsletter.opt-out-confirmation"),
# Branded signup pages for individual newsletters
page("newsletter/mozilla/", "newsletter/mozilla.html", ftl_files=["mozorg/newsletters"]),
page("newsletter/firefox/", "newsletter/firefox.html", ftl_files=["mozorg/newsletters"]),
# Firefox newsletter A/B test. See issue 15075
path(
"newsletter/firefox/",
VariationTemplateView.as_view(
template_name="newsletter/firefox.html", template_context_variations=["1", "2"], ftl_files=["mozorg/newsletters"]
),
name="newsletter.firefox",
),
page("newsletter/developer/", "newsletter/developer.html", ftl_files=["mozorg/newsletters"]),
page("newsletter/fxa-error/", "newsletter/fxa-error.html", ftl_files=["mozorg/newsletters"]),
path(
Expand Down
6 changes: 6 additions & 0 deletions l10n/en/mozorg/newsletters.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,15 @@ newsletters-love-the-web-so-do-we = Love the web? So do we!
newsletters-unlock-the-world-of-web = Unlock the world of web development with our weekly { -brand-name-mozilla } Developer Newsletter. Each edition brings you coding techniques and best practices, { -brand-name-mdn } updates, info about emerging technologies, developer tools tips, and more.
# Headline for https://www-dev.allizom.org/newsletter/firefox/
newsletters-make-the-most = Make the most out of { -brand-name-firefox }
# Obsolete string (expires: 2024-11-01)
newsletters-put-more-fox-in-your-inbox = Put more fox in your inbox.
# Subtitle for https://www-dev.allizom.org/newsletter/firefox/
newsletters-sign-up-to-receive-monthly = Sign up to receive monthly updates from { -brand-name-firefox } and internet trends that shape your life online.
# Obsolete string (expires: 2024-11-01)
newsletters-see-where-the-web-can-take = See where the Web can take you with monthly { -brand-name-firefox } tips, tricks and Internet intel.
newsletters-we-are-sorry-but-there = We are sorry, but there was a problem with our system. Please try again later!
Expand Down
69 changes: 24 additions & 45 deletions media/css/newsletter/newsletter-firefox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,70 +8,49 @@ $image-path: '/media/protocol/img';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';

.section-intro {
background-color: $color-ink-80;
overflow: hidden;

.mzp-l-content {
@include background-size(141px 157px, 153px 115px);
background-image:
url('/media/img/newsletter/firefox/mailbox.svg'),
url('/media/img/newsletter/firefox/fox-tail.svg');
background-position: bottom -40px left 10px, bottom -45px right -10px;
background-repeat: no-repeat, no-repeat;
height: 167px;
width: $content-xs;

@media #{$mq-sm} {
@include background-size(215px 239px, 230px 173px);
background-position: bottom -60px left, bottom -65px right;
height: 229px;
width: $content-sm;
}

@media #{$mq-md} {
@include background-size(300px 333px, 320px 241px);
background-position: bottom -90px left 40px, bottom -90px right 40px;
height: 290px;
width: $content-md;
}

@media #{$mq-lg} {
@include background-size(381px 423px, 428px 322px);
background-position: bottom -100px left 60px, bottom -120px right 60px;
height: 370px;
width: $content-lg;
}
.intro-image-container {
padding-bottom: $spacing-2xl;
padding-top: $spacing-2xl;
position: relative;
}

@media #{$mq-lg} and #{$mq-short} {
@include background-size(300px 333px, 320px 241px);
background-position: bottom -90px left 160px, bottom -90px right 140px;
height: 290px;
}
.intro-image {
border-radius: $border-radius-md;
display: block;
margin: 0 auto;
}
}

.section-subscribe {
background: #fff;
padding: $spacing-lg 0;
}

.mzp-l-content:first-child {
padding-bottom: 0;
}
.section-main-header {
padding-bottom: 0;
padding-top: 0;

h1 {
@include text-title-xl;
.page-title {
@include text-title-lg;
text-align: center;
}

h2 {
@include text-title-xs;
color: $color-ink-80;
.tagline {
@include text-body-xl;
color: $color-marketing-gray-70;
font-weight: normal;
margin: $spacing-lg auto $spacing-xl;
max-width: 30em;
text-align: center;
}
}

.section-newsletter-form {
padding-bottom: $spacing-2xl;
padding-top: $spacing-2xl;
}

.mzp-c-newsletter-thanks {
text-align: center;
}
Binary file added media/img/newsletter/firefox/eu/typing-1000.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/img/newsletter/firefox/eu/typing-500.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion media/img/newsletter/firefox/fox-tail.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 9d18938

Please sign in to comment.