mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-07-22 11:38:24 +00:00
Improve toolbar and global styles
This commit is contained in:
benmanley
parent
d7fd365a59
commit
834828ce74
6 changed files with 105 additions and 101 deletions
|
|
@ -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
|
||||
|
|
@ -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
|
||||
border: none
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}')
|
||||
|
|
|
|||
Loading…
Reference in a new issue