Merge pull request #243 from craigcook/responsify-mozorg

Responsify mozorg pages, now from a cleaner, up-to-date base branch

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

@@ -1,4 +1,4 @@
-{% extends "mozorg/base.html" %}
+{% extends "mozorg/base-resp.html" %}
 
 {% block content %}
 

apps/mozorg/templates/mozorg/about.html

@@ -1,4 +1,4 @@
-{% extends "/mozorg/base.html" %}
+{% extends "/mozorg/base-resp.html" %}
 
 {% block page_title %}Get to Know Mozilla{% endblock %}
 {% block body_id %}about{% endblock %}

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

@@ -267,3 +267,7 @@ <h3>Get Mozilla updates</h3>
   </div>
 </form>
 {% endblock %}
+
+{% block site_js %}
+  {{ js('mozorg-resp') }}
+{% endblock %}

apps/mozorg/templates/mozorg/contribute-form.html

@@ -29,7 +29,9 @@
     </ul>
   {% endif %}
 
-  <div class="row">
+<fieldset>
+
+  <div class="form-row">
     <div class="form-column-1">
       <h3>{{_('Want to help?')}}</h3>
     </div>
@@ -43,11 +45,9 @@ <h3>{{_('Want to help?')}}</h3>
         {{ form.interest|safe }}
       </div>
     </div>
-    <div class="form-submit">
-      <input type="submit" class="button-blue" id="form-submit" value="{{_('Submit&nbsp;»')}}">
-    </div>
   </div>
-  <div class="row" id="form-details">
+
+  <div class="form-row" id="form-details">
     <div class="form-column-1">
       <p>{{_('Send us a note and we can get you started right away.')}}</p>
     </div>
@@ -70,7 +70,13 @@ <h3>{{_('Want to help?')}}</h3>
         {{ form.captcha }}
       </div>
     </div>
-  </div>
+
+</fieldset>
+
+    <div class="form-submit">
+      <input type="submit" class="button-blue" id="form-submit" value="{{_('Submit&nbsp;»')}}">
+    </div>
+
 </form>
 {% else %}
   <div id="help-form" class="billboard thank">

apps/mozorg/templates/mozorg/contribute-page.html

@@ -1,7 +1,8 @@
-{% extends "sand.html" %}
+{% extends "base-resp.html" %}
 
 {% block page_title %}{{_('Contribute to our sites')}}{% endblock %}
 {% block body_id %}contribute-page{% endblock %}
+{% block body_class %}sand{% endblock %}
 
 {% block extrahead %}
   {{ css('contribute-page') }}

apps/mozorg/templates/mozorg/contribute.html

@@ -1,4 +1,4 @@
-{% extends "mozorg/base.html" %}
+{% extends "mozorg/base-resp.html" %}
 
 {% block page_title %}{{_('Get Involved: Volunteer Opportunities at Mozilla')}}{% endblock %}
 {% block body_id %}contribute{% endblock %}
@@ -117,37 +117,37 @@ <h3 id="marketing">{{_('Spread the Word')}}</h3>
             <ul>
               <li class="row">
                 <a href="/contribute/local/northamerica.html">
-                  <img src="/media/img/contribute/local/map-th-northamerica.png" alt="{{_('map')}}">
+                  <img src="/media/img/contribute/local/map-th-northamerica.png" alt="">
                   <h3>{{_('US and Canada')}}</h3>
                 </a>
               </li>
               <li class="row">
                 <a href="/contribute/local/europe.html">
-                  <img src="/media/img/contribute/local/map-th-europe.png" alt="{{_('map')}}">
+                  <img src="/media/img/contribute/local/map-th-europe.png" alt="">
                   <h3>{{_('Europe')}}</h3>
                 </a>
               </li>
               <li class="row">
                 <a href="/contribute/local/latinamerica.html">
-                  <img src="/media/img/contribute/local/map-th-latinamerica.png" alt="{{_('map')}}">
+                  <img src="/media/img/contribute/local/map-th-latinamerica.png" alt="">
                   <h3>{{_('Latin America')}}</h3>
                 </a>
               </li>
               <li class="row">
                 <a href="/contribute/local/africamideast.html">
-                  <img src="/media/img/contribute/local/map-th-africamideast.png" alt="{{_('map')}}">
+                  <img src="/media/img/contribute/local/map-th-africamideast.png" alt="">
                   <h3>{{_('Africa and the Middle East')}}</h3>
                 </a>
               </li>
               <li class="row">
                 <a href="/contribute/local/asia.html">
-                  <img src="/media/img/contribute/local/map-th-asia.png" alt="{{_('map')}}">
+                  <img src="/media/img/contribute/local/map-th-asia.png" alt="">
                   <h3>{{_('Asia and the South Pacific')}}</h3>
                 </a>
               </li>
               <li class="row">
                 <a href="/contribute/local/southpole.html">
-                  <img src="/media/img/contribute/local/map-th-southpole.png" alt="{{_('map')}}">
+                  <img src="/media/img/contribute/local/map-th-southpole.png" alt="">
                   <h3>{{_('Antarctica')}}</h3>
                 </a>
               </li>

