Responsify Do Not Track page (Bug 768507)

l-hedgehog · Mar 8, 2013 · b2dc861 · b2dc861
1 parent e8b41bc
commit b2dc861
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 29 deletions.
diff --git a/apps/firefox/templates/firefox/dnt.html b/apps/firefox/templates/firefox/dnt.html
@@ -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/. #}
 
-{% extends "/firefox/base.html" %}
+{% extends "/firefox/base-resp.html" %}
 
 {% block page_title %}Do Not Track{% endblock %}
 {% block body_id %}dnt{% endblock %}
@@ -20,11 +20,25 @@
 
 {% block content %}
 
-<h1 id="main-feature" class="large">Do Not Track</h1>
+<div id="main-feature" class="large">
+  <h1>Do Not Track</h1>
+  <div id="dnt-status-wrapper">
+  <div id="dnt-status">
+    <h4>Do Not Track</h3>
+    <h4>Your Status:</h3>
+    {% if request.DNT %}
+    <h5 class="dnt-on">Do Not Track is ON</h4>
+    {% else %}
+    <h5 class="dnt-off">Do Not Track is OFF</h4>
+    {% endif %}
+  </div>
+  </div>
+</div>
 
 <div id="main-content">
+<div class="row">
 
-<div class="span7" id="main-column">
+<article class="main-column">
 
 <p>Mozilla is a global, nonprofit organization dedicated to making the Web
 better. We emphasize principle over profit, and believe that the Web is a
@@ -132,19 +146,11 @@ <h4 class="expander-header">Where can I learn more?</h4>
 
 </div>
 
-<div id="sidebar" class="span3">
+</article>
 
-  <div id="dnt-status">
-    <h4>Do Not Track</h3>
-    <h4>Your Status:</h3>
-    {% if request.DNT %}
-    <h5 class="dnt-on">Do Not Track is ON</h4>
-    {% else %}
-    <h5 class="dnt-off">Do Not Track is OFF</h4>
-    {% endif %}
-  </div>
+<div class="sidebar">
 
-  <div class="inset">
+  <div class="sidebar-inset">
 
     <h4>Enable Do Not Track in Firefox</h4>
     <p>

diff --git a/media/css/firefox/dnt.less b/media/css/firefox/dnt.less
@@ -2,10 +2,18 @@
 // 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 "template.less";
+@import "../sandstone/lib.less";
+@import "template-resp.less";
 
 #main-feature {
     padding-bottom: @baseLine;
+    h1 {
+        .span(8);
+    }
+    #dnt-status-wrapper {
+        .span(4);
+        margin-top: -20px;
+    }
 }
 
 #main-content {
@@ -28,12 +36,12 @@
     background: #fff url(/media/img/firefox/dnt/status-logo.png) 100% 5px no-repeat;
     border-bottom: 1px solid #ddd;
     padding: (@baseLine * .75) @baseLine;
-    margin-bottom: @baseLine * 2;
     h4 {
         margin: 0;
     }
     h5 {
         margin: (@baseLine / 2) 0 0 0;
+        letter-spacing: normal;
     }
     .dnt-on {
         color: #42a52b;
@@ -43,22 +51,68 @@
     }
 }
 
-#sidebar .inset {
-    .inset();
-    padding: @baseLine;
-    img {
-        border: 1px solid #ccc;
-        display: block;
-        margin-bottom: @baseLine;
+.sidebar {
+    .span(4);
+    .offset(1);
+    .sidebar-inset {
+        .inset();
+        padding: @baseLine;
+        img {
+            border: 1px solid #ccc;
+            display: block;
+            margin-bottom: @baseLine;
+        }
+        .sidebar-box {
+            border-top: 1px dotted @borderColor;
+            padding-top: @baseLine * 1.5;
+            margin-top: @baseLine * 1.5;
+            h4 {
+                letter-spacing: -0.4px;
+            }
+        }
     }
-    .sidebar-box {
-        border-top: 1px dotted @borderColor;
-        padding-top: @baseLine * 1.5;
-        margin-top: @baseLine * 1.5;
-        h4 {
-            letter-spacing: -0.4px;
+}
+
+
+/* {{{ Responsive Grid */
+
+/* Tablet Layout: 760px */
+@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
+
+    #main-feature {
+        padding-bottom: @baseLine;
+        h1 {
+            .span_narrow(8);
+        }
+        #dnt-status-wrapper {
+            .span_narrow(4);
         }
     }
+
+    .sidebar {
+        .span_narrow(4);
+        .offset_narrow(0);
+    }
+
 }
 
 
+/* Mobile Layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+
+    .sidebar {
+        .span-all();
+    }
+
+    #main-feature {
+        h1 {
+            .span-all();
+            margin-bottom: @baseLine / 2;
+        }
+        #dnt-status-wrapper {
+            .span-all();
+            margin-top: auto;
+        }
+    }
+
+}