Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Updates

* Added section breaks/headings
* Swapped Flicks and Collusion
* Responsified for tablet size

Fix bug 806936 - adding partner logos to the moz.org page

Bug 805679 Add wordmark to Firefox OS page in style guide

Typo in persona/developer-faq.html, misplaced ')'

Correctly install gettext into Jinja2. Fix bug 808580.

Bug 807301 - state of mozilla: reuse localized strings in FAQ page from main page

Bug 808539 - state of mozilla: specify lang file to use for the main page

Bug 809349 - Make <title> and <h1> tags localizable on State of Mozilla

updates for Bug 809349

Progress on responsification
Still working on menu and mobile landscape
  • Loading branch information...
commit 788db239d6f5c89430bd9b91bfdc964389510166 1 parent b91e80f
@craigcook craigcook authored
Showing with 747 additions and 332 deletions.
  1. +74 −61 apps/foundation/templates/foundation/annualreport/2011.html
  2. +16 −5 apps/foundation/templates/foundation/annualreport/2011faq.html
  3. +4 −0 apps/gameon/templates/gameon/index.html
  4. +1 −1  apps/persona/templates/persona/developer-faq.html
  5. +20 −2 apps/styleguide/templates/styleguide/identity/firefoxos-branding.html
  6. +12 −11 lib/l10n_utils/helpers.py
  7. +17 −0 lib/l10n_utils/middleware.py
  8. +13 −4 lib/l10n_utils/template.py
  9. +6 −0 lib/l10n_utils/tests/test_files/locale/de/trans_block_reload_test.lang
  10. +14 −0 lib/l10n_utils/tests/test_files/templates/trans_block_reload_test.html
  11. +7 −0 lib/l10n_utils/tests/test_files/urls.py
  12. +33 −1 lib/l10n_utils/tests/test_template.py
  13. +318 −131 media/css/foundation/annual2011.less
  14. +3 −0  media/css/gameon.less
  15. +37 −5 media/css/styleguide/identity-firefoxos.less
  16. BIN  media/img/foundation/annualreport/2011/act-collusion.jpg
  17. BIN  media/img/foundation/annualreport/2011/act-sopa.jpg
  18. BIN  media/img/foundation/annualreport/2011/contributors/brian-thumb.jpg
  19. BIN  media/img/foundation/annualreport/2011/contributors/channy-thumb.jpg
  20. BIN  media/img/foundation/annualreport/2011/contributors/chit-thumb.jpg
  21. BIN  media/img/foundation/annualreport/2011/contributors/claire-thumb.jpg
  22. BIN  media/img/foundation/annualreport/2011/contributors/haitham-thumb.jpg
  23. BIN  media/img/foundation/annualreport/2011/contributors/ioana-thumb.jpg
  24. BIN  media/img/foundation/annualreport/2011/contributors/keng-thumb.jpg
  25. BIN  media/img/foundation/annualreport/2011/contributors/mohomodou-thumb.jpg
  26. BIN  media/img/foundation/annualreport/2011/contributors/viking-thumb.jpg
  27. BIN  media/img/gameon/nesta-logo.png
  28. BIN  media/img/gameon/nominet-logo.png
  29. BIN  media/img/styleguide/identity/firefoxos/firefoxos-placeholder.png
  30. BIN  media/img/styleguide/identity/firefoxos/wordmark.png
  31. +170 −110 media/js/annual2011.js
  32. +2 −1  settings/base.py
