[Fix Bug 723267] Add new projects/calendar page

bedrock/mozorg/templates/mozorg/projects/calendar.html

@@ -0,0 +1,90 @@
+{# 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 "mozorg/base-resp.html" %}
+
+{% block page_title %}{{ _('Mozilla Thunderbird - Lightning Calendar') }}{% endblock %}
+{% block page_desc %}{{ _('Organize your life — it’s about time!') }}{% endblock %}
+{% block body_id %}calendar-page{% endblock %}
+
+{% block extrahead %}
+  {{ css('projects-calendar') }}
+{% endblock %}
+
+{% block content %}
+
+<section id="lightning" class="billboard products">
+  <div class="topbox">
+    <img id="calendar-logo" src="{{ media('/img/projects/calendar/calendar-logo.png') }}" alt="">
+    <div class="infobox">
+      <h1>{{ _('Lightning Calendar') }}</h1>
+      <h2>{{ _('Organize your life &mdash; it&rsquo;s about time!') }}</h2>
+      <aside id="download" class="hide-for-touch">
+        <a id="download-link" class="loading" href="https://addons.mozilla.org/thunderbird/addon/lightning/">
+          <span id="version-box" class="title">{{ _('Lightning') }}</span>
+          <span class="desc">{{ _('Free download') }}</span>
+        </a>
+        <small class="download-other">
+          <a href="https://addons.mozilla.org/thunderbird/addon/lightning/versions/">{{ _('Other Systems &amp; Versions') }}</a>
+        </small>
+      </aside>
+    </div>
+  </div>
+  <div class="midbox">
+      {{ _('Organize your schedule and life&rsquo;s important events in a calendar that&rsquo;s fully integrated with your Thunderbird or Seamonkey email. Manage multiple calendars, create your daily to do list, invite friends to events, and subscribe to public calendars.') }}
+  </div>
+  <div class="items">
+    <ul>
+      <li>
+        <img src="{{ media('/img/projects/calendar/bulb-icon.png') }}" alt="">
+        <div class="itemtext">
+          <a href="http://support.mozillamessaging.com/" class="title">{{ _('Knowledge Base') }}</a>
+          <span class="desc">{{ _('Need help with Lightning?') }}</span>
+        </div>
+      </li>
+      <li>
+        <img src="{{ media('/img/projects/calendar/question-icon.png') }}" alt="">
+        <div class="itemtext">
+          <a href="http://getsatisfaction.com/mozilla_messaging/" class="title">{{ _('Get Support') }}</a>
+          <span class="desc">{{ _('No luck above? Ask a question!') }}</span>
+        </div>
+      </li>
+      <li>
+        <img src="{{ media('/img/projects/calendar/bug-icon.png') }}" alt="">
+        <div class="itemtext">
+          <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Calendar" class="title">{{ _('Bugzilla') }}</a>
+          <span class="desc">{{ _('Found a bug? Let us know!') }}</span>
+        </div>
+      </li>
+      <li>
+        <img src="{{ media('/img/projects/calendar/info-icon.png') }}" alt="">
+        <div class="itemtext">
+          <a href="https://developer.mozilla.org/en/Calendar/Calendar_Versions" class="title">{{ _('Compatibility Information') }}</a>
+          <span class="desc">{{ _('Thunderbird, Seamonkey, what version?') }}</span>
+        </div>
+      </li>
+      <li>
+        <img src="{{ media('/img/projects/calendar/tools-icon.png') }}" alt="">
+        <div class="itemtext">
+          <a href="https://developer.mozilla.org/en/Calendar/" class="title">{{ _('Developer Tools') }}</a>
+          <span class="desc">{{ _('Dive into development.') }}</span>
+        </div>
+      </li>
+      <li>
+        <img src="{{ media('/img/projects/calendar/bugspray-icon.png') }}" alt="">
+        <div class="itemtext">
+          <a href="http://www.joshmatthews.net/bugsahoy/?calendar=1 " class="title">{{ _('Bugs Ahoy!') }}</a>
+          <span class="desc">{{ _('Want to make a difference? Find a bug that fits your interests.') }}</span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</section>
+{% endblock %}
+
+{% block js %}
+  {{ js('projects-calendar') }}
+{% endblock %}
+
+

bedrock/mozorg/urls.py

@@ -16,6 +16,7 @@
     page('about/history', 'mozorg/about/history.html'),
     page('products', 'mozorg/products.html'),
     page('about/mozilla-based', 'mozorg/projects/mozilla-based.html'),
+    page('projects/calendar', 'mozorg/projects/calendar.html'),
     page('button', 'mozorg/button.html'),
     page('mission', 'mozorg/mission.html'),
     page('mobile', 'mozorg/mobile.html'),

bedrock/settings/base.py

@@ -314,7 +314,10 @@ def JINJA_CONFIG():
             'css/mozorg/products.less',
         ),
         'projects_mozilla_based': (
-            'css/mozorg/projects-mozilla-based.less',
+            'css/mozorg/projects/mozilla-based.less',
+        ),
+        'projects-calendar': (
+            'css/mozorg/projects/calendar.less',
         ),
         'research': (
             'css/research/research.less',
@@ -381,6 +384,9 @@ def JINJA_CONFIG():
             'js/lightbeam/ui.js',
             'js/libs/jquery.validate.js',
         ),
