From 2309184ae3fdec65e1409eb99a34642b21a854ea Mon Sep 17 00:00:00 2001 From: benmanley Date: Fri, 2 May 2014 19:49:18 +0100 Subject: [PATCH] feat(toolbar): add button to hide/show toolbar menu.jade: * Add toggle button to toolbar * Add container to hide the rest of toolbar without hiding the toggle button. menu.styl: * Add toggle button styles * Update toolbar styles to account for toggle button header.styl: * Update rules for adding and removing padding from .header-wrap when toolbar is toggled. --- public/css/header.styl | 10 +- public/css/menu.styl | 77 ++++++++- views/shared/header/menu.jade | 309 +++++++++++++++++----------------- 3 files changed, 233 insertions(+), 163 deletions(-) diff --git a/public/css/header.styl b/public/css/header.styl index 2f0f1f6493..20d49ef1ba 100644 --- a/public/css/header.styl +++ b/public/css/header.styl @@ -2,17 +2,19 @@ -------------------- */ .header-wrap width: 100% // this is for the sticky - padding: 46px 0 0 0 // add padding-top when navbar is fixed - @media screen and (max-width:768px) // remove padding-top when navbar is static - padding: 0 z-index: 100 + padding: 46px 0 0 0 // add padding-top when toolbar is fixed background-color: darken($color-herobox, 8%) border-bottom: 1px solid rgba(0,0,0,0.2) // margin-top: -1px overflow-y: hidden overflow-x: auto // position relative - + @media screen and (max-width:768px) // remove padding-top when toolbar is static + padding: 0 +.toolbar.active ~ .header-wrap + padding: 0 // remove padding when toolbar is hidden + /* login/menu buttons --------------------- */ .user-menu diff --git a/public/css/menu.styl b/public/css/menu.styl index c0c89be307..5abfe4dc8c 100644 --- a/public/css/menu.styl +++ b/public/css/menu.styl @@ -1,11 +1,64 @@ -// Custom styles for the menu aka toolbar aka navbar +// Top level navigation bar – toolbar – menu – nav .toolbar - width:100%; top:0 - left:0 + right:0 + width: 100% z-index:998 background-color: $color-toolbar border-bottom: 1px solid darken($color-herobox, 12%) +.toolbar.active + width: auto +@media screen and (min-width:768px) + .toolbar + position:fixed +// Button to toggle toolbar visibility +.toolbar-toggle + float:right + padding: 0.9em 0.3em + overflow: hidden + width: 1.6em + z-index:4000 + border:none + border-left: 1px solid darken($color-toolbar, 16.18%) + background:none + background-color: darken($color-toolbar, 3.82%) + span + display: inline-block + color: darken($color-toolbar, 38.2%) + .glyphicon + animation: toggle-open 0.382s linear both + .toggle-text + display: none + padding-left: 0.382em + &:focus, &:active + outline:none + &:hover, &.active, &:focus + width: auto + padding-left: 0.618em + padding-right: 0.618em + .toggle-text + display: inline-block + padding-left: 0.382em + .toggle-open + display:none + &.active + span + color: darken($color-toolbar, 70%) + .toggle-close + display:none + .toggle-open + display: inline-block + &:hover, &:focus + background-color: darken($color-toolbar, 3.82%) + border-left: 1px solid darken($color-toolbar, 16.18%) + &.active, &:focus.active + background-color: darken($color-herobox, 8%) + .glyphicon + animation: toggle-close 0.382s linear both + &:focus.active + border-left: 1px solid darken($color-toolbar, 38.2%) + border-bottom: 1px solid darken($color-toolbar, 38.2%) +.toolbar-container > ul > li display: inline-block // Mobile menu button @@ -73,9 +126,6 @@ .toolbar-sync, .toolbar-settings @extend $hrpg-button hrpg-button-color-mixin($color-toolbar) -@media screen and (min-width:768px) - .toolbar - position:fixed // Notifications icon and dropdown .toolbar-notifs @extend $hrpg-button @@ -114,6 +164,8 @@ .toolbar-subscribe-button, .toolbar-controls .toolbar-subscribe-button @extend $hrpg-button-call-to-action @media screen and (max-width:768px) + .toolbar-toggle + display: none .toolbar-mobile, .toolbar-settings .toolbar-submenu padding-left: 1em @@ -123,4 +175,15 @@ a padding-left: 0em .toolbar-subscribe - display:none \ No newline at end of file + display:none +//Animations +@keyframes toggle-close + 0% + transform: rotate(0deg) + 100% + transform: rotate(45deg) +@keyframes toggle-open + 0% + transform: rotate(45deg) + 100% + transform: rotate(0deg) \ No newline at end of file diff --git a/views/shared/header/menu.jade b/views/shared/header/menu.jade index deff74219d..c2d986de47 100644 --- a/views/shared/header/menu.jade +++ b/views/shared/header/menu.jade @@ -1,22 +1,75 @@ -nav.toolbar(ng-controller='AuthCtrl') - ul.toolbar-mobile-nav - li.toolbar-mobile - a(ng-click='expandMenu("mobile")', ng-class='{active: _expandedMenu=="mobile"}') - span ☰ - div(ng-if='_expandedMenu=="mobile"', ng-click='expandMenu(null)') - h4=env.t('menu') - div - ul.toolbar-submenu - li - a(ui-sref='tasks')=env.t('tasks') - ul.toolbar-submenu +nav.toolbar(ng-controller='AuthCtrl', ng-class='{active: isToolbarHidden}') + button.toolbar-toggle(ng-click='isToolbarHidden = !isToolbarHidden', ng-class='{active: isToolbarHidden}') + span.glyphicon.glyphicon-remove-circle + span.toggle-text.toggle-close=env.t('close') + span.toggle-text.toggle-open=env.t('menu') + .toolbar-container(ng-if='!isToolbarHidden') + ul.toolbar-mobile-nav + li.toolbar-mobile + a(ng-click='expandMenu("mobile")', ng-class='{active: _expandedMenu=="mobile"}') + span ☰ + div(ng-if='_expandedMenu=="mobile"', ng-click='expandMenu(null)') + h4=env.t('menu') + div + ul.toolbar-submenu + li + a(ui-sref='tasks')=env.t('tasks') + ul.toolbar-submenu + 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') + ul.toolbar-submenu + 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') + ul.toolbar-submenu + 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') + ul.toolbar-controls + li.toolbar-subscribe-button + button(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') + li.toolbar-controls-button + a(ng-click='expandMenu(null)')=env.t('close') + ul.toolbar-nav + li.toolbar-button + a(ui-sref='tasks') + span=env.t('tasks') + li.toolbar-button-dropdown + a(ui-sref='options.profile.avatar') + span=env.t('user') + a(ng-click='expandMenu("avatar")', ng-class='{active: _expandedMenu == "avatar"}') + span ☰ + div(ng-if='_expandedMenu == "avatar"') + ul.toolbar-submenu(ng-click='expandMenu(null)') 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') - ul.toolbar-submenu + a(ui-sref='options.profile.profile')=env.t('profile') + li.toolbar-button-dropdown + a(ui-sref='options.social.tavern') + span=env.t('social') + a(ng-click='expandMenu("social")', ng-class='{active: _expandedMenu == "social"}') + span ☰ + div(ng-if='_expandedMenu == "social"') + ul.toolbar-submenu(ng-click='expandMenu(null)') li a(ui-sref='options.social.tavern')=env.t('tavern') li @@ -27,7 +80,13 @@ nav.toolbar(ng-controller='AuthCtrl') a(ui-sref='options.social.challenges')=env.t('challenges') li a(ui-sref='options.social.hall')=env.t('hall') - ul.toolbar-submenu + li.toolbar-button-dropdown + a(ui-sref='options.inventory.drops') + span=env.t('inventory') + a(ng-click='expandMenu("inventory")', ng-class='{active: _expandedMenu == "inventory"}') + span ☰ + div(ng-if='_expandedMenu == "inventory"') + ul.toolbar-submenu(ng-click='expandMenu(null)') li a(ui-sref='options.inventory.drops')=env.t('market') li @@ -36,140 +95,86 @@ nav.toolbar(ng-controller='AuthCtrl') a(ui-sref='options.inventory.mounts')=env.t('mounts') li a(ui-sref='options.inventory.equipment')=env.t('equipment') - ul.toolbar-controls - li.toolbar-subscribe-button - button(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') - li.toolbar-controls-button - a(ng-click='expandMenu(null)')=env.t('close') - ul.toolbar-nav - li.toolbar-button - a(ui-sref='tasks') - span=env.t('tasks') - li.toolbar-button-dropdown - a(ui-sref='options.profile.avatar') - span=env.t('user') - a(ng-click='expandMenu("avatar")', ng-class='{active: _expandedMenu == "avatar"}') - span ☰ - div(ng-if='_expandedMenu == "avatar"') - ul.toolbar-submenu(ng-click='expandMenu(null)') - 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.toolbar-button-dropdown - a(ui-sref='options.social.tavern') - span=env.t('social') - a(ng-click='expandMenu("social")', ng-class='{active: _expandedMenu == "social"}') - span ☰ - div(ng-if='_expandedMenu == "social"') - ul.toolbar-submenu(ng-click='expandMenu(null)') - 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.toolbar-button-dropdown - a(ui-sref='options.inventory.drops') - span=env.t('inventory') - a(ng-click='expandMenu("inventory")', ng-class='{active: _expandedMenu == "inventory"}') - span ☰ - div(ng-if='_expandedMenu == "inventory"') - ul.toolbar-submenu(ng-click='expandMenu(null)') - 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') - ul.toolbar-subscribe - li.toolbar-subscribe-button - button(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') - ul.toolbar-options - li.toolbar-notifs - a(ng-click='expandMenu("notifs")') - span.glyphicon.glyphicon-comment(ng-if='!user.invitations.party.id && !user.purchased.plan.mysteryItems.length && user.invitations.guilds.length === 0', ng-class='{inactive: _.isEmpty(user.newMessages)}') - span.glyphicon.glyphicon-user(ng-if='!user.purchased.plan.mysteryItems.length && (user.invitations.party.id || user.invitations.guilds.length > 0)') - span.glyphicon.glyphicon-gift(ng-if='user.purchased.plan.mysteryItems.length') - div(ng-if='_expandedMenu=="notifs"') - h4=env.t('notifications') - div - ul.toolbar-notifs-notifs - li.toolbar-notifs-no-messages(ng-if='!user.invitations.party.id && !user.purchased.plan.mysteryItems.length && user.invitations.guilds.length === 0 && _.isEmpty(user.newMessages)')=env.t('noNotifications') - li(ng-if='user.purchased.plan.mysteryItems.length') - a(ng-click='$state.go("options.inventory.drops"); expandMenu(null)') - span.glyphicon.glyphicon-gift - span=env.t('newSubscriberItem') - li(ng-if='user.invitations.party.id') - a(ui-sref='options.social.party', ng-click='expandMenu(null)') - span.glyphicon.glyphicon-user - span=env.t('invitedTo', {name: '{{user.invitations.party.name}}'}) - li(ng-repeat='guild in user.invitations.guilds') - a(ui-sref='options.social.guilds', ng-click='expandMenu(null)') - span.glyphicon.glyphicon-user - span=env.t('invitedTo', {name: '{{guild.name}}'}) - 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}); expandMenu(null)') - span.glyphicon.glyphicon-comment - span {{v.name}} - a(ng-click='Groups.seenMessage(k)', popover=env.t('clear'),popover-placement='right',popover-trigger='mouseenter',popover-append-to-body='true') - span.glyphicon.glyphicon-remove-circle - ul.toolbar-controls - //-li - //-a(ng-click='') Clear all - li.toolbar-controls-button - a(ng-click='expandMenu(null)')=env.t('close') - li.toolbar-sync - a(ng-click='User.sync()', popover=env.t('sync'),popover-placement='bottom',popover-trigger='mouseenter') - span.glyphicon.glyphicon-refresh - li.toolbar-settings - a(ng-click='expandMenu("settings")') - span.glyphicon.glyphicon-cog - div(ng-if='_expandedMenu=="settings"') - h4=env.t('settings') - div - ul.toolbar-submenu(ng-click='expandMenu(null)') - li - a(ng-click='logout()')=env.t('logout') - ul.toolbar-submenu(ng-click='expandMenu(null)') - 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.coupon') Coupon - li - a(ui-sref='options.settings.subscription')=env.t('subscription') - ul.toolbar-submenu(ng-click='expandMenu(null)') - li - a(href="http://habitrpg.wikia.com/wiki/FAQ", target='_blank')=env.t('FAQ') - li - a(href="https://vimeo.com/57654086", target='_blank')=env.t('tutorials') - ul.toolbar-controls - li.toolbar-controls-button - a(ng-click='expandMenu(null)')=env.t('close') - ul.toolbar-wallet - li.toolbar-gems - 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 - span.gem-text {{user.balance * 4 | number:0}} - li.toolbar-currency.gold(popover=env.t('gold'), popover-placement='bottom',popover-trigger='mouseenter') - span.shop_gold - span {{Shared.gold(user.stats.gp) | goldRoundThousandsToK}} - li.toolbar-currency.silver(popover=env.t('silver'), popover-placement='bottom',popover-trigger='mouseenter') - span.shop_silver - span {{Shared.silver(user.stats.gp)}} - ul.toolbar-bailey(ng-class='{inactive: !_expandedMenu}') - 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")') \ No newline at end of file + ul.toolbar-subscribe(ng-if='!user.purchased.plan.customerId') + li.toolbar-subscribe-button + button(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') + ul.toolbar-options + li.toolbar-notifs + a(ng-click='expandMenu("notifs")') + span.glyphicon.glyphicon-comment(ng-if='!user.invitations.party.id && !user.purchased.plan.mysteryItems.length && user.invitations.guilds.length === 0', ng-class='{inactive: _.isEmpty(user.newMessages)}') + span.glyphicon.glyphicon-user(ng-if='!user.purchased.plan.mysteryItems.length && (user.invitations.party.id || user.invitations.guilds.length > 0)') + span.glyphicon.glyphicon-gift(ng-if='user.purchased.plan.mysteryItems.length') + div(ng-if='_expandedMenu=="notifs"') + h4=env.t('notifications') + div + ul.toolbar-notifs-notifs + li.toolbar-notifs-no-messages(ng-if='!user.invitations.party.id && !user.purchased.plan.mysteryItems.length && user.invitations.guilds.length === 0 && _.isEmpty(user.newMessages)')=env.t('noNotifications') + li(ng-if='user.purchased.plan.mysteryItems.length') + a(ng-click='$state.go("options.inventory.drops"); expandMenu(null)') + span.glyphicon.glyphicon-gift + span=env.t('newSubscriberItem') + li(ng-if='user.invitations.party.id') + a(ui-sref='options.social.party', ng-click='expandMenu(null)') + span.glyphicon.glyphicon-user + span=env.t('invitedTo', {name: '{{user.invitations.party.name}}'}) + li(ng-repeat='guild in user.invitations.guilds') + a(ui-sref='options.social.guilds', ng-click='expandMenu(null)') + span.glyphicon.glyphicon-user + span=env.t('invitedTo', {name: '{{guild.name}}'}) + 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}); expandMenu(null)') + span.glyphicon.glyphicon-comment + span {{v.name}} + a(ng-click='Groups.seenMessage(k)', popover=env.t('clear'),popover-placement='right',popover-trigger='mouseenter',popover-append-to-body='true') + span.glyphicon.glyphicon-remove-circle + ul.toolbar-controls + //-li + //-a(ng-click='') Clear all + li.toolbar-controls-button + a(ng-click='expandMenu(null)')=env.t('close') + li.toolbar-sync + a(ng-click='User.sync()', popover=env.t('sync'),popover-placement='bottom',popover-trigger='mouseenter') + span.glyphicon.glyphicon-refresh + li.toolbar-settings + a(ng-click='expandMenu("settings")') + span.glyphicon.glyphicon-cog + div(ng-if='_expandedMenu=="settings"') + h4=env.t('settings') + div + ul.toolbar-submenu(ng-click='expandMenu(null)') + li + a(ng-click='logout()')=env.t('logout') + ul.toolbar-submenu(ng-click='expandMenu(null)') + 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.coupon') Coupon + li + a(ui-sref='options.settings.subscription')=env.t('subscription') + ul.toolbar-submenu(ng-click='expandMenu(null)') + li + a(href="http://habitrpg.wikia.com/wiki/FAQ", target='_blank')=env.t('FAQ') + li + a(href="https://vimeo.com/57654086", target='_blank')=env.t('tutorials') + ul.toolbar-controls + li.toolbar-controls-button + a(ng-click='expandMenu(null)')=env.t('close') + ul.toolbar-wallet + li.toolbar-gems + 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 + span.gem-text {{user.balance * 4 | number:0}} + li.toolbar-currency.gold(popover=env.t('gold'), popover-placement='bottom',popover-trigger='mouseenter') + span.shop_gold + span {{Shared.gold(user.stats.gp) | goldRoundThousandsToK}} + li.toolbar-currency.silver(popover=env.t('silver'), popover-placement='bottom',popover-trigger='mouseenter') + span.shop_silver + span {{Shared.silver(user.stats.gp)}} + ul.toolbar-bailey(ng-class='{inactive: !_expandedMenu}') + 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")') \ No newline at end of file