pretty desktop header (bug 811345)

media/css/mkt/desktop-header.less

@@ -0,0 +1,167 @@
+@import 'lib';
+
+@media (min-width: @desktop) {
+    #site-header {
+        height: 110px;
+        #search,
+        #search-q {
+            width: 175px;
+        }
+        #search-q {
+            .border-radius(3px);
+            .box-shadow(0 1px 0 rgba(255,255,255,.1),
+                        0 1px 0 rgba(0,0,0,.5) inset,
+                        0 1px 1px rgba(0,0,0,.5) inset);
+            font-size: 14px;
+            font-weight: 300;
+            margin-top: -15px;
+            position: absolute;
+            top: 50%;
+            right: 0;
+            &:-moz-placeholder {
+                color: lighten(#48535d, 15%);
+            }
+            &::-moz-placeholder {
+                color: lighten(#48535d, 15%);
+            }
+            &::-webkit-input-placeholder {
+                color: lighten(#48535d, 15%);
+            }
+
+        }
+    }
+    #page {
+        padding-top: 110px;
+    }
+    .incompatible-browser.active {
+        top: 110px;
+    }
+
+    // TODO: These are temporary styles. Davor, remove this with bug 811356.
+    .search {
+        #page {
+            &:before {
+                background: @grain-src #566773;
+                background-size: 100px 100px;
+                border-bottom: 1px solid rgba(0,0,0,.2);
+                content: "";
+                display: block;
+                position: fixed;
+                top: 110px;
+                height: 40px;
+                width: 100%;
+                z-index: 3;
+            }
+        }
+        .incompatible-browser.active {
+            top: 151px;
+        }
+    }
+
+    // The logo is permanent in the header.
+    #site-header h1.title {
+        display: none;
+    }
+
+    .force-mobile #site-header > section,
+    #site-header nav,
+    #search {
+        height: 100%;
+    }
+
+    #search {
+        display: block;
+        position: absolute;
+        right: 70px;
+    }
+
+    #site-header, .classic-header {
+        .box-shadow(~'0 -1px 0 rgba(0,0,0,.15) inset, 0 1px 0 rgba(255,255,255,.1) inset');
+        background: darken(#3f4f5b, 5%) @grain-src;
+        background-size: 100px 100px;
+    }
+
+    body, .home {
+        #site-header h1.site {
+            background: url(../../img/mkt/logos/large.png) 0 50% no-repeat;
+            text-indent: -9999px;
+            height: 100%;
+            left: 0;
+            max-width: 280px;
+            top: 0;
+            width: 280px;
+            a {
+                display: block;
+                height: 100%;
+                width: 100%;
+            }
+        }
+    }
+    .header-button {
+        float: none;
+        position: absolute;
+        top: 50%;
+        margin-top: -25px;
+        right: 0;
+        width: 50px;
+        &:after,
+        &.back,
+        &.home {
+            display: none !important;
+        }
+
+        // TODO: These are temporary styles. Davor, remove this with bug 811356.
+        &.filter,
+        &.expand {
+            margin-top: 50px;
+        }
+        &.filter {
+            color: @black;
+        }
+        &.expand {
+            margin-right: 50px;
+        }
+
+        &.settings {
+            display: block;
+        }
+        &.browserid {
+            .transition(.2s background);
+            background-position: 50% 0;
+            display: block;
+            height: 100%;
+            line-height: 110px;
+            margin: 0;
+            top: 0;
+            width: 60px;
+            &.loading-submit {
+                -webkit-animation-duration: 1.5s;
+                -webkit-animation-name: spin;
+                -webkit-animation-iteration-count: infinite;
+                -webkit-animation-timing-function: linear;
+                background: url(../../img/mkt/loading-16.png) center no-repeat;
+                text-indent: -9999px;
+                &:after {
+                    display: none;
+                }
+            }
+        }
+    }
+    // TODO: These are temporary styles. Davor, remove this with bug 811356.
+    #search-results {
+        padding-top: 45px;
+        .listing {
+            border-top: 1px solid @light-gray;
+        }
+    }
+}
+
+@media screen and (min-width: @desktop),
+       @retina {
+    body, .home {
+        #site-header h1.site {
+            background-image: url(../../img/mkt/logos/large-2x.png);
+            background-size: 280px auto;
+        }
+    }
+}

media/css/mkt/desktop.less

@@ -6,6 +6,9 @@
 }
 
 @media (min-width: @desktop) {
+    body, h1, h2, h3, h4 {
+        font-weight: 300;
+    }
     body {
         background: @white;
     }
@@ -59,7 +62,9 @@
         }
     }
 
-    footer {
+    #footer,
+    #directory-footer {
+        display: block;
         padding: 30px 0;
         .pad {
             margin: 0 auto;
@@ -71,11 +76,6 @@
         }
     }
 
