Permalink
Browse files

Merge pull request #243 from craigcook/responsify-mozorg

Responsify mozorg pages, now from a cleaner, up-to-date base branch
  • Loading branch information...
sgarrity committed Jul 10, 2012
2 parents bc46661 + 1f2d0e9 commit ee81556e11a853da772286c01c94cfb040eb0930
@@ -1,4 +1,4 @@
-{% extends "mozorg/base.html" %}
+{% extends "mozorg/base-resp.html" %}
{% block content %}
@@ -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 %}
@@ -267,3 +267,7 @@ <h3>Get Mozilla updates</h3>
</div>
</form>
{% endblock %}
+
+{% block site_js %}
+ {{ js('mozorg-resp') }}
+{% endblock %}
@@ -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">
@@ -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') }}
@@ -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>
View
@@ -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;
+ }
+
+ }
+
+
+}
@@ -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;
+ }
+
+ }
+
+}
@@ -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;
+ }
+ }
+
+}
Oops, something went wrong.

0 comments on commit ee81556

Please sign in to comment.