sudoxreboot/habitica
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica.git synced 2026-07-22 11:38:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(.hero-stats): re-restyle status meters

Browse source 
Improved status meter design based on user feedback
This commit is contained in:
benmanley 2014-07-03 16:03:40 +01:00
parent 26bea7071d
commit 15a63d6e66
2 changed files with 31 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
public/css/header.styl
View file

@ -109,38 +109,37 @@
/* progress bars
-------------------- */
.hero-stats
padding: 0.8em 1em 0
padding: 1.1em 1em 0
margin: 0
display: table-cell
vertical-align: middle
min-width:175px
@media screen and (max-width:768px)
padding: 0.382em 0.382em 0
padding: 1.1em 0.618em 0
.meter-label
float: left
@extend $hrpg-label
hrpg-label-color-mixin(darken($color-herobox, 16.18%))
width: 2.618em
text-align:center
margin-right: 0.618em
.meter
position: relative
overflow: hidden
border: 1px solid #333
border-radius: 0.382em
height: 2.25em
margin: 0 0 0.8em
border: 1px solid #fff
height: 1.618em
margin: 0 0 1em
outline: 1px solid #999
.bar
border-radius: 0.382em 0 0 0.382em
height: 100%
transition: width 0.25s ease-out
border-right: 1px solid #333
hrpg-status-bar-mixin($hrpg-status-bar-color)
background: lighten($hrpg-status-bar-color, 32.8%)
color: darken($hrpg-status-bar-color, 70%)
border-color: darken($hrpg-status-bar-color, 32.8%)
background: lighten($hrpg-status-bar-color, 70%)
color: darken($hrpg-status-bar-color, 90%)
.bar
background: darken($hrpg-status-bar-color, 16.18%)
border-color: darken($hrpg-status-bar-color, 32.8%)
.meter-text.title
margin-top: 0.333333em
@extend $hrpg-label
hrpg-label-color-mixin(darken($hrpg-status-bar-color,32.8%))
span
margin-right: 0.382em
background: darken($hrpg-status-bar-color, 32.8%)
border-color: darken($hrpg-status-bar-color, 70%)
.health
hrpg-status-bar-mixin($color-hp)
.experience
@ -149,15 +148,14 @@
span
margin-right: 0.236em
a
color: darken($color-xp, 70%)
color: darken($color-xp, 80%)
.mana
hrpg-status-bar-mixin($color-mp)
.meter-text
position: absolute
top: 0
line-height: 2.25
&.title
left: 0.382em
z-index: 4
line-height: 1.618
&.value
right: 0.382em
@ -166,3 +164,4 @@
header .hero-stats
background-color: darken($color-herobox, 4%)
border-right: 1px solid darken($color-herobox, 12%)

21
views/shared/header/header.jade
View file

@ -7,28 +7,25 @@
+herobox({main:1})
// stat bars
.hero-stats
.meter.health(tooltip=env.t('health'))
.meter-label(tooltip=env.t('health'))
span.glyphicon.glyphicon-heart
.meter.health
.bar(style='width: {{Shared.percent(user.stats.hp, 50)}}%;')
span.meter-text.title
span.glyphicon.glyphicon-heart
| HP
span.meter-text.value
| {{Math.ceil(user.stats.hp)}} / 50
.meter.experience(tooltip=env.t('experience'))
.meter-label(tooltip=env.t('experience'))
span.glyphicon.glyphicon-star
.meter.experience
.bar(style='width: {{Shared.percent(user.stats.exp,Shared.tnl(user.stats.lvl))}}%;')
span.meter-text.title
span.glyphicon.glyphicon-star
| XP
span.meter-text.value
span(ng-show='user.history.exp', tooltip=env.t('progress'))
a(ng-click='toggleChart("exp")').glyphicon.glyphicon-signal
span
| {{Math.floor(user.stats.exp) | number:0}} / {{Shared.tnl(user.stats.lvl) | number:0}}
.meter.mana(tooltip='Mana', ng-if='user.flags.classSelected && !user.preferences.disableClasses')
.meter-label(tooltip='Mana', ng-if='user.flags.classSelected && !user.preferences.disableClasses')
span.glyphicon.glyphicon-fire
.meter.mana(ng-if='user.flags.classSelected && !user.preferences.disableClasses')
.bar(style='width: {{user.stats.mp / user._statsComputed.maxMP * 100}}%;')
span.meter-text.title
span.glyphicon.glyphicon-fire
| MP
span.meter-text.value
span
| {{Math.floor(user.stats.mp)}} / {{user._statsComputed.maxMP}}