From eef5e55ad9aa89f0d6c7ec45fa9e99d9e8bd4750 Mon Sep 17 00:00:00 2001 From: benmanley Date: Fri, 14 Mar 2014 23:32:32 +0000 Subject: [PATCH] Redesign navbar Restyle navigation and improve mobile layout --- public/css/header.styl | 5 +- public/css/index.styl | 14 +-- public/css/menu.styl | 128 ++++++++++++++++++++ public/css/npcs.styl | 3 +- views/shared/header/menu.jade | 222 +++++++++++++++++----------------- 5 files changed, 242 insertions(+), 130 deletions(-) create mode 100644 public/css/menu.styl diff --git a/public/css/header.styl b/public/css/header.styl index 2b1fbf6aab..0ff8d0438b 100644 --- a/public/css/header.styl +++ b/public/css/header.styl @@ -4,7 +4,7 @@ width: 100% // this is for the sticky padding: 0 z-index: 100 - background: #f5f5f5 + background: #c0d0d0 border-bottom: 1px solid rgba(0,0,0,0.2) // margin-top: -1px overflow-y: hidden @@ -110,7 +110,8 @@ display: table-cell vertical-align: middle min-width:175px - + background-color: #c6d6d6 + .meter, .bar box-shadow: none border-radius: 0 diff --git a/public/css/index.styl b/public/css/index.styl index 9fc63b124d..f59db4e621 100644 --- a/public/css/index.styl +++ b/public/css/index.styl @@ -26,6 +26,7 @@ @import "./quests.styl" @import "./shared.styl" @import "./footer.styl" +@import "./menu.styl" html,body,p,h1,ul,li,table,tr,th,td margin: 0 @@ -172,16 +173,3 @@ a.label .white, .white a color: #fff !important - -.collapse-toolbar - position:absolute - right:0px - top:0px - width:30px - height:25px - background-color:#222 - z-index:999 - .glyphicon - color:white - padding-left:7px - padding-top:5px diff --git a/public/css/menu.styl b/public/css/menu.styl new file mode 100644 index 0000000000..9c2cd9b91f --- /dev/null +++ b/public/css/menu.styl @@ -0,0 +1,128 @@ +// Custom styles for the menu aka toolbar aka navbar +.navbar + color: #222 + background-color: #f8f8f8 + border: none; + border-bottom: 1px solid rgba(0,0,0,0.2) + border-radius:0px + margin-bottom:0px + min-height:50px + > div + padding-left:8px + .glyphicon + color:#5d5d5d + .caret + color:#9d9d9d + .task-action-btn + outline: 1px solid red; + font-size:16px + .gem-wallet + padding-top:4px + padding-bottom:8px + height:50px + .Pet_Currency_Gem2x.Gems + position:relative + top:8px + color:#222 !important + .currency + min-height:50px + padding-top:16px + padding-right:16px +// Mobile menu button +.navbar-header + position:absolute + top:0 + right:45px + button + margin-right:0 +.navbar-toggle + &:hover + background-color:#eee + span.icon-bar + background-color:#5d5d5d +// Top level menu items: Tasks – Options +.navbar-menu + float:left; + li + display:inline-block + height:50px + a + display:block + height:100% + margin-left:8px + padding-top:16px + padding-left:8px + padding-right:8px + font-size:16px + line-height:1 + text-decoration:none + &:link,&:visited + color: #222 + &:hover + background-color:#eee + &:active + color:#000 + .toolbar-toggle + .glyphicon + color:#9d9d9d +// Information bar: Bailey – notifs – currency – subscribe button +.navbar-info + float:right + min-height:50px + padding-right:25px + li + display:inline-block +@media screen and (max-device-width:768px), screen and (max-width:768px) + .navbar-menu + float:none + .navbar-submenu + margin-left:0 + > li + display:inline-block + .dropdown-menu + position:absolute + .navbar-info + width:100% +// Button for toggling toolbar visibility +.collapse-toolbar + &.expanded + position:absolute + &.collapsed + position:fixed + right:0px + top:0px + width:45px + height:50px + padding-left:15px + padding-top:15px + z-index:999 + .glyphicon-chevron-up + color:#5d5d5d + .glyphicon-chevron-down + color:#fff +.toolbar-submenu + background-color:#eee + border-top: 1px solid rgba(0,0,0,0.2) + > li + display:inline-block + vertical-align:top + margin-top:16px + margin-left:16px + margin-bottom:8px + line-height:1.618 + ul + list-style:none + li + padding-left:22px + .glyphicon + margin-right:8px + color:#9d9d9d +.toolbar-sync + position:relative + top:-8px + .glyphicon-refresh + color: #222 !important +.glyphicon-chevron-up + transition: all 0.32s linear +.glyphicon-chevron-up.active + transform: rotate(180deg) \ No newline at end of file diff --git a/public/css/npcs.styl b/public/css/npcs.styl index 4f55489d5c..f4b7be0718 100644 --- a/public/css/npcs.styl +++ b/public/css/npcs.styl @@ -6,12 +6,13 @@ .toolbar-bailey-container width:55px + margin-right:8px position:relative .npc_bailey float:left .npc_bailey_head position: absolute - top: 4px + top: -24px height:45px !important cursor: pointer diff --git a/views/shared/header/menu.jade b/views/shared/header/menu.jade index 82a00e9d44..90c20ca443 100644 --- a/views/shared/header/menu.jade +++ b/views/shared/header/menu.jade @@ -1,128 +1,122 @@ -a.collapse-toolbar(popover=env.t('expandToolbar'),popover-placement='left',popover-trigger='mouseenter',ng-if='user.preferences.toolbarCollapsed',ng-click='set({"preferences.toolbarCollapsed":false})') +a.collapse-toolbar.collapsed(popover=env.t('expandToolbar'),popover-placement='left',popover-trigger='mouseenter',ng-if='user.preferences.toolbarCollapsed',ng-click='set({"preferences.toolbarCollapsed":false})') span.glyphicon.glyphicon-chevron-down - -nav.navbar.navbar-inverse(ng-controller='AuthCtrl',style='min-height:0px;margin-bottom:0px;border:0;border-radius:0px',ng-if='!user.preferences.toolbarCollapsed') - - ul.nav.navbar-nav.pull-right +a.collapse-toolbar.expanded(popover=env.t('collapseToolbar'),popover-placement='left',popover-trigger='mouseenter',ng-if='!user.preferences.toolbarCollapsed',ng-click='set({"preferences.toolbarCollapsed":true})') + span.glyphicon.glyphicon-chevron-up +nav.navbar(ng-controller='AuthCtrl',ng-if='!user.preferences.toolbarCollapsed') + ul.navbar-menu li - a(popover=env.t('collapseToolbar'),popover-placement='left',popover-trigger='mouseenter',,ng-if='!user.preferences.toolbarCollapsed',ng-click='set({"preferences.toolbarCollapsed":true})') - span.glyphicon.glyphicon-chevron-up.white - - .navbar-header - button.navbar-toggle(type='button', ng-click='isNavbarCollapsed = !isNavbarCollapsed', ng-init='isNavbarCollapsed = true') - span.sr-only Toggle navigation - span.icon-bar - span.icon-bar - span.icon-bar + a(ui-sref='tasks') + span Tasks + li + a(ui-sref='options.profile.avatar') + span Options + li + a.toolbar-toggle(ng-click='isMenuCollapsed = !isMenuCollapsed') + span.glyphicon.glyphicon-chevron-up(ng-class='{active: isMenuCollapsed}') .collapse.navbar-collapse(collapse="isNavbarCollapsed") - ul.nav.navbar-nav - li - a(ui-sref='tasks',popover=env.t('tasks'),popover-placement='right',popover-trigger='mouseenter') - span.glyphicon.glyphicon-check.white - li.dropdown - a.dropdown-toggle(popover=env.t('user'),popover-placement='right',popover-trigger='mouseenter') - span.glyphicon.glyphicon-user.white - span.caret - ul.dropdown-menu - li - a(ui-sref='options.profile.avatar')=env.t('avatar') - li - a(ui-sref='options.profile.stats')=env.t('stats') - li - a(ui-sref='options.profile.profile')=env.t('profile') - li - a(ng-click='logout()') - span.glyphicon.glyphicon-share-alt - |   - =env.t('logout') - li.dropdown - a.dropdown-toggle(popover=env.t('social'),popover-placement='right',popover-trigger='mouseenter') - span.glyphicon.glyphicon-heart.white - span.caret - ul.dropdown-menu - li - a(ui-sref='options.social.tavern')=env.t('tavern') - li - a(ui-sref='options.social.party')=env.t('party') - li - a(ui-sref='options.social.guilds')=env.t('guilds') - li - a(ui-sref='options.social.challenges')=env.t('challenges') - li - a(ui-sref='options.social.hall')=env.t('hall') - li.dropdown - a.dropdown-toggle(popover=env.t('inventory'), popover-placement='right',popover-trigger='mouseenter') - span.glyphicon.glyphicon-gift.white - span.caret - ul.dropdown-menu - li - a(ui-sref='options.inventory.drops')=env.t('market') - li - a(ui-sref='options.inventory.pets')=env.t('pets') - li - a(ui-sref='options.inventory.mounts')=env.t('mounts') - li - a(ui-sref='options.inventory.equipment')=env.t('equipment') - li.dropdown - a.dropdown-toggle(popover=env.t('settings'),popover-placement='right',popover-trigger='mouseenter') - span.glyphicon.glyphicon-wrench.white - span.caret - ul.dropdown-menu - li - a(ui-sref='options.settings.settings')=env.t('site') - li - a(ui-sref='options.settings.api')=env.t('API') - li - a(ui-sref='options.settings.export')=env.t('export') - li - a(ui-sref='options.settings.subscription')=env.t('subscription') - li.dropdown - a.dropdown-toggle(popover=env.t('help'),popover-placement='right',popover-trigger='mouseenter') - span.glyphicon.glyphicon-question-sign.white - span.caret - ul.dropdown-menu - li - a(href="http://habitrpg.wikia.com/wiki/FAQ", target='_blank') - span.glyphicon.glyphicon-book - |  - =env.t('FAQ') - li - a(href="https://vimeo.com/57654086", target='_blank') - span.glyphicon.glyphicon-film - |  - =env.t('tutorials') - li - a(ng-click='User.sync()',popover=env.t('sync'),popover-placement='right',popover-trigger='mouseenter') - span.glyphicon.glyphicon-refresh.white - li - a.pull-right.gem-wallet(style='padding-top:8px;padding-bottom:0px;',ng-click='openModal("buyGems",{track:"Gems > Toolbar"})', popover-trigger='mouseenter', popover-title=env.t('gems'), popover=env.t('gemsWhatFor'), popover-placement='bottom',popover-append-to-body='true') - //span.task-action-btn.tile.flush.bright.add-gems-btn ＋ - span.task-action-btn.tile.flush.neutral - .Pet_Currency_Gem2x.Gems - | {{user.balance * 4 | number:0}} - li - button.btn.btn-primary.navbar-btn(ng-if='!user.purchased.plan.customerId',ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title=env.t('subscriptions'),popover=env.t('subDescription'),popover-append-to-body='true')=env.t('subscribe') - button.btn.btn-default.navbar-btn(ng-if='user.purchased.plan.customerId',ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover=env.t('manageSub'),popover-append-to-body='true')=env.t('subscribed') - - li(ng-if='user.flags.newStuff') - div.toolbar-bailey-container - |  - .npc_bailey.npc_bailey_head(popover=env.t('psst'), popover-trigger='mouseenter', popover-placement='right', ng-click='openModal("newStuff")') - + ul.nav.navbar-info + li.toolbar-bailey-container(ng-if='user.flags.newStuff') + .npc_bailey.npc_bailey_head(popover=env.t('psst'), popover-trigger='mouseenter', popover-placement='right', ng-click='openModal("newStuff")') // Invitations li(ng-if='user.invitations.party.id') a(ui-sref='options.social.party') - span.glyphicon.glyphicon-user.white(popover=env.t('invitedTo', {name: '{{user.invitations.party.name}}'}),popover-placement='bottom',popover-trigger='mouseenter',popover-append-to-body='true') + span.glyphicon.glyphicon-user(popover=env.t('invitedTo', {name: '{{user.invitations.party.name}}'}),popover-placement='bottom',popover-trigger='mouseenter',popover-append-to-body='true') li(ng-repeat='guild in user.invitations.guilds') a(ui-sref='options.social.guilds') - span.glyphicon.glyphicon-user.white(popover=env.t('invitedTo', {name: '{{guild.name}}'}),popover-placement='bottom',popover-trigger='mouseenter',popover-append-to-body='true') + span.glyphicon.glyphicon-user(popover=env.t('invitedTo', {name: '{{guild.name}}'}),popover-placement='bottom',popover-trigger='mouseenter',popover-append-to-body='true') // Chat notifs li(ng-repeat='(k,v) in user.newMessages', ng-if='v.value') a(ng-click='k==party._id ? $state.go("options.social.party") : $state.go("options.social.guilds.detail",{gid:k})') - span.glyphicon.glyphicon-comment.white(popover=env.t('newMsg', {name: '{{v.name}}'}),popover-placement='bottom',popover-trigger='mouseenter',popover-append-to-body='true') + span.glyphicon.glyphicon-comment(popover=env.t('newMsg', {name: '{{v.name}}'}),popover-placement='bottom',popover-trigger='mouseenter',popover-append-to-body='true') // Mystery Item li(ng-if='user.purchased.plan.mysteryItems.length') a(ng-click='$state.go("options.inventory.drops")') - span.glyphicon.glyphicon-gift.white(popover=env.t('newSubscriberItem'),popover-placement='bottom',popover-trigger='mouseenter',popover-append-to-body='true') - - + span.glyphicon.glyphicon-gift(popover=env.t('newSubscriberItem'),popover-placement='bottom',popover-trigger='mouseenter',popover-append-to-body='true') + li + a.gem-wallet(ng-click='openModal("buyGems",{track:"Gems > Toolbar"})', popover-trigger='mouseenter', popover-title=env.t('gems'), popover=env.t('gemsWhatFor'), popover-placement='bottom',popover-append-to-body='true') + //-span.task-action-btn.tile.flush.bright.add-gems-btn ＋ + span + .Pet_Currency_Gem2x.Gems + | {{user.balance * 4 | number:0}} + li.currency(popover=env.t('gold'), popover-placement='bottom',popover-trigger='mouseenter') + span + .shop_gold + | {{Shared.gold(user.stats.gp)}} + li.currency(popover=env.t('silver'), popover-placement='bottom',popover-trigger='mouseenter') + span + .shop_silver + | {{Shared.silver(user.stats.gp)}} + li + button.btn.btn-primary.navbar-btn(ng-if='!user.purchased.plan.customerId',ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title=env.t('subscriptions'),popover=env.t('subDescription'),popover-append-to-body='true')=env.t('subscribe') + button.btn.btn-default.navbar-btn(ng-if='user.purchased.plan.customerId',ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover=env.t('manageSub'),popover-append-to-body='true')=env.t('subscribed') + ul.nav.toolbar-submenu(ng-if='!isMenuCollapsed') + li + span.glyphicon.glyphicon-user + span=env.t('user') + ul + li + a(ui-sref='options.profile.avatar')=env.t('avatar') + li + a(ui-sref='options.profile.stats')=env.t('stats') + li + a(ui-sref='options.profile.profile')=env.t('profile') + li + a(ng-click='logout()') + //-span.glyphicon.glyphicon-share-alt + //-|   + span=env.t('logout') + li + span.glyphicon.glyphicon-heart + span=env.t('social') + ul + li + a(ui-sref='options.social.tavern')=env.t('tavern') + li + a(ui-sref='options.social.party')=env.t('party') + li + a(ui-sref='options.social.guilds')=env.t('guilds') + li + a(ui-sref='options.social.challenges')=env.t('challenges') + li + a(ui-sref='options.social.hall')=env.t('hall') + li + span.glyphicon.glyphicon-gift + span=env.t('inventory') + ul + li + a(ui-sref='options.inventory.drops')=env.t('market') + li + a(ui-sref='options.inventory.pets')=env.t('pets') + li + a(ui-sref='options.inventory.mounts')=env.t('mounts') + li + a(ui-sref='options.inventory.equipment')=env.t('equipment') + li + span.glyphicon.glyphicon-wrench + span=env.t('settings') + ul + li + a(ui-sref='options.settings.settings')=env.t('site') + li + a(ui-sref='options.settings.api')=env.t('API') + li + a(ui-sref='options.settings.export')=env.t('export') + li + a(ui-sref='options.settings.subscription')=env.t('subscription') + li + span.glyphicon.glyphicon-question-sign + span=env.t('help') + ul + li + a(href="http://habitrpg.wikia.com/wiki/FAQ", target='_blank') + //-span.glyphicon.glyphicon-book + //-|  + span=env.t('FAQ') + li + a(href="https://vimeo.com/57654086", target='_blank') + //-span.glyphicon.glyphicon-film + //-|  + span=env.t('tutorials') + li.toolbar-sync + a(ng-click='User.sync()',popover=env.t('sync'),popover-placement='right',popover-trigger='mouseenter') + span.glyphicon.glyphicon-refresh \ No newline at end of file