diff --git a/public/css/avatar.styl b/public/css/avatar.styl index 5afe496a29..2f08387d30 100644 --- a/public/css/avatar.styl +++ b/public/css/avatar.styl @@ -27,7 +27,7 @@ future re: pets and whatnot, this is just temporary. margin: 0 // need this b/c of bootstrap, remove or reset later position: relative cursor: pointer - background: #f5f5f5 + background: $color-herobox transition: border 0.25s ease-out, background 0.25s ease-out//, padding 0.13s ease-out outline: 1px solid rgba(0,0,0,0.1) // padding: 0 // push down the sprite @@ -53,7 +53,7 @@ future re: pets and whatnot, this is just temporary. .herobox.isUser:not(.hasMount):after opacity: 1 // make it a bit special - background darken($better, 15%) + background darken($color-herobox, 15%) .character-sprites span position: absolute @@ -65,6 +65,7 @@ future re: pets and whatnot, this is just temporary. // if not user's avatar, remove lines for party unity .herobox:not(.isUser) outline: 0 + background-color: darken($color-herobox, 8%) // vertically center avatar sprite depending on if they have a pet .herobox.hasPet @@ -77,7 +78,7 @@ future re: pets and whatnot, this is just temporary. // expose hero info on hover, taking // into account the extra pet space .herobox:hover, .herobox:focus - background: desaturate(lighten($better, 30%), 10%) + background: lighten($color-herobox, 30%) &:after opacity: 1 @@ -92,4 +93,4 @@ future re: pets and whatnot, this is just temporary. position: absolute .herobox.isLeader - background: $better \ No newline at end of file + background: lighten($color-herobox, 10%) \ No newline at end of file diff --git a/public/css/color-vars.styl b/public/css/color-vars.styl index 2b2250be6f..fe84027b98 100644 --- a/public/css/color-vars.styl +++ b/public/css/color-vars.styl @@ -6,4 +6,6 @@ $neutral = rgb(255, 242, 204) $good = rgb(217, 234, 211) $better = rgb(208, 224, 227) $best = rgb(201, 218, 248) -$completed = rgb(217, 217, 217) \ No newline at end of file +$completed = rgb(217, 217, 217) +// avatar background color variables +$color-herobox = desaturate(lighten($better, 16%),32%) diff --git a/public/css/header.styl b/public/css/header.styl index 2b1fbf6aab..ae439b6558 100644 --- a/public/css/header.styl +++ b/public/css/header.styl @@ -2,9 +2,11 @@ -------------------- */ .header-wrap width: 100% // this is for the sticky - padding: 0 + padding: 54px 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 - background: #f5f5f5 + background-color: darken($color-herobox, 8%) border-bottom: 1px solid rgba(0,0,0,0.2) // margin-top: -1px overflow-y: hidden @@ -110,7 +112,9 @@ display: table-cell vertical-align: middle min-width:175px - + background-color: darken($color-herobox, 4%) + border-right: 1px solid darken($color-herobox, 12%) + .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..7076ea4c1b --- /dev/null +++ b/public/css/menu.styl @@ -0,0 +1,112 @@ +// Custom styles for the menu aka toolbar aka navbar +.navbar + 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 +// Mobile menu button +.navbar-header + position:absolute + top:0 + right:45px + button + margin-right:0 +// Top level menu items: Tasks – Options +.navbar-menu + float:left; + li + display:inline-block + height:52px + 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 + .glyphicon-chevron-down + position:relative + top:3px + transition: all 0.32s 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 +.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 +@media screen and (min-width:768px) + .navbar + position:fixed +@media screen and (max-width:768px) + .navbar-info.inactive + display:none; 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..9b984553cd 100644 --- a/views/shared/header/menu.jade +++ b/views/shared/header/menu.jade @@ -1,128 +1,112 @@ -a.collapse-toolbar(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 +nav.navbar(ng-controller='AuthCtrl') + 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=env.t('tasks') + li + 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-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(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.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(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 diff --git a/views/shared/tasks/lists.jade b/views/shared/tasks/lists.jade index ce41f56ea6..c2007e8a5b 100644 --- a/views/shared/tasks/lists.jade +++ b/views/shared/tasks/lists.jade @@ -16,15 +16,6 @@ script(id='templates/habitrpg-tasks.html', type="text/ng-template") span.glyphicon.glyphicon-calendar // - // Gold & Gems - span.option-box.pull-right.wallet(bo-if='main && list.type=="reward"') - .money - | {{Shared.gold(user.stats.gp)}} - span.shop_gold(tooltip=env.t('gold')) - .money - | {{Shared.silver(user.stats.gp)}} - span.shop_silver(tooltip=env.t('silver')) - // Header h2.task-column_title {{list.header}}