mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-07-22 11:38:24 +00:00
Redesign navbar
Restyle navigation and improve mobile layout
This commit is contained in:
benmanley
parent
b2e62f121f
commit
eef5e55ad9
5 changed files with 242 additions and 130 deletions
|
|
@ -4,7 +4,7 @@
|
|||
width: 100% // this is for the sticky
|
||||
padding: 0
|
||||
z-index: 100
|
||||
background: #f5f5f5
|
||||
background: #c0d0d0
|
||||
border-bottom: 1px solid rgba(0,0,0,0.2)
|
||||
// margin-top: -1px
|
||||
overflow-y: hidden
|
||||
|
|
@ -110,7 +110,8 @@
|
|||
display: table-cell
|
||||
vertical-align: middle
|
||||
min-width:175px
|
||||
|
||||
background-color: #c6d6d6
|
||||
|
||||
.meter, .bar
|
||||
box-shadow: none
|
||||
border-radius: 0
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
128
public/css/menu.styl
Normal file
128
public/css/menu.styl
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
// Custom styles for the menu aka toolbar aka navbar
|
||||
.navbar
|
||||
color: #222
|
||||
background-color: #f8f8f8
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.2)
|
||||
border-radius:0px
|
||||
margin-bottom:0px
|
||||
min-height:50px
|
||||
> div
|
||||
padding-left:8px
|
||||
.glyphicon
|
||||
color:#5d5d5d
|
||||
.caret
|
||||
color:#9d9d9d
|
||||
.task-action-btn
|
||||
outline: 1px solid red;
|
||||
font-size:16px
|
||||
.gem-wallet
|
||||
padding-top:4px
|
||||
padding-bottom:8px
|
||||
height:50px
|
||||
.Pet_Currency_Gem2x.Gems
|
||||
position:relative
|
||||
top:8px
|
||||
color:#222 !important
|
||||
.currency
|
||||
min-height:50px
|
||||
padding-top:16px
|
||||
padding-right:16px
|
||||
// Mobile menu button
|
||||
.navbar-header
|
||||
position:absolute
|
||||
top:0
|
||||
right:45px
|
||||
button
|
||||
margin-right:0
|
||||
.navbar-toggle
|
||||
&:hover
|
||||
background-color:#eee
|
||||
span.icon-bar
|
||||
background-color:#5d5d5d
|
||||
// Top level menu items: Tasks – Options
|
||||
.navbar-menu
|
||||
float:left;
|
||||
li
|
||||
display:inline-block
|
||||
height:50px
|
||||
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
|
||||
// Information bar: Bailey – notifs – currency – subscribe button
|
||||
.navbar-info
|
||||
float:right
|
||||
min-height:50px
|
||||
padding-right:25px
|
||||
li
|
||||
display:inline-block
|
||||
@media screen and (max-device-width:768px), screen and (max-width:768px)
|
||||
.navbar-menu
|
||||
float:none
|
||||
.navbar-submenu
|
||||
margin-left:0
|
||||
> li
|
||||
display:inline-block
|
||||
.dropdown-menu
|
||||
position:absolute
|
||||
.navbar-info
|
||||
width:100%
|
||||
// Button for toggling toolbar visibility
|
||||
.collapse-toolbar
|
||||
&.expanded
|
||||
position:absolute
|
||||
&.collapsed
|
||||
position:fixed
|
||||
right:0px
|
||||
top:0px
|
||||
width:45px
|
||||
height:50px
|
||||
padding-left:15px
|
||||
padding-top:15px
|
||||
z-index:999
|
||||
.glyphicon-chevron-up
|
||||
color:#5d5d5d
|
||||
.glyphicon-chevron-down
|
||||
color:#fff
|
||||
.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
|
||||
.toolbar-sync
|
||||
position:relative
|
||||
top:-8px
|
||||
.glyphicon-refresh
|
||||
color: #222 !important
|
||||
.glyphicon-chevron-up
|
||||
transition: all 0.32s linear
|
||||
.glyphicon-chevron-up.active
|
||||
transform: rotate(180deg)
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,128 +1,122 @@
|
|||
a.collapse-toolbar(popover=env.t('expandToolbar'),popover-placement='left',popover-trigger='mouseenter',ng-if='user.preferences.toolbarCollapsed',ng-click='set({"preferences.toolbarCollapsed":false})')
|
||||
a.collapse-toolbar.collapsed(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
|
||||
a.collapse-toolbar.expanded(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
|
||||
nav.navbar(ng-controller='AuthCtrl',ng-if='!user.preferences.toolbarCollapsed')
|
||||
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 Tasks
|
||||
li
|
||||
a(ui-sref='options.profile.avatar')
|
||||
span Options
|
||||
li
|
||||
a.toolbar-toggle(ng-click='isMenuCollapsed = !isMenuCollapsed')
|
||||
span.glyphicon.glyphicon-chevron-up(ng-class='{active: isMenuCollapsed}')
|
||||
.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
|
||||
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.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')
|
||||
ul.nav.toolbar-submenu(ng-if='!isMenuCollapsed')
|
||||
li
|
||||
span.glyphicon.glyphicon-user
|
||||
span=env.t('user')
|
||||
ul
|
||||
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
|
||||
//-|
|
||||
span=env.t('logout')
|
||||
li
|
||||
span.glyphicon.glyphicon-heart
|
||||
span=env.t('social')
|
||||
ul
|
||||
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
|
||||
span.glyphicon.glyphicon-gift
|
||||
span=env.t('inventory')
|
||||
ul
|
||||
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
|
||||
span.glyphicon.glyphicon-wrench
|
||||
span=env.t('settings')
|
||||
ul
|
||||
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
|
||||
span.glyphicon.glyphicon-question-sign
|
||||
span=env.t('help')
|
||||
ul
|
||||
li
|
||||
a(href="http://habitrpg.wikia.com/wiki/FAQ", target='_blank')
|
||||
//-span.glyphicon.glyphicon-book
|
||||
//-|
|
||||
span=env.t('FAQ')
|
||||
li
|
||||
a(href="https://vimeo.com/57654086", target='_blank')
|
||||
//-span.glyphicon.glyphicon-film
|
||||
//-|
|
||||
span=env.t('tutorials')
|
||||
li.toolbar-sync
|
||||
a(ng-click='User.sync()',popover=env.t('sync'),popover-placement='right',popover-trigger='mouseenter')
|
||||
span.glyphicon.glyphicon-refresh
|
||||
Loading…
Reference in a new issue