diff --git a/public/css/header.styl b/public/css/header.styl index ae439b6558..f8a2a6c415 100644 --- a/public/css/header.styl +++ b/public/css/header.styl @@ -2,7 +2,7 @@ -------------------- */ .header-wrap width: 100% // this is for the sticky - padding: 54px 0 0 0 // add padding-top when navbar is fixed + padding: 50px 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 diff --git a/public/css/menu.styl b/public/css/menu.styl index 928a0de9d9..21fca18ce2 100644 --- a/public/css/menu.styl +++ b/public/css/menu.styl @@ -1,148 +1,106 @@ // Custom styles for the menu aka toolbar aka navbar -.navbar +.toolbar width:100%; top:0 left:0 z-index:998 color: #222 - background-color: #f5f5f5 - border: none; - border-bottom: 1px solid rgba(0,0,0,0.2) - border-radius:0px - margin-bottom:0px - min-height:52px - > div - padding-left:8px - .glyphicon - color:#5d5d5d - .caret - color:#9d9d9d - .gem-wallet - padding-top:4px - padding-bottom:8px - height:52px - .Pet_Currency_Gem2x.Gems - position:relative - top:8px - .currency - min-height:52px - padding-top:16px - padding-right:16px + background-color: lighten($color-herobox, 60%) + border-bottom: 1px solid darken($color-herobox, 12%) + > ul > li + display: inline-block // Mobile menu button -.navbar-header - position:absolute - top:0 - right:45px - button - margin-right:0 -// Top level menu items: Tasks – Options -.navbar-menu +.toolbar-mobile-nav + float:left + @media screen and (min-width:768px) + display: none +.toolbar-mobile + @extend $hrpg-button + @extend $hrpg-modal-dropdown-right +// Top level menu items: Tasks – User – Social – Inventory +.toolbar-nav float:left; - li - display:inline-block - height:52px - a - display:block + padding: 10px + @media screen and (max-width:768px) + display: none + > li + //border-right: 1px solid #ccc + margin-right: 10px + .toolbar-button-dropdown + @extend $hrpg-button-toggle + @extend $hrpg-modal-dropdown-right + .toolbar-button + @extend $hrpg-button + > a + display:inline-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 + background-color: #eee &:active color:#000 - .toolbar-toggle - margin-left:0px - padding-left:4px - padding-right:4px - font-size:12px - .glyphicon - color:#9d9d9d - .glyphicon-chevron-down - position:relative - top:2px - transition: all 0.26s linear - .glyphicon-chevron-down.active - top:0px - transform: rotate(180deg) -// Information bar: Bailey – notifs – currency – subscribe button -.navbar-info - float:right - min-height:52px - // padding-right:25px - li - display:inline-block - button - margin-top: 8px - margin-bottom: 8px -@media screen and (max-width:768px) - .navbar-menu - float:none - .navbar-info - width:100% -.toolbar-sync - margin-left:4px - a - padding:8px !important -// Navigation submenu + @media screen and (max-width:768px) + padding: 10px 8px .toolbar-submenu - background-color:#eee - border-top: 1px solid rgba(0,0,0,0.2) - > li + ul + padding-left: 0px !important + li + margin-right: 16px 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 -@media screen and (min-width:768px) - .navbar - position:fixed + color:#ccc +// Information bar: Bailey – notifs – currency – subscribe button +.toolbar-bailey, .toolbar-wallet, .toolbar-options + float:right + padding: 10px 10px 10px 0 +.toolbar-wallet + .gem-wallet + margin-left:8px + .Gems + margin-top: 3px + span + display:inline-block + vertical-align:top + padding-top:5px + .toolbar-currency + margin-left:16px + padding: 5px 8px !important + margin:0px + vertical-align:top @media screen and (max-width:768px) - .navbar-info.inactive - display:none; - + .toolbar + > ul + float: none + margin: 0px 4px 4px 4px + .toolbar-bailey + float:right +.toolbar-options + > li + margin-left: 8px +.toolbar-sync, .toolbar-settings + @extend $hrpg-button +.toolbar-subscribe + @extend $hrpg-button-call-to-action +@media screen and (min-width:768px) + .toolbar + position:fixed // Notifications icon and dropdown .toolbar-notifs - position: relative - z-index:11000 + @extend $hrpg-button + @extend $hrpg-modal-dropdown-left-heading + > a span.inactive + opacity: 0.236 !important div - position: absolute - top: 54px - left:-128px width:300px - border:1px solid #b5b5b5 - border-radius:4px - background-color:#fff - h4 - font-size: 16px - margin:0px - border-radius:4px 4px 0px 0px - background-color: #f7f7f7 - border-bottom:1px solid #ccc - h4, ul - padding: 10px 16px + @media screen and (max-width:768px) + width:96% .toolbar-notifs-notifs padding-bottom:16px - max-height: 63vh - overflow: auto + max-height: 63% li - display: block position: relative - margin-bottom:10px .glyphicon margin-right: 10px height: 100% @@ -157,54 +115,14 @@ margin-right: 0px color:#9d9d9d &:after - content:'' - position:absolute - top:-9px - left:142px - z-index:2 - width:16px - height:16px - border-top:1px solid #b5b5b5 - border-left:1px solid #b5b5b5 - background-color: #f7f7f7 - transform: rotate(45deg) - -.toolbar-notifs-controls - text-align: right - border-top:1px solid #ccc - border-radius:0px 0px 4px 4px - background-color: #fff + right:26px +// Settings dropdown +.toolbar-settings + @extend $hrpg-modal-dropdown-left-heading +.toolbar-controls + @extend $hrpg-modal-controls li - margin-left: 10px - a - display: block - padding: 2px 4px - border: 1px solid #ccc - border-radius: 4px - text-decoration:none - color:#222 - a:active - background-color: #eee - @media screen and (min-width:768px) - a:hover - background-color: #f5f5f5 - -@media screen and (max-width:768px) - .toolbar-notifs - div - position:fixed - overflow: auto - z-index: 2000 - top: 2vh - left: 2vw - width: 96vw - height: 96vh - box-shadow: - 0 0 0 30px rgba(0,0,0,0.63) - &:after - display: none - .toolbar-notifs-controls - width: 100% - position: absolute - bottom:0 - right:0 \ No newline at end of file + @extend $hrpg-button +.toolbar-settings .toolbar-controls + @media screen and (min-width:768px) + display:none \ No newline at end of file diff --git a/public/css/npcs.styl b/public/css/npcs.styl index f4b7be0718..bd9edb3658 100644 --- a/public/css/npcs.styl +++ b/public/css/npcs.styl @@ -6,13 +6,13 @@ .toolbar-bailey-container width:55px - margin-right:8px + margin-right:16px position:relative .npc_bailey float:left .npc_bailey_head position: absolute - top: -24px + top: -18px height:45px !important cursor: pointer diff --git a/views/shared/header/menu.jade b/views/shared/header/menu.jade index 4c83ab9936..b6e41c0914 100644 --- a/views/shared/header/menu.jade +++ b/views/shared/header/menu.jade @@ -1,134 +1,183 @@ -nav.navbar(ng-controller='AuthCtrl') - ul.navbar-menu - li +nav.toolbar(ng-controller='AuthCtrl') + ul.toolbar-mobile-nav + li.toolbar-mobile + a(ng-click='user.preferences.mobileMenuExpanded = !user.preferences.mobileMenuExpanded', ng-class='{active: user.preferences.mobileMenuExpanded}') + span ☰ + div(ng-if='user.preferences.mobileMenuExpanded') + h4 + span=env.t('options') + ul.toolbar-submenu + li + span.glyphicon.glyphicon-check + span=env.t('tasks') + ul + li + a(ui-sref='tasks', ng-click='set({"preferences.menuExpanded":false})')=env.t('tasks') + li + span.glyphicon.glyphicon-user + span=env.t('user') + ul + li + a(ui-sref='options.profile.avatar', ng-click='set({"preferences.menuExpanded":false})')=env.t('avatar') + li + a(ui-sref='options.profile.stats', ng-click='set({"preferences.menuExpanded":false})')=env.t('stats') + li + a(ui-sref='options.profile.profile', ng-click='set({"preferences.menuExpanded":false})')=env.t('profile') + li + span.glyphicon.glyphicon-heart + span=env.t('social') + ul + li + a(ui-sref='options.social.tavern', ng-click='set({"preferences.menuExpanded":false})')=env.t('tavern') + li + a(ui-sref='options.social.party', ng-click='set({"preferences.menuExpanded":false})')=env.t('party') + li + a(ui-sref='options.social.guilds', ng-click='set({"preferences.menuExpanded":false})')=env.t('guilds') + li + a(ui-sref='options.social.challenges', ng-click='set({"preferences.menuExpanded":false})')=env.t('challenges') + li + a(ui-sref='options.social.hall', ng-click='set({"preferences.menuExpanded":false})')=env.t('hall') + li + span.glyphicon.glyphicon-gift + span=env.t('inventory') + ul + li + a(ui-sref='options.inventory.drops', ng-click='set({"preferences.menuExpanded":false})')=env.t('market') + li + a(ui-sref='options.inventory.pets', ng-click='set({"preferences.menuExpanded":false})')=env.t('pets') + li + a(ui-sref='options.inventory.mounts', ng-click='set({"preferences.menuExpanded":false})')=env.t('mounts') + li + a(ui-sref='options.inventory.equipment', ng-click='set({"preferences.menuExpanded":false})')=env.t('equipment') + ul.toolbar-controls + li + a(ng-click='set({"preferences.mobileMenuExpanded":false})') + | X + ul.toolbar-nav + li.toolbar-button a(ui-sref='tasks') span=env.t('tasks') - li + li.toolbar-button-dropdown a(ui-sref='options.profile.avatar') - span=env.t('options') - li - a.toolbar-toggle(ng-click='user.preferences.menuExpanded = !user.preferences.menuExpanded') - span.glyphicon.glyphicon-chevron-down(ng-class='{active: user.preferences.menuExpanded}') - .collapse.navbar-collapse(collapse="isNavbarCollapsed") - ul.nav.navbar-info(ng-class='{inactive: !user.preferences.menuExpanded}') - 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(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(popover=env.t('invitedTo', {name: '{{guild.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(popover=env.t('newSubscriberItem'),popover-placement='bottom',popover-trigger='mouseenter',popover-append-to-body='true') - // Notifications - li.toolbar-notifs - a(ng-click='user.preferences.isNotifsExpanded = !user.preferences.isNotifsExpanded') - span.glyphicon.glyphicon-comment - div(ng-if='user.preferences.isNotifsExpanded') - h4 Notifs - ul.toolbar-notifs-notifs - li(ng-if='user.invitations.party.id') - a(ui-sref='options.social.party', ng-click='user.preferences.isNotifsExpanded = !user.preferences.isNotifsExpanded; user.preferences.menuExpanded = !user.preferences.menuExpanded') - 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='user.preferences.isNotifsExpanded = !user.preferences.isNotifsExpanded; user.preferences.menuExpanded = !user.preferences.menuExpanded') - 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}); user.preferences.isNotifsExpanded = !user.preferences.isNotifsExpanded; user.preferences.menuExpanded = !user.preferences.menuExpanded') - span.glyphicon.glyphicon-comment - span {{v.name}} - a(ng-click='') - span.glyphicon.glyphicon-remove-circle(popover=env.t('clear'),popover-placement='right',popover-trigger='mouseenter',popover-append-to-body='true') - ul.toolbar-notifs-controls - li - a(ng-click='') Clear all - li - a(ng-click='user.preferences.isNotifsExpanded = !user.preferences.isNotifsExpanded')=env.t('close') - 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(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(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.toolbar-sync - a(ng-click='User.sync()',popover=env.t('sync'),popover-placement='bottom',popover-trigger='mouseenter') - span.glyphicon.glyphicon-refresh - ul.nav.toolbar-submenu(ng-if='user.preferences.menuExpanded') - li - span.glyphicon.glyphicon-user - span=env.t('user') - ul - li - a(ui-sref='options.profile.avatar', ng-click='set({"preferences.menuExpanded":false})')=env.t('avatar') - li - a(ui-sref='options.profile.stats', ng-click='set({"preferences.menuExpanded":false})')=env.t('stats') - li - a(ui-sref='options.profile.profile', ng-click='set({"preferences.menuExpanded":false})')=env.t('profile') - li - a(ng-click='logout()') - span=env.t('logout') - li - span.glyphicon.glyphicon-heart - span=env.t('social') - ul - li - a(ui-sref='options.social.tavern', ng-click='set({"preferences.menuExpanded":false})')=env.t('tavern') - li - a(ui-sref='options.social.party', ng-click='set({"preferences.menuExpanded":false})')=env.t('party') - li - a(ui-sref='options.social.guilds', ng-click='set({"preferences.menuExpanded":false})')=env.t('guilds') - li - a(ui-sref='options.social.challenges', ng-click='set({"preferences.menuExpanded":false})')=env.t('challenges') - li - a(ui-sref='options.social.hall', ng-click='set({"preferences.menuExpanded":false})')=env.t('hall') - li - span.glyphicon.glyphicon-gift - span=env.t('inventory') - ul - li - a(ui-sref='options.inventory.drops', ng-click='set({"preferences.menuExpanded":false})')=env.t('market') - li - a(ui-sref='options.inventory.pets', ng-click='set({"preferences.menuExpanded":false})')=env.t('pets') - li - a(ui-sref='options.inventory.mounts', ng-click='set({"preferences.menuExpanded":false})')=env.t('mounts') - li - a(ui-sref='options.inventory.equipment', ng-click='set({"preferences.menuExpanded":false})')=env.t('equipment') - li - span.glyphicon.glyphicon-wrench - span=env.t('settings') - ul - li - a(ui-sref='options.settings.settings', ng-click='set({"preferences.menuExpanded":false})')=env.t('site') - li - a(ui-sref='options.settings.api', ng-click='set({"preferences.menuExpanded":false})')=env.t('API') - li - a(ui-sref='options.settings.export', ng-click='set({"preferences.menuExpanded":false})')=env.t('export') - li - a(ui-sref='options.settings.subscription', ng-click='set({"preferences.menuExpanded":false})')=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', ng-click='set({"preferences.menuExpanded":false})') - span=env.t('FAQ') - li - a(href="https://vimeo.com/57654086", target='_blank', ng-click='set({"preferences.menuExpanded":false})') - span=env.t('tutorials') \ No newline at end of file + span=env.t('user') + a(ng-click='user.preferences.avatarMenuExpanded = !user.preferences.avatarMenuExpanded', ng-class='{active: user.preferences.avatarMenuExpanded}') + span ☰ + div(ng-if='user.preferences.avatarMenuExpanded') + ul.toolbar-submenu + li + a(ui-sref='options.profile.avatar', ng-click='set({"preferences.menuExpanded":false})')=env.t('avatar') + li + a(ui-sref='options.profile.stats', ng-click='set({"preferences.menuExpanded":false})')=env.t('stats') + li + a(ui-sref='options.profile.profile', ng-click='set({"preferences.menuExpanded":false})')=env.t('profile') + li.toolbar-button-dropdown + a(ui-sref='options.social.tavern') + span=env.t('social') + a(ng-click='user.preferences.socialMenuExpanded = !user.preferences.socialMenuExpanded', ng-class='{active: user.preferences.socialMenuExpanded}') + span ☰ + div(ng-if='user.preferences.socialMenuExpanded') + ul.toolbar-submenu + li + a(ui-sref='options.social.tavern', ng-click='set({"preferences.menuExpanded":false})')=env.t('tavern') + li + a(ui-sref='options.social.party', ng-click='set({"preferences.menuExpanded":false})')=env.t('party') + li + a(ui-sref='options.social.guilds', ng-click='set({"preferences.menuExpanded":false})')=env.t('guilds') + li + a(ui-sref='options.social.challenges', ng-click='set({"preferences.menuExpanded":false})')=env.t('challenges') + li + a(ui-sref='options.social.hall', ng-click='set({"preferences.menuExpanded":false})')=env.t('hall') + li.toolbar-button-dropdown + a(ui-sref='options.inventory.drops') + span=env.t('inventory') + a(ng-click='user.preferences.inventoryMenuExpanded = !user.preferences.inventoryMenuExpanded', ng-class='{active: user.preferences.inventoryMenuExpanded}') + span ☰ + div(ng-if='user.preferences.inventoryMenuExpanded') + ul.toolbar-submenu + li + a(ui-sref='options.inventory.drops', ng-click='set({"preferences.menuExpanded":false})')=env.t('market') + li + a(ui-sref='options.inventory.pets', ng-click='set({"preferences.menuExpanded":false})')=env.t('pets') + li + a(ui-sref='options.inventory.mounts', ng-click='set({"preferences.menuExpanded":false})')=env.t('mounts') + li + a(ui-sref='options.inventory.equipment', ng-click='set({"preferences.menuExpanded":false})')=env.t('equipment') + ul.toolbar-options + li.toolbar-notifs + a(ng-click='user.preferences.isNotifsExpanded = !user.preferences.isNotifsExpanded') + 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='user.preferences.isNotifsExpanded') + h4 Notifications + ul.toolbar-notifs-notifs + li(ng-if='user.purchased.plan.mysteryItems.length') + a(ng-click='$state.go("options.inventory.drops"); user.preferences.isNotifsExpanded = !user.preferences.isNotifsExpanded; set({"preferences.menuExpanded":false})') + span.glyphicon.glyphicon-gift + span=env.t('newSubscriberItem') + li(ng-if='user.invitations.party.id') + a(ui-sref='options.social.party', ng-click='user.preferences.isNotifsExpanded = !user.preferences.isNotifsExpanded; set({"preferences.menuExpanded":false})') + 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='user.preferences.isNotifsExpanded = !user.preferences.isNotifsExpanded; set({"preferences.menuExpanded":false})') + 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}); user.preferences.isNotifsExpanded = !user.preferences.isNotifsExpanded; set({"preferences.menuExpanded":false})') + span.glyphicon.glyphicon-comment + span {{v.name}} + //-a(ng-click='') + //-span.glyphicon.glyphicon-remove-circle(popover=env.t('clear'),popover-placement='right',popover-trigger='mouseenter',popover-append-to-body='true') + //-ul.toolbar-controls + //-li + a(ng-click='') Clear all + //-li + //-a(ng-click='user.preferences.isNotifsExpanded = !user.preferences.isNotifsExpanded; set({"preferences.menuExpanded":false})') + //-| X + 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='user.preferences.isSettingsExpanded = !user.preferences.isSettingsExpanded') + span.glyphicon.glyphicon-cog + div(ng-if='user.preferences.isSettingsExpanded') + h4=env.t('settings') + ul + li + a(ng-click='logout()') + span=env.t('logout') + li + a(ui-sref='options.settings.settings', ng-click='set({"preferences.isSettingsExpanded":false})')=env.t('site') + li + a(ui-sref='options.settings.api', ng-click='set({"preferences.isSettingsExpanded":false})')=env.t('API') + li + a(ui-sref='options.settings.export', ng-click='set({"preferences.isSettingsExpanded":false})')=env.t('export') + li + a(ui-sref='options.settings.subscription', ng-click='set({"preferences.isSettingsExpanded":false})')=env.t('subscription') + li + a(href="http://habitrpg.wikia.com/wiki/FAQ", target='_blank', ng-click='set({"preferences.menuExpanded":false})') + span=env.t('FAQ') + li + a(href="https://vimeo.com/57654086", target='_blank', ng-click='set({"preferences.menuExpanded":false})') + span=env.t('tutorials') + ul.toolbar-controls + li + a(ng-click='set({"preferences.isSettingsExpanded":false})')=env.t('close') + li.toolbar-subscribe + 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-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(popover=env.t('gold'), popover-placement='bottom',popover-trigger='mouseenter') + span.shop_gold + span {{Shared.gold(user.stats.gp)}} + li.toolbar-currency(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: !user.preferences.menuExpanded}') + 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