+        'projects-calendar': (
+            'js/mozorg/calendar.js',
+        ),
         'common': (
             'js/libs/jquery-1.7.1.min.js',
             'js/base/global.js',

etc/httpd/global.conf

@@ -576,3 +576,6 @@ RewriteRule ^/en-US/press/open-source-security.html http://blog.mozilla.org/pres
 # bug 868169
 RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?mobile/android-download\.html https://play.google.com/store/apps/details?id=org.mozilla.firefox [QSA,L,R=301]
 RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?mobile/android-download-beta\.html https://play.google.com/store/apps/details?id=org.mozilla.firefox_beta [QSA,L,R=301]
+
+# bug 723267
+RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?projects/calendar(/?)$ /b/$1projects/calendar$2 [PT]

media/css/mozorg/projects/calendar.less

@@ -0,0 +1,196 @@
+// 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 "../../sandstone/lib.less";
+
+#lightning {
+    padding: (@baseLine * 2) (@baseLine * 5);
+    .infobox {
+        padding-bottom: @baseLine;
+        float: right;
+        h1, h2 {
+            padding: 0;
+            margin: 0;
+            font-family: 'Open Sans Light', sans-serif;
+            font-weight: normal;
+            color: #484848;
+            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
+            text-align: center;
+            line-height: 1.3;
+        }
+        h1 {
+            font-size: 57px;
+        }
+        h2 {
+            letter-spacing: -0.5px;
+            font-size: 24px;
+        }
+    }
+    .midbox {
+        padding: @baseLine 0;
+        border-top: 1px solid #d6d6d6;
+        border-bottom: 1px solid #d6d6d6;
+    }
+    .topbox {
+        img {
+            vertical-align: top;
+        }
+    }
+}
+
+#download {
+    display: inline-block;
+    float: right;
+    margin-top: @baseLine;
+    #download-link {
+        color: #fff;
+        line-height: 1.3;
+        background-color: #669be1;
+        background-image: linear-gradient(to bottom, #669be1 50%, #5784bf);
+        border-radius: 6px 6px 6px 6px;
+        box-shadow: 0 3px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset;
+        display: block;
+        margin-bottom: 2px;
+        overflow: visible;
+        padding-right: 30px;
+        span.title {
+            background: url(/media/img/sandstone/buttons/download-arrow-small.png) no-repeat scroll 10px 14px transparent;
+            display: block;
+            font-size: 20px;
+            font-style: italic;
+            min-height: 30px;
+            padding: 8px 8px 0 40px;
+            text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
+        }
+        span.desc {
+            color: rgba(0, 0, 0, 0.7);
+            display: block;
+            margin-top: -4px;
+            padding: 0 8px 12px 40px;
+            text-shadow: 1px 1px rgba(255, 255, 255, 0.2);
+        }
+    }
+    .download-other {
+        color: #bbb;
+        display: block;
+        font-family: 'Open Sans', sans-serif;
+        font-size: 11px;
+        text-align: center;
+    }
+}
+
+
+.items {
+    margin: 0;
+    padding: @baseLine 0;
+    ul {
+        padding: 0;
+        margin: 0;
+        .clearfix;
+    }
+    li {
+        .span(5);
+        .open-sans;
+        padding: (@baseLine / 4) 0;
+        font-size: @smallFontSize;
+        list-style-type: none;
+        .itemtext {
+            display: inline-block;
+            vertical-align: middle;
+            width: 80%;
+            a.title {
+                font-size: 20px;
+            }
+            span.desc {
+                font-size: 16px;
+            }
+        }
+        a {
+            display: block;
+            &:hover,
+            &:active {
+                color: darken(@linkBlue, 10%);
+                text-decoration: underline;
+
+            }
+            &:focus {
+                text-decoration: none;
+            }
+        }
+    }
+    img {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: @baseLine;
+    }
+}
+
+.billboard {
+    .transition(box-shadow 0.6s ease 0.2s);
+    box-shadow: 0 0 0 0 #fff;
+    width: auto;
+}
+
+@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
+    #lightning {
+        padding: @baseLine;
+    }
+}
+
+/* Mobile layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+
+    #lightning {
+        padding: (@baseLine / 2);
+        .infobox {
+            float: none;
+            text-align: center;
+            h1 {
+                font-size: 36px;
+            }
+            #download {
+                float: none;
+            }
+        }
+        .midbox {
+            float: left;
+            margin-bottom: @baseLine;
+        }
+        .topbox {
+            padding: 0;
+        }
+        li {
+            .span(4);
+            margin: 0;
+            padding: 0 0 (@baseLine) 0;
+            clear: left;
+            .itemtext {
+                width: 60%;
+                a.title {
+                    font-size: 14px;
+                }
+                span.desc {
+                    font-size: 12px;
+                }
+            }
+        }
+        #calendar-logo {
+            .span_narrow(2);
+        }
+    }
+}
+
+/* Mobile layout: 0 - 480px; */
+@media only screen and (max-width: @breakMobileLandscape) {
+
+    #lightning {
+        img {
+            width: auto;
+        }
+        #calendar-logo {
+            display: none;
+        }
+    }
+}

