Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Bug 1405076, firefox landing page layout and content updates #5195

Merged
merged 1 commit into from Oct 13, 2017
Merged

Fix Bug 1405076, firefox landing page layout and content updates #5195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
170 changes: 170 additions & 0 deletions bedrock/firefox/templates/firefox/firefox-quantum.html
View file
Open in desktop
@@ -0,0 +1,170 @@
{# 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 http://mozilla.org/MPL/2.0/. -#}

{% extends "firefox/base-pebbles.html" %}

{% block page_css %}
{% stylesheet 'firefox-quantum-landing' %}
{% endblock %}

{% block page_title %}{{ _('2x faster and 30% less memory') }} | {{ _('Firefox Browser') }}{% endblock %}
{% block page_desc %}{{ _('Download now to start browsing the fastest Firefox ever.') }}{% endblock %}
{% block page_image %}{{ static('img/firefox/template/page-image-quantum.png') }}{% endblock %}

{% block content %}
{% include 'firefox/includes/hub/sub-nav.html' %}
<main role="main">
<header class="main-header" data-scroll-tracking="Main Header">
<div class="header-image">
{{ high_res_img('firefox/quantum/new-tab.png', {'alt': '', 'width': '922', 'height': '662'}) }}
</div>
<div class="content">
<div class="header-content">
<h1>{{ _('<strong>Firefox</strong> Quantum') }}</h1>
<h2>{{ _('New. Fast. For good.') }}</h2>
<div class="cta-wrapper">
{{ download_firefox(alt_copy=_('Download Now'), dom_id='firefox-desktop-page-primary', download_location='primary cta', button_color='quantum-download') }}
</div>
</div>
</div>
</header>
<div class="key-features-section main" data-scroll-tracking="First Key Features">
<div class="content">
<section class="key-feature fast">
<div class="key-feature-content">
<h2>{{ _('2x faster') }}</h2>
<p>
{% trans url='https://blog.mozilla.org/firefox-de/firefox-quantum-superschnell-und-schont-den-speicher/' if LANG == 'de' else 'https://blog.mozilla.org/firefox/quantum-performance-test/' %}
Powered by a new, cutting-edge engine, Firefox has <a href="{{ url }}">doubled its speed</a>
from last year. Because the Internet waits for no one.
{% endtrans %}
</p>
</div>
</section>
<section class="key-feature performance">
<div class="key-feature-content">
<h2>{{ _('Lean, mean speed machine') }}</h2>
<p>
{% trans url='https://blog.mozilla.org/firefox-de/firefox-quantum-superschnell-und-schont-den-speicher/' if LANG == 'de' else 'https://blog.mozilla.org/firefox/quantum-performance-test/' %}
Firefox Quantum’s new engine uses <a href="{{ url }}">30% less memory</a> than Chrome,
so other programs won’t slow down during browsing. Now that’s a win-win.
{% endtrans %}
</p>
</div>
</section>
<section class="key-feature design">
<h2>{{ _('Beautiful, intelligent design') }}</h2>
<div class="feature-carousel-container">
<ul class="feature-carousel">
<li class="video-bookmarking">
<figure>
<video preload="metadata" muted controls poster="{{ static('img/firefox/quantum/carousel/placeholder-bookmarks.png') }}">
<source src="https://assets.mozilla.net/video/quantum/bookmarking.webm" type="video/webm">
<source src="https://assets.mozilla.net/video/quantum/bookmarking.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="https://assets.mozilla.net/video/quantum/bookmarking.mp4" type="video/mp4">
<img src="{{ static('img/firefox/quantum/carousel/placeholder-bookmarks.png') }}" alt="">
</video>
<figcaption>{{ _('Bookmarks + Pocket') }}</figcaption>
</figure>
</li>
<li class="video-new-tab">
<figure>
<video preload="metadata" muted controls poster="{{ static('img/firefox/quantum/carousel/placeholder-new-tab.png') }}">
<source src="https://assets.mozilla.net/video/quantum/new-tab.webm" type="video/webm">
<source src="https://assets.mozilla.net/video/quantum/new-tab.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="https://assets.mozilla.net/video/quantum/new-tab.mp4" type="video/mp4">
<img src="{{ static('img/firefox/quantum/carousel/placeholder-new-tab.png') }}" alt="">
</video>
<figcaption>{{ _('New Tab') }}</figcaption>
</figure>
</li>
<li class="video-screenshots">
<figure>
<video preload="metadata" muted controls poster="{{ static('img/firefox/quantum/carousel/placeholder-screenshots.png') }}">
<source src="https://assets.mozilla.net/video/quantum/screenshots.webm" type="video/webm">
<source src="https://assets.mozilla.net/video/quantum/screenshots.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="https://assets.mozilla.net/video/quantum/screenshots.mp4" type="video/mp4">
<img src="{{ static('img/firefox/quantum/carousel/placeholder-screenshots.png') }}" alt="">
</video>
<figcaption>{{ _('Screenshots') }}</figcaption>
</figure>
</li>
</ul>
<button class="feature-carousel-previous" type="button">{{ _('Previous') }}</button>
<button class="feature-carousel-next" type="button">{{ _('Next') }}</button>
<p>
{% trans %}
Hello, gorgeous! Firefox’s sleek, new look comes loaded with intuitive features
like in-browser screenshots and more.
{% endtrans %}
</p>
</div>
</section>
</div>
</div>
<section class="other-features" data-scroll-tracking="Other Features">
<div class="content">
<h2>{{ _('Get the job done… faster') }}</h2>
<ul>
<li>
<h3 class="new-tab">{{ _('New Tab') }}</h3>
<p>{{ _('Search across multiple sites, view your top pages and discover new content.') }}</p>
</li>
<li>
<h3 class="library">{{ _('Library') }}</h3>
<p>{{ _('Enjoy everything you’ve saved to Firefox while browsing in one, easy place.') }}</p>
</li>
<li>
<h3 class="extensions">{{ _('Extensions') }}</h3>
<p>{{ _('Personalize Firefox with your favorite extras that help you do you.') }}</p>
</li>
<li>
<h3 class="mobile-browsing">{{ _('Mobile Browsing') }}</h3>
<p>{{ _('Access your bookmarks, open tabs and passwords across all your devices.') }}</p>
</li>
</ul>
</div>
</section>
<div class="key-features-section" data-scroll-tracking="Second Key Features">
<div class="content">
<section class="key-feature privacy">
<div class="key-feature-content">
<h2>{{ _('Powerful privacy') }}</h2>
<p>
{% trans url='https://blog.mozilla.org/firefox-de/die-studie-zum-schutz-vor-aktivitatsverfolgung/' if LANG == 'de' else 'https://blog.mozilla.org/firefox/tracking-protection-study/' %}
You’re in control of your online information. Use Firefox Private Browsing to block ads
with trackers for extra peace of mind… and pages that load <a href="{{ url }}">up to 44% faster</a>.
{% endtrans %}
</p>
</div>
</section>
<section class="key-feature mozilla">
<div class="key-feature-content">
<h2>{{ _('Browse for good') }}</h2>
<p>
{% trans %}
Firefox is backed by the non-profit Mozilla, who keeps the Internet healthier through programs
that support tech education for girls, create trust around factual news, bring civility to the
comments section and more.
{% endtrans %}
</p>
</div>
</section>
</div>
</div>
<section class="secondary-download-cta" data-scroll-tracking="Secondary Download CTA">
<div class="content">
<div class="secondary-download-cta-content">
<h2>{{ _('Start browsing with <strong>Firefox</strong> Quantum') }}</h2>
{{ download_firefox(alt_copy=_('Download Now'), dom_id='firefox-desktop-page-secondary', download_location='other', button_color='quantum-download') }}
</div>
</div>
</section>

</main>
{% endblock %}

{% block js %}
{% javascript 'firefox-quantum-landing' %}
{% endblock %}
28 changes: 28 additions & 0 deletions bedrock/firefox/tests/test_views.py
View file
Open in desktop
Expand Up @@ -808,6 +808,34 @@ def test_get_context_data_one_star(self):
self.assertFalse('donate_stars_url' in ctx)


@override_settings(DEV=False)
@patch('bedrock.firefox.views.l10n_utils.render')
class TestFirefoxFeatures(TestCase):
@patch.object(views, 'lang_file_is_active', lambda *x: True)
@patch('bedrock.firefox.views.switch', Mock(return_value=True))
def test_new_firefox_page_loads_with_active_switch(self, render_mock):
view = views.FirefoxHubView()
view.request = RequestFactory().get('/firefox/')
view.request.locale = 'en-US'
eq_(view.get_template_names(), ['firefox/firefox-quantum.html'])

@patch.object(views, 'lang_file_is_active', lambda *x: True)
@patch('bedrock.firefox.views.switch', Mock(return_value=False))
def test_firefox_hub_page_loads_with_inactive_switch(self, render_mock):
view = views.FirefoxHubView()
view.request = RequestFactory().get('/firefox/')
view.request.locale = 'en-US'
eq_(view.get_template_names(), ['firefox/hub/home.html'])

@patch.object(views, 'lang_file_is_active', lambda *x: False)
@patch('bedrock.firefox.views.switch', Mock(return_value=True))
def test_firefox_hub_page_loads_with_inactive_locale(self, render_mock):
view = views.FirefoxHubView()
view.request = RequestFactory().get('/firefox/')
view.request.locale = 'fr'
eq_(view.get_template_names(), ['firefox/hub/home.html'])


@override_settings(DEV=False)
@patch('bedrock.firefox.views.l10n_utils.render')
class TestSyncPage(TestCase):
Expand Down
12 changes: 11 additions & 1 deletion bedrock/firefox/views.py
View file
Open in desktop
Expand Up @@ -753,7 +753,17 @@ class FirefoxHubView(BlogPostsView):
blog_posts_template_variable = 'articles'
blog_slugs = 'firefox'
blog_tags = ['home']
template_name = 'firefox/hub/home.html'

def get_template_names(self):
locale = l10n_utils.get_locale(self.request)

if switch('firefox-57-release') and lang_file_is_active(
'firefox/firefox-quantum', locale):
template_name = 'firefox/firefox-quantum.html'
else:
template_name = 'firefox/hub/home.html'

return [template_name]


def FirefoxProductDeveloperView(request):
Expand Down
16 changes: 16 additions & 0 deletions bedrock/settings/static_media.py
View file
Open in desktop
Expand Up @@ -576,6 +576,12 @@
),
'output_filename': 'css/firefox-quantum-bundle.css',
},
'firefox-quantum-landing': {
'source_filenames': (
'css/firefox/quantum-landing.scss',
),
'output_filename': 'css/firefox_quantum_landing-bundle.css',
},
'firefox_releases_index': {
'source_filenames': (
'css/base/menu-resp.less',
Expand Down Expand Up @@ -1388,6 +1394,16 @@
),
'output_filename': 'js/firefox-quantum-bundle.js',
},
'firefox-quantum-landing': {
'source_filenames': (
'js/libs/jquery.cycle2.min.js',
'js/libs/jquery.waypoints.min.js',
'js/libs/jquery.waypoints-sticky.min.js',
'js/hubs/sub-nav.js',
'js/firefox/quantum-landing.js',
),
'output_filename': 'js/firefox_quantum_landing-bundle.js',
},
'firefox_interest_dashboard': {
'source_filenames': (
'js/base/mozilla-accordion.js',
Expand Down
44 changes: 44 additions & 0 deletions media/css/firefox/components/_buttons.scss
View file
Open in desktop
@@ -0,0 +1,44 @@
// 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 http://mozilla.org/MPL/2.0/.

@import '../../pebbles/includes/lib';

.download-button {
.button,
a.button:link,
a.button:visited {
&.quantum-download {
background-color: #4ee331;
padding: .3em 40px .5em;
border-color: #4ee331;
border-radius: 100px;

.download-title {
color: #0040ab;
@include font-size-small;
font-weight: bold;
}

&:hover,
&:focus {
background-color: #65e74c;
}
}
}

.fx-privacy-link a {
@include font-size-extra-small;

&:link,
&:visited {
text-decoration: none;
}

&:active,
&:focus,
&:hover {
text-decoration: underline;
}
}
}