зеркало из https://github.com/mozilla/bedrock.git
Merge pull request #867 from mozilla/bug-865433-first-run
New /firefox/firstrun/ views
This commit is contained in:
Andrei Hajdukewycz
Коммит
19456a376f
|
|
@ -31,7 +31,8 @@
|
|||
poster="{{ media('/img/firefox/firstrun/video-poster.jpg') }}"
|
||||
height="360"
|
||||
width="640"
|
||||
data-overlay-hidden-text="{{_('Play video')}}">
|
||||
data-overlay-hidden-text="{{_('Play video')}}"
|
||||
id="firstrun-video">
|
||||
<source src="http://videos-cdn.mozilla.net/brand/Mozilla_Firefox_Manifesto_v0.2_640.webm">
|
||||
</video>
|
||||
</div>
|
||||
|
|
@ -60,3 +61,7 @@
|
|||
</nav>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('firefox_firstrun') }}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<div id="video-container">
|
||||
<video id="pinnedtabs-video" poster="{{ media('/img/firefox/firstrun/pinnedtabs-poster.jpg') }}" src="" controls></video>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,333 @@
|
|||
{# 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.html" %}
|
||||
|
||||
{% block page_title %}{{ _('Welcome to Firefox') }}{% endblock %}
|
||||
{% block body_id %}firefox-firstrun{% endblock %}
|
||||
|
||||
{% block site_header_nav %}{% endblock %}
|
||||
{% block site_header_logo %}{% endblock %}
|
||||
|
||||
{% block extrahead %}
|
||||
{# GA experiment code here #}
|
||||
<link rel="canonical" href="https://www.mozilla.org/en-US/firefox/21.0/firstrun/" />
|
||||
{% endblock %}
|
||||
|
||||
{% block site_css %}
|
||||
{{ css('firefox_firstrun_new_a') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block string_data %}
|
||||
{# L10n: This is the label for a button that closes a modal dialog #}
|
||||
data-close="{{ _('Close') }}"
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main role="main">
|
||||
<header id="page-header">
|
||||
<img src="{{ media('img/firefox/firstrun/firefox-logo.png') }}" alt="Firefox" />
|
||||
<h1 class="large">{{_('Welcome to Firefox!')}}</h1>
|
||||
<h2>
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Better browsing starts now.') }}
|
||||
{% else %}
|
||||
{{ _('Discover what makes it different.') }}
|
||||
{% endif %}
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<nav class="sticky-nav" id="sticky-nav" role="navigation">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#pinnedtabs">
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Smart features') }}
|
||||
{% else %}
|
||||
{{ _('Innovative features') }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{# if showing brand content #}
|
||||
{% if version in '36' %}
|
||||
<li>
|
||||
<a href="#brand">
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Made for you') }}
|
||||
{% else %}
|
||||
{{ _('Our mission') }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{# if brand isn't shown, themes will be #}
|
||||
{% else %}
|
||||
<li>
|
||||
<a href="#themes">
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Make it your own') }}
|
||||
{% else %}
|
||||
{{ _('Customization') }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="last">
|
||||
<a href="#fasteasy">
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Fast & easy') }}
|
||||
{% else %}
|
||||
{{ _('Shortcuts') }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<article class="feature img-right" id="pinnedtabs">
|
||||
<div class="copy">
|
||||
<header>
|
||||
<h1>
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Save your faves') }}
|
||||
{% else %}
|
||||
{{ _('Pinned tabs') }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
{% if copy == 'a' %}
|
||||
<p>
|
||||
{% trans %}
|
||||
Keep your favorite sites a click away with Pinned Tabs, small tabs that open
|
||||
automatically when you start your browser and notify you when something changes.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
|
||||
<a id="pinnedtabs-video-link" href="#pinnedtabs-video">{{ _('See how they work') }}</a>
|
||||
{% else %}
|
||||
<p>
|
||||
{% trans %}
|
||||
These small tabs open automatically when you start your browser and notify you
|
||||
with when something in them changes.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
{% trans url1='#pinnedtabs-video', id1='pinnedtabs-video-link' %}
|
||||
Try it for yourself: Right-click on any tab and click “Pin Tab”.
|
||||
<a id="{{ id1 }}" href="{{ url1 }}">See how they work</a>
|
||||
{% endtrans %}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="screenshot{% if copy == 'a' %} screenshot-offset{% endif %}" id="pinnedtabs-screenshot">
|
||||
{{ platform_img('img/firefox/firstrun/pinnedtabs.png', alt=_('Pinned tabs')) }}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{% if version in '36' %}
|
||||
<article class="feature" id="brand">
|
||||
<div class="copy">
|
||||
<header>
|
||||
<h1>
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Discover our mission') }}
|
||||
{% else %}
|
||||
{{ _('The Firefox mission') }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
{% if copy == 'a' %}
|
||||
{% trans %}
|
||||
Firefox is made to keep the power of the Web in the hands of users everywhere -
|
||||
that includes you!
|
||||
{% endtrans %}
|
||||
{% else %}
|
||||
{% trans %}
|
||||
We’re dedicated to promoting openness, innovation and opportunity by keeping
|
||||
the power of the Web in people’s hands.
|
||||
{% endtrans %}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<a class="featurelink" href="{{ url('mozorg.mission') }}">
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Learn more about what makes us different') }}
|
||||
{% else %}
|
||||
{{ _('See what that means for you') }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="screenshot">
|
||||
<img src="{{ media('img/firefox/firstrun/brand.png') }}">
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}
|
||||
|
||||
{% if version in '1245' %}
|
||||
<article class="feature" id="themes">
|
||||
<div class="copy">
|
||||
<header>
|
||||
<h1>
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Show off your style') }}
|
||||
{% else %}
|
||||
{{ _('Themes') }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
{% if copy == 'a' %}
|
||||
{% trans %}
|
||||
Use Themes to personalize the look of your Firefox to match your mood, the
|
||||
season or even just your favorite color.
|
||||
{% endtrans %}
|
||||
{% else %}
|
||||
{% trans %}
|
||||
Use Themes to change the look of your Firefox just about any way you like.
|
||||
{% endtrans %}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<a class="featurelink" href="https://addons.mozilla.org/en-us/firefox/themes/">
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Find the one for you') }}
|
||||
{% else %}
|
||||
{{ _('Explore Themes') }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="screenshot">
|
||||
{{ platform_img('img/firefox/firstrun/themes.png', alt=_('Themes')) }}
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}
|
||||
|
||||
{% if version in '1346' %}
|
||||
<article class="feature img-right" id="fasteasy">
|
||||
<div class="copy">
|
||||
<header>
|
||||
<h1>
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Find what you need fast') }}
|
||||
{% else %}
|
||||
{{ _('Awesome Bar') }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
{% if copy == 'a' %}
|
||||
{% trans %}
|
||||
Find your favorite sites quickly, even if you don't remember the URL. It’s not
|
||||
called the Awesome Bar for nothing.
|
||||
{% endtrans %}
|
||||
{% else %}
|
||||
{% trans %}
|
||||
The address bar remembers sites as you browse and helps you find them quickly
|
||||
and easily using words from any part of the URL or page title.
|
||||
{% endtrans %}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<a class="featurelink" href="{{ url('firefox.features') }}#madeeasy">
|
||||
{% if copy == 'a' %}
|
||||
{{ _('See what it can do') }}
|
||||
{% else %}
|
||||
{{ _('See how it works') }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="screenshot">
|
||||
{{ platform_img('img/firefox/firstrun/awesomebar.png', alt=_('Awesome Bar')) }}
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}
|
||||
|
||||
{% if version in '25' %}
|
||||
<article class="feature" id="fasteasy">
|
||||
<div class="copy">
|
||||
<header>
|
||||
<h1>
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Make a shortcut') }}
|
||||
{% else %}
|
||||
{{ _('Bookmarks') }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
{% if copy == 'a' %}
|
||||
{% trans %}
|
||||
Use Bookmarks to keep your favorite sites close and find them in a snap -
|
||||
because you can’t dog-ear the Internet.
|
||||
{% endtrans %}
|
||||
{% else %}
|
||||
{% trans %}
|
||||
One click is all you need to save pages for quick access whenever you need
|
||||
them.
|
||||
{% endtrans %}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<a class="featurelink" href="https://support.mozilla.org/en-US/kb/use-bookmarks-to-save-and-organize-websites#w_how-do-i-create-a-bookmark">
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Learn how to bookmark any page') }}
|
||||
{% else %}
|
||||
{{ _('Learn how to bookmark') }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="screenshot">
|
||||
{{ platform_img('img/firefox/firstrun/bookmarks.png', alt=_('Bookmarks')) }}
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}
|
||||
|
||||
<div class="columns">
|
||||
<aside class="column">
|
||||
{{ email_newsletter_form(title='Get Firefox Updates') }}
|
||||
</aside>
|
||||
|
||||
<aside class="column column-last">
|
||||
<header>
|
||||
<h3>{{ _("Let’s be friends") }}</h3>
|
||||
</header>
|
||||
|
||||
<ul class="social">
|
||||
<li>
|
||||
<img src="{{ media('img/firefox/firstrun/facebook.png') }}">
|
||||
<a class="facebook" href="https://www.facebook.com/Firefox">{{ _('Like us on Facebook') }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="{{ media('img/firefox/firstrun/twitter.png') }}">
|
||||
<a class="twitter" href="https://twitter.com/firefox">{{ _('Follow us on Twitter') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include 'firefox/firstrun/_video.html' %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block email_form %}{% endblock %}
|
||||
|
||||
{% block site_footer %}
|
||||
{% include 'firefox/includes/simple_footer.html' %}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('firefox_firstrun_new_a') }}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
{# 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.html" %}
|
||||
|
||||
{% block page_title %}{{ _('Welcome to Firefox') }}{% endblock %}
|
||||
{% block body_id %}firefox-firstrun{% endblock %}
|
||||
|
||||
{% block site_header_nav %}{% endblock %}
|
||||
{% block site_header_logo %}{% endblock %}
|
||||
|
||||
{% block extrahead %}
|
||||
{# GA experiment code here #}
|
||||
<link rel="canonical" href="https://www.mozilla.org/en-US/firefox/21.0/firstrun/" />
|
||||
{% endblock %}
|
||||
|
||||
{% block string_data %}
|
||||
{# L10n: This is the label for a button that closes a modal dialog #}
|
||||
data-close="{{ _('Close') }}"
|
||||
{% endblock %}
|
||||
|
||||
{% block site_css %}
|
||||
{{ css('firefox_firstrun_new_b') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main role="main">
|
||||
<header id="page-header">
|
||||
<img src="{{ media('img/firefox/firstrun/firefox-logo.png') }}" alt="Firefox" />
|
||||
<h1 class="large">{{_('Welcome to Firefox!')}}</h1>
|
||||
</header>
|
||||
|
||||
<article class="feature">
|
||||
<div class="copy">
|
||||
<header>
|
||||
{# L10n: Line break is for presentation only. Position as needed. #}
|
||||
<h1>
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Doing good is <br>part of our code') }}
|
||||
{% else %}
|
||||
{{ _('Discover what makes it different.') }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
{% if copy == 'a' %}
|
||||
{% trans %}
|
||||
Firefox is made with a mission to keep the power of the Web in the hands
|
||||
of users everywhere - that includes you!
|
||||
{% endtrans %}
|
||||
{% else %}
|
||||
{% trans %}
|
||||
Our mission is to promote openness, innovation and opportunity by keeping
|
||||
the power of the Web in people’s hands.
|
||||
{% endtrans %}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<a class="featurelink" href="{{ url('mozorg.mission') }}">
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Learn more about what makes us different') }}
|
||||
{% else %}
|
||||
{{ _('See what that means for you') }}
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
<ul class="social">
|
||||
<li>
|
||||
<img src="{{ media('img/firefox/firstrun/facebook.png') }}">
|
||||
<a class="facebook" href="https://www.facebook.com/Firefox">{{ _('Like us on Facebook') }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="{{ media('img/firefox/firstrun/twitter.png') }}">
|
||||
<a class="twitter" href="https://twitter.com/firefox">{{ _('Follow us on Twitter') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="screenshot">
|
||||
<img src="{{ media('img/firefox/firstrun/b/doing-good-collage.png') }}">
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="columns">
|
||||
<aside class="column pinnedtabs" id="pinnedtabs-screenshot">
|
||||
<div class="copy">
|
||||
<header>
|
||||
<h1>
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Save your faves') }}
|
||||
{% else %}
|
||||
{{ _('Innovative features') }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Keep your favorite sites a click away with Pinned Tabs.') }}
|
||||
{% else %}
|
||||
{{ _('Right-click on any tab and select “Pin Tab” to keep it open.') }}
|
||||
{% endif %}
|
||||
<a id="pinnedtabs-video-link" href="#pinnedtabs-video">{{ _('See how they work') }}</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="screenshot">
|
||||
{{ platform_img('img/firefox/firstrun/b/pinnedtabs.png', alt=_('Bookmarks')) }}
|
||||
</div>
|
||||
</aside>
|
||||
<aside class="column themes">
|
||||
<div class="copy">
|
||||
<header>
|
||||
<h1>
|
||||
{% if copy == 'a' %}
|
||||
{{ _('Make it your own') }}
|
||||
{% else %}
|
||||
{{ _('Customization') }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
{% if copy == 'a' %}
|
||||
{% trans url1='https://addons.mozilla.org/en-us/firefox/themes/', class1='featurelink' %}
|
||||
Use Themes to personalize the look of your Firefox.
|
||||
<a class="{{ class1 }}" href="{{ url1 }}">Find your theme</a>
|
||||
{% endtrans %}
|
||||
{% else %}
|
||||
{% trans url1='https://addons.mozilla.org/en-us/firefox/themes/', class1='featurelink' %}
|
||||
Use Themes to change the look of your Firefox.
|
||||
<a class="{{ class1 }}" href="{{ url1 }}">Explore Themes</a>
|
||||
{% endtrans %}
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="screenshot">
|
||||
{{ platform_img('img/firefox/firstrun/b/themes.png', alt=('Themes')) }}
|
||||
</div>
|
||||
</aside>
|
||||
{% if version in '13' %}
|
||||
<aside class="column awesomebar column-last">
|
||||
<div class="copy">
|
||||
<header>
|
||||
<h1>{{ _('Find things fast') }}</h1>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
{% trans url1=url('firefox.features') + '#madeeasy', class1='featurelink' %}
|
||||
The Awesome Bar helps you find sites quickly - because it’s awesome.
|
||||
<a class="{{ class1 }}" href="{{ url1 }}">See what it can do</a>
|
||||
{% endtrans %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="screenshot">
|
||||
{{ platform_img('img/firefox/firstrun/b/awesomebar.png', alt=('Awesome Bar')) }}
|
||||
</div>
|
||||
</aside>
|
||||
{% else %}
|
||||
<aside class="column bookmarks column-last">
|
||||
<div class="copy">
|
||||
<header>
|
||||
<h1>{{ _('Shortcuts') }}</h1>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
{% trans url1='https://support.mozilla.org/en-US/kb/use-bookmarks-to-save-and-organize-websites#w_how-do-i-create-a-bookmark', class1='featurelink' %}
|
||||
One click is all you need to save pages.
|
||||
<a class="{{ class1 }}" href="{{ url1 }}">Learn how to bookmark</a>
|
||||
{% endtrans %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="screenshot">
|
||||
{{ platform_img('img/firefox/firstrun/b/bookmarks.png', alt=('Bookmarks')) }}
|
||||
</div>
|
||||
</aside>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<aside class="form">
|
||||
{{ email_newsletter_form(title='Get Firefox Updates') }}
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
{% include 'firefox/firstrun/_video.html' %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block email_form %}{% endblock %}
|
||||
|
||||
{% block site_footer %}
|
||||
{% include 'firefox/includes/simple_footer.html' %}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('firefox_firstrun_new_b') }}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<footer id="colophon">
|
||||
<div class="row">
|
||||
<ul class="primary">
|
||||
<li><a href="{{ url('firefox.central') }}"><span>{{_('Tour')}}</span></a></li>
|
||||
<li><a href="{{ url('firefox.features') }}"><span>{{_('Desktop')}}</span></a></li>
|
||||
<li><a href="{{ url('firefox.fx') }}"><span>{{_('Mobile')}}</span></a></li>
|
||||
<li><a href="https://addons.mozilla.org"><span>{{_('Add-ons')}}</span></a></li>
|
||||
<li><a href="http://support.mozilla.org"><span>{{_('Support')}}</span></a></li>
|
||||
<li><a href="{{ url('mozorg.about') }}"><span>{{_('About')}}</span></a></li>
|
||||
</ul>
|
||||
<ul class="secondary">
|
||||
<li><a href="{{ url('privacy.index') }}">{{_('Privacy Policy')}}</a></li>
|
||||
<li><a href="{{ php_url('/about/legal.html') }}">{{_('Legal Notices')}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -92,24 +92,9 @@
|
|||
{% block email_form %}{% endblock %}
|
||||
|
||||
{% block site_footer %}
|
||||
<footer id="colophon">
|
||||
<div class="row">
|
||||
<ul class="primary">
|
||||
<li><a href="{{ url('firefox.central') }}"><span>{{_('Tour')}}</span></a></li>
|
||||
<li><a href="{{ url('firefox.features') }}"><span>{{_('Desktop')}}</span></a></li>
|
||||
<li><a href="{{ url('firefox.fx') }}"><span>{{_('Mobile')}}</span></a></li>
|
||||
<li><a href="https://addons.mozilla.org"><span>{{_('Add-ons')}}</span></a></li>
|
||||
<li><a href="http://support.mozilla.org"><span>{{_('Support')}}</span></a></li>
|
||||
<li><a href="{{ url('mozorg.about') }}"><span>{{_('About')}}</span></a></li>
|
||||
</ul>
|
||||
<ul class="secondary">
|
||||
<li><a href="{{ url('privacy.index') }}">{{_('Privacy Policy')}}</a></li>
|
||||
<li><a href="{{ php_url('/about/legal.html') }}">{{_('Legal Notices')}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
{% include 'firefox/includes/simple_footer.html' %}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('firefox_new') }}
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
|
@ -17,6 +17,14 @@ latest_re = r'^firefox(?:/(%s))?/%s/$'
|
|||
firstrun_re = latest_re % (version_re, 'firstrun')
|
||||
whatsnew_re = latest_re % (version_re, 'whatsnew')
|
||||
|
||||
# firstrun testing
|
||||
# allow any (or no) string for version number
|
||||
# currently want to restrict to 21.0 only, but
|
||||
# left here for possible future use
|
||||
# remove when firstrun experiment is over
|
||||
#latest_new_re = r'^firefox(?:/(%s))?/firstrun/(?P<view>[a|b])(?P<version>[1-6])/$'
|
||||
#firstrun_new_re = latest_new_re % version_re
|
||||
|
||||
|
||||
urlpatterns = patterns('',
|
||||
url(r'^firefox/all/$', views.all_downloads, name='firefox.all'),
|
||||
|
|
@ -64,6 +72,8 @@ urlpatterns = patterns('',
|
|||
kwargs={'template_name': 'firefox/firstrun.html'}),
|
||||
url(whatsnew_re, views.latest_fx_redirect, name='firefox.whatsnew',
|
||||
kwargs={'template_name': 'firefox/whatsnew.html'}),
|
||||
# firstrun tests. remove when experiment is over
|
||||
url('^firefox/21.0/firstrun/(?P<view>[a|b])(?P<version>[1-6])/$', views.firstrun_new, name='firefox.firstrun.new'),
|
||||
|
||||
url(r'^firefox/partners/$', views.firefox_partners,
|
||||
name='firefox.partners.index'),
|
||||
|
|
|
|||
|
|
@ -197,3 +197,41 @@ def firefox_partners(request):
|
|||
template_vars.update(csrf(request))
|
||||
|
||||
return l10n_utils.render(request, 'firefox/partners/index.html', template_vars)
|
||||
|
||||
|
||||
def firstrun_new(request, view, version):
|
||||
# only Firefox users should see the firstrun pages
|
||||
user_agent = request.META.get('HTTP_USER_AGENT', '')
|
||||
if not 'Firefox' in user_agent:
|
||||
url = reverse('firefox.new')
|
||||
return HttpResponsePermanentRedirect(url)
|
||||
|
||||
# only users on the latest version should see the
|
||||
# new pages (for GA experiment data purity)
|
||||
user_version = "0"
|
||||
ua_regexp = r"Firefox/(%s)" % version_re
|
||||
match = re.search(ua_regexp, user_agent)
|
||||
if match:
|
||||
user_version = match.group(1)
|
||||
|
||||
if not is_current_or_newer(user_version):
|
||||
url = reverse('firefox.update')
|
||||
return HttpResponsePermanentRedirect(url)
|
||||
|
||||
# b only has 1-4 version
|
||||
if (view == 'b' and (int(version) < 1 or int(version) > 4)):
|
||||
version = '1'
|
||||
|
||||
if (view == 'a'):
|
||||
copy = 'a' if (version in '123') else 'b'
|
||||
else:
|
||||
copy = 'a' if (version in '12') else 'b'
|
||||
|
||||
template_vars = {
|
||||
'version': version,
|
||||
'copy': copy,
|
||||
}
|
||||
|
||||
template = view + '.html'
|
||||
|
||||
return l10n_utils.render(request, 'firefox/firstrun/' + template, template_vars)
|
||||
|
|
|
|||
|
|
@ -204,6 +204,9 @@ RewriteRule ^/(\w{2,3}(?:-\w{2}(?:-mac)?)?/)?mwc/?$ /$1firefox/partners/ [NC,L,R
|
|||
# bug 833645
|
||||
RewriteRule ^/en-US/firefox(/(?:\d+\.\d+\.?(?:\d+)?\.?(?:\d+)?(?:[a|b]?)(?:\d*)(?:pre)?(?:\d)?))?/firstrun(/?)$ /b/en-US/firefox$1/firstrun$2 [PT]
|
||||
|
||||
# bug 865433
|
||||
RewriteRule ^/en-US/firefox(/(?:\d+\.\d+\.?(?:\d+)?\.?(?:\d+)?(?:[a|b]?)(?:\d*)(?:pre)?(?:\d)?))?/firstrun/([a|b])([1-6])(/?)$ /b/en-US/firefox$1/firstrun/$2$3$4 [PT]
|
||||
|
||||
# bug 840814
|
||||
RewriteRule ^/(\w{2,3}(?:-\w{2}(?:-mac)?)?/)?projects/firefox(/(?:\d+\.\d+\.?(?:\d+)?\.?(?:\d+)?(?:[a|b]?)(?:\d*)(?:pre)?(?:\d)?))(/(?:firstrun|whatsnew))(/.*)?$ /$1firefox$2$3$4 [L,R=301]
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,229 @@
|
|||
@import "../../sandstone/lib.less";
|
||||
@import "common.less";
|
||||
|
||||
|
||||
#page-header {
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
margin: -20px 0 0 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
font-style: italic;
|
||||
margin-bottom: @baseLine;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky-nav {
|
||||
.content-box;
|
||||
margin-bottom: @baseLine;
|
||||
.transition;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
li {
|
||||
display: inline;
|
||||
padding: 4px 0;
|
||||
border-right: 1px dotted #d2d2d2;
|
||||
margin-left: 0;
|
||||
&.last {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
a {
|
||||
padding: 0 @baseLine;
|
||||
font-size: 16px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.stuck {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
z-index: 10;
|
||||
width: 980px;
|
||||
}
|
||||
|
||||
.sticky-wrapper {
|
||||
.stuck {
|
||||
@shadow: 0 3px 4px 0px rgba(0, 0, 0, 0.4);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.feature {
|
||||
h1 {
|
||||
font-size: 43px;
|
||||
color: #484848;
|
||||
}
|
||||
|
||||
.copy {
|
||||
width: 49%;
|
||||
.border-box;
|
||||
padding: (@baseLine * 2) (@baseLine * 1.5) (@baseLine * 2) @baseLine;
|
||||
font-size: 16px;
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.screenshot-offset {
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
.img-right {
|
||||
.copy {
|
||||
float: left;
|
||||
padding: (@baseLine * 2) @baseLine (@baseLine * 2) (@baseLine * 1.5);
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
left: auto;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
img {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
.content-box;
|
||||
float: left;
|
||||
width: (480px - (@baseLine * 2));
|
||||
min-height: (210px - (@baseLine * 2.5));
|
||||
padding: (@baseLine * 1.5) @baseLine @baseLine @baseLine;
|
||||
overflow: hidden;
|
||||
margin-right: 20px;
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.billboard {
|
||||
border-bottom: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#footer-email-form {
|
||||
padding: 0;
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 12px;
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-contents, .form-submit {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: @baseLine;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column-last {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// uncomment the below if we go back to the responsive template.
|
||||
|
||||
/* Tablet layout: 760px */
|
||||
//@media only screen and (max-width: @breakDesktop) and (min-width: @breakTablet) {
|
||||
// .stuck {
|
||||
// width: @breakTablet;
|
||||
// }
|
||||
//
|
||||
// .column {
|
||||
// width: (370px - (@baseLine * 2));
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///* Mobile landscape layout: 480px */
|
||||
//@media only screen and (max-width: @breakTablet) {
|
||||
// #page-header {
|
||||
// h1 {
|
||||
// font-size: 52px;
|
||||
// }
|
||||
//
|
||||
// h2 {
|
||||
// font-size: 30px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .sticky-nav {
|
||||
// padding: (@baseLine/2) 0;
|
||||
// ul {
|
||||
// text-align: left;
|
||||
// }
|
||||
// li {
|
||||
// margin-left: 10px;
|
||||
// display: block;
|
||||
// border: none;
|
||||
// a {
|
||||
// line-height: 28px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .stuck {
|
||||
// width: @breakMobileLandscape - (@baseLine * 2);
|
||||
// }
|
||||
//
|
||||
// .feature {
|
||||
// .copy {
|
||||
// float: none;
|
||||
// width: auto;
|
||||
// }
|
||||
//
|
||||
// .screenshot {
|
||||
// position: relative;
|
||||
// width: auto;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .column {
|
||||
// float: none;
|
||||
// margin: 0 0 @baseLine 0;
|
||||
// width: (@breakMobileLandscape - (@baseLine * 4));
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///* Mobile layout: 320px */
|
||||
//@media only screen and (max-width: @breakMobileLandscape) {
|
||||
// #page-header {
|
||||
// h1 {
|
||||
// font-size: 38px;
|
||||
// }
|
||||
//
|
||||
// h2 {
|
||||
// font-size: 24px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .stuck {
|
||||
// width: @breakMobile;
|
||||
// }
|
||||
//
|
||||
// .column {
|
||||
// width: (@breakMobile - (@baseLine * 2));
|
||||
// }
|
||||
//}
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
@import "../../sandstone/lib.less";
|
||||
@import "common.less";
|
||||
|
||||
#page-header {
|
||||
h1 {
|
||||
font-size: 84px;
|
||||
margin-bottom: (@baseLine * 2.5);
|
||||
}
|
||||
}
|
||||
|
||||
.feature {
|
||||
font-size: 16px;
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
line-height: 66px;
|
||||
}
|
||||
|
||||
.copy {
|
||||
width: 54%;
|
||||
.border-box;
|
||||
padding: (@baseLine * 1.5) (@baseLine * 1.5) (@baseLine/2) (@baseLine * 3);
|
||||
|
||||
p {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: @baseLine;
|
||||
border-top: 1px dotted #b1b1b1;
|
||||
li {
|
||||
&:first-child {
|
||||
margin-right: (@baseLine * 2);
|
||||
}
|
||||
a {
|
||||
font-size: @baseFontSize;
|
||||
}
|
||||
img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
width: 46%;
|
||||
}
|
||||
}
|
||||
|
||||
ul.social {
|
||||
li {
|
||||
display: inline-block;
|
||||
img {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
@shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
.box-shadow(@shadow);
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 313px;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
margin: 0 @baseLine @baseLine 0;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
a {
|
||||
color: #ffde00;
|
||||
&:hover {
|
||||
color: #ffde00;
|
||||
}
|
||||
}
|
||||
|
||||
.copy {
|
||||
position: relative;
|
||||
padding: @baseLine @baseLine 0 @baseLine;
|
||||
z-index: 2;
|
||||
|
||||
p {
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.column-last {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.pinnedtabs {
|
||||
background: #386394;
|
||||
|
||||
.screenshot {
|
||||
left: auto;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.themes {
|
||||
background: #33607a;
|
||||
}
|
||||
|
||||
.awesomebar {
|
||||
background: #675e8a;
|
||||
|
||||
p {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
left: auto;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmarks {
|
||||
background: #8a5e5e;
|
||||
}
|
||||
|
||||
.form {
|
||||
.content-box;
|
||||
width: 100%;
|
||||
|
||||
.billboard {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
.button {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-email-form {
|
||||
margin-left: @baseLine;
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.form-contents {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// include the below if we go back to the responsive template.
|
||||
// this version (B) was never completely responsivized - there will
|
||||
// be a little work to do here if we go back to responsive.
|
||||
|
||||
///* Tablet layout: 760px */
|
||||
//@media only screen and (max-width: @breakDesktop) and (min-width: @breakTablet) {
|
||||
// .feature {
|
||||
// h1 {
|
||||
// font-size: 50px;
|
||||
// line-height: 60px;
|
||||
// }
|
||||
//
|
||||
// .copy {
|
||||
// padding: (@baseLine * 1.5) (@baseLine * 1.5) (@baseLine * 0.5) (@baseLine * 2);
|
||||
// }
|
||||
//
|
||||
// .screenshot {
|
||||
// top: (@baseLine * 2);
|
||||
// bottom: auto;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
// 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 "../template.less";
|
||||
@import "../simple_footer.less";
|
||||
|
||||
// wipe out the below if we go back to being responsive
|
||||
#wrapper {
|
||||
width: 980px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
|
||||
#colophon {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
|
||||
.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
// yep, wipe out the above if we switch back to the responsive template
|
||||
|
||||
.content-box {
|
||||
@shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
.box-shadow(@shadow);
|
||||
background: #fff;
|
||||
width: 980px;
|
||||
}
|
||||
|
||||
#page-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature a:after, .column a:after {
|
||||
content: "\0000a0\00BB";
|
||||
}
|
||||
|
||||
.feature {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.content-box;
|
||||
.clearfix;
|
||||
margin-bottom: @baseLine;
|
||||
font-weight: 100;
|
||||
.open-sans-light;
|
||||
|
||||
.copy {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
ul.social {
|
||||
list-style-type: none;
|
||||
li {
|
||||
margin: @baseLine 0 0 0;
|
||||
img {
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns {
|
||||
.clearfix;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
margin-top: 30px;
|
||||
padding: 12px 50px;
|
||||
font-size: 18px;
|
||||
border-radius: 0.35em;
|
||||
font-weight: 100;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.button img {
|
||||
margin-left: 7px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="email"] {
|
||||
padding: 9px 14px;
|
||||
border-radius: 5px;
|
||||
@shadow: inset 0 2px 3px rgba(12, 12, 12, 0.2);
|
||||
.box-shadow(@shadow);
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#video-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pinnedtabs-video {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 7px solid #fff;
|
||||
@shadow: 0 4px 10px rgba(5, 6, 6, 0.75);
|
||||
width: 415px;
|
||||
height: 232px;
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
|
||||
// extract to modal.less?
|
||||
body.noscroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#modal {
|
||||
background: #444;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
width: 100%;
|
||||
height: 101%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9999999;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#modal .inner {
|
||||
margin: 40px auto;
|
||||
padding: 0 20px;
|
||||
color: #f3f3f3;
|
||||
}
|
||||
|
||||
#modal .close {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
}
|
||||
// end generic modal
|
||||
|
||||
#modal .close {
|
||||
background: url(/media/img/firefox/firstrun/close.png) center center no-repeat;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
.close-text {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
@import "template-resp.less";
|
||||
@import "simple_footer.less";
|
||||
|
||||
.sky #outer-wrapper {
|
||||
background: #eaeff2;
|
||||
|
|
@ -34,52 +35,6 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
#colophon {
|
||||
z-index: 1;
|
||||
margin-top: 0;
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
.primary, .secondary {
|
||||
margin-bottom: 10px;
|
||||
li {
|
||||
display: inline;
|
||||
margin-left: 20px;
|
||||
a, a:link, a:visited {
|
||||
display: inline-block;
|
||||
padding: 2px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.primary li {
|
||||
a, a:link, a:visited {
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
color: @linkSkyBlue;
|
||||
&:after {
|
||||
content: " \00BB";
|
||||
}
|
||||
span {
|
||||
color: @textColorSecondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
li {
|
||||
margin-left: 0;
|
||||
a, a:link, a:visited {
|
||||
font-size: 12px;
|
||||
color: @textColorLight;
|
||||
border-left: 1px dotted @textColorLight;
|
||||
}
|
||||
&:first-child a {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-feature {
|
||||
margin-top: 14px;
|
||||
padding-bottom: 18px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
#colophon {
|
||||
z-index: 1;
|
||||
margin-top: 0;
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
.primary, .secondary {
|
||||
margin-bottom: 10px;
|
||||
li {
|
||||
display: inline;
|
||||
margin-left: 20px;
|
||||
a, a:link, a:visited {
|
||||
display: inline-block;
|
||||
padding: 2px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.primary li {
|
||||
a, a:link, a:visited {
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
color: @linkSkyBlue;
|
||||
&:after {
|
||||
content: " \00BB";
|
||||
}
|
||||
span {
|
||||
color: @textColorSecondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
li {
|
||||
margin-left: 0;
|
||||
a, a:link, a:visited {
|
||||
font-size: 12px;
|
||||
color: @textColorLight;
|
||||
border-left: 1px dotted @textColorLight;
|
||||
}
|
||||
&:first-child a {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile layout: 320px */
|
||||
@media only screen and (max-width: @breakTablet) {
|
||||
#colophon {
|
||||
.primary {
|
||||
text-align: left;
|
||||
li {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
a, a:link, a:visited {
|
||||
display: block;
|
||||
border-left: none;
|
||||
border-top: 1px dotted @textColorLight;
|
||||
padding: 10px;
|
||||
}
|
||||
&:first-child a {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 83 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 83 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 78 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 78 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 33 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 33 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 37 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 38 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 31 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 31 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 26 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 26 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 360 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 28 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 28 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 35 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 35 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 48 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 48 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 54 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 53 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 108 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 108 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 98 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 98 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 210 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.6 KiB |
Двоичные данные
media/img/firefox/firstrun/facebook-messenger.jpg
Двоичные данные
media/img/firefox/firstrun/facebook-messenger.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 100 KiB После Ширина: | Высота: | Размер: 98 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 782 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 40 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 82 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 82 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 20 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 94 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 94 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 178 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 178 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 191 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 190 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 879 B |
|
|
@ -0,0 +1,22 @@
|
|||
;(function($) {
|
||||
'use strict';
|
||||
|
||||
$('#sticky-nav').waypoint('sticky');
|
||||
|
||||
// Scroll to the linked section
|
||||
$(window).on('click', '#sticky-nav a[href^="#"]', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Extract the target element's ID from the link's href.
|
||||
var elem = $(this).attr("href").replace( /.*?(#.*)/g, "$1" );
|
||||
|
||||
$('html, body').animate({
|
||||
scrollTop: $(elem).offset().top - 70
|
||||
}, 700, function() {
|
||||
$(elem).attr('tabindex','100').focus().removeAttr('tabindex');
|
||||
});
|
||||
|
||||
// GA tracking
|
||||
window.gaq_track('navigation interaction', 'click', $(this).attr('href'));
|
||||
});
|
||||
})(window.jQuery);
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
;(function($) {
|
||||
'use strict';
|
||||
|
||||
var $video_container = $('#video-container');
|
||||
var $video = $('#pinnedtabs-video');
|
||||
var $video_content;
|
||||
var video_closing = false;
|
||||
|
||||
if ($('html').hasClass('osx')) {
|
||||
$video.attr('src', 'https://videos-cdn.mozilla.net/serv/drafts/pinnedtabs-mac.webm');
|
||||
} else {
|
||||
$video.attr('src', 'https://videos-cdn.mozilla.net/serv/drafts/pinnedtabs-win.webm');
|
||||
}
|
||||
|
||||
window.gaq_track = function(category, action, label) {
|
||||
if (window._gaq) {
|
||||
_gaq.push(['_trackEvent', category, action, label]);
|
||||
}
|
||||
};
|
||||
|
||||
// delay redirect so GA tracking has time to fire
|
||||
var track_and_redirect = function(category, action, label, url) {
|
||||
gaq_track(category, action, label);
|
||||
|
||||
setTimeout(function() {
|
||||
window.location.href = url;
|
||||
}, 500);
|
||||
};
|
||||
|
||||
// video should be positioned directly over pinned tabs screenshot
|
||||
var position_video = function() {
|
||||
var pos = $('#pinnedtabs-screenshot').offset();
|
||||
var scroll_top = $(window).scrollTop();
|
||||
|
||||
var top = pos.top - scroll_top;
|
||||
var left = pos.left;
|
||||
|
||||
$video.css({
|
||||
'top': top,
|
||||
'left': left
|
||||
});
|
||||
|
||||
$('#modal-close').css({
|
||||
'top': (top - 16),
|
||||
'left': (left + $video.width() - 4)
|
||||
});
|
||||
};
|
||||
|
||||
var reattach_video = function() {
|
||||
// to avoid tracking video pause event fired when modal closes
|
||||
if (!$video[0].paused) {
|
||||
video_closing = true;
|
||||
}
|
||||
$video_container.append($video_content);
|
||||
};
|
||||
|
||||
$('a[href="#pinnedtabs-video"]').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
$video_content = $video.detach();
|
||||
|
||||
Mozilla.Modal.create_modal(this, $video_content, position_video, reattach_video);
|
||||
|
||||
gaq_track('first run interaction', 'open video', 'Pinned Tabs Video');
|
||||
});
|
||||
|
||||
// GA tracking
|
||||
$('a.featurelink').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
track_and_redirect('first run interaction', 'click', $(this).attr('href'), $(this).attr('href'));
|
||||
});
|
||||
|
||||
$('.social a').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
track_and_redirect('social interaction', 'click', $(this).attr('class'), $(this).attr('href'));
|
||||
});
|
||||
|
||||
$video.on('play', function() {
|
||||
gaq_track("first run interaction", "play", "Pinned Tabs Video");
|
||||
}).on('pause', function() {
|
||||
// video pause event is fired when modal closes
|
||||
// do not track this particular pause event
|
||||
if (!video_closing) {
|
||||
gaq_track("first run interaction", "pause", "Pinned Tabs Video");
|
||||
video_closing = false;
|
||||
}
|
||||
}).on('ended', function() {
|
||||
gaq_track("first run interaction", "finish", "Pinned Tabs Video");
|
||||
});
|
||||
|
||||
$('#footer_email_submit').on('click', function(e) {
|
||||
// if form is valid, delay submission to wait for GA tracking
|
||||
if ($('#footer-email-form')[0].checkValidity()) {
|
||||
e.preventDefault();
|
||||
|
||||
gaq_track("Newsletter Registration", "submit", "Registered for Firefox Updates");
|
||||
|
||||
setTimeout(function() {
|
||||
$('#footer-email-form').submit();
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
})(window.jQuery);
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
;(function($) {
|
||||
'use strict';
|
||||
|
||||
var gaq_track = function(action) {
|
||||
if (window._gaq) {
|
||||
_gaq.push(['_trackEvent', "first run interaction", action, "First Run Video"]);
|
||||
}
|
||||
};
|
||||
|
||||
$('#firstrun-video').on('play', function() {
|
||||
gaq_track("play");
|
||||
}).on('pause', function() {
|
||||
gaq_track("pause");
|
||||
}).on('ended', function() {
|
||||
gaq_track("finish");
|
||||
});
|
||||
})(window.jQuery);
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Generated by CoffeeScript 1.6.2
|
||||
/*
|
||||
Sticky Elements Shortcut for jQuery Waypoints - v2.0.2
|
||||
Copyright (c) 2011-2013 Caleb Troughton
|
||||
Dual licensed under the MIT license and GPL license.
|
||||
https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt
|
||||
*/
|
||||
(function(){(function(t,n){if(typeof define==="function"&&define.amd){return define(["jquery","waypoints"],n)}else{return n(t.jQuery)}})(this,function(t){var n,s;n={wrapper:'<div class="sticky-wrapper" />',stuckClass:"stuck"};s=function(t,n){t.wrap(n.wrapper);return t.parent()};t.waypoints("extendFn","sticky",function(e){var i,r,a;r=t.extend({},t.fn.waypoint.defaults,n,e);i=s(this,r);a=r.handler;r.handler=function(n){var s,e;s=t(this).children(":first");e=n==="down"||n==="right";s.toggleClass(r.stuckClass,e);i.height(e?s.outerHeight():"");if(a!=null){return a.call(this,n)}};i.waypoint(r);return this.data("stuckClass",r.stuckClass)});return t.waypoints("extendFn","unsticky",function(){this.parent().waypoint("destroy");this.unwrap();return this.removeClass(this.data("stuckClass"))})})}).call(this);
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,113 @@
|
|||
// create namespace
|
||||
if (typeof Mozilla == 'undefined') {
|
||||
var Mozilla = {};
|
||||
}
|
||||
|
||||
Mozilla.Modal = (function(w, $) {
|
||||
'use strict';
|
||||
|
||||
var _open = false;
|
||||
var _modal = null;
|
||||
var _close_callback = null;
|
||||
|
||||
var _init = function() {
|
||||
var $d = $(w.document);
|
||||
|
||||
// close modal on clicking close button or background.
|
||||
$d.on('click', '#modal .close', _close_modal);
|
||||
|
||||
// close on escape
|
||||
$d.on('keyup', function(e) {
|
||||
if (e.keyCode === 27 && _open) { // esc
|
||||
_close_modal();
|
||||
}
|
||||
});
|
||||
|
||||
// prevent focusing out of modal while open
|
||||
$d.on('focus', function(e) {
|
||||
if (_open && !_modal.contains(e.target)) {
|
||||
e.stopPropagation();
|
||||
_modal.focus();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var _create_modal = function(origin, content, create_callback, close_callback) {
|
||||
// Clear existing modal, if necessary,
|
||||
$('#modal').remove();
|
||||
$('.modalOrigin').removeClass('modalOrigin');
|
||||
|
||||
// Create new modal
|
||||
var html = (
|
||||
'<div id="modal" role="dialog" aria-labelledby="' + origin.getAttribute('id') + '" tabindex="-1">' +
|
||||
' <div class="inner">' +
|
||||
' <button type="button" id="modal-close" class="close">' +
|
||||
' <span class="close-text">' + window.trans('close') + '</span>' +
|
||||
' </button>' +
|
||||
' </div>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
// Add it to the page.
|
||||
$('body').addClass("noscroll").append(html);
|
||||
|
||||
_modal = $('#modal');
|
||||
|
||||
$("#modal .inner").append(content);
|
||||
|
||||
_modal.fadeIn('fast', function() {
|
||||
$(this).focus();
|
||||
});
|
||||
|
||||
// remember which element opened the modal for later focus
|
||||
$(origin).addClass('modalOrigin');
|
||||
|
||||
_open = true;
|
||||
|
||||
// store (optional) close callback
|
||||
if (typeof(close_callback) === 'function') {
|
||||
_close_callback = close_callback;
|
||||
}
|
||||
|
||||
// execute (optional) callback
|
||||
if (typeof(create_callback) === 'function') {
|
||||
create_callback();
|
||||
}
|
||||
};
|
||||
|
||||
var _close_modal = function() {
|
||||
$('#modal').fadeOut('fast', function() {
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
$('body').removeClass('noscroll');
|
||||
|
||||
// restore focus to element that opened the modal
|
||||
$('.modalOrigin').focus().remove('modalOrigin');
|
||||
|
||||
_open = false;
|
||||
_modal = null;
|
||||
|
||||
// execute (optional) callback
|
||||
if (_close_callback && typeof(_close_callback) === 'function') {
|
||||
_close_callback();
|
||||
_close_callback = null;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_init();
|
||||
},
|
||||
create_modal: function(origin, content, create_callback, close_callback) {
|
||||
_create_modal(origin, content, create_callback, close_callback);
|
||||
},
|
||||
close_modal: function() {
|
||||
_close_modal();
|
||||
}
|
||||
};
|
||||
})(window, window.jQuery);
|
||||
|
||||
$(document).ready(function() {
|
||||
Mozilla.Modal.init();
|
||||
});
|
||||
|
|
@ -182,6 +182,14 @@ MINIFY_BUNDLES = {
|
|||
'css/sandstone/video.less',
|
||||
'css/firefox/nightly_firstrun.less',
|
||||
),
|
||||
'firefox_firstrun_new_a': (
|
||||
'css/sandstone/video.less',
|
||||
'css/firefox/firstrun/a.less',
|
||||
),
|
||||
'firefox_firstrun_new_b': (
|
||||
'css/sandstone/video.less',
|
||||
'css/firefox/firstrun/b.less',
|
||||
),
|
||||
'firefox_fx': (
|
||||
'css/firefox/fx.less',
|
||||
'css/sandstone/video.less',
|
||||
|
|
@ -391,6 +399,20 @@ MINIFY_BUNDLES = {
|
|||
'js/mozilla-video-tools.js',
|
||||
'js/firefox/features.js',
|
||||
),
|
||||
'firefox_firstrun': (
|
||||
'js/firefox/firstrun/firstrun.js',
|
||||
),
|
||||
'firefox_firstrun_new_a': (
|
||||
'js/libs/jquery.waypoints.min.js',
|
||||
'js/libs/jquery.waypoints-sticky.min.js',
|
||||
'js/mozilla-modal.js',
|
||||
'js/firefox/firstrun/common.js',
|
||||
'js/firefox/firstrun/a.js',
|
||||
),
|
||||
'firefox_firstrun_new_b': (
|
||||
'js/mozilla-modal.js',
|
||||
'js/firefox/firstrun/common.js',
|
||||
),
|
||||
'firefox_fx': (
|
||||
'js/mozilla-pager.js',
|
||||
'js/mozilla-video-tools.js',
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
</head>
|
||||
|
||||
<body id="{% block body_id %}{% endblock %}" class="html-{{ DIR }} {% block body_class %}{% endblock %}"{% block body_attrs %}{% endblock %}>
|
||||
<div id="strings" {% block string_data %}{% endblock %}></div>
|
||||
<div id="outer-wrapper">
|
||||
<div id="wrapper">
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче