make mobile footer not look like a "giant headband" (bug 703761)

2011-11-19 18:10:59 -05:00 · 2011-11-19 18:10:59 -05:00 · 6d36876901
--- a/media/css/mobile/footer.less
+++ b/media/css/mobile/footer.less
@ -0,0 +1,57 @@
+@import '../impala/lib';
+
+html, body {
+    height: 100%;
+}
+
+footer {
+    .border-box;
+    .box-shadow(0 2px rgba(0,0,0,.1) inset);
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAABCAYAAAASC7TOAAAAFElEQVQIHWO0DZ3xnwELYOXgYwAAOHwCRjqu6SgAAAAASUVORK5CYII=');
+    color: #fff;
+    font: 1em @sans-stack;
+    padding: 14px;
+    position: relative;
+    z-index: -1;
+    &:before {
+        .box-shadow(0 -2px rgba(0,0,0,.1) inset);
+        content: "";
+        display: block;
+        height: 30px;
+        position: absolute;
+        top: -30px;
+        left: 0;
+        width: 100%;
+    }
+    &.sticky {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+    }
+    select {
+        display: block;
+        height: 30px;
+        margin-top: 4px;
+        padding-top: 4px;
+        width: 100%;
+    }
+    a.desktop-link {
+        background: #5f92ce;
+        .border-radius(6px);
+        color: #fff;
+        display: block;
+        font-family: @sans-stack;
+        font-size: 150%;
+        font-weight: bold;
+        line-height: 2;
+        margin: 1em 0;
+        text-align: center;
+        text-transform: uppercase;
+    }
+}
+#footer-links, #footer-links a {
+    color: #5f92ce;
+    font-size: 14px;
+    padding: 4px;
+    text-align: center;
+}
--- a/media/css/mobile/header.less
+++ b/media/css/mobile/header.less
@ -92,7 +92,7 @@ header hgroup {
    padding-right: 0;
 }

