diff --git a/public/css/global-colors.styl b/public/css/global-colors.styl index a3ba8533a3..ec293df274 100644 --- a/public/css/global-colors.styl +++ b/public/css/global-colors.styl @@ -7,7 +7,9 @@ $good = rgb(217, 234, 211) $better = rgb(208, 224, 227) $best = rgb(201, 218, 248) $completed = rgb(217, 217, 217) -// avatar background color variables +// avatar background colors $color-herobox = desaturate(lighten($better, 16%),32%) +// toolbar background colors +$color-toolbar = lighten($color-herobox, 70%) // button color variables $color-button-style-one = $best \ No newline at end of file diff --git a/public/css/global-modules.styl b/public/css/global-modules.styl index 7a34ea8987..30459d8c5b 100644 --- a/public/css/global-modules.styl +++ b/public/css/global-modules.styl @@ -1,12 +1,24 @@ // Buttons // The !important declarations override Bootstrap +hrpg-button-color-mixin($hrpg-button-color) + > a, button + background-color: $hrpg-button-color !important + color: darken($hrpg-button-color, 61.8%) !important + border-color: darken($hrpg-button-color, 16.18%) !important + &:active + background-color: darken($hrpg-button-color, 10%) !important + @media screen and (min-width:768px) + &:hover + background-color: darken($hrpg-button-color, 3.82%) !important + > a:nth-of-type(2) + border-left: 1px solid darken($hrpg-button-color, 3.82%) !important $hrpg-button-master list-style: none > a, button display: inline-block !important - padding: 4px 8px !important + padding: 0.25em 0.5em !important text-decoration:none - font-size: 16px + font-size: 1em color:#222 background-color: transparent &:active @@ -18,37 +30,28 @@ $hrpg-button @extend $hrpg-button-master > a, button border: 1px solid #ccc !important - border-radius: 4px !important + border-radius: 0.382em !important $hrpg-button-call-to-action @extend $hrpg-button - > a, button - background-color: $color-button-style-one !important - color: darken($color-button-style-one, 61.8%) - border-color: darken($color-button-style-one, 16.18%) !important - @media screen and (min-width:768px) - &:hover - background-color: darken($color-button-style-one, 6.18%) !important + hrpg-button-color-mixin($color-button-style-one) $hrpg-button-toggle @extend $hrpg-button-master border: 1px solid #ccc !important - border-radius: 4px !important + border-radius: 0.382em !important > a:first-of-type - border-radius: 4px 0px 0px 4px !important + border-radius: 0.382em 0em 0em 0.382em !important > a:nth-of-type(2) - border-radius: 0px 4px 4px 0px !important + border-radius: 0em 0.382em 0.382em 0em !important // Modals $hrpg-modal position: relative - > a - .glyphicon - padding-left:2px - padding-right:2px $hrpg-modal-dropdown @extend $hrpg-modal div position: absolute - top: 48px + top: 3em min-width:110px + min-height: 68px border:1px solid #b5b5b5 border-radius:4px background-color:#fff @@ -64,23 +67,25 @@ $hrpg-modal-dropdown &:after display: none h4 - font-size: 16px + font-size: 1.2em margin:0px background-color: #f7f7f7 border-top:1px solid #ccc border-bottom:1px solid #ccc h4:first-of-type border-top: none - border-radius:4px 4px 0px 0px - h4, ul - padding: 10px 16px + border-radius:0.382em 0.382em 0em 0px + h4 + padding: 0.618em 0.8333em + ul + padding: 0.618em 1em ul:last-child padding-bottom:0px ul list-style: none overflow: auto li - margin-bottom:10px + margin-bottom: 1em &:after content:'' position:absolute @@ -98,7 +103,7 @@ $hrpg-modal-dropdown-left div right: 0px &:after - right: 16px + right: 1em $hrpg-modal-dropdown-left-heading @extend $hrpg-modal-dropdown-left div @@ -110,19 +115,18 @@ $hrpg-modal-dropdown-right div left: 0px &:after - left: 16px + left: 1em $hrpg-modal-controls text-align: right border-top:1px solid #eee - border-radius:0px 0px 4px 4px + border-radius:0px 0px 0.382em 0.382em li margin-left: 10px display: inline-block + background-color: #fff @media screen and (max-width:768px) width: 100% position: fixed bottom:2% right:0 - border: none - a - background-color: red \ No newline at end of file + border: none \ No newline at end of file diff --git a/public/css/header.styl b/public/css/header.styl index f8a2a6c415..d94cd3aea2 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: 50px 0 0 0 // add padding-top when navbar is fixed + 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 diff --git a/public/css/menu.styl b/public/css/menu.styl index 21fca18ce2..62f1b67bd4 100644 --- a/public/css/menu.styl +++ b/public/css/menu.styl @@ -4,14 +4,15 @@ top:0 left:0 z-index:998 - color: #222 - background-color: lighten($color-herobox, 60%) + background-color: $color-toolbar border-bottom: 1px solid darken($color-herobox, 12%) > ul > li display: inline-block // Mobile menu button .toolbar-mobile-nav - float:left + display: inline-block + padding-left: 0.618em + padding-right: 0.618em @media screen and (min-width:768px) display: none .toolbar-mobile @@ -20,17 +21,18 @@ // Top level menu items: Tasks – User – Social – Inventory .toolbar-nav float:left; - padding: 10px + padding: 0.618em @media screen and (max-width:768px) display: none > li - //border-right: 1px solid #ccc - margin-right: 10px + margin-right: 0.618em .toolbar-button-dropdown @extend $hrpg-button-toggle @extend $hrpg-modal-dropdown-right + hrpg-button-color-mixin($color-toolbar) .toolbar-button @extend $hrpg-button + hrpg-button-color-mixin($color-toolbar) > a display:inline-block height:100% @@ -40,48 +42,44 @@ background-color: #eee &:active color:#000 - @media screen and (max-width:768px) - padding: 10px 8px .toolbar-submenu - ul - padding-left: 0px !important li - margin-right: 16px + margin-right: 1em + > li > ul > li display:inline-block - .glyphicon - margin-right:8px - color:#ccc + .glyphicon + margin-right: 0.618em + color:#ccc // Information bar: Bailey – notifs – currency – subscribe button -.toolbar-bailey, .toolbar-wallet, .toolbar-options +.toolbar-bailey, .toolbar-wallet, .toolbar-options, .toolbar-subscribe float:right - padding: 10px 10px 10px 0 + padding: 0.618em 0.618em 0.618em 0 + @media screen and (max-width:768px) + float: none + display: inline-block + padding: 0.618em 0.382em 0.618em 0 .toolbar-wallet .gem-wallet - margin-left:8px .Gems - margin-top: 3px + margin-top: 0em 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) - .toolbar - > ul - float: none - margin: 0px 4px 4px 4px - .toolbar-bailey - float:right -.toolbar-options + padding-top: 0.382em +.toolbar-currency + padding-top: 0.236em + padding-bottom: 0.236em + vertical-align:top +.toolbar-currency.gold + color: darken($neutral,61,8%) +.toolbar-currency.silver + color: #999 +.toolbar-options, .toolbar-wallet > li - margin-left: 8px + margin-left: 0.618em .toolbar-sync, .toolbar-settings @extend $hrpg-button -.toolbar-subscribe +.toolbar-subscribe li @extend $hrpg-button-call-to-action @media screen and (min-width:768px) .toolbar @@ -97,25 +95,23 @@ @media screen and (max-width:768px) width:96% .toolbar-notifs-notifs - padding-bottom:16px + padding-bottom:1em max-height: 63% li position: relative .glyphicon - margin-right: 10px + margin-right: 0.618em height: 100% a display:inline-block a:nth-of-type(1) - margin-right: 26px + margin-right: 1.618em a:nth-of-type(2) position:absolute right:0px .glyphicon-remove-circle margin-right: 0px color:#9d9d9d - &:after - right:26px // Settings dropdown .toolbar-settings @extend $hrpg-modal-dropdown-left-heading diff --git a/public/css/npcs.styl b/public/css/npcs.styl index bd9edb3658..f99ad54e1c 100644 --- a/public/css/npcs.styl +++ b/public/css/npcs.styl @@ -6,16 +6,17 @@ .toolbar-bailey-container width:55px - margin-right:16px + margin-right:0.618em position:relative + @media screen and (max-width:768px) + margin-right:0px .npc_bailey float:left .npc_bailey_head position: absolute - top: -18px + top: -23px height:45px !important cursor: pointer - // Tour (Justin) .npc_justin.float-left float: left diff --git a/views/shared/header/menu.jade b/views/shared/header/menu.jade index b6e41c0914..cbe84e7399 100644 --- a/views/shared/header/menu.jade +++ b/views/shared/header/menu.jade @@ -51,8 +51,7 @@ nav.toolbar(ng-controller='AuthCtrl') 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 + a(ng-click='set({"preferences.mobileMenuExpanded":false})')=env.t('close') ul.toolbar-nav li.toolbar-button a(ui-sref='tasks') @@ -63,45 +62,48 @@ nav.toolbar(ng-controller='AuthCtrl') 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 + ul.toolbar-submenu(ng-click='set({"preferences.avatarMenuExpanded":false})') li - a(ui-sref='options.profile.avatar', ng-click='set({"preferences.menuExpanded":false})')=env.t('avatar') + a(ui-sref='options.profile.avatar')=env.t('avatar') li - a(ui-sref='options.profile.stats', ng-click='set({"preferences.menuExpanded":false})')=env.t('stats') + a(ui-sref='options.profile.stats')=env.t('stats') li - a(ui-sref='options.profile.profile', ng-click='set({"preferences.menuExpanded":false})')=env.t('profile') + 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='user.preferences.socialMenuExpanded = !user.preferences.socialMenuExpanded', ng-class='{active: user.preferences.socialMenuExpanded}') span ☰ div(ng-if='user.preferences.socialMenuExpanded') - ul.toolbar-submenu + ul.toolbar-submenu(ng-click='set({"preferences.socialMenuExpanded":false})') li - a(ui-sref='options.social.tavern', ng-click='set({"preferences.menuExpanded":false})')=env.t('tavern') + a(ui-sref='options.social.tavern')=env.t('tavern') li - a(ui-sref='options.social.party', ng-click='set({"preferences.menuExpanded":false})')=env.t('party') + a(ui-sref='options.social.party')=env.t('party') li - a(ui-sref='options.social.guilds', ng-click='set({"preferences.menuExpanded":false})')=env.t('guilds') + a(ui-sref='options.social.guilds')=env.t('guilds') li - a(ui-sref='options.social.challenges', ng-click='set({"preferences.menuExpanded":false})')=env.t('challenges') + a(ui-sref='options.social.challenges')=env.t('challenges') li - a(ui-sref='options.social.hall', ng-click='set({"preferences.menuExpanded":false})')=env.t('hall') + 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='user.preferences.inventoryMenuExpanded = !user.preferences.inventoryMenuExpanded', ng-class='{active: user.preferences.inventoryMenuExpanded}') span ☰ div(ng-if='user.preferences.inventoryMenuExpanded') - ul.toolbar-submenu + ul.toolbar-submenu(ng-click='set({"preferences.inventoryMenuExpanded":false})') li - a(ui-sref='options.inventory.drops', ng-click='set({"preferences.menuExpanded":false})')=env.t('market') + a(ui-sref='options.inventory.drops')=env.t('market') li - a(ui-sref='options.inventory.pets', ng-click='set({"preferences.menuExpanded":false})')=env.t('pets') + a(ui-sref='options.inventory.pets')=env.t('pets') li - a(ui-sref='options.inventory.mounts', ng-click='set({"preferences.menuExpanded":false})')=env.t('mounts') + a(ui-sref='options.inventory.mounts')=env.t('mounts') li - a(ui-sref='options.inventory.equipment', ng-click='set({"preferences.menuExpanded":false})')=env.t('equipment') + a(ui-sref='options.inventory.equipment')=env.t('equipment') + ul.toolbar-subscribe + li + 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='user.preferences.isNotifsExpanded = !user.preferences.isNotifsExpanded') @@ -111,6 +113,8 @@ nav.toolbar(ng-controller='AuthCtrl') div(ng-if='user.preferences.isNotifsExpanded') h4 Notifications ul.toolbar-notifs-notifs + li(ng-if='!user.invitations.party.id && !user.purchased.plan.mysteryItems.length && user.invitations.guilds.length === 0 && _.isEmpty(user.newMessages)') + | You have no new messages. 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 @@ -127,14 +131,13 @@ nav.toolbar(ng-controller='AuthCtrl') 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 + a(ng-click='Groups.seenMessage(k)') + 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 + //-a(ng-click='') Clear all + li + a(ng-click='user.preferences.isNotifsExpanded = !user.preferences.isNotifsExpanded; set({"preferences.menuExpanded":false})')=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 @@ -164,18 +167,16 @@ nav.toolbar(ng-controller='AuthCtrl') 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') + li.toolbar-currency.gold(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') + 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: !user.preferences.menuExpanded}')