localize the channels page

.gitignore

@@ -15,5 +15,4 @@ vendor
 .noseids
 tmp/*
 *~
-locale/*
 .#*

apps/mozorg/templates/mozorg/channel.html

@@ -7,11 +7,8 @@
 {% endblock %}
 
 {% block content %}
-
 <div id="main-feature">
-  <h2
+  <h2>Welcome to the <span>Future of Firefox</span></h2>
-     >Welcome to the <span>Future of Firefox</span>
-  </h2>
 
   <p>
     Download and test the build that’s right for you, and sign up for a

apps/mozorg/urls.py

@@ -2,7 +2,7 @@ from django.conf.urls.defaults import *
 from views import channel, button, new
 
 urlpatterns = patterns('',
-    (r'button/', button),
+    (r'^button/', button),
-    (r'channel/', channel),
+    (r'^channel/', channel),
-    (r'new/', new)
+    (r'^new/', new)
 )

apps/mozorg/views.py

@@ -5,7 +5,12 @@ def index(request):
     return l10n_utils.render(request, "mozorg/index.html")
 
 def channel(request):
-    return l10n_utils.render(request, "mozorg/channel.html")
+    data = {}
+
+    if 'mobile_first' in request.GET:
+        data['mobile_first'] = True
+
+    return l10n_utils.render(request, "mozorg/channel.html", data)
 
 def button(request):
     return l10n_utils.render(request, "mozorg/button.html")

media/css/l10n/channel.css

@@ -0,0 +1,604 @@
+/* {{{ Main Feature */
+
+#channel #main-feature {
+    padding-top: 30px;
+}
+
+#channel #main-feature h2 {
+    line-height: 0.9;
+    font-size: 36px;
+}
+
+#channel #main-feature h2 span {
+    font-size: 60px;
+}
+
+#channel #main-feature p {
+    width: 550px;
+}
+
+
+#channel #footer {
+    margin-top: 50px;
+}
+
+#channel #sub-footer {
+    display: none;
+}
+
+/* }}} */
+/* {{{ Main Content */
+
+#channel .channel {
+    width: 300px;
+    float: left;
+    display: inline;
+    padding-bottom: 20px;
+    padding-right: 20px;
+}
+
+#channel .channel#download_aurora,
+#channel .channel#download_beta,
+#channel .channel#download_firefox,
+#channel .channel#download_mobile_beta {
+    padding-right: 0;
+}
+
+#channel_news {
+    clear: both;
+    background-position: 50% 0;
+    background-repeat: repeat-x;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAASCAMAAACglzTJAAAAS1BMVEXv9/70+v7x+f73/P/y+P/x+P/w+P72+v/s9v/v9//1+v/y+v/y+f7v+P7v+P/g8f34/P/3+//y+f/g8f7h8f7g8P3t9//s9//s9v4Izr2eAAAAX0lEQVQI1wXBwQrCQBBEwde9cwioIRfx//8w6GFhDdOp0ptGnAUS2d2IlWUR8LIC1cP5E+sqb5HOh/igZvklYv3GesaovLcaMEZpXB3h7/AG6vIMCrMQoOGjSZi+aEncnN0pTtnMDPsAAAAASUVORK5CYII=);
+    padding-top: 75px;
+    zoom: 1;
+}
+
+.channel h3 {
+    background: url(/media/img/l10n/covehead/channel/logos.png) top left no-repeat;
+    padding: 0;
+    margin: 0;
+    height: 110px;
+}
+
+#download_aurora  h3 { background-position: 0 0; }
+#download_beta    h3 { background-position: 0 -260px; }
+#download_firefox h3 { background-position: 0 -260px; }
+#download_mobile_beta h3 { background-position: 0 -260px; }
+
+
+#channel .channel#download_firefox h3 span,
+#channel .channel#download_mobile_beta h3 span {
+    padding-top: 15px;
+}
+
+.channel h3 span {
+    font-size: 38px;
+    padding: 25px 0 30px 120px;
+}
+
+#channel .channel#download_aurora #download_aurora_button,
+#channel .channel#download_beta #download-button,
+#channel .channel#download_firefox #download,
+#channel .channel#download_mobile_beta .home-download {
+    margin: 10px 10px 10px 28px;
+}
+
+#channel ul.home-download {
+    width: auto;
+    overflow: visible;
+}
+
+#channel .channel#download_aurora a.download-link,
+#channel .channel#download_beta a.download-link,
+#channel .channel#download_firefox a.download-link,
+#channel .channel#download_mobile_beta a.download-link {
+    margin: 0 0 5px;
+    height: auto;
+}
+
+#channel .channel#download_aurora a.download-link,
+#channel .channel#download_aurora a.download-link:hover,
+#channel .channel#download_aurora a.download-link:active {
+    background: #6b65bd; /* old browsers */
+    background: -moz-linear-gradient(top, #6b65bd 0%, #3d2c6f 100%); /* firefox */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b65bd), color-stop(100%,#3d2c6f)); /* webkit */
+    background: linear-gradient(top, #6b65bd 0%, #3d2c6f 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b65bd', endColorstr='#3d2c6f',GradientType=0 ); /* ie */
+}
+
+#channel .channel#download_aurora #download_aurora_button a.download-link span.download-content,
+#channel .channel#download_beta #download-button a.download-link span.download-content,
+#channel .channel#download_firefox #download a.download-link span.download-content,
+#channel .channel#download_mobile_beta a.download-link span.download-content {
+    background: url(/media/img/covehead/channel/download-arrow.png) no-repeat 10px 50%;
+    padding: 10px 10px 12px 38px;
+    margin: 0;
+    height: 50px;
+    font-size: 15px;
+    line-height: 1.1;
+}
+
+#channel #download_aurora_button a.download-link span.download-title,
+#channel #download_beta #download-button a.download-link span.download-title,
+#channel #download a.download-link span.download-title,
+#channel #download_mobile_beta a.download-link span.download-title {
+    background: none;
+    line-height: 1.1;
+    display: block;
+    padding: 0;
+    margin: 0;
+    font-style: italic;
+    font-size: 20px;
+}
+
+#channel .channel#download_aurora h3 span span,
+#channel .channel#download_beta h3 span span,
+#channel .channel#download_firefox h3 span span,
+#channel .channel#download_mobile_beta h3 span span {
+    font-size: 24px;
+    display: block;
+    line-height: 0.8;
+    padding: 0;
+}
+
+#channel #download_aurora_button .download-other,
+#channel #download_beta .download-other,
+#channel #download .download-other,
+#channel #download_mobile_beta .download-other {
+    margin: 5px 0 0 0;
+    width: auto;
+    text-align: left;
+}
+
+.channel ul.channel-list {
+    margin: 5px 10px 10px 10px;
+    padding: 0 0 10px 20px;
+    min-height: 11em;
+}
+
+.channel a.download,
+.channel a.download:link,
+.channel a.download:visited {
+    display: block;
+    margin: 10px 20px 10px 28px;
+    -moz-box-shadow:    0 3px rgba(0,0,0,0.1), inset 0 -4px rgba(0,0,0,0.1);
+    -webkit-box-shadow: 0 3px rgba(0,0,0,0.1), inset 0 -4px rgba(0,0,0,0.1);
+    box-shadow:         0 3px rgba(0,0,0,0.1), inset 0 -4px rgba(0,0,0,0.1);
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    color: #fff;
+    overflow: visible;
+    background: #84C63C; /* old browsers */
+    background: -moz-linear-gradient(top, #84C63C 0%, #489615 100%); /* firefox */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#84C63C), color-stop(100%,#489615)); /* webkit */
+    background: linear-gradient(top, #84C63C 0%, #489615 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84C63C', endColorstr='#489615',GradientType=0 ); /* ie */
+    -moz-transition:   box-shadow 0.2s ease-in-out;
+    -webit-transition: box-shadow 0.2s ease-in-out;
+    transition:        box-shadow 0.2s ease-in-out;
+    text-decoration: none;
+}
+
+.channel a.download:hover,
+.channel a.download:active {
+    -moz-box-shadow:    0 3px rgba(0,0,0,0.15), inset 0 -4px rgba(0,0,0,0.15), inset 0 0 80px rgba(255,255,255,0.3);
+    -webkit-box-shadow: 0 3px rgba(0,0,0,0.15), inset 0 -4px rgba(0,0,0,0.15), inset 0 0 80px rgba(255,255,255,0.3);
+    box-shadow:         0 3px rgba(0,0,0,0.15), inset 0 -4px rgba(0,0,0,0.15), inset 0 0 80px rgba(255,255,255,0.3);
+    -moz-transition:    box-shadow 0.2s ease-in-out;
+    -webkit-transition: box-shadow 0.2s ease-in-out;
+    transition:         box-shadow 0.2s ease-in-out;
+    text-decoration: none;
+}
+
+.channel a.download span {
+    padding: 10px 20px 12px 45px;
+    display: block;
+    background: url(/img/covehead/channel/download-arrow.png) no-repeat 12px 50%;
+    font-size: 16px;
+    font-style: italic;
+    line-height: 1.1;
+}
+
+.channel a.download span strong {
+    font-size: 20px;
+    display: block;
+    font-weight: normal;
+}
+
+.channel .download-soon {
+    display: block;
+    margin: 10px 20px 10px 28px;
+    padding: 10px 15px 11px 15px;
+    -moz-box-shadow:         0 3px rgba(90,90,90,0.1), inset 0 -4px #e0eff9, inset 0 -10px 30px #e0eff9;
+    -webkit-box-shadow:         0 3px rgba(90,90,90,0.1), inset 0 -4px #e0eff9, inset 0 -10px 30px #e0eff9;
+    box-shadow:         0 3px rgba(90,90,90,0.1), inset 0 -4px #e0eff9, inset 0 -10px 30px #e0eff9;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    color: #444;
+    border: 1px solid #b3c8d7;
+    overflow: visible;
+    background: #fff;
+    -moz-transition:   box-shadow 0.2s ease-in-out;
+    -webit-transition: box-shadow 0.2s ease-in-out;
+    transition:        box-shadow 0.2s ease-in-out;
+    font-style: italic;
+    color: #666;
+    font-size: 15px;
+    line-height: 1.1;
+    text-align: center;
+}
+
+.channel .download-soon:hover {
+    text-decoration: none;
+}
+
+.channel .download-soon span {
+    display: block;
+    font-size: 20px;
+    color: #006e9a;
+}
+
+.channel small {
+    font-size: 10px;
+    margin-left: 28px;
+}
+
+#channel .download-info {
+    color: white;
+}
+
+/* }}} */
+/* {{{  Newsletter */
+
+#newsletter-signup {
+    position: relative;
+    margin-left: 20px;
+    float: left;
+    display: inline;
+    width: 400px;
+    margin-right: 40px;
+    padding-right: 40px;
+    border-right: 1px dotted #ddd;
+}
+#newsletter-signup .title h3 {
+    margin: 0;
+    zoom: 1;
+    font-style: italic;
+    padding: 5px 25px 5px 65px;
+    line-height: 1;
+    background: url(/media/img/covehead/channel/mail.png) 0 10px no-repeat;
+}
+#newsletter-signup .title p {
+    margin: 0 0 20px 0;
+    color: #888;
+    font-style: italic;
+    font-size: 15px;
+}
+#newsletter-signup form {
+    display: inline-block;
+    vertical-align: top;
+}
+#newsletter-signup form select {
+    width: 23em;
+}
+#email {
+    font-family: Georgia, serif;
+    font-size: 16px;
+    height: 34px;
+    width: 210px;
+    border-radius: 4px;
+    border: 1px solid #aaa;
+    padding: 1px 14px;
+    box-shadow: 0 2px rgba(0,0,0,.1), 0 0 1px #888 inset;
+}
+.error-email #email,
+.error-email #expand {
+    border-color: red;
+}
+#email-error,
+#channel-error,
+#privacy-error,
+.success-pane {
+    display: none;
+    margin-top: .5em;
+}
+#channel-error,
+#privacy-error {
+    margin-bottom: 1em;
+}
+.success .success-pane {
+    color: #489615;
+    display: block;
+    padding-bottom: 40px;
+}
+
+.success .success-pane h3 {
+    color: #489615;
+}
+
+.success #newsletter-signup form {
+    display: none;
+}
+.error-email #email-error,
+.error-channel #channel-error,
+.error-privacy #privacy-error {
+    color: red;
+    display: block;
+}
+
+#newsletter-signup .privacy-field label span {
+    float: left;
+    display: inline;
+    margin: 2px;
+    padding: 2px;
+}
+
+#newsleter-signup .privacy-field span.title {
+    display: inline;
+    float: left;
+    padding-top: 5px;
+}
+
+#newsletter-signup input[type=submit] {
+    padding: 8px 20px;
+    cursor: pointer;
+    font-weight: bold;
+}
+#newsletter-signup input {
+    margin-left: 0;
+}
+
+#newsletter-signup #subscribe {
+    clear: left;
+    margin-top: 10px;
+}
+
+#newsletter-signup .privacy-field {
+    padding: 10px 0 0 0;
+}
+
+#newsletter-signup .privacy-field .error-wrapper {
+    padding: 0;
+    margin: 0;
+    margin-top: 2px;
+}
+
+.error-privacy #newsletter-signup .privacy-field .error-wrapper {
+    padding-left: 2px;
+}
+
+#privacy-check-label {
+    font-size: .9em;
+    margin: 0;
+    padding: 0;
+}
+
+#newsletter-signup .channels_signup {
+    margin-bottom: .25em;
+}
+
+#newsletter-signup .channels_signup li {
+    list-style-type: none;
+    display: inline-block;
+    margin-right: 5px;
+}
+
+#newsletter-signup .footnote {
+    margin-top: 8px;
+    font-style: italic;
+    font-size: 11px;
+}
+input:-moz-placeholder {
+    font-style: italic;
+    color: #ccc;
+}
+.row {
+    margin: 16px 0;
+}
+#newsletter-signup .channels_signup input {
+    float: left;
+    display: inline;
+}
+
+#newsletter-signup label span {
+    float: left;
+    display: inline;
+    padding-left: 5px;
+    padding-bottom: 5px;
+}
+
+#newsletter-signup label small {
+    clear: left;
+    font-size: 11px;
+    font-style: italic;
+    display: block;
+}
+
+/* }}} */
+/* {{{  Blog */
+
+#blog {
+    float: left;
+    display: inline;
+    width: 425px;
+}
+
+#blog h3 {
+    margin-top: 0;
+    font-size: 22px;
+    line-height: 1;
+    padding: 5px 0;
+}
+
+#blog ul {
+    margin: 10px 0;
+    padding: 0;
+}
+
+#blog ul li {
+    margin: 10px 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+#blog h4 {
+    margin: 0;
+}
+
+
+/* }}} */
+
+/* Pulled in from inline css */
+/* Bug 654158: we hide the newsletter form, subtitle description  */
+#channel #main-feature p {
+    visibility: hidden;
+}
+
+/* Bug 654158: we hide the newsletter form, subtitle description, some spacing to make it look better without a form */
+#main-content {
+    margin: 0 20px 500px;
+}
+
+a.download-link em {
+    display: block;
+    margin: -1em 1em 0;
+    text-align:right;
+}
+
+#channel #download_aurora_button .download-other,
+#channel #download-button .download-other,
+#channel #download .download-other {
+    text-align: center;
+}
+
+.channel ul.channel-list {
+    min-height: 13em;
+}
+
+div.title h3,
+p.footnote {
+    max-width:250px;
+}
+
+div.title {
+    width:700px;
+}
+
+form {
+    width:200px;
+}
+
+body.locale-sq .channel h3 span {
+    font-size: 20px;
+}
+
+body.locale-ru .channel h3 span,
+body.locale-vi .channel h3 span {
+    font-size: 25px;
+}
+
+body.locale-gd .channel h3 span {
+    font-size: 24px;
+}
+
+body.locale-ro .channel h3 span {
+    font-size: 28px;
+}
+
+        /* {{{  RTL Support */
+        /* Pulled in from inline css */
+
+        .html-rtl a.download-link em {
+            text-align:left;
+        }
+
+        .html-rtl #main-feature {
+            margin: 0 20px 0 210px;
+        }
+
+        .html-rtl #main-content {
+            margin: 0 20px;
+        }
+
+        .html-rtl #channel .channel {
+            float: right;
+            padding-right: 0;
+            padding-left: 10px;
+        }
+
+        .html-rtl #download_aurora h3 {
+            background-position: right 0;
+        }
+
+        .html-rtl #download_beta h3 {
+            background-position: right -260px;
+        }
+
+        .html-rtl #download_firefox h3 {
+            background-position: right -260px;
+        }
+
+        .html-rtl .channel h3 span {
+            padding: 25px 120px 30px 0;
+        }
+
+        .html-rtl .channel ul.channel-list {
+    padding: 0 20px 10px 0;
+}
+
+.html-rtl ul.home-download {
+    margin-right: 30px;
+    margin-left: 0;
+}
+
+.html-rtl #channel #download_aurora.channel #download_aurora_button a.download-link span.download-content,
+.html-rtl #channel #download_beta.channel #download-button a.download-link span.download-content,
+.html-rtl #channel #download_firefox.channel #download a.download-link span.download-content {
+    background: url(/img/covehead/channel/download-arrow.png) no-repeat scroll 190px 50% transparent;
+    padding: 10px 45px 12px 20px;
+}
+
+.html-rtl #newsletter-signup {
+    background: url(/img/covehead/channel/mail.png) no-repeat scroll right 10px transparent;
+    margin-right: 20px;
+    padding-right: 55px;
+    margin-left: 0;
+    padding-left: 0;
+
+}
+
+.html-rtl #newsletter-signup .title h3 {
+    float: right;
+    border-right: 0;
+    border-left: 1px dotted #CCCCCC;
+}
+
+.html-rtl #newsletter-signup .title p {
+    float: right;
+}
+
+
+/* Pulled in from inline css */
+#mobile-beta {
+    width: 310px !important;
+    margin-left: 300px!important;
+    text-align:center;
+    clear:both !important;
+}
+
+.html-rtl #mobile-beta {
+    margin-right:300px;
+    margin-left:auto;
+}
+
+#mobile-beta .download-soon:hover {
+    -moz-transition: box-shadow 0.2s ease-in !important;
+    box-shadow: 0 3px rgba(90, 90, 90, 0.1), 0 -4px rgb(200,239,255) inset, 0 -10px 30px rgb(200,239,255) inset !important;
+}
+
+
+#mobile-beta .download-soon:hover a {
+    text-decoration:none;
+}

settings/base.py

@@ -18,6 +18,7 @@ SESSION_COOKIE_SECURE = True
 
 # Accepted locales
 PROD_LANGUAGES = ('de', 'en-US', 'es', 'fr',)
+DEV_LANGUAGES = DEV_LANGUAGES + ['en-US']
 
 # Make this unique, and don't share it with anybody.
 SECRET_KEY = '1iz#v0m55@h26^m6hxk3a7at*h$qj_2a$juu1#nv50548j(x1v'