Bug 730096 - [One Mozilla] Code new mission pages

apps/mozorg/templates/mozorg/about-base.html

@@ -0,0 +1,41 @@
+{% extends "sand.html" %}
+
+{% block content %}
+
+<div id="main-content">
+<div class="row">
+
+<article class="main-column">
+{% block article %}{% endblock %}
+</article>
+
+<aside class="sidebar">
+
+  <nav>
+    <ul>
+      <li><a href="#">About</a></li>
+      <li><a href="{{ url('mozorg.mission') }}">Our Mission</a></li>
+      <li><a href="/about/forums/">Forums</a></li>
+      <li><a href="/about/governance.html">Governance</a></li>
+      <li><a href="/about/history.html">History</a></li>
+    </ul>
+  </nav>
+
+  <div class="reference">
+    <h4>Our Projects</h4>
+    <p>Software and other innovations designed to advance our mission.</p>
+    <a href="#" class="more">Learn More »</a>
+  </div>
+
+  <div class="reference">
+    <h4>Get Involved</h4>
+    <p>Become a volunteer contributor in a number of different areas.</p>
+    <a class="more" href="{{ media('mozorg.contribute') }}">Learn More »</a>
+  </div>
+
+</aside>
+
+</div>
+</div>
+
+{% endblock %}

apps/mozorg/templates/mozorg/mission.html

@@ -0,0 +1,53 @@
+{% extends "mozorg/about-base.html" %}
+
+{% block page_title %}The Mozilla Difference{% endblock %}
+{% block body_id %}mission{% endblock %}
+
+{% block extrahead %}
+  {{ css('mission') }}
+{% endblock %}
+
+{% block js %}
+  {{ js('video') }}
+{% endblock %}
+
+{% block breadcrumbs %}
+  <nav class="breadcrumbs">
+    <a href="{{ url('mozorg.home') }}">Home</a> >
+    <span>About</span>
+  </nav>
+{% endblock %}
+
+{% block article %}
+
+<h1>The Mozilla Difference</h1>
+
+<div id="welcome-video" class="mozilla-video-control mozilla-video-shadow">
+  <video
+    width="640"
+    height="360"
+    poster="{{ media('img/mission/poster-mission.jpg') }}"
+    controls="controls">
+    <source src="//videos-cdn.mozilla.net/brand/Mozilla_2011_Story.webm" type="video/webm" />
+    <source src="//videos-cdn.mozilla.net/brand/Mozilla_2011_Story.theora.ogv" type="video/ogg; codecs=&quot;theora, vorbis&quot;" />
+    <source src="//http://videos-cdn.mozilla.net/brand/Mozilla_2011_Story.mp4" type="video/mp4" />
+    <object type="application/x-shockwave-flash"
+      style="width: 640px; height: 388px;"
+      data="/media/flash/playerWithControls.swf?flv=brand/Mozilla_2011_Story.mp4&amp;autoplay=false&amp;msg=Play%20Video">
+      <param name="movie" value="/media/flash/playerWithControls.swf?flv=brand/Mozilla_2011_Story.mp4&amp;autoplay=false&amp;msg=Play%20Video" />
+      <param name="wmode" value="transparent" />
+
+      <div class="video-player-no-flash">
+      This video requires a browser with support for open video
+      or the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player</a>.
+      </div>
+    </object>
+  </video>
+</div>
+
+<p>Mozilla is a proudly non-profit organization dedicated to keeping the power of the Web in people's hands. We're a global community of users, contributors and developers working to innovate on your behalf. When you use Firefox, you become a part of that community, helping us build a brighter future for the Web.</p>
+
+<p>To find out more about who we are, where we came from and where we want to take the Web, please watch the video above.</p>
+
+
+{% endblock %}

apps/mozorg/urls.py

@@ -1,5 +1,5 @@
 from django.conf.urls.defaults import *
-from views import home, contribute, channel, firefox_performance, firefox_features, firefox_customize, firefox_happy, firefox_organizations, firefox_organizations_faq, firefox_security, firefox_speed, firefox_technology, button, new, sandstone, firefox_geolocation
+from views import home, contribute, channel, firefox_performance, firefox_features, firefox_customize, firefox_happy, firefox_organizations, firefox_organizations_faq, firefox_security, firefox_speed, firefox_technology, button, new, sandstone, firefox_geolocation, mission
 
 
 urlpatterns = patterns('',
@@ -10,6 +10,7 @@ urlpatterns = patterns('',
     (r'^new/', new),
     (r'^sandstone/', sandstone),
     url(r'^contribute/', contribute, name='mozorg.contribute'),
+    url(r'^mission/', mission, name='mozorg.mission'),
 
     url(r'^firefox/customize/', firefox_customize, name='mozorg.firefox_customize'),
     url(r'^firefox/features/', firefox_features, name='mozorg.firefox_features'),

apps/mozorg/views.py

@@ -71,6 +71,9 @@ def channel(request):
 def button(request):
     return l10n_utils.render(request, "mozorg/button.html")
 
+def mission(request):
+    return l10n_utils.render(request, "mozorg/mission.html")
+
 def new(request):
     return l10n_utils.render(request, "mozorg/new.html")
 

media/css/mission.less

@@ -0,0 +1,20 @@
+@import "sandstone/variables.less";
+@import "sandstone/mixins.less";
+
+#welcome {
+    .span(8);
+    margin-left: 0;
+    padding: @baseLine 0;
+}
+
+#welcome-video {
+    width: 640px;
+    margin: @baseLine auto;
+    video {
+        max-width: 640px;
+        width: 100%;
+        height: auto;
+        background: #fff;
+    }
+}
+

media/css/sandstone/sandstone.less

@@ -331,8 +331,9 @@ px      68    160    252    344    436    528    620    712    804    896    */
 #masthead {
 
     nav.breadcrumbs {
+        padding: @baseLine / 2  0;
         float: none;
-        padding: 24px 0 12px 0;
+        padding: 12px 0;
 
         a,
         span {
@@ -427,6 +428,20 @@ nav.menu-bar {
 
     }
 
+    .reference {
+        margin: @baseLine * 2  auto;
+
+        .more {
+            display: block;
+            padding: (@baseLine / 2) 0;
+            border-bottom: 1px dotted @borderColor;
+            .open-sans-light;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
 }
 
 /* }}} */
@@ -561,7 +576,6 @@ px      68    160    252    */
         }
 
         nav.breadcrumbs {
-            padding: @baseLine / 2  0;
             a,
             span {
                 margin-right: .3em;

settings/base.py

@@ -99,6 +99,10 @@ MINIFY_BUNDLES = {
         'marketplace': (
             'css/marketplace.less',
         ),
+        'mission': (
+            'css/sandstone/video.less',
+            'css/mission.less',
+        ),
         'persona': (
             'css/persona.less',
         ),