Permalink
Browse files

new navbar frontend (bug 957299)

  • Loading branch information...
1 parent fc3bfde commit 36e68def84bc624a82e12b1bfa157329a2b7134e @ngokevin committed Feb 27, 2014
View
@@ -55,8 +55,7 @@
<div class="cloak"></div>
<main>
- <div id="cat-dropdown"></div>
- <div id="cat-list"></div>
+ <nav id="site-nav" class="secondary-header site-nav" role="navigation"></nav>
<div id="page" class="page" role="main"></div>
</main>
@@ -339,6 +339,70 @@
.featured .featured-header {
padding-bottom: 20px;
}
+
+ // New feed navigation.
+ .site-nav {
+ // overflow: auto;
+ // overflow-y: hidden;
+ position: relative;
+
+ .act-tray {
+ background-color: $cloud-gray;
+ border: 1px solid $cement-gray;
+ border-radius: 0 20px 20px 0;
+ bottom: 2px;
+ height: 41px;
+ width: 45px;
+ z-index: 2;
+
+ a.settings {
+ height: 30px;
+ top: 5px;
+ }
+ }
+ ul.navbar {
+ disable_user_select();
+ transition(all .3s);
+ display: inline-block;
+ height: auto;
+ padding: 8px 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+
+ &.home {
+ right: -70px;
+ }
+ &.new {
+ right: -18px;
+ }
+ &.popular {
+ right: 25px;
+ }
+ &.categories {
+ right: 90px;
+ }
+ &.collections {
+ right: 165px;
+ }
+ li {
+ display: inline;
+ font-size: 12px;
+ padding: 8px 8px 7px 8px;
+ position: relative;
+
+ &.active {
+ border-bottom: 2px solid $flamin-hot-cheetos-orange;
+ }
+ a {
+ color: $medium-gray;
+ }
+ }
+ }
+ .account-links {
+ display: none;
+ }
+ }
}
// search results tile expand toggle
@@ -385,3 +385,11 @@ dropdown() {
top: 15px;
width: 25px;
}
+
+disable_user_select() {
+ -khtml-user-select: none;
+ -moz-user-select: -moz-none;
+ -o-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+}
@@ -33,7 +33,7 @@
.throbber {
position: absolute;
text-align: center;
- top: 45%;
+ top: 50%;
width: 100%;
> b {
Oops, something went wrong.
Oops, something went wrong.
@@ -15,8 +15,11 @@ require.config({
'templates': '../../templates',
'settings': ['settings_local', 'settings'],
'format': 'lib/format',
- 'textoverflowclamp': 'lib/textoverflowclamp'
- }
+ 'textoverflowclamp': 'lib/textoverflowclamp',
+
+ 'hammerjs': 'lib_local/hammer',
+ 'jquery.hammer': 'lib_local/jquery.hammer'
+ },
});
define(
@@ -38,6 +41,7 @@ define(
'log',
'login',
'models',
+ 'navbar',
'navigation',
'outgoing_links',
'overlay',
@@ -143,6 +147,8 @@ function(_) {
var context = {z: z};
$('#site-header').html(
nunjucks.env.render('header.html', context));
+ $('#site-nav').html(
+ nunjucks.env.render('nav.html', context));
$('#site-footer').html(
nunjucks.env.render('footer.html', context));
@@ -0,0 +1,53 @@
+define('navbar', ['jquery', 'jquery.hammer', 'log', 'settings', 'underscore', 'z'],
+ function($, hammer, log, settings, _, z) {
+ 'use strict';
+
+ var console = log('navbar');
+
+ var tabs = ['home', 'new', 'popular', 'categories', 'collections'];
+
+ z.page.on('loaded', function() {
+ // Swipe.
+ $('#site-nav').hammer({'swipe_velocity': 0.3}).on('swipe', function(e) {
+ if (['left', 'right'].indexOf(e.gesture.direction) === -1) {
+ return;
+ }
+
+ var $navbar = $(this).find('.navbar');
+ var currentTab = $navbar.attr('data-tab');
+ var tabPos = tabs.indexOf(currentTab);
+
+ if (e.gesture.direction == 'left') {
+ // Next tab.
+ tabPos = tabPos === tabs.length - 1 ? tabPos : tabPos + 1;
+ } else if (e.gesture.direction == 'right') {
+ // Prev tab.
+ tabPos = tabPos === 0 ? tabPos : tabPos - 1;
+ }
+
+ // Visually change tab by sliding navbar.
+ var newTab = tabs[tabPos];
+ $navbar.removeClass(currentTab)
+ .addClass(newTab)
+ .attr('data-tab', newTab)
+ .find('li').removeClass('active')
+ .eq(tabPos).addClass('active');
+ });
+ });
+
+ // Tap.
+ $('#site-nav').on('click', 'li', function(e) {
+ var $this = $(this);
+ var $navbar = $(this).closest('.navbar');
+
+ var targetTab = $this.attr('data-tab');
+ var tabPos = tabs.indexOf(targetTab);
+
+ // Visually change tab by sliding navbar.
+ $navbar.removeClass($navbar.attr('data-tab'))
+ .addClass(targetTab)
+ .attr('data-tab', targetTab)
+ .find('li').removeClass('active')
+ .eq(tabPos).addClass('active');
+ });
+});
Oops, something went wrong.

0 comments on commit 36e68de

Please sign in to comment.