mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-03 08:21:07 +00:00
Merge pull request #3155 from benmanley/notif-restyle
Consolidate notifications into one menu
This commit is contained in:
Tyler Renelle
commit
5296a584de
18 changed files with 526 additions and 267 deletions
|
|
@ -14,10 +14,9 @@ future re: pets and whatnot, this is just temporary.
|
|||
margin: 0px auto
|
||||
|
||||
.avatar-level
|
||||
position absolute
|
||||
bottom 0px
|
||||
right 0px
|
||||
padding 2px 3px 2px 3px
|
||||
position: absolute
|
||||
bottom: 2px
|
||||
right: 2px
|
||||
|
||||
// basic herobox styles
|
||||
.herobox
|
||||
|
|
@ -38,12 +37,10 @@ future re: pets and whatnot, this is just temporary.
|
|||
position: absolute
|
||||
top: 0
|
||||
display: block
|
||||
width: 100%
|
||||
line-height: 2
|
||||
color: black
|
||||
text-align: center
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1)
|
||||
background: darken($good, 15%)
|
||||
margin: 2px
|
||||
text-align: left
|
||||
@extend $hrpg-label
|
||||
hrpg-label-color-mixin(darken($good, 15%))
|
||||
transition: opacity 0.2s ease-out
|
||||
|
||||
// info revealed on hover/focus for party
|
||||
|
|
@ -53,7 +50,7 @@ future re: pets and whatnot, this is just temporary.
|
|||
.herobox.isUser:not(.hasMount):after
|
||||
opacity: 1
|
||||
// make it a bit special
|
||||
background darken($color-herobox, 15%)
|
||||
hrpg-label-color-mixin(darken($color-herobox, 15%))
|
||||
|
||||
.character-sprites span
|
||||
position: absolute
|
||||
|
|
|
|||
|
|
@ -7,5 +7,12 @@ $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%)
|
||||
// Navigation background colors
|
||||
$color-toolbar = lighten($color-herobox, 70%)
|
||||
$color-options-menu = lighten($color-herobox, 85%)
|
||||
$color-options-submenu = lighten($color-herobox, 75%)
|
||||
|
||||
// button color variables
|
||||
$color-button-style-one = $best
|
||||
170
public/css/global-modules.styl
Normal file
170
public/css/global-modules.styl
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
// 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, 70%) !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
|
||||
> div
|
||||
border:1px solid darken($hrpg-button-color, 16.18%)
|
||||
h4
|
||||
color: darken($hrpg-button-color, 61.8%)
|
||||
background-color: $hrpg-button-color
|
||||
border-color: darken($hrpg-button-color, 16.18%)
|
||||
> ul:first-child:after
|
||||
background-color: #fff
|
||||
border-color: darken($hrpg-button-color, 16.18%)
|
||||
h4:after
|
||||
background-color: $hrpg-button-color
|
||||
border-color: darken($hrpg-button-color, 16.18%)
|
||||
a, a:link, a:visited
|
||||
color: darken($hrpg-button-color, 70%) !important
|
||||
.glyphicon
|
||||
color:darken($hrpg-button-color, 60%)
|
||||
&.active
|
||||
a, button
|
||||
background-color: darken($hrpg-button-color, 3.82%) !important
|
||||
border-color: darken($hrpg-button-color, 38.2%) !important
|
||||
$hrpg-button-master
|
||||
list-style: none
|
||||
> a, button
|
||||
display: inline-block !important
|
||||
padding: 0.25em 0.5em !important
|
||||
text-decoration:none
|
||||
font-size: 1em
|
||||
color:#222
|
||||
background-color: transparent
|
||||
&:active
|
||||
background-color: #aaa !important
|
||||
@media screen and (min-width:768px)
|
||||
&:hover
|
||||
background-color: #eee !important
|
||||
$hrpg-button
|
||||
@extend $hrpg-button-master
|
||||
> a, button
|
||||
border: 1px solid #ccc !important
|
||||
border-radius: 0.382em !important
|
||||
$hrpg-button-call-to-action
|
||||
@extend $hrpg-button
|
||||
hrpg-button-color-mixin($color-button-style-one)
|
||||
$hrpg-button-toggle
|
||||
@extend $hrpg-button-master
|
||||
border: 1px solid #ccc !important
|
||||
border-radius: 0.382em !important
|
||||
> a:first-of-type
|
||||
border-radius: 0.382em 0em 0em 0.382em !important
|
||||
> a:nth-of-type(2)
|
||||
border-radius: 0em 0.382em 0.382em 0em !important
|
||||
// Labels
|
||||
hrpg-label-color-mixin($hrpg-label-color)
|
||||
color: lighten($hrpg-label-color, 90%) !important
|
||||
background-color: $hrpg-label-color !important
|
||||
border-color: darken($hrpg-label-color, 16.18%) !important
|
||||
> a
|
||||
color: lighten($hrpg-label-color, 90%) !important
|
||||
$hrpg-label
|
||||
padding: 0.382em 0.618em
|
||||
border-width: 1px
|
||||
border-style: solid
|
||||
border-radius: 0.382em
|
||||
font-size: 0.8em
|
||||
line-height: 1
|
||||
color: #fff
|
||||
// Modals
|
||||
$hrpg-modal
|
||||
position: relative
|
||||
$hrpg-modal-dropdown
|
||||
@extend $hrpg-modal
|
||||
> div
|
||||
position: absolute
|
||||
top: 3em
|
||||
min-width:110px
|
||||
min-height: 68px
|
||||
border-radius:4px
|
||||
background-color:#fff
|
||||
@media screen and (max-width:768px)
|
||||
position:fixed
|
||||
overflow: auto
|
||||
z-index: 1000
|
||||
top: 2%
|
||||
left: 2%
|
||||
width: 96%
|
||||
height: 96%
|
||||
box-shadow: 0 0 0 30px rgba(0,0,0,0.63)
|
||||
&:after
|
||||
display: none
|
||||
h4
|
||||
font-size: 1.2em
|
||||
margin:0px
|
||||
border-bottom-width: 1px
|
||||
border-bottom-style: solid
|
||||
border-radius:0.2em 0.2em 0em 0em
|
||||
padding: 0.618em 0.8333em
|
||||
ul
|
||||
padding: 1em 1em 0em 1em
|
||||
ul:last-child
|
||||
padding-bottom:0px
|
||||
ul
|
||||
list-style: none
|
||||
overflow: auto
|
||||
li
|
||||
margin-bottom: 1em
|
||||
> ul:first-child:after, h4:after
|
||||
content:''
|
||||
position:absolute
|
||||
top:-9px
|
||||
z-index:2
|
||||
width:16px
|
||||
height:16px
|
||||
border-top-width: 1px
|
||||
border-top-style: solid
|
||||
border-left-width: 1px
|
||||
border-left-style: solid
|
||||
transform: rotate(45deg)
|
||||
h4:after
|
||||
font-size: 0.8333em
|
||||
z-index:3
|
||||
$hrpg-modal-dropdown-left
|
||||
@extend $hrpg-modal-dropdown
|
||||
@media screen and (min-width:768px)
|
||||
div
|
||||
right: 0px
|
||||
> ul:first-child:after, h4:after
|
||||
right: 1em
|
||||
$hrpg-modal-dropdown-right
|
||||
@extend $hrpg-modal-dropdown
|
||||
@media screen and (min-width:768px)
|
||||
div
|
||||
left: 0px
|
||||
> ul:first-child:after, h4:after
|
||||
left: 1em
|
||||
$hrpg-modal-controls
|
||||
text-align: right
|
||||
border-radius:0px 0px 0.382em 0.382em
|
||||
li
|
||||
margin-left: 0.618em
|
||||
display: inline-block
|
||||
background-color: #fff
|
||||
@media screen and (max-width:768px)
|
||||
position: fixed
|
||||
bottom:2%
|
||||
right: 2%
|
||||
border: none
|
||||
@media screen and (min-width:768px)
|
||||
display: none
|
||||
// Submenus
|
||||
$hrpg-submenu
|
||||
@media screen and (min-width:768px)
|
||||
padding: 1em 1em 0em 1em
|
||||
margin-bottom: 1.618em
|
||||
li
|
||||
display: inline-block
|
||||
margin-right: 1em
|
||||
margin-bottom: 1em
|
||||
|
|
@ -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: 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
|
||||
|
|
@ -166,4 +166,4 @@
|
|||
|
||||
header .hero-stats
|
||||
background-color: darken($color-herobox, 4%)
|
||||
border-right: 1px solid darken($color-herobox, 12%)
|
||||
border-right: 1px solid darken($color-herobox, 12%)
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
@import "../bower_components/select2/select2.css"
|
||||
|
||||
// Custom includes
|
||||
@import "./global-colors.styl";
|
||||
@import "./global-modules.styl";
|
||||
@import "./tasks.styl"
|
||||
@import "./avatar.styl"
|
||||
@import "./customizer.styl"
|
||||
|
|
@ -27,6 +29,7 @@
|
|||
@import "./shared.styl"
|
||||
@import "./footer.styl"
|
||||
@import "./menu.styl"
|
||||
@import "./options.styl"
|
||||
|
||||
html,body,p,h1,ul,li,table,tr,th,td
|
||||
margin: 0
|
||||
|
|
|
|||
|
|
@ -1,112 +1,134 @@
|
|||
// 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: $color-toolbar
|
||||
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
|
||||
display: inline-block
|
||||
padding-left: 0.618em
|
||||
padding-right: 0.618em
|
||||
@media screen and (min-width:768px)
|
||||
display: none
|
||||
.toolbar-mobile
|
||||
@extend $hrpg-button
|
||||
@extend $hrpg-modal-dropdown-right
|
||||
hrpg-button-color-mixin($color-toolbar)
|
||||
div.glyphicon
|
||||
display:block
|
||||
width: 2.618em
|
||||
height: 1.618em
|
||||
padding: 1.1em 1em 0em 1em
|
||||
float:left
|
||||
.toolbar-submenu
|
||||
padding-left: 0.382em
|
||||
display: block
|
||||
// Top level menu items: Tasks – User – Social – Inventory
|
||||
.toolbar-nav
|
||||
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)
|
||||
padding: 0.618em
|
||||
@media screen and (max-width:768px)
|
||||
display: none
|
||||
> li
|
||||
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%
|
||||
.toolbar-submenu
|
||||
li
|
||||
margin-right: 1em
|
||||
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
|
||||
// Information bar: Bailey – notifs – currency – subscribe button
|
||||
.toolbar-bailey, .toolbar-wallet, .toolbar-options, .toolbar-subscribe
|
||||
float:right
|
||||
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
|
||||
.Gems
|
||||
margin-top: 0em
|
||||
span
|
||||
display:inline-block
|
||||
vertical-align:top
|
||||
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: 0.618em
|
||||
@media screen and (max-width:768px)
|
||||
.navbar-info.inactive
|
||||
display:none;
|
||||
.toolbar-options
|
||||
> li
|
||||
padding-left:0em
|
||||
margin-left:0em
|
||||
margin-right: 0.618em
|
||||
.toolbar-subscribe
|
||||
padding-right: 0.618em
|
||||
.toolbar-sync, .toolbar-settings
|
||||
@extend $hrpg-button
|
||||
hrpg-button-color-mixin($color-toolbar)
|
||||
.toolbar-subscribe li
|
||||
@extend $hrpg-button-call-to-action
|
||||
@media screen and (min-width:768px)
|
||||
.toolbar
|
||||
position:fixed
|
||||
// Notifications icon and dropdown
|
||||
.toolbar-notifs
|
||||
@extend $hrpg-button
|
||||
@extend $hrpg-modal-dropdown-left
|
||||
hrpg-button-color-mixin($color-toolbar)
|
||||
> a span.inactive
|
||||
opacity: 0.236 !important
|
||||
div
|
||||
width:300px
|
||||
@media screen and (max-width:768px)
|
||||
width:96%
|
||||
.toolbar-notifs-notifs
|
||||
padding-bottom:1em
|
||||
max-height: 63%
|
||||
li
|
||||
position: relative
|
||||
.glyphicon
|
||||
margin-right: 0.618em
|
||||
height: 100%
|
||||
a
|
||||
display:inline-block
|
||||
a:nth-of-type(1)
|
||||
margin-right: 1.618em
|
||||
a:nth-of-type(2)
|
||||
position:absolute
|
||||
right:0px
|
||||
.glyphicon-remove-circle
|
||||
margin-right: 0px
|
||||
// Settings dropdown
|
||||
.toolbar-settings
|
||||
@extend $hrpg-modal-dropdown-left
|
||||
.toolbar-controls
|
||||
@extend $hrpg-modal-controls
|
||||
li
|
||||
@extend $hrpg-button
|
||||
hrpg-button-color-mixin(lighten($color-toolbar,32.8%))
|
||||
.toolbar-settings .toolbar-controls
|
||||
@media screen and (min-width:768px)
|
||||
display:none
|
||||
|
|
@ -6,16 +6,17 @@
|
|||
|
||||
.toolbar-bailey-container
|
||||
width:55px
|
||||
margin-right:8px
|
||||
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: -24px
|
||||
height:45px !important
|
||||
top: -17px
|
||||
height:39px !important
|
||||
cursor: pointer
|
||||
|
||||
// Tour (Justin)
|
||||
.npc_justin.float-left
|
||||
float: left
|
||||
|
|
|
|||
26
public/css/options.styl
Normal file
26
public/css/options.styl
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
#main > div > div > div > .tab-content
|
||||
margin: 1.618em 0em
|
||||
@media screen and (min-width:768px)
|
||||
border: 1px solid darken($color-options-menu, 12%)
|
||||
padding-bottom: 1.618em
|
||||
.options-menu, .options-submenu
|
||||
@extend $hrpg-submenu
|
||||
border-bottom: 1px solid darken($color-options-menu, 12%)
|
||||
.options-menu
|
||||
@media screen and (min-width:768px)
|
||||
background-color: $color-options-menu
|
||||
li
|
||||
@extend $hrpg-button
|
||||
hrpg-button-color-mixin($color-options-menu)
|
||||
.options-submenu
|
||||
margin-top: -1.618em
|
||||
background-color: $color-options-submenu
|
||||
li
|
||||
@extend $hrpg-button
|
||||
hrpg-button-color-mixin($color-options-submenu)
|
||||
@media screen and (max-width:768px)
|
||||
padding: 1em 0.618em 0 0.618em
|
||||
border: 1px solid darken($color-options-menu, 12%)
|
||||
border-top: none
|
||||
|
||||
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
// 1. Set up color classes
|
||||
// ========================
|
||||
|
||||
// color variables
|
||||
@import "./color-vars.styl";
|
||||
// Color variables are defined in "./global-colors.styl"
|
||||
|
||||
// array of keywords and their associated color vars
|
||||
$stages = (worst $worst) (worse $worse) (bad $bad) (neutral $neutral) (good $good) (better $better) (best $best)
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ habitrpg.controller("RootCtrl", ['$scope', '$rootScope', '$location', 'User', '$
|
|||
$rootScope.Content = Content;
|
||||
$rootScope.env = window.env;
|
||||
$rootScope.Math = Math;
|
||||
$rootScope.Groups = Groups;
|
||||
|
||||
// Angular UI Router
|
||||
$rootScope.$state = $state;
|
||||
|
|
|
|||
|
|
@ -13,4 +13,9 @@ angular.module('habitrpg')
|
|||
return function(html){
|
||||
return $('<div/>').html(html).text();
|
||||
}
|
||||
})
|
||||
.filter('goldRoundThousandsToK', function(){
|
||||
return function (gp) {
|
||||
return (gp > 999) ? (Math.floor(gp / 100) / 10.0 + 'K') : gp;
|
||||
}
|
||||
})
|
||||
|
|
@ -7,31 +7,6 @@ script(id='partials/options.html', type="text/ng-template")
|
|||
.container-fluid
|
||||
.row
|
||||
.col-md-12
|
||||
span.option-box.pull-right.wallet
|
||||
include ../shared/gems
|
||||
|
||||
ul.nav.nav-tabs
|
||||
li(ng-class="{ active: $state.includes('options.profile') }")
|
||||
a(ui-sref='options.profile')
|
||||
span.glyphicon.glyphicon-user
|
||||
|
|
||||
=env.t('profile')
|
||||
li(ng-class="{ active: $state.includes('options.social') }")
|
||||
a(ui-sref='options.social')
|
||||
span.glyphicon.glyphicon-heart
|
||||
|
|
||||
=env.t('social')
|
||||
li(ng-class="{ active: $state.includes('options.inventory') }", ng-if='user.flags.dropsEnabled')
|
||||
a(ui-sref='options.inventory')
|
||||
span.glyphicon.glyphicon-gift
|
||||
|
|
||||
=env.t('inventory')
|
||||
li(ng-class="{ active: $state.includes('options.settings') }")
|
||||
a(ui-sref='options.settings')
|
||||
span.glyphicon.glyphicon-wrench
|
||||
|
|
||||
=env.t('settings')
|
||||
|
||||
.tab-content
|
||||
.tab-pane.active
|
||||
div(ui-view)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ include ./inventory
|
|||
include ./stable
|
||||
|
||||
script(type='text/ng-template', id='partials/options.inventory.html')
|
||||
ul.nav.nav-tabs
|
||||
ul.options-menu
|
||||
li(ng-class="{ active: $state.includes('options.inventory.drops') }")
|
||||
a(ui-sref='options.inventory.drops')
|
||||
=env.t('market')
|
||||
|
|
|
|||
|
|
@ -227,7 +227,7 @@ script(id='partials/options.profile.profile.html', type='text/ng-template')
|
|||
include ../shared/formatting-help
|
||||
|
||||
script(id='partials/options.profile.html', type="text/ng-template")
|
||||
ul.nav.nav-tabs
|
||||
ul.options-menu
|
||||
li(ng-class="{ active: $state.includes('options.profile.avatar') }")
|
||||
a(ui-sref='options.profile.avatar')
|
||||
=env.t('avatar')
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
script(id='partials/options.settings.html', type="text/ng-template")
|
||||
ul.nav.nav-tabs
|
||||
ul.options-menu
|
||||
li(ng-class="{ active: $state.includes('options.settings.settings') }")
|
||||
a(ui-sref='options.settings.settings')
|
||||
=env.t('settings')
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
script(type='text/ng-template', id='partials/options.social.hall.html')
|
||||
ul.nav.nav-tabs
|
||||
ul.options-submenu
|
||||
li(ng-class="{ active: $state.includes('options.social.hall.heroes') }")
|
||||
a(ui-sref='options.social.hall.heroes')
|
||||
=env.t('hallHeroes')
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ script(type='text/ng-template', id='partials/options.social.guilds.create.html')
|
|||
include ./create-group
|
||||
|
||||
script(type='text/ng-template', id='partials/options.social.guilds.html')
|
||||
ul.nav.nav-tabs
|
||||
ul.options-submenu
|
||||
li(ng-class="{ active: $state.includes('options.social.guilds.public') }")
|
||||
a(ui-sref='options.social.guilds.public')
|
||||
=env.t('publicGuilds')
|
||||
|
|
@ -74,11 +74,9 @@ script(type='text/ng-template', id='partials/options.social.guilds.html')
|
|||
div(ui-view)
|
||||
|
||||
script(type='text/ng-template', id='partials/options.social.html')
|
||||
ul.nav.nav-tabs
|
||||
ul.options-menu
|
||||
li(ng-class="{ active: $state.includes('options.social.tavern') }")
|
||||
a(ui-sref='options.social.tavern')
|
||||
span.glyphicon.glyphicon-eye-close
|
||||
|
|
||||
=env.t('tavern')
|
||||
li(ng-class="{ active: $state.includes('options.social.party') }")
|
||||
a(ui-sref='options.social.party')
|
||||
|
|
@ -88,13 +86,9 @@ script(type='text/ng-template', id='partials/options.social.html')
|
|||
=env.t('guilds')
|
||||
li(ng-class="{ active: $state.includes('options.social.challenges') }")
|
||||
a(ui-sref='options.social.challenges')
|
||||
span.glyphicon.glyphicon-bullhorn
|
||||
|
|
||||
=env.t('challenges')
|
||||
li(ng-class="{ active: $state.includes('options.social.hall') }")
|
||||
a(ui-sref='options.social.hall')
|
||||
span.glyphicon.glyphicon-flag
|
||||
|
|
||||
=env.t('hall')
|
||||
|
||||
.tab-content
|
||||
|
|
|
|||
|
|
@ -1,112 +1,171 @@
|
|||
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', ng-click='set({"preferences.mobileMenuExpanded":false})')
|
||||
h4=env.t('menu')
|
||||
.glyphicon.glyphicon-check
|
||||
ul.toolbar-submenu
|
||||
li
|
||||
a(ui-sref='tasks')=env.t('tasks')
|
||||
.glyphicon.glyphicon-user
|
||||
ul.toolbar-submenu
|
||||
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')
|
||||
.glyphicon.glyphicon-heart
|
||||
ul.toolbar-submenu
|
||||
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')
|
||||
.glyphicon.glyphicon-gift
|
||||
ul.toolbar-submenu
|
||||
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')
|
||||
ul.toolbar-controls
|
||||
li
|
||||
a(ng-click='set({"preferences.mobileMenuExpanded":false})')=env.t('close')
|
||||
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')
|
||||
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(ng-click='set({"preferences.avatarMenuExpanded":false})')
|
||||
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.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(ng-click='set({"preferences.socialMenuExpanded":false})')
|
||||
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.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(ng-click='set({"preferences.inventoryMenuExpanded":false})')
|
||||
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')
|
||||
ul.toolbar-subscribe
|
||||
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')
|
||||
// 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(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(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')
|
||||
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')
|
||||
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=env.t('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
|
||||
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='Groups.seenMessage(k)', popover=env.t('clear'),popover-placement='right',popover-trigger='mouseenter',popover-append-to-body='true')
|
||||
span.glyphicon.glyphicon-remove-circle
|
||||
ul.toolbar-controls
|
||||
//-li
|
||||
//-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
|
||||
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()')=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})')=env.t('FAQ')
|
||||
li
|
||||
a(href="https://vimeo.com/57654086", target='_blank', ng-click='set({"preferences.menuExpanded":false})')=env.t('tutorials')
|
||||
ul.toolbar-controls
|
||||
li
|
||||
a(ng-click='set({"preferences.isSettingsExpanded":false})')=env.t('close')
|
||||
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.gold(popover=env.t('gold'), popover-placement='bottom',popover-trigger='mouseenter')
|
||||
span.shop_gold
|
||||
span {{Shared.gold(user.stats.gp) | goldRoundThousandsToK}}
|
||||
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}')
|
||||
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")')
|
||||
Loading…
Reference in a new issue