media/css/about.less

@@ -1,5 +1,5 @@
-@import "sandstone/variables.less";
-@import "sandstone/mixins.less";
+@import "sandstone/variables-resp.less";
+@import "sandstone/mixins-resp.less";
 
 #main-content {
 
@@ -9,12 +9,11 @@
 
     .intro {
         .span(4);
-        margin-left: 0;
         padding-top: @baseLine;
     }
 
     ul.links {
-        .span(3);
+        .span(4);
         li {
             list-style-type: none;
             margin-left: 0;
@@ -36,3 +35,62 @@
     }
 
 }
+
+/* Tablet Layout: 760px */
+@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
+
+    #main-content {
+        .intro {
+            .span_narrow(4);
+        }
+
+        ul.links {
+            .span_narrow(4);
+            h4 {
+                font-size: 20px;
+            }
+        }
+
+    }
+
+}
+
+/* Mobile layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+
+    #main-content {
+        margin-bottom: @baseLine;
+        .intro {
+            width: auto;
+        }
+
+        ul.links {
+            width: auto;
+            margin-bottom: 0;
+            li {
+              min-height: 0;
+            }
+        }
+
+    }
+
+}
+
+/* Wide mobile layout: 480px; */
+@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
+
+    #main-content {
+        .intro {
+            .span(2);
+        }
+
+        ul.links {
+            .span(3);
+            float: right;
+            clear: right;
+        }
+
+    }
+
+
+}

media/css/contribute-form.less

@@ -2,6 +2,12 @@
     padding-top: @baseLine;
     padding-bottom: @baseLine;
     margin-bottom: @baseLine * 2;
+
+    fieldset,
+    .form-row {
+        width: (@gridColumnWidth * 10) + (@gridGutterWidth * 10);
+        float: left;
+    }
 
     .form-column-1  {
         .span(2);
@@ -12,22 +18,23 @@
     }
 
     .form-column-2 {
-        .span(3);
+        .span(4);
     }
 
     .form-column-3 {
-        .span(3);
+        .span(4);
     }
 
     .form-submit {
         .span(2);
+        float: right;
     }
 
     .field-interest {
         min-height: 36px;
         select {
             margin-top: 4px;
-            width: 100%;
+            width: 90%;
         }
     }
 
@@ -37,11 +44,12 @@
 
     textarea,
     input[type=email] {
-        width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2) - 20px;
+        width: 90%;
     }
 
     input[type=submit] {
         width: (@gridColumnWidth * 2) + (@gridGutterWidth);
+        max-width: 100%;
     }
 
     .field-newsletter label,
@@ -69,3 +77,50 @@
 }
 
 .js #form-details { display: none; }
+
+/* Tablet Layout: 760px */
+@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
+
+    #help-form {
+        fieldset,
+        .form-row {
+            width: (@gridColumnWidthNarrow * 10) + (@gridGutterWidth * 10);
+            float: left;
+        }
+        .form-column-1,
+        .form-submit  {
+            .span_narrow(2);
+        }
+        .form-column-2,
+        .form-column-3 {
+            .span_narrow(4);
+        }
+
+    }
+
+}
+
+
+/* Mobile Layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+
+    #help-form {
+        padding-left: @gridGutterWidth;
+        padding-right: @gridGutterWidth;
+        fieldset,
+        .form-row {
+            width: auto;
+            float: none;
+        }
+        .form-column-1,
+        .form-column-2,
+        .form-column-3,
+        .form-submit {
+            width: auto;
+            float: none;
+            margin: 0 0 .5em;
+        }
+
+    }
+
+}

media/css/contribute-page.less

@@ -1,15 +1,56 @@
-@import "sandstone/variables.less";
-@import "sandstone/mixins.less";
+@import "sandstone/variables-resp.less";
+@import "sandstone/mixins-resp.less";
 @import "contribute-form.less";
 
 #contribute-page {
     #main-feature {
-        padding-top: @baseLine;
-        padding-bottom: @baseLine;
+        padding: @baseLine (@gridGutterWidth * 1.5);
     }
     #main-content p {
-        .span(7);
-        margin-left: 0;
+        .span(8);
         clear: left;
+        margin: 0 (@gridGutterWidth / 2) @baseLine; 
     }
 }
+
+/* Tablet Layout: 760px */
+@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
+
+    #contribute-page {
+        #main-content p {
+            .span_narrow(10);
+            margin: 0 (@gridGutterWidth / 2) @baseLine;
+        }
+    }
+
+}
+
+/* Mobile layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+
+    #contribute-page {
+        #main-feature {
+            padding: @baseLine @gridGutterWidth;
+        }
+        #main-content p {
+            width: auto;
+            margin: 0 (@gridGutterWidth / 2) @baseLine;
+        }
+    }
+
+}
+
+/* Wide Mobile Layout: 480px */
+@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
+
+    #contribute-page {
+        #main-feature {
+            padding: @baseLine 0;
+        }
+        #main-content p {
+            width: auto;
+            margin: 0 0 @baseLine;
+        }
+    }
+
+}