-    #footer,
-    #directory-footer {
-        display: block;
-    }
-
     #footer {
         background: @white;
         border-top-color: rgba(0,0,0,.08);

media/css/mkt/forms.less

@@ -65,10 +65,13 @@ input:-moz-placeholder {
 
 input[placeholder] {
     // Because bug 673873 is stupidface.
+    // Yes, the order matters. Firefox 18 (and below) is clownshoes.
     &:-moz-placeholder:focus {
         color: transparent !important;
     }
-    // Yes, the order matters. WebKit is clownshoes.
+    &:focus::-moz-placeholder {
+        color: transparent !important;
+    }
     &:focus::-webkit-input-placeholder {
         color: transparent !important;
     }

media/css/mkt/navigation.less

@@ -10,7 +10,7 @@ body {
                 display: block;
             }
         }
-        #site-header h1 {
+        #site-header h1.page {
             display: none;
         }
         #search, #search-q {

media/css/mkt/search.less

@@ -46,6 +46,9 @@
     &:-moz-placeholder {
         color: lighten(#99abb9, 3%);
     }
+    &::-moz-placeholder {
+        color: lighten(#99abb9, 3%);
+    }
     &::-webkit-input-placeholder {
         color: lighten(#99abb9, 3%);
     }

media/css/mkt/typography.less

@@ -35,12 +35,10 @@
 
 body {
     font-family: @open-stack;
-    font-weight: 300;
     font-size: 13px;
 }
 
-// Headers
-h1, h2, h3, h4 {
+body, h1, h2, h3, h4 {
     font-weight: 300;
 }
 

media/js/mkt/navigation.js

@@ -117,12 +117,13 @@ var nav = (function() {
 
     function setTitle() {
         // Something something title joke.
-        var $h1 = $('#site-header h1');
+        var $h1 = $('#site-header h1.page');
         var title = $('#page').data('context').headertitle || '';
         $h1.text(title);
     }
 
     function back() {
+        // Something something back joke.
         if (stack.length > 1) {
             stack.shift();
             $(window).trigger('loadfragment', stack[0].path);

mkt/asset_bundles.py

@@ -156,6 +156,7 @@ CSS.update({
         # TODO: Split components into individual, appropriate stylesheets.
         'css/devreg/footer.less',
         'css/mkt/desktop.less',
+        'css/mkt/desktop-header.less',
     ),
 })
 

mkt/templates/mkt/base_mobile.html

@@ -70,7 +70,9 @@
     {% block siteheader %}
       {% with headertitle = headertitle,
               titletag = titletag,
-              pagetitle = pagetitle %}
+              pagetitle = pagetitle,
+              category = category,
+              logged = logged %}
         {% include 'mkt/header.html' %}
       {% endwith %}
     {% endblock %}

mkt/templates/mkt/header.html

@@ -1,13 +1,26 @@
 <header id="site-header" class="c{{ ' no-consumer' if not request.can_view_consumer }}">
   <section>
-    <h1>{{ headertitle }}</h1>
+    {% if request.MOBILE %}
+      <h1 class="page">{{ headertitle }}</h1>
+    {% else %}
+      <h1 class="site"><a href="{{ url('home') }}">Firefox Marketplace</a></h1>
+    {% endif %}
     {% if request.can_view_consumer %}
     <nav role="navigation">
       <a href="{{ url('home') }}" class="header-button icon home left" title="{{ _('Home') }}"></a>
-      <a href="{{ url('account.settings') if
-                  request.user.is_authenticated() else
-                  url('account.feedback') }}"
-         class="header-button icon settings left" title="{{ _('Settings') }}"></a>
+      {% if request.MOBILE %}
+        <a href="{{ url('account.settings') if
+                    request.user.is_authenticated() else
+                    url('account.feedback') }}"
+           class="header-button icon settings left" title="{{ _('Settings') }}"></a>
+      {% else %}
+        {% if logged %}
+          <a href="{{ url('account.settings') }}"
+             class="header-button icon settings left" title="{{ _('Settings') }}"></a>
+        {% else %}
+          <a href="#" class="header-button browserid right">{{ _('Sign In') }}</a>
+        {% endif %}
+      {% endif %}
       <a href="#" id="nav-back" class="header-button icon back left" title="{{ _('Back') }}"><b></b></a>
       <a href="#" class="header-button icon search right" title="{{ _('Search') }}"></a>
       <a href="#" class="header-button cancel right">{{ _('Cancel') }}</a>
@@ -21,7 +34,7 @@
           <input id="search-q" type="search" name="q" autocomplete="off" title=""
                  placeholder="{{ category.name if category else _('Search') }}"
                  data-placeholder-default="{{ _('Search') }}"
-                 value="{{ search_form.q.value() }}">
+                 {% if search_form.q.value() %}value="{{ search_form.q.value() }}"{% endif %}>
           {% if search_form.cat.value() %}
             {{ search_form.cat }}
           {% endif %}