View
135 apps/foundation/templates/foundation/annualreport/2011.html
@@ -1,6 +1,8 @@
{% extends "base-resp.html" %}
-{% block page_title %}The State of Mozilla: 2011 Annual Report{% endblock %}
+{% add_lang_files "foundation/annualreport/2011faq" %}
+
+{% block page_title %}{{ _('The State of Mozilla: 2011 Annual Report') }}{% endblock %}
{% block body_id %}annual-2011{% endblock %}
{% block body_class %}sand{% endblock %}
@@ -45,7 +47,7 @@
<section id="welcome" class="section">
- <figure class="video">
+ <figure class="right video">
<a class="video-play" href="https://videos-cdn.mozilla.net/brand/Mozilla_2011_Story.webm" data-video-source="https://videos-cdn.mozilla.net/brand/Mozilla_2011_Story" title="{{ _('Click to play this video') }}">
<img src="{{ MEDIA_URL }}img/foundation/annualreport/2011/vid-welcome.jpg" alt="" width="380">
</a>
@@ -93,7 +95,7 @@
<section id="mobilized" class="section">
<h2 class="section-title">{{ _('Mozilla Mobilized') }}</h2>
- <section class="row block has-overlay mob-intro">
+ <section class="row has-overlay mob-intro">
<div class="overlay-wrap">
<ul class="mob-topics">
<li id="topic-firefox"><img src="{{ MEDIA_URL }}img/foundation/annualreport/2011/logo-firefox.png" alt="">Firefox</li>
@@ -128,7 +130,7 @@ <h2 class="section-title">{{ _('Mozilla Mobilized') }}</h2>
</div>
</section>
- <section class="row block mob-firefoxos has-overlay">
+ <section class="row mob-firefoxos has-overlay">
<h3>{{ _('Firefox OS') }}</h3>
<div class="overlay-wrap">
@@ -184,12 +186,12 @@ <h2 class="section-title">{{ _('Mozilla Mobilized') }}</h2>
</div>
</section>
- <section class="row block has-overlay mob-fxandroid">
+ <section class="row has-overlay mob-fxandroid">
<h3>{{ _('Firefox for Android') }}</h3>
- <img src="{{ MEDIA_URL }}img/foundation/annualreport/2011/fxandroid-phone.png" alt="">
+ <img class="left" src="{{ MEDIA_URL }}img/foundation/annualreport/2011/fxandroid-phone.png" alt="">
- <div class="overlay-wrap">
+ <div class="right overlay-wrap">
{# L10N: "Fast. Smart. Safe." is a slogan for Firefox for Android. It appears here as three separate strings for styling and layout purposes. #}
<h4>
{{ _('Fast.') }}<br>
@@ -219,7 +221,7 @@ <h2 class="section-title">{{ _('Mozilla Mobilized') }}</h2>
</div>
</section>
- <section class="row block has-overlay mob-fxdesktop">
+ <section class="row has-overlay mob-fxdesktop">
<h3>{{ _('Firefox for Windows, Mac and Linux') }}</h3>
<div class="overlay-wrap">
@@ -267,7 +269,7 @@ <h2 class="section-title">{{ _('Mozilla Mobilized') }}</h2>
</div>
</section>
- <section class="row block has-overlay mob-webmaker">
+ <section class="row has-overlay mob-webmaker">
<h3>{{ _('Webmaker: Teaching the world the Web') }}</h3>
<div class="overlay-wrap">
@@ -311,7 +313,7 @@ <h2 class="section-title">{{ _('Mozilla Mobilized') }}</h2>
<div class="row">
- <aside class="block video mob-webmakervideo">
+ <aside class="left video mob-webmakervideo">
<h3>{{ _('Webmaker: Video') }}</h3>
<figure class="video">
<a class="video-play" href="https://webmaker.org/videos/" data-video-source="https://videos-cdn.mozilla.net/serv/webmademovies/webmakers-instructors" title="{{ _('Click to view this video') }}">
@@ -320,7 +322,7 @@ <h2 class="section-title">{{ _('Mozilla Mobilized') }}</h2>
</figure>
</aside>
- <section class="block has-overlay mob-standards">
+ <section class="right has-overlay mob-standards">
<h3>{{ _('Advocating for Web standards') }}</h3>
<div class="overlay-wrap">
@@ -371,7 +373,7 @@ <h2 class="section-title">{{ _('Action') }}</h2>
<div class="row">
- <section class="block has-overlay act-intro">
+ <section class="left has-overlay act-intro">
<div class="overlay-wrap">
<p class="pull"><em>
{% trans %}
@@ -397,7 +399,7 @@ <h2 class="section-title">{{ _('Action') }}</h2>
</div>
</section>
- <section class="block has-overlay act-donottrack">
+ <section class="right has-overlay act-donottrack">
<h3>{{ _('Do Not Track') }}</h3>
<div class="overlay-wrap">
@@ -444,7 +446,7 @@ <h2 class="section-title">{{ _('Action') }}</h2>
<div class="row">
- <section class="block act-sopa has-overlay">
+ <section class="left act-sopa has-overlay">
<h3>SOPA / PIPA & ACTA</h3>
<div class="overlay-wrap">
@@ -495,23 +497,24 @@ <h2 class="section-title">{{ _('Action') }}</h2>
</div>
</section>
- <section class="block act-collusion has-overlay">
- <h3>{{ _('Collusion') }}</h3>
+ <section class="right has-overlay act-flicks">
+ <h3>{{ _('Firefox Flicks') }}</h3>
<div class="overlay-wrap">
- <img src="{{ MEDIA_URL }}img/foundation/annualreport/2011/act-collusion.jpg" alt="">
+ <img src="{{ MEDIA_URL }}img/foundation/annualreport/2011/logo-firefoxflicks.png" alt="">
<div class="overlay">
<p>
{% trans
- collusion_url='https://www.mozilla.org/collusion/' %}
- <a href="{{ collusion_url }}" rel="external">Mozilla Collusion</a>
- gives consumers a powerful tool to protect their privacy, arming
- them with transparency, facts and the power to make their own
- decisions about how their personal data is shared and used. Made
- possible with the support of the Ford Foundation, Collusion allows
- users to see who is tracking them across the Web. It shows, in real
- time, how that data creates a spider-web of interaction between
- companies and other trackers.
+ flicks_url='https://firefoxflicks.mozilla.org/' %}
+ This year we brought back <a href="{{ flicks_url }}" rel="external">Firefox Flicks</a>
+ — a video challenge for aspiring filmmakers, animators and creatives
+ from around the world to produce and submit short films. These films
+ made by Firefox fans, promoted and educated users about the issues
+ that affect their online lives such as privacy and security. Most
+ importantly, these filmmakers shared what makes Firefox different
+ using their own voices. Celebrities and film-industry experts helped
+ select the regional winners from more than 400 submissions from
+ thousands of filmmakers worldwide.
{% endtrans %}
</p>
</div>
@@ -522,37 +525,36 @@ <h2 class="section-title">{{ _('Action') }}</h2>
<div class="row">
- <section class="block has-overlay act-flicks">
- <h3>{{ _('Firefox Flicks') }}</h3>
+ <section class="act-collusion has-overlay">
+ <h3>{{ _('Collusion') }}</h3>
- <div class="overlay-wrap">
- <img src="{{ MEDIA_URL }}img/foundation/annualreport/2011/logo-firefoxflicks.png" alt="">
+ <div class="left overlay-wrap">
+ <img src="{{ MEDIA_URL }}img/foundation/annualreport/2011/act-collusion.jpg" alt="">
<div class="overlay">
<p>
{% trans
- flicks_url='https://firefoxflicks.mozilla.org/' %}
- This year we brought back <a href="{{ flicks_url }}" rel="external">Firefox Flicks</a>
- — a video challenge for aspiring filmmakers, animators and creatives
- from around the world to produce and submit short films. These films
- made by Firefox fans, promoted and educated users about the issues
- that affect their online lives such as privacy and security. Most
- importantly, these filmmakers shared what makes Firefox different
- using their own voices. Celebrities and film-industry experts helped
- select the regional winners from more than 400 submissions from
- thousands of filmmakers worldwide.
+ collusion_url='https://www.mozilla.org/collusion/' %}
+ <a href="{{ collusion_url }}" rel="external">Mozilla Collusion</a>
+ gives consumers a powerful tool to protect their privacy, arming
+ them with transparency, facts and the power to make their own
+ decisions about how their personal data is shared and used. Made
+ possible with the support of the Ford Foundation, Collusion allows
+ users to see who is tracking them across the Web. It shows, in real
+ time, how that data creates a spider-web of interaction between
+ companies and other trackers.
{% endtrans %}
</p>
</div>
</div>
- </section>
- <section class="block act-kovacsted">
- <figure class="video">
+ <figure class="right video act-kovacsted">
<a class="vid-youtube" href="https://www.youtube.com/watch?v=f_f5wNw-2c0" title="{{ _('Click to view this video') }}">
<img src="{{ MEDIA_URL }}img/foundation/annualreport/2011/vid-kovacsted.jpg" alt="">
</a>
</figure>
+
</section>
+
</div>
</section>
@@ -580,10 +582,10 @@ <h2 class="section-title">{{ _('Community') }}</h2>
</p>
</section>
- <section class="row block has-overlay com-reps">
+ <section class="row has-overlay com-reps">
<h3>{{ _('Mozilla Reps') }}</h3>
- <div class="overlay-wrap">
+ <div class="overlay-wrap left">
<img src="{{ MEDIA_URL }}img/foundation/annualreport/2011/com-reps.jpg" alt="">
<div class="overlay">
@@ -604,20 +606,20 @@ <h2 class="section-title">{{ _('Community') }}</h2>
</div>
</div>
- <img class="rep" src="{{ MEDIA_URL }}img/foundation/annualreport/2011/mozilla-rep.png" alt="">
+ <img class="rep right" src="{{ MEDIA_URL }}img/foundation/annualreport/2011/mozilla-rep.png" alt="">
</section>
<section class="row haz-overlay com-mozcamps">
<h3>{{ _('MozCamps') }}</h3>
- <aside class="video">
+ <aside class="video left">
<img src="{{ MEDIA_URL }}img/foundation/annualreport/2011/logo-mozcamp.png" alt="">
<a class="video-play" href="http://videos-cdn.mozilla.net/serv/drafts/MozCamp-Latam.webm" data-video-source="http://videos-cdn.mozilla.net/serv/drafts/MozCamp-Latam" title="{{ _('Click to play this video') }}">
<img src="{{ MEDIA_URL }}img/foundation/annualreport/2011/vid-mozcamp.jpg" alt="">
</a>
</aside>
- <div class="overlay-wrap">
+ <div class="overlay-wrap right">
<img src="{{ MEDIA_URL }}img/foundation/annualreport/2011/com-mozcamp.jpg" alt="">
<div class="overlay">
<p>
@@ -650,10 +652,10 @@ <h2 class="section-title">{{ _('Community') }}</h2>
</div>
</section>
- <section class="row block has-overlay com-emerging">
+ <section class="row has-overlay com-emerging">
<h3>{{ _('Emerging Communities') }}</h3>
- <div class="overlay-wrap">
+ <div class="overlay-wrap left">
<img src="{{ MEDIA_URL }}img/foundation/annualreport/2011/com-emerging.jpg" alt="">
<div class="overlay">
<p>
@@ -678,7 +680,7 @@ <h2 class="section-title">{{ _('Community') }}</h2>
</p>
</div>
</div>
- <img class="meet" src="{{ MEDIA_URL }}img/foundation/annualreport/2011/community-meet.png" alt="">
+ <img class="meet right" src="{{ MEDIA_URL }}img/foundation/annualreport/2011/community-meet.png" alt="">
</section>
<section class="row com-stories">
@@ -691,7 +693,7 @@ <h2 class="section-title">{{ _('Community') }}</h2>
</figure>
<ul id="story-slider">
-
+
<li id="story-chit" class="vcard">
<a class="contributor" href="http://videos-cdn.mozilla.net/serv/drafts/Contributorstory1.webm" data-poster="{{ MEDIA_URL }}img/foundation/annualreport/2011/contributors/chit-poster.jpg">
<hgroup>
@@ -710,7 +712,7 @@ <h4 class="fn">{{ _('Chit Thiri Maung') }}</h4>
</p>
</a>
</li>
-
+
<li id="story-viking" class="vcard">
<a class="contributor" href="http://videos-cdn.mozilla.net/serv/drafts/Contributorstory2.webm" data-poster="{{ MEDIA_URL }}img/foundation/annualreport/2011/contributors/viking-poster.jpg">
<hgroup>
@@ -730,7 +732,7 @@ <h4 class="fn">{{ _('Viking Karwur') }}</h4>
</p>
</a>
</li>
-
+
<li id="story-keng" class="vcard">
<a class="contributor" href="http://videos-cdn.mozilla.net/serv/drafts/Contributorstory4.webm" data-poster="{{ MEDIA_URL }}img/foundation/annualreport/2011/contributors/keng-poster.jpg">
<hgroup>
@@ -749,7 +751,7 @@ <h4 class="fn">{{ _('Patipat “Keng” Susumpow') }}</h4>
</p>
</a>
</li>
-
+
<li id="story-claire" class="vcard">
<a class="contributor" href="http://videos-cdn.mozilla.net/serv/drafts/Contributorstory5.webm" data-poster="{{ MEDIA_URL }}img/foundation/annualreport/2011/contributors/claire-poster.jpg">
<hgroup>
@@ -768,7 +770,7 @@ <h4 class="fn">{{ _('Claire Corgnou') }}</h4>
</p>
</a>
</li>
-
+
<li id="story-haitham" class="vcard">
<a class="contributor" href="http://videos-cdn.mozilla.net/serv/drafts/Contributorstory6.webm" data-poster="{{ MEDIA_URL }}img/foundation/annualreport/2011/contributors/haitham-poster.jpg">
<hgroup>
@@ -787,7 +789,7 @@ <h4 class="fn">{{ _('Haitham El-Ghareeb') }}</h4>
</p>
</a>
</li>
-
+
<li id="story-ioana" class="vcard">
<a class="contributor" href="http://videos-cdn.mozilla.net/serv/drafts/Contributorstory7.webm" data-poster="{{ MEDIA_URL }}img/foundation/annualreport/2011/contributors/ioana-poster.jpg">
<hgroup>
@@ -806,7 +808,7 @@ <h4 class="fn">{{ _('Ioana Chiorean') }}</h4>
</p>
</a>
</li>
-
+
<li id="story-brian" class="vcard">
<a class="contributor" href="http://videos-cdn.mozilla.net/serv/drafts/Contributorstory8.webm" data-poster="{{ MEDIA_URL }}img/foundation/annualreport/2011/contributors/brian-poster.jpg">
<hgroup>
@@ -825,7 +827,7 @@ <h4 class="fn">{{ _('Brian King') }}</h4>
</p>
</a>
</li>
-
+
<li id="story-mohomodou" class="vcard">
<a class="contributor" href="http://videos-cdn.mozilla.net/serv/drafts/Contributorstory9.webm" data-poster="{{ MEDIA_URL }}img/foundation/annualreport/2011/contributors/mohomodou-poster.jpg">
<hgroup>
@@ -845,7 +847,7 @@ <h4 class="fn">{{ _('Mohomodou Houssouba') }}</h4>
</p>
</a>
</li>
-
+
</ul>
</section>
@@ -916,7 +918,18 @@ <h2 class="section-title">{{ _('Sustainability and Partnerships') }}</h2>
{# L10N: This is a label for a button that controls a slider control, advancing to reveal the next item. #}
<button type="button" class="btn-next">{{ _('Next') }}</button>
+<script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-36116321-1']);
+ _gaq.push(['_trackPageview']);
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+</script>
+
{% endblock %}
{% block email_form %}{% endblock %}
-
+{% block webtrends %}{% endblock %}
View
21 apps/foundation/templates/foundation/annualreport/2011faq.html
@@ -1,8 +1,8 @@
{% extends "base-resp.html" %}
-{% add_lang_files "foundation/annualreport/2011" "foundation/annualreport/2011faq" %}
+{% add_lang_files "foundation/annualreport/2011" %}
-{% block page_title %}The State of Mozilla: 2011 Annual Report: Frequently Asked Questions{% endblock %}
+{% block page_title %}{{ _('The State of Mozilla: 2011 Annual Report') }} | {{ _('Frequently Asked Questions') }}{% endblock %}
{% block body_id %}annual-2011-faq{% endblock %}
{% block body_class %}sand{% endblock %}
@@ -127,8 +127,8 @@
<p>
{#L10N: These variables will be numerals that won't require translation #}
{% trans
- revenue='X',
- increase='Y' %}
+ revenue='$163',
+ increase='33' %}
Mozilla’s consolidated reported revenue (Mozilla Foundation and all
subsidiaries) for 2011 was {{ revenue }} million, up approximately
{{ increase }} percent from 2010.
@@ -379,7 +379,18 @@
</article>
+<script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-36116321-1']);
+ _gaq.push(['_trackPageview']);
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+</script>
+
{% endblock %}
{% block email_form %}{% endblock %}
-
+{% block webtrends %}{% endblock %}
View
4 apps/gameon/templates/gameon/index.html
@@ -66,6 +66,10 @@ <h1 class="large">Game On</h1>
<p><small>We will only send you Mozilla-related information.</small></p>
<input type="hidden" name="submit" value="submit">
</form>
+<h3>Supported by</h3>
+<p>Game On is made possible in part thanks to the support of Nesta and Nominet Trust.</p>
+<a href="http://www.nesta.org.uk/"><img src="{{ media('img/gameon/nesta-logo.png') }}" alt="Nesta" width="220" height="51" /></a>
+<a href="http://www.nominettrust.org.uk/"><img src="{{ media('img/gameon/nominet-logo.png') }}" alt="Nominet Trust" width="220" height="52" /></a>
{% endblock %}
</aside>
View
2  apps/persona/templates/persona/developer-faq.html
@@ -44,7 +44,7 @@
<dt>Can I be certain my email and password are secure?</dt>
<dd>
- <p>We take security and privacy very seriously (you can read our complete corporate <a href="http://www.mozilla.org/about/policies/privacy-policy.html)">privacy policy here</a>. With Persona, verified email addresses and encrypted passwords are saved on the Mozilla server.</p>
+ <p>We take security and privacy very seriously (you can read our complete corporate <a href="http://www.mozilla.org/about/policies/privacy-policy.html">privacy policy here</a>). With Persona, verified email addresses and encrypted passwords are saved on the Mozilla server.</p>
<p>It uses a client-side cryptographic certificate (that is, it stores tamper-resistant proof in your browser) to prove to the site that the current user owns an particular email address. The site that you're logging in to never actually sees your password.</p>
</dd>
<dt>What is the difference between Persona and BrowserID?</dt>
View
22 apps/styleguide/templates/styleguide/identity/firefoxos-branding.html
@@ -9,7 +9,25 @@
{% block content_area %}
<section id="intro">
- <h2>Coming soon</h2>
- <p>This is the future home of our evolving Firefox OS brand (formerly Boot to Gecko) for mobile devices. Check back soon for complete usage examples and rules.</p>
+ <h2>Introduction</h2>
+ <p>Welcome to home of our evolving Firefox OS brand (formerly Boot to Gecko) for mobile devices. Check back soon for complete usage examples and rules.</p>
+</section>
+<section id="wordmark">
+ <div class="build">
+ <h2>Wordmark</h2>
+ <p>The Firefox OS wordmark follows our <a href="{{ url('styleguide.communications.typefaces') }}#wordmarks">tiered font system</a>.</p>
+ </div>
+ <div class="logo">
+ <img src="{{ media('/img/styleguide/box-arrow-left.png') }}" alt="" class="box-arrow" />
+ <img src="{{ media('/img/styleguide/identity/firefoxos/wordmark.png') }}" alt="Logo" />
+ </div>
+ <div class="download">
+ <h4>Download</h4>
+ <ul class="button-list">
+ <li><a href="https://assets.mozillalabs.com/Brands-Logos/Firefox%20OS/wordmark-only/firefox-os_wordmark-only_CMYK.eps" class="button-sand">EPS</a>
+ </li><li><a href="https://assets.mozillalabs.com/Brands-Logos/Firefox%20OS/wordmark-only/firefox-os_wordmark-only_RGB-300dpi.jpg" class="button-sand">JPG (300dpi)</a>
+ </li><li><a href="https://assets.mozillalabs.com/Brands-Logos/Firefox%20OS/wordmark-only/firefox-os_wordmark-only_RGB.png" class="button-sand">PNG</a></li>
+ </ul>
+ </div>
</section>
{% endblock %}
View
23 lib/l10n_utils/helpers.py
@@ -25,9 +25,10 @@ def add_lang_files(ctx, files):
req.langfiles = files + req.langfiles
-@jingo.register.function
+# TODO: make an ngettext compatible function. The pluaralize clause of a
+# trans block won't work untill we do.
@jinja2.contextfunction
-def _(ctx, text):
+def gettext(ctx, text):
"""Translate a string, loading the translations for the locale if
necessary."""
install_lang_files(ctx)
@@ -38,17 +39,17 @@ def _(ctx, text):
@jingo.register.function
@jinja2.contextfunction
-def gettext(ctx, text):
- """Override the gettext call to pass through our system. This is
- hacky, but lets us use the trans blocks and other nice integration
- features of gettext. """
- return _(ctx, text)
-
-
-@jingo.register.function
-@jinja2.contextfunction
def lang_files(ctx, *files):
"""Add more lang files to the translation object"""
# Filter out empty files
install_lang_files(ctx)
add_lang_files(ctx, [f for f in files if f])
+
+
+# backward compatible for imports
+_ = gettext
+
+
+# Once tower is fixed and we only need to install the above `gettext` function
+# into Jinja2 once, we should do it here. The call is simply:
+# jingo.env.install_gettext_callables(gettext, gettext)
View
17 lib/l10n_utils/middleware.py
@@ -0,0 +1,17 @@
+import jingo
+
+from l10n_utils.helpers import gettext
+
+
+# TODO: Fix tower and remove this.
+class FixLangFileTranslationsMiddleware(object):
+ """
+ Middleware that will overwrite the gettext functions in the Jinja2 setup.
+ tower.activate() called by LocaleURLMiddleware sets them to tower's own
+ functions.
+
+ Bug 808580
+ """
+
+ def process_request(self, request):
+ jingo.env.install_gettext_callables(gettext, gettext)
View
17 lib/l10n_utils/template.py
@@ -1,7 +1,16 @@
-import re
-import uuid
+from jinja2.ext import Extension, InternationalizationExtension, nodes
+from tower import strip_whitespace
-from jinja2.ext import Environment, Extension, nodes
+
+class I18nExtension(InternationalizationExtension):
+ """
+ Use this instead of `tower.template.i18n` because the override of `_`
+ global was throwing errors.
+ """
+ def _parse_block(self, parser, allow_pluralize):
+ ref, buffer = super(I18nExtension, self)._parse_block(parser,
+ allow_pluralize)
+ return ref, strip_whitespace(buffer)
class L10nBlockExtension(Extension):
@@ -80,7 +89,6 @@ def parse(self, parser):
content_nodes.insert(0, [nodes.Call(nodes.Name('super', 'load'),
[], [], None, None)])
-
# Since we are a block, we must emit a block too, so make a
# random one that contains a call to the load function
node = nodes.Block().set_lineno(lineno)
@@ -94,3 +102,4 @@ def parse(self, parser):
# Makes for a prettier import in settings.py
l10n_blocks = L10nBlockExtension
lang_blocks = LoadLangExtension
+i18n = I18nExtension
View
6 lib/l10n_utils/tests/test_files/locale/de/trans_block_reload_test.lang
@@ -0,0 +1,6 @@
+;The State of Mozilla
+Die Lage von Mozilla
+
+
+;Mozilla‘s vision of the Internet is a place where anyone can access information, a place where everyone can hack and tinker; one that has openness, freedom and transparency; where users have control over their personal data and where all minds have the freedom to create and to consume without walls or tight restrictions.
+Mozillas Vision des Internets ist ein Ort, wo jeder auf Informationen zugreifen kann, ein Ort, wo jeder programmieren und herumspielen kann; einer, der offen, frei und transparent ist; wo Benutzer die Kontrolle über ihre persönlichen Daten haben und wo jeder Geist die Freiheit hat, zu schaffen und zu konsumieren, ohne Mauern oder enge Einschränkungen.
View
14 lib/l10n_utils/tests/test_files/templates/trans_block_reload_test.html
@@ -0,0 +1,14 @@
+<html>
+ <body>
+ <h1>{{ _('The State of Mozilla') }}</h1>
+ <p>
+ {% trans %}
+ Mozilla‘s vision of the Internet is a place where anyone can
+ access information, a place where everyone can hack and tinker;
+ one that has openness, freedom and transparency; where users have
+ control over their personal data and where all minds have the
+ freedom to create and to consume without walls or tight restrictions.
+ {% endtrans %}
+ </p>
+ </body>
+</html>
View
7 lib/l10n_utils/tests/test_files/urls.py
@@ -0,0 +1,7 @@
+from django.conf.urls.defaults import *
+from mozorg.util import page
+
+
+urlpatterns = patterns('',
+ page('trans-block-reload-test', 'trans_block_reload_test.html'),
+)
View
34 lib/l10n_utils/tests/test_template.py
@@ -1,10 +1,15 @@
import os
+from django.conf import settings
+from django.core.urlresolvers import clear_url_caches
+from django.test.client import Client
+
from jingo import env
from jinja2 import FileSystemLoader
from mock import patch
from nose.plugins.skip import SkipTest
-from nose.tools import eq_
+from nose.tools import eq_, ok_
+from pyquery import PyQuery as pq
from mozorg.tests import TestCase
@@ -13,6 +18,33 @@
TEMPLATE_DIRS = (os.path.join(ROOT, 'templates'),)
+class TestTransBlocks(TestCase):
+ def setUp(self):
+ clear_url_caches()
+ self.client = Client()
+
+ @patch.object(env, 'loader', FileSystemLoader(TEMPLATE_DIRS))
+ @patch.object(settings, 'ROOT_URLCONF', 'l10n_utils.tests.test_files.urls')
+ @patch.object(settings, 'ROOT', ROOT)
+ def test_trans_block_works(self):
+ """ Sanity check to make sure translations work at all. """
+ response = self.client.get('/de/trans-block-reload-test/')
+ doc = pq(response.content)
+ gettext_call = doc('h1')
+ trans_block = doc('p')
+ eq_(gettext_call.text(), 'Die Lage von Mozilla')
+ ok_(trans_block.text().startswith('Mozillas Vision des Internets ist'))
+
+ def test_trans_block_works_reload(self):
+ """
+ Translation should work after a reload.
+
+ bug 808580
+ """
+ self.test_trans_block_works()
+ self.test_trans_block_works()
+
+
class TestTemplateLangFiles(TestCase):
@patch.object(env, 'loader', FileSystemLoader(TEMPLATE_DIRS))
def test_added_lang_files(self):
View
449 media/css/foundation/annual2011.less
@@ -20,7 +20,14 @@ h1, h2, h3, h4, h5, h6 {
#mobilized h2, #mobilized h3 { color: @blue; }
#action h2, #action h3 { color: #000; }
#community h2, #community h3 { color: @orange; }
-.section-title { .hidden; }
+#sustainability h2, #sustainability h3 { color: @red; }
+
+.section-title {
+ font-size: 38px;
+ margin: 0 -20px .35em;
+ padding: .5em 20px 0;
+ border-top: 2px solid;
+}
dl.faq dt {
color: @mozred;
@@ -148,7 +155,7 @@ body.noscroll {
max-width: 90%;
height: auto;
display: block;
- margin: 90px auto;
+ margin: 90px auto 20px;
}
video:focus {
outline: 1px solid #ccc;
@@ -158,6 +165,10 @@ body.noscroll {
display: block;
margin: 90px auto;
}
+ .desc {
+ max-width: 85%;
+ margin: 0 auto;
+ }
}
}
@@ -192,7 +203,6 @@ body.noscroll {
/* Text block overlays *********/
.section,
-.block,
.row {
.clearfix;
}
@@ -201,6 +211,16 @@ body.noscroll {
margin: 0 0 20px;
}
+.left {
+ width: 380px;
+ float: left;
+}
+
+.right {
+ width: 380px;
+ float: right;
+}
+
.overlay-wrap {
position: relative;
z-index: auto;
@@ -261,8 +281,6 @@ body.noscroll {
/* @Welcome *********/
#welcome .video {
- float: right;
- width: 380px;
margin: 0 0 20px 20px;
}
@@ -332,18 +350,11 @@ body.noscroll {
}
/* Firefox for Android ***/
-.mob-fxandroid img {
- float: left;
-}
-
.mob-fxandroid {
position: relative;
}
-.mob-fxandroid .overlay-wrap {
- width: 380px;
- min-height: 320px;
- float: right;
+.mob-fxandroid {
h4 {
padding: 85px 20px 0 215px;
min-height: 235px;
@@ -370,18 +381,16 @@ body.noscroll {
}
/* Firefox Desktop ***/
-.mob-fxdesktop .overlay-wrap {
- .pull {
- background: #424d52 url(/media/img/foundation/annualreport/2011/mob-fxdesktop.jpg) center top no-repeat;
- min-height: 300px;
- padding: 120px 100px 0;
- text-align: center;
- .open-sans-light;
- font-size: 42px;
- font-style: italic;
- color: #f7f4ec;
- text-shadow: none;
- }
+.mob-fxdesktop .pull {
+ background: #424d52 url(/media/img/foundation/annualreport/2011/mob-fxdesktop.jpg) center top no-repeat;
+ min-height: 300px;
+ padding: 120px 100px 0;
+ text-align: center;
+ .open-sans-light;
+ font-size: 42px;
+ font-style: italic;
+ color: #f7f4ec;
+ text-shadow: none;
}
.js .mob-fxdesktop .overlay {
@@ -390,18 +399,16 @@ body.noscroll {
}
/* Webmaker ***/
-.mob-webmaker {
- .pull {
- background: #71150d url(/media/img/foundation/annualreport/2011/mob-webmaker.jpg) center center no-repeat;
- min-height: 260px;
- padding: 100px 120px 0;
- text-align: center;
- .open-sans-light;
- font-size: 42px;
- font-style: italic;
- color: #f7f4ec;
- text-shadow: none;
- }
+.mob-webmaker .pull {
+ background: #71150d url(/media/img/foundation/annualreport/2011/mob-webmaker.jpg) center center no-repeat;
+ min-height: 260px;
+ padding: 100px 120px 0;
+ text-align: center;
+ .open-sans-light;
+ font-size: 42px;
+ font-style: italic;
+ color: #f7f4ec;
+ text-shadow: none;
}
.js .mob-webmaker .overlay {
@@ -409,31 +416,21 @@ body.noscroll {
background: rgba(113,21,13,.95);
}
-.mob-webmakervideo {
- width: 380px;
- float: left;
- p {
- margin: 0;
- }
+.mob-webmakervideo p {
+ margin: 0;
}
-.mob-standards {
- width: 380px;
- float: right;
- .overlay-wrap {
-
- }
- .pull {
- background: #a63700 url(/media/img/foundation/annualreport/2011/mob-standards.jpg) center top no-repeat;
- min-height: 184px;
- padding: 30px 40px 0;
- text-align: center;
- .open-sans-light;
- font-size: 32px;
- font-style: italic;
- color: #f7f4ec;
- text-shadow: none;
- }
+.mob-standards .pull {
+ background: #a63700 url(/media/img/foundation/annualreport/2011/mob-standards.jpg) center top no-repeat;
+ min-height: 184px;
+ padding: 30px 40px 0;
+ margin: 0;
+ text-align: center;
+ .open-sans-light;
+ font-size: 32px;
+ font-style: italic;
+ color: #f7f4ec;
+ text-shadow: none;
}
.js .mob-standards .overlay {
@@ -442,21 +439,16 @@ body.noscroll {
}
/* Action *********/
-.act-intro {
- width: 380px;
- float: left;
- margin-top: 2.92em;
- .pull {
- background: #242e39 url(/media/img/foundation/annualreport/2011/act-intro.jpg) center top no-repeat;
- min-height: 360px;
- padding: 130px 40px 0;
- text-align: center;
- .open-sans-light;
- font-size: 38px;
- font-style: italic;
- color: #f7f4ec;
- text-shadow: none;
- }
+.act-intro .pull {
+ background: #242e39 url(/media/img/foundation/annualreport/2011/act-intro.jpg) center top no-repeat;
+ min-height: 360px;
+ padding: 130px 40px 0;
+ text-align: center;
+ .open-sans-light;
+ font-size: 38px;
+ font-style: italic;
+ color: #f7f4ec;
+ text-shadow: none;
}
.js .act-intro .overlay {
@@ -466,8 +458,7 @@ body.noscroll {
/* Do Not Track ***/
.act-donottrack {
- width: 380px;
- float: right;
+ margin-top: -3em;
img {
background: #fff url(/media/img/foundation/annualreport/2011/act-donottrack.jpg) center top no-repeat;
display: block;
@@ -481,11 +472,6 @@ body.noscroll {
}
/* SOPA/PIPA ***/
-.act-sopa {
- width: 380px;
- float: left;
-}
-
.js .act-sopa .overlay {
background: rgb(0,0,0);
background: rgba(0,0,0,.95);
@@ -496,11 +482,6 @@ body.noscroll {
text-shadow: none;
}
-.act-collusion {
- width: 380px;
- float: right;
-}
-
.js .act-collusion .overlay {
background: rgb(105,61,32);
background: rgba(105,61,32,.95);
@@ -513,15 +494,10 @@ body.noscroll {
}
/* Flicks ***/
-.act-flicks {
- width: 380px;
- float: left;
- margin-top: 3px;
- img {
- display: block;
- padding: 30px 90px 13px;
- background: rgb(80,13,20) url(/media/img/foundation/annualreport/2011/bg-curtains.jpg) center top repeat-x;
- }
+.act-flicks img {
+ display: block;
+ padding: 50px 90px 36px;
+ background: rgb(80,13,20) url(/media/img/foundation/annualreport/2011/bg-curtains.jpg) center top repeat-x;
}
.js .act-flicks .overlay {
@@ -529,17 +505,7 @@ body.noscroll {
background: rgba(80,13,20,.95);
}
-/* TED talk ***/
-.act-kovacsted {
- width: 380px;
- float: right;
- margin-top: 3em;
-}
-
/* Community *********/
-#community .section-title {
- .hidden;
-}
.com-intro .pull {
height: 390px;
width: 100%;
@@ -566,17 +532,11 @@ body.noscroll {
}
/* Reps ***/
-.com-reps {
- .overlay-wrap {
- width: 380px;
- float: left;
- }
- .overlay {
- width: 780px;
- float: left;
- clear: both;
- margin-top: 20px;
- }
+.com-reps .overlay {
+ width: 780px;
+ float: left;
+ clear: both;
+ margin-top: 20px;
}
.js .com-reps .overlay {
@@ -594,13 +554,7 @@ body.noscroll {
/* Mozcamps ***/
.com-mozcamps {
- .overlay-wrap {
- width: 380px;
- float: right;
- }
.video {
- width: 380px;
- float: left;
img {
display: block;
margin: 20px auto;
@@ -625,13 +579,6 @@ body.noscroll {
/* Emerging communities ***/
.com-emerging {
- .overlay-wrap {
- width: 380px;
- float: left;
- }
- .meet {
- float: right;
- }
.overlay {
width: 780px;
float: left;
@@ -688,7 +635,8 @@ body.noscroll {
overflow: hidden;
}
-#story-slider {
+#story-slider,
+#story-slider-clone {
position: relative;
overflow: hidden;
.vcard {
@@ -845,6 +793,75 @@ body.noscroll {
/* Tablet Layout: 768px */
@media only screen and (min-width: @widthTablet) and (max-width: @widthDesktop) {
+ #wrapper,
+ #page-nav.fixed {
+ width: 740px;
+ }
+
+ #main-content {
+ width: 700px;
+ }
+
+ .left,
+ .right {
+ width: 340px;
+ }
+
+ .mob-fxandroid {
+ h4 {
+ font-size: 32px;
+ min-height: 200px;
+ background-position: 0 -15px;
+ }
+ .overlay {
+ width: 700px;
+ margin-left: -360px;
+ }
+ }
+ .js .mob-fxandroid .overlay {
+ margin: 0;
+ width: auto;
+ }
+
+ .mob-standards .pull {
+ font-size: 26px;
+ min-height: 160px;
+ }
+
+ .act-donottrack img {
+ padding: 130px 37.5px 96px;
+ }
+
+ .act-flicks img {
+ padding: 40px 70px 19px;
+ }
+
+ .com-intro .pull {
+ height: 340px;
+ h3 {
+ font-size: 38px;
+ }
+ }
+
+ .com-mozcamps {
+ .left img {
+ width: 233px;
+ }
+ .left .video-play img {
+ width: 340px;
+ }
+ }
+
+ .jcarousel-clip {
+ width: 660px;
+ }
+
+ #story-slider {
+ .vcard {
+ font-size: .857em;
+ min-height: 86px;
+ }
+ }
}
@@ -852,6 +869,176 @@ body.noscroll {
/* Mobile layout: 320px */
@media only screen and (max-width: @breakTablet) {
+ #wrapper,
+ #page-nav.fixed {
+ width: 320px;
+ }
+
+ #main-content {
+ width: 280px;
+ }
+
+ #masthead h1 {
+ font-size: 32px;
+ letter-spacing: -1px;
+ }
+
+ .left,
+ .right {
+ float: none;
+ width: 280px;
+ }
+
+ .overlay-wrap .read {
+ display: none;
+ }
+
+ .js .overlay {
+ position: static;
+ left: auto;
+ padding: 0;
+ margin: 20px 0;
+ background: transparent none !important;
+ color: inherit;
+ a:link,
+ a:visited {
+ color: @linkBlue;
+ }
+ a:hover,
+ a:focus,
+ a:active {
+ color: @linkBlueHover;
+ }
+ }
+
+ #welcome .video {
+ margin-left: 0;
+ }
+
+ .mob-topics {
+ padding: 0 20px;
+ margin: 0 0 20px;
+ font-size: 12px;
+ li {
+ padding-top: 100px;
+ }
+ #topic-firefox img {
+ margin-top: -86px;
+ }
+
+ #topic-firefoxos img {
+ margin-top: -100px;
+ }
+
+ #topic-webmaker img {
+ margin-top: -90px;
+ }
+ }
+
+ .mob-fxandroid h4 {
+ display: none;
+ }
+
+ .mob-firefoxos .pull,
+ .mob-fxdesktop .pull,
+ .mob-webmaker .pull,
+ .mob-standards .pull,
+ .act-intro .pull {
+ font-size: 18px;
+ padding: 20px;
+ min-height: auto;
+ background-size: cover;
+ p, h2, h3, h4 {
+ margin-bottom: 0;
+ }
+ }
+
+ .act-donottrack {
+ margin-top: 0;
+ img {
+ padding: 0;
+ margin: 0 auto;
+ background: transparent none;
+ }
+ }
+
+ #action .act-sopa .overlay h4 {
+ color: inherit;
+ }
+
+ .act-flicks img {
+ padding: 20px 40px;
+ }
+
+ .com-intro .pull {
+ height: auto;
+ width: auto;
+ display: block;
+ padding: 20px;
+ margin: 0 0 20px;
+ background: darken(@orange, 20%);
+ h3 {
+ display: block;
+ font-size: 32px;
+ padding: 0;
+ }
+ img {
+ display: none;
+ }
+ }
+
+ .js .com-reps .overlay {
+ margin-top: 20px;
+ }
+
+ .com-reps .rep {
+ float: none;
+ margin: 20px 0;
+ }
+
+ .sus-links ul {
+ width: auto;
+ margin: 2em auto;
+ li {
+ float: none;
+ width: auto;
+ margin: 0 0 .5em;
+ }
+ a {
+ padding: 6px 20px;
+ height: auto;
+ }
+ small {
+ display: inline;
+ margin: 0 0 0 .5em;
+ }
+ a.sus-faq {
+ text-align: left;
+ font-size: 1.285em;
+ padding: 6px 20px;
+ height: auto;
+ background: #e5e5e5 none;
+ }
+ a.sus-fin:before,
+ a.sus-990:before {
+ display: none;
+ }
+ }
+
+ #video-stage {
+ display: none;
+ }
+
+ #story-slider {
+ margin-top: 20px;
+ .vcard {
+ width: 280px;
+ min-height: 158px;
+ display: block;
+ margin: 0 auto 20px;
+ }
+ }
+
}
View
3  media/css/gameon.less
@@ -79,6 +79,9 @@ hgroup {
#gameon .sidebar {
width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2);
margin-left: @gridGutterWidth / 2;
+ img {
+ margin-bottom: @gridGutterWidth;
+ }
}
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
#gameon .main-column {
View
42 media/css/styleguide/identity-firefoxos.less
@@ -4,15 +4,47 @@
.firefoxos-branding {
#intro {
- clear: both;
- .clearfix;
- min-height: 300px;
- background: url(/media/img/styleguide/identity/firefoxos/firefoxos-placeholder.png) 100% 0 no-repeat;
+ float: left;
+ .divider;
h2 {
.span_guide(3);
}
p {
- .span_guide(5);
+ .span_guide(9);
+ }
+ }
+ #wordmark {
+ float: left;
+ .build {
+ .span_guide(3);
+ }
+ .logo {
+ .span_guide(6);
+ position: relative;
+ img {
+ background-color: #fff;
+ margin-bottom: 10px;
+ padding: 10px;
+ }
+ img.box-arrow {
+ background: none;
+ position: absolute;
+ top: 0;
+ left: -20px;
+ }
+ }
+ .download {
+ .span_guide(3);
+ span {
+ display: block;
+ font-size: 18px;
+ }
+ p {
+ margin-bottom: 0;
+ }
+ }
+ .button-sand, .button-sand:link, .button-sand:visited {
+ padding: 0 12px;
}
}
}
View
BIN  media/img/foundation/annualreport/2011/act-collusion.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/foundation/annualreport/2011/act-sopa.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/foundation/annualreport/2011/contributors/brian-thumb.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/foundation/annualreport/2011/contributors/channy-thumb.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/foundation/annualreport/2011/contributors/chit-thumb.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/foundation/annualreport/2011/contributors/claire-thumb.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/foundation/annualreport/2011/contributors/haitham-thumb.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/foundation/annualreport/2011/contributors/ioana-thumb.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/foundation/annualreport/2011/contributors/keng-thumb.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/foundation/annualreport/2011/contributors/mohomodou-thumb.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/foundation/annualreport/2011/contributors/viking-thumb.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/gameon/nesta-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/gameon/nominet-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/styleguide/identity/firefoxos/firefoxos-placeholder.png
Deleted file not rendered
View
BIN  media/img/styleguide/identity/firefoxos/wordmark.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
280 media/js/annual2011.js
@@ -1,53 +1,83 @@
-$(function(){
+$(function() {
+
+ var $window = $(window);
+ var $sliderPrime = $("#story-slider");
+ var wide = false;
+
+ if ($window.width() >= 745) {
+ wide = true;
+ setupCarousel();
+ }
+
+ $window.resize(function() {
+ clearTimeout(this.id);
+ this.id = setTimeout(doneResizing, 500);
+ });
+
+ function doneResizing() {
+ if ($window.width() >= 745) {
+ wide = true;
+ if ( $("#story-slider-clone").length === 0 ) {
+ setupCarousel();
+ }
+ }
+ else if ($window.width() < 745) {
+ wide = false;
+ if ( $("#story-slider-clone").length >= 1 ) {
+ removeCarousel();
+ }
+ }
+ };
+
+ // Add the read buttons
+ $("button.read").clone().prependTo(".overlay-wrap");
// Reveal text overlays when hovering over a block
// @Uses hoverIntent plugin: http://cherne.net/brian/resources/jquery.hoverIntent.html
$(".overlay-wrap").hoverIntent(
function() {
- var overlayheight = $(this).height() - 80;
- $(this).find(".overlay").stop().hide().css({
- 'left' : 'auto',
- 'minHeight' : overlayheight
- }).fadeIn(200);
+ if (wide) {
+ var overlayheight = $(this).height() - 80;
+ $(this).find(".overlay").stop().hide().css({
+ 'left' : 'auto',
+ 'minHeight' : overlayheight
+ }).fadeIn(200);
+ }
},
function() {
- $(this).find(".overlay").stop().delay(300).fadeOut(600, function(){
- $(this).removeAttr('style');
- });
+ if (wide) {
+ $(this).find(".overlay").stop().delay(300).fadeOut(600, function(){
+ $(this).removeAttr('style');
+ });
+ }
}
);
- // Add the read buttons
- $("button.read").clone().prependTo(".overlay-wrap");
-
// Reveal overlays when buttons get focus (for keyboard navigation)
$(".overlay-wrap .read").focus(function() {
- $(".overlay[style]").stop().delay(300).fadeOut(600, function(){ // First hide any visible overlays
- $(this).removeAttr('style'); // Then reset them to normal (hidden offscreen by CSS)
- });
- var overlayheight = $(this).parents(".overlay-wrap").height() - 80;;
- $(this).parents(".overlay-wrap").find(".overlay").hide().css({
- 'left' : 'auto',
- 'minHeight' : overlayheight
- }).fadeIn(200);
- $('html, body').animate({
- scrollTop: $(this).parents(".overlay-wrap").offset().top -40
- }, 300);
+ if (wide) {
+ $(".overlay[style]").stop().delay(300).fadeOut(600, function(){ // First hide any visible overlays
+ $(this).removeAttr('style'); // Then reset them to normal (hidden offscreen by CSS)
+ });
+ var overlayheight = $(this).parents(".overlay-wrap").height() - 80;
+ $(this).parents(".overlay-wrap").find(".overlay").hide().css({
+ 'left' : 'auto',
+ 'minHeight' : overlayheight
+ }).fadeIn(200);
+ $('html, body').animate({
+ scrollTop: $(this).parents(".overlay-wrap").offset().top -40
+ }, 300);
+ }
});
- // Scroll the window
- var $window = $(window);
+ // Sticky navigation
var $nav = $('#page-nav');
var $head = $('#masthead');
var navTop = $nav.offset();
var fixed = false;
var didScroll = false;
-// var mob = $("#mobilized").waypoint();
-// var act = $("#action").waypoint();
-
-
$window.scroll(function() {
didScroll = true;
});
@@ -74,6 +104,8 @@ $(function(){
if(fixed) {
fixed = false;
$nav.removeAttr("class");
+ $nav.find("li").removeClass();
+ $("#nav-welcome").addClass("current");
$head.css({ "margin-bottom" : "0" });
}
}
@@ -168,7 +200,7 @@ $(function(){
// 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 - 40
+ scrollTop: $(elem).offset().top - 35
}, 1000, function() {
$(elem).attr('tabindex','100').focus().removeAttr('tabindex');
});
@@ -192,23 +224,7 @@ $(function(){
+'<source src="'+video+'.mp4" type="video/mp4">'
).focus();
$("#done").clone().appendTo("#inner");
-
- // Remove the full-page overlay
- $("#fill #done").click(function() {
- $("#video")[0].pause();
- $("#fill").remove();
- $("body").removeClass("noscroll");
- origin.focus();
- });
-
- $("#fill").keyup(function(e) {
- if (e.keyCode == 27) { // esc
- $("#fill").remove();
- $("body").removeClass("noscroll");
- origin.focus();
- }
- });
-
+ closeModal();
});
// Load the YouTube video in a full-page modal
@@ -218,87 +234,131 @@ $(function(){
$('body').addClass("noscroll").append('<div id="fill"><div id="inner"><iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/f_f5wNw-2c0?rel=0" frameborder="0" allowfullscreen></iframe></div></div>');
$("#inner iframe").focus();
$("#done").clone().appendTo("#inner");
+ closeModal();
+ });
- // Remove the full-page overlay
+ function closeModal() {
+ // Remove the full-page modal
$("#fill #done").click(function() {
+ $("#video")[0].pause();
$("#fill").remove();
$("body").removeClass("noscroll");
- origin.focus();
});
+
+ // Esc key removes the modal, too
+ $("#fill").keyup(function(e) {
+ if (e.keyCode == 27) { // esc
+ $("#fill").remove();
+ $("body").removeClass("noscroll");
+ origin.focus();
+ }
+ });
+ };
- });
-
- // Contributor stories
- // Set up the carousel
- $('#story-slider').jcarousel({
- scroll: 1,
- initCallback: controlButtons,
- buttonNextHTML: null,
- buttonPrevHTML: null,
- itemLastOutCallback: { onAfterAnimation: disableButtons },
- itemLastInCallback: { onAfterAnimation: disableButtons }
- });
-
- // Add the control buttons
- if ($('#story-slider').jcarousel()) {
- $(".btn-prev, .btn-next").prependTo(".jcarousel-container");
- }
- // Make the buttons work
- function controlButtons(carousel) {
- $('.btn-next').bind('click', function() {
- carousel.next();
- });
- $('.btn-prev').bind('click', function() {
- carousel.prev();
+ // Set up the contributor stories carousel
+ function setupCarousel() {
+ $sliderPrime.clone().attr("id", "story-slider-clone").insertAfter($("#video-stage"));
+ if ($("#story-vid")[0].paused == false) {
+ $("#story-vid")[0].pause();
+ }
+ $sliderPrime.hide();
+
+ $("#story-slider-clone").jcarousel({
+ scroll: 1,
+ visible: 4,
+ buttonNextHTML: null,
+ buttonPrevHTML: null,
+ itemLastOutCallback: { onAfterAnimation: disableButtons },
+ itemLastInCallback: { onAfterAnimation: disableButtons },
+ initCallback: controlButtons
});
- };
+
+ function controlButtons(carousel) {
+ storyPlay();
+ // Add the control buttons
+ $(".btn-prev, .btn-next").clone().prependTo(".jcarousel-container");
+ // Make the buttons work
+ $('.btn-next').bind('click', function() {
+ carousel.next();
+ });
+ $('.btn-prev').bind('click', function() {
+ carousel.prev();
+ });
+ };
- // Disable the buttons at the end of the carousel
- function disableButtons(carousel){
- if (carousel.first == 1) {
- $('.btn-prev').attr('disabled','disabled').addClass('disabled');
- } else {
- $('.btn-prev').removeAttr('disabled').removeClass('disabled');
+ // Disable the buttons at the end of the carousel
+ function disableButtons(carousel){
+ if (carousel.first == 1) {
+ $('.btn-prev').attr('disabled','disabled').addClass('disabled');
+ } else {
+ $('.btn-prev').removeAttr('disabled').removeClass('disabled');
+ }
+ if (carousel.last == carousel.size()) {
+ $('.btn-next').attr('disabled','disabled').addClass('disabled');
+ } else {
+ $('.btn-next').removeAttr('disabled').removeClass('disabled');
+ }
}
- if (carousel.last == carousel.size()) {
- $('.btn-next').attr('disabled','disabled').addClass('disabled');
- } else {
- $('.btn-next').removeAttr('disabled').removeClass('disabled');
+ };
+
+ function removeCarousel() {
+ $("#story-slider-clone").parents(".jcarousel-container").remove();
+ if ($("#story-vid")[0].paused == false) {
+ $("#story-vid")[0].pause();
}
- }
+ $sliderPrime.show();
+ };
// Set up contributor video
- if ($("#video-stage").length != 0) {
- var video = $("#story-slider").find("a.contributor:first").attr("href");
- var poster = $("#story-slider").find("a.contributor:first").attr("data-poster");
- var desc = $("#story-slider").find(".vcard:first .note").html();
+ if ($("#story-slider-clone").length > 0) {
+ var video = $("#story-slider-clone").find("a.contributor:first").attr("href");
+ var poster = $("#story-slider-clone").find("a.contributor:first").attr("data-poster");
+ var desc = $("#story-slider-clone").find(".vcard:first .note").html();
$("#story-vid").attr('poster', poster).attr('src', video);
$("#video-stage").append('<figcaption>'+desc+'</figcaption>');
- }
- // Add a play button overlay
- $("#video-stage .player").append('<span class="btn-play"></span>');
- $("span.btn-play").click(function(){
- $("#story-vid").attr('controls','controls')[0].play();
- $(this).remove();
- })
+ // Add a play button overlay
+ $("#video-stage .player").append('<span class="btn-play"></span>');
+ $("span.btn-play").click(function(){
+ $("#story-vid").attr('controls','controls')[0].play();
+ $(this).fadeOut('fast', function(){ $(this).remove(); });
+ });
+ };
// Play contributor stories
- $("a.contributor").click( function(e) {
- e.preventDefault();
- var video = $(this).attr("href");
- var poster = $(this).attr("data-poster");
- var desc = $(this).find(".note").html();
- if ($("#story-vid")[0].paused == false) {
- $("#story-vid")[0].pause();
- }
- if ( $("span.btn-play") ) {
- $("span.btn-play").remove();
- }
- $("#video-stage figcaption").html(desc);
- $("#story-vid").attr('poster', poster).attr('controls','controls').attr('src', video)[0].play();
- });
+ function storyPlay() {
+ $("a.contributor").click( function(e) {
+ e.preventDefault();
+ var video = $(this).attr("href");
+ var poster = $(this).attr("data-poster");
+ var desc = $(this).find(".note").html();
+
+ if ( $("#video-stage").is(":visible") ) { // If the stage exists, play videos on stage
+ if ($("#story-vid")[0].paused == false) {
+ $("#story-vid")[0].pause();
+ }
+ if ( $("span.btn-play") ) {
+ $("span.btn-play").remove();
+ }
+ $("#video-stage figcaption").fadeOut('fast', function(){ $(this).html(desc).fadeIn('fast'); });
+ $("#story-vid").attr('poster', poster).attr('controls','controls').attr('src', video)[0].play();
+ $('html, body').animate({
+ scrollTop: $("#video-stage").offset().top - 80
+ }, 200, function() {
+ $("#story-vid").focus();
+ });
+ } else { // Else play in a modal
+ $('body').addClass("noscroll").append('<div id="fill"><div id="inner"><video id="video" poster="'+poster+'" controls autoplay></video></div></div>');
+ $("#video").append(
+ '<source src="'+video+'" type="video/webm">'
+ ).focus();
+ $("#inner").append('<p class="desc">'+desc+'</p>');
+ $("#done").clone().appendTo("#inner");
+ closeModal();
+ };
+ });
+ };
});
View
3  settings/base.py
@@ -48,7 +48,7 @@
def JINJA_CONFIG():
return {
'extensions': [
- 'tower.template.i18n', 'jinja2.ext.do', 'jinja2.ext.with_',
+ 'l10n_utils.template.i18n', 'jinja2.ext.do', 'jinja2.ext.with_',
'jinja2.ext.loopcontrols', 'l10n_utils.template.l10n_blocks',
'l10n_utils.template.lang_blocks'
],
@@ -417,6 +417,7 @@ def JINJA_CONFIG():
'mozorg.middleware.CacheMiddleware',
'mozorg.middleware.NewsletterMiddleware',
'dnt.middleware.DoNotTrackMiddleware',
+ 'l10n_utils.middleware.FixLangFileTranslationsMiddleware',
)
INSTALLED_APPS = (
Please sign in to comment.
Something went wrong with that request. Please try again.