-header {
+header nav {
    ul {
        float: left;
        padding: 14px 0;
@ -109,7 +109,7 @@ header {
        float: right;
    }
 }
-.html-rtl header {
+.html-rtl header nav {
    ul, li {
        float: right;
    }
--- a/media/css/zamboni/mobile.css
+++ b/media/css/zamboni/mobile.css
@ -63,6 +63,7 @@ i {
 /** Clearfix */
 .listview li a:after,
 header:after,
+header nav:after,
 section:after,
 .menu:after,
 .grouped_ratings:after,
@ -83,6 +84,10 @@ section:after,
 /*             TYPOGRAPHY           */
 /************************************/

+html, body {
+    height: 100%;
+}
+
 body {
    font-family: Georgia, serif;
 }
@ -146,12 +151,12 @@ footer:before,
                      -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcedfd));
 }

-html {
+#page {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAABCAYAAAASC7TOAAAAEElEQVQIHWP8//8/Aw7wHwBR6AP+G53o6QAAAABJRU5ErkJggg=='),
                      -moz-linear-gradient(#dcedfd 0, #fff 200px);
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAABCAYAAAASC7TOAAAAEElEQVQIHWP8//8/Aw7wHwBR6AP+G53o6QAAAABJRU5ErkJggg=='),
                      -webkit-gradient(linear, left top, left 200, from(#dcedfd), to(#fff));
-
+    margin-bottom: 30px;
 }


@ -266,7 +271,6 @@ table th {
 /************************************/

 #search {
-    clear: both;
    margin-bottom: 14px;
    width: 100%;
    position: relative;
@ -1420,58 +1424,3 @@ a.expando {
    text-align: right;
    display: none;
 }
-
-/************************************/
-/*              FOOTER              */
-/************************************/
-
-footer:before {
-    content: " ";
-    display: block;
-    position: absolute;
-    top: -30px;
-    left: 0;
-    width: 100%;
-    height: 30px;
-    box-shadow: 0 -2px rgba(0,0,0,.1) inset;
-}
-footer {
-    font-family: "Droid Sans", Helvetica, Arial, sans-serif;
-    font-size: 1em;
-    color: white;
-    margin-top: 30px;
-    padding: 14px;
-    position: relative;
-    min-height: 200px;
-    box-shadow: 0 2px rgba(0,0,0,.1) inset;
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAABCAYAAAASC7TOAAAAFElEQVQIHWO0DZ3xnwELYOXgYwAAOHwCRjqu6SgAAAAASUVORK5CYII=');
-}
-footer select {
-    margin-top: 4px;
-    display: block;
-    width: 100%;
-    padding-top: 4px;
-    height: 30px;
-}
-#footer-links, #footer-links a {
-    color: #5f92ce;
-    text-align:center;
-    font-size: 14px;
-    padding: 4px;
-}
-
-footer a.desktop-link {
-    background: #5f92ce;
-    -webkit-border-radius: 6px;
-    -moz-border-radius: 6px;
-    border-radius: 6px;
-    color: #fff;
-    display: block;
-    font-family: "Trebuchet MS", "Droid Sans", Helvetica, Arial, sans-serif;
-    font-size: 150%;
-    font-weight: bold;
-    line-height: 200%;
-    margin: 1em 0;
-    text-align: center;
-    text-transform: uppercase;
-}
--- a/media/js/impala/footer.js
+++ b/media/js/impala/footer.js
@ -1,11 +1,11 @@
 (function() {
    var $footer = $('#footer'),
-        $page = $("#page"),
+        $page = $('#page'),
        $win = $(window);
    function stickyFooter() {
        // Stick the footer to the bottom when there's head(foot)room.
        $footer.toggleClass('sticky', $win.height() - $footer.outerHeight() > $page.outerHeight());
    }
    stickyFooter();
-    $(window).resize(_.debounce(stickyFooter, 800));
+    $win.resize(_.debounce(stickyFooter, 200));
 })();
--- a/settings.py
+++ b/settings.py
@ -528,6 +528,7 @@ MINIFY_BUNDLES = {
            'css/zamboni/mobile-forms.less',
            'css/mobile/header.less',
            'css/mobile/listing.less',
+            'css/mobile/footer.less',
        ),
        'zamboni/admin': (
            'css/zamboni/admin-django.css',
@ -751,6 +752,7 @@ MINIFY_BUNDLES = {
        ),
        'zamboni/mobile': (
            'js/lib/jquery-1.6.4.js',
+            'js/lib/underscore.js',
            'js/lib/jqmobile.js',
            'js/lib/jquery.cookie.js',
            'js/lib/jquery.pjax.js',
@ -762,6 +764,7 @@ MINIFY_BUNDLES = {
            'js/zamboni/format.js',
            'js/zamboni/mobile/buttons.js',
            'js/zamboni/truncation.js',
+            'js/impala/footer.js',
            'js/zamboni/personas_core.js',
            'js/zamboni/mobile/personas.js',
            'js/zamboni/mobile/general.js',
--- a/templates/mobile/base_addons.html
+++ b/templates/mobile/base_addons.html
@ -62,16 +62,18 @@
          <div class="get-fx-message">
            {{ _('You need Firefox to install add-ons. <a href="http://mozilla.com/mobile">Learn More&nbsp;&raquo;</a>') }}
          </div>
-          <ul>
-            {% block back_link %}
-              <li>
-                <a href="{{ url('home') }}" id="home">
-                  <svg width="18" height="16"><polygon fill="#447BC4" points="9,0 18,9 15,9 15,16 11,16 11,11 7,11 7,18 3,16 3,9 0,9"/></svg>
-                  {{ _('Mobile Home') }}</a>
-              </li>
-            {% endblock %}
-          </ul>
-          {% include "mobile/header_auth.html" %}
+          <nav>
+            <ul>
+              {% block back_link %}
+                <li>
+                  <a href="{{ url('home') }}" id="home">
+                    <svg width="18" height="16"><polygon fill="#447BC4" points="9,0 18,9 15,9 15,16 11,16 11,11 7,11 7,18 3,16 3,9 0,9"/></svg>
+                    {{ _('Mobile Home') }}</a>
+                </li>
+              {% endblock %}
+            </ul>
+            {% include "mobile/header_auth.html" %}
+          </nav>
        </header>
      {% endblock %}

@ -79,17 +81,17 @@
        {% block page %}
        {% endblock page %}
      </section>
-      <footer>
-        {% include "includes/lang_switcher.html" %}
-        {% block footer %}
-          <a class="desktop-link" href="#">{{ _('View full site') }}</a>
-          <p id="footer-links">
-            <a href="http://mozilla.com/privacy-policy.html">{{ _('Privacy Policy') }}</a> &nbsp;|&nbsp;
-            <a href="http://mozilla.com/about/legal.html">{{ _('Legal Notices') }}</a>
-          </p>
-        {% endblock footer %}
-      </footer>
    </div>
+    <footer id="footer">
+      {% include "includes/lang_switcher.html" %}
+      {% block footer %}
+        <a class="desktop-link" href="#">{{ _('View full site') }}</a>
+        <p id="footer-links">
+          <a href="http://mozilla.com/privacy-policy.html">{{ _('Privacy Policy') }}</a> &nbsp;|&nbsp;
+          <a href="http://mozilla.com/about/legal.html">{{ _('Legal Notices') }}</a>
+        </p>
+      {% endblock footer %}
+    </footer>
    {% block staging %}
    {% endblock %}
    {# js #}
--- a/templates/mobile/base_apps.html
+++ b/templates/mobile/base_apps.html
@ -53,14 +53,16 @@
              </a>
            </h1>
          </hgroup>
-          <ul>
-            {% block back_link %}
-              <li><a href="{{ url('apps.home') }}" id="home">
-                <svg width="18" height="16"><polygon fill="#447BC4" points="9,0 18,9 15,9 15,16 11,16 11,11 7,11 7,18 3,16 3,9 0,9"/></svg>
-                {{ _('Mobile Apps Home') }}</a></li>
-            {% endblock %}
-          </ul>
-          {% include "mobile/header_auth.html" %}
+          <nav>
+            <ul>
+              {% block back_link %}
+                <li><a href="{{ url('apps.home') }}" id="home">
+                  <svg width="18" height="16"><polygon fill="#447BC4" points="9,0 18,9 15,9 15,16 11,16 11,11 7,11 7,18 3,16 3,9 0,9"/></svg>
+                  {{ _('Mobile Apps Home') }}</a></li>
+              {% endblock %}
+            </ul>
+            {% include "mobile/header_auth.html" %}
+          </nav>
          {% block search %}{% endblock %}
        </header>
      {% endblock %}
@ -69,17 +71,17 @@
        {% block page %}
        {% endblock page %}
      </section>
-      <footer>
-        {% include "includes/lang_switcher.html" %}
-        {% block footer %}
-          <a class="desktop-link" href="#">{{ _('View full site') }}</a>
-          <p id="footer-links">
-            <a href="http://mozilla.com/privacy-policy.html">{{ _('Privacy Policy') }}</a> &nbsp;|&nbsp;
-            <a href="http://mozilla.com/about/legal.html">{{ _('Legal Notices') }}</a>
-          </p>
-        {% endblock footer %}
-      </footer>
    </div>
+    <footer id="footer">
+      {% include "includes/lang_switcher.html" %}
+      {% block footer %}
+        <a class="desktop-link" href="#">{{ _('View full site') }}</a>
+        <p id="footer-links">
+          <a href="http://mozilla.com/privacy-policy.html">{{ _('Privacy Policy') }}</a> &nbsp;|&nbsp;
+          <a href="http://mozilla.com/about/legal.html">{{ _('Legal Notices') }}</a>
+        </p>
+      {% endblock footer %}
+    </footer>
    {% block staging %}
    {% endblock %}
    {# js #}