media/css/mozorg/projects-mozilla-based.less → media/css/mozorg/projects/mozilla-based.less

@@ -2,7 +2,7 @@
 // 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 "../sandstone/lib.less";
+@import "../../sandstone/lib.less";
 
 #main-feature {
     h1,

media/js/mozorg/calendar.js

@@ -0,0 +1,31 @@
+/* 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/. */
+
+$(function() {
+    'use strict';
+    var versionBox = document.getElementById('version-box');
+    var downloadBox = document.getElementById('download-link');
+    var lang = document.getElementsByTagName('html')[0].getAttribute('lang');
+
+    $.ajax({
+        type: 'GET',
+        dataType: 'xml',
+        url: 'https://services.addons.mozilla.org/' + lang + '/thunderbird/api/1.5/addon/lightning',
+        success: function(xml){
+            versionBox.textContent = 'Lightning ' + $(xml).find('version').text();
+            downloadBox.className = downloadBox.className.replace('loading', '');
+
+            var downloadLink = downloadBox.getAttribute('href');
+            if (window.site.platform === 'windows') {
+                downloadLink = $(xml).find("install[os='WINNT']").text();
+            } else if (window.site.platform === 'osx') {
+                downloadLink = $(xml).find("install[os='Darwin']").text();
+            } else if (window.site.platform === 'linux') {
+                downloadLink = $(xml).find("install[os='Linux']").text();
+            }
+            downloadBox.setAttribute('href', downloadLink);
+        }
+    });
+
+});