From 3725f100a8d11136c48c8362fa69985c10d351e6 Mon Sep 17 00:00:00 2001 From: Chris Van Date: Fri, 13 Apr 2012 13:29:53 -0700 Subject: [PATCH] implement consumer Marketplace navigation widget (bug 744418) --- media/css/mkt/buttons.less | 3 - media/css/mkt/header.less | 101 ++++++++++++++++++++++++++++++ media/css/mkt/lib.less | 4 ++ media/js/mkt/init.js | 11 ++++ mkt/home/templates/home/home.html | 2 +- mkt/templates/mkt/header.html | 37 ++++++----- 6 files changed, 139 insertions(+), 19 deletions(-) diff --git a/media/css/mkt/buttons.less b/media/css/mkt/buttons.less index c49822068b..fa09771e1d 100644 --- a/media/css/mkt/buttons.less +++ b/media/css/mkt/buttons.less @@ -1,9 +1,6 @@ @import 'lib'; // yeah yeah this is too fancy. -@btn-b: #44A5E1; -@btn-b-dark: #267CC2; -@btn-b-lite: saturate(spin(@btn-b, 4), 4%); @btn-r: lighten(spin(@btn-b, -220), 10%); @btn-r-dark: darken(spin(@btn-r, 3), 8%); diff --git a/media/css/mkt/header.less b/media/css/mkt/header.less index 57fe1d838c..91dc11e65e 100644 --- a/media/css/mkt/header.less +++ b/media/css/mkt/header.less @@ -34,6 +34,7 @@ display: block; position: relative; overflow: hidden; + outline: none; // CSS Menu icon. b, b:before, b:after { position: absolute; @@ -59,6 +60,98 @@ top: 20px; } } + nav { + position: relative; + } + nav ul { + .transition-property(~'top, opacity, visibility'); + .transition-duration(.3s); + .border-radius(5px); + .box-shadow(0 1px 4px fadeOut(@black, 50%)); + background: @white; + opacity: 0; + margin: 0; + padding: 0; + position: absolute; + visibility: hidden; + top: 32px; + right: 0; + .width(3); + z-index: 9001; + &.active { + opacity: 1; + visibility: visible; + top: 70px; + } + li:first-child a:before { + .box-shadow(1px 1px 0 rgba(255,255,255,.1) inset, + -1px -1px 0 fadeOut(@black, 75%)); + .transform(~'rotate(45deg)'); + background: @white; + content: ""; + height: 12px; + position: absolute; + top: -5px; + right: 13px; + z-index: 2; + width: 12px; + } + li:first-child a:hover:before { + .gradient-two-color(@btn-b, lighten(@btn-b-dark, 13%)); + } + li { + + li { + border-top: 1px solid @medium-gray; + } + &:first-child a { + .border-radius(5px 5px 0 0); + } + &:last-child a { + .border-radius(0 0 5px 5px); + } + } + a, a:after { + height: 30px; + } + a { + color: @link; + display: block; + font-size: 15px; + line-height: 30px; + padding: 0 15px; + position: relative; + z-index: 2; + &:after { + .transition(.2s right); + background: url(../../img/mkt/arrows/plain.gif) 100% 50% no-repeat; + content: ""; + display: block; + opacity: .7; + position: absolute; + top: 0; + right: 15px; + width: 18px; + } + &:hover, &:active { + .gradient-two-color(@btn-b, @btn-b-dark); + color: @white; + text-decoration: none; + &:after { + opacity: 1; + right: 10px; + } + } + &:active { + .box-shadow(inset 0 2px 0 0 rgba(0,0,0,.2), + inset 0 12px 24px 6px rgba(0,0,0,.2), + inset 0 0 2px 2px rgba(0,0,0,.2)); + } + } + } +} + +.nav-overlay.show { + background: transparent; } /* Content header (breadcrumbs, heading, subnav) - used on Account Settings, etc. */ @@ -160,4 +253,12 @@ } } } + #site-header { + nav ul { + top: 115px; + &.active { + top: 150px; + } + } + } } diff --git a/media/css/mkt/lib.less b/media/css/mkt/lib.less index 7e269f9ecc..78f6c520eb 100644 --- a/media/css/mkt/lib.less +++ b/media/css/mkt/lib.less @@ -44,6 +44,10 @@ @bg: #dee3e6; @pale-bg: #eff1f3; +@btn-b: #44A5E1; +@btn-b-dark: #267CC2; +@btn-b-lite: saturate(spin(@btn-b, 4), 4%); + // Font Stacks @open-stack: "Open Sans", "Helvetica Neue", Arial, sans-serif; diff --git a/media/js/mkt/init.js b/media/js/mkt/init.js index c7a1d159fb..41f4f66eb8 100644 --- a/media/js/mkt/init.js +++ b/media/js/mkt/init.js @@ -39,4 +39,15 @@ $(function() { // Add class for touch devices. $('body').addClass(z.capabilities.touch ? 'touch' : 'desktop'); + + // Navigation toggle. + var $header = $('#site-header'), + $nav = $header.find('nav ul'); + $header.on('click', '.menu-button', function() { + $nav.toggleClass('active'); + $('.nav-overlay').addClass('show'); + }); + $(window).bind('overlay_dismissed', function() { + $nav.removeClass('active'); + }); }); diff --git a/mkt/home/templates/home/home.html b/mkt/home/templates/home/home.html index 4f0a471ec9..470f2054e9 100644 --- a/mkt/home/templates/home/home.html +++ b/mkt/home/templates/home/home.html @@ -32,7 +32,7 @@
{{ popular|promo_slider }}
-
+

{{ _('All categories') }}

diff --git a/mkt/templates/mkt/header.html b/mkt/templates/mkt/header.html index 1acebd440d..bf2359273e 100644 --- a/mkt/templates/mkt/header.html +++ b/mkt/templates/mkt/header.html @@ -1,22 +1,29 @@ +