sudoxreboot/habitica-self-host
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica-self-host.git synced 2026-08-02 04:00:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(.hero-stats): restyle status meters

Browse source 
Add text to icons to clarify purpose of each bar
Tidy up tooltip behaviour
Aesthetic changes
This commit is contained in:
benmanley 2014-06-05 16:17:33 +01:00
parent 5a73923d0a
commit 57eb80f9db
5 changed files with 89 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
public/css/global-colors.styl
View file

@ -1,4 +1,4 @@
// color variables
// Task colors
$worst = rgb(230, 184, 175)
$worse = rgb(244, 204, 204)
$bad = rgb(252, 229, 205)
@ -7,8 +7,14 @@ $good = rgb(217, 234, 211)
$better = rgb(208, 224, 227)
$best = rgb(201, 218, 248)
$completed = rgb(217, 217, 217)
//Label colors
$color-purple = #b881b9
// avatar background colors
$color-herobox = desaturate(lighten($better, 16%),32%)
// Header status bar
$color-hp = $worse
$color-xp = $neutral
$color-mp = $best
// Navigation background colors
$color-toolbar = lighten($color-herobox, 70%)
$color-options-menu = lighten($color-herobox, 85%)
@ -19,4 +25,4 @@ $color-button-style-one = $best
$color-tasks = lighten($color-herobox, 65%)
// Task filter colors
$color-filter-tag = lighten($good,90%)
$color-filter-tag-challenge = lighten($bad,90%)
$color-filter-tag-challenge = lighten($color-purple,90%)

32
public/css/global-modules.styl
View file

@ -1,3 +1,11 @@
// Text shadow mixin
hrpg-text-shadow-mixin($hrpg-text-shadow-base-color)
if lightness($hrpg-text-shadow-base-color) >= 50%
text-shadow:
-1px -1px 2px darken($hrpg-text-shadow-base-color,61.8%),
1px -1px 2px darken($hrpg-text-shadow-base-color,61.8%),
-1px 1px 2px darken($hrpg-text-shadow-base-color,61.8%),
1px 1px 2px darken($hrpg-text-shadow-base-color,61.8%);
// Buttons
// The !important declarations override Bootstrap
hrpg-button-color-mixin($hrpg-button-color)
@ -94,7 +102,7 @@ $hrpg-button-with-input
border-radius: 0em 0.382em 0.382em 0em
//Button bar
hrpg-button-bar-mixin($hrpg-button-bar-color)
border-color: darken($hrpg-button-bar-color, 16.18)
border-color: darken($hrpg-button-bar-color, 16.18%)
li
border-right-color: darken($hrpg-button-bar-color,3.82%)
li:first-of-type
@ -107,9 +115,10 @@ $hrpg-button-bar
margin-bottom: 0.618em
li
border-right: 1px solid darken(#fff,3.82%)
float:left
li:first-of-type
color: darken(#fff,61.8%)
padding: 0.25em 0.5em
padding: 0.25em 0.618em
border-radius: 0.382em 0em 0em 0.382em
border-right: 1px solid darken(#fff,6.18%)
li:last-of-type
@ -120,7 +129,8 @@ $hrpg-button-bar
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
border-color: darken($hrpg-label-color, 32.8%) !important
hrpg-text-shadow-mixin(lighten($hrpg-label-color, 90%))
> a
color: lighten($hrpg-label-color, 90%) !important
$hrpg-label
@ -238,19 +248,20 @@ $hrpg-submenu
// Tags
hrpg-tag-color-mixin($hrpg-tag-color)
background-color: darken($hrpg-tag-color,3.82%)
&.active
> a, > a span
color: darken($hrpg-tag-color,3.82%)
background-color: darken($hrpg-tag-color,32.8%)
&:before
border-right-color: darken($hrpg-tag-color,32.8%)
> a, > a span
color: darken($hrpg-tag-color,61.8%)
&:before
border-right-color: darken($hrpg-tag-color,3.82%)
hrpg-text-shadow-mixin(darken($hrpg-tag-color,61.8%))
&.active
> a, > a span
color: darken($hrpg-tag-color,3.82%)
hrpg-text-shadow-mixin(darken($hrpg-tag-color,3.82%))
background-color: darken($hrpg-tag-color,32.8%)
&:before
border-right-color: darken($hrpg-tag-color,32.8%)
@media screen and (min-width:768px)
&:hover, &:hover > a, &:hover > a span
//color: darken($hrpg-tag-color,3.82%)
background-color: darken($hrpg-tag-color,16.8%)
&:hover > a:before
border-right-color: darken($hrpg-tag-color,16.18%)
@ -263,6 +274,7 @@ hrpg-tag-color-mixin($hrpg-tag-color)
$hrpg-tag-master
display: inline-block
position: relative
left: -1em
width: auto
margin-left: 1.618em
&.active > a

77
public/css/header.styl
View file

@ -109,60 +109,57 @@
/* progress bars
-------------------- */
.hero-stats
padding: 0 1.25em
padding: 0.8em 1em 0
margin: 0
display: table-cell
vertical-align: middle
min-width:175px
.meter, .bar
box-shadow: none
border-radius: 0
@media screen and (max-width:768px)
padding: 0.382em 0.382em 0
.meter
position: relative
background: white
opacity: 1
outline: 1px solid rgba(0,0,0,0.2)
outline-offset: -1px
overflow: hidden // firefox outline fix
overflow: hidden
border: 1px solid #333
border-radius: 0.382em
height: 2.25em
margin: 0 0 1em
cursor: help;
color: #111
&:last-of-type
margin-bottom: 0
&:after
content: attr(title)
position: absolute
left: -1em
top 0.4em
font-weight: 400
z-index: -1
transition: all 0.25s ease-out
margin: 0 0 0.8em
.bar
border: 1px solid rgba(0,0,0,0.1)
border-radius: 0.382em 0 0 0.382em
height: 100%
transition: width 0.25s ease-out
.meter:hover:after
left: 1em
z-index: 1
.health .bar
background: darken($worse, 38%)
.experience .bar
background: darken($neutral, 30%)
.mana .bar
background: darken($best, 30%)
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%)
.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
.health
hrpg-status-bar-mixin($color-hp)
.experience
hrpg-status-bar-mixin($color-xp)
.meter-text
span
margin-right: 0.236em
a
color: darken($color-xp, 70%)
.mana
hrpg-status-bar-mixin($color-mp)
.meter-text
position: absolute
top: 0
right: 0.5em
z-index: 1
line-height: 2.25
&.title
left: 0.382em
&.value
right: 0.382em
//Apply certain styles in header only

8
views/options/social/group.jade
View file

@ -37,13 +37,13 @@ a.pull-right.gem-wallet(popover-trigger='mouseenter', popover-title=env.t('guild
span.glyphicon.glyphicon-heart
| {{group.quest.hp | number:0}} / {{Content.quests[group.quest.key].hp}}
.hero-stats
.meter.health(title=env.t('bossHP'))
.meter.health(tooltip=env.t('bossHP'))
.bar(style='width: {{Shared.percent(group.quest.progress.hp, Content.quests[group.quest.key].boss.hp)}}%;')
span.meter-text
span.meter-text.title
span.glyphicon.glyphicon-heart
 
| HP
span.meter-text.value
| {{Math.ceil(group.quest.progress.hp)}} / {{Content.quests[group.quest.key].boss.hp}}
div(ng-if='Content.quests[group.quest.key].collect')
h4=env.t('collected') + ':'
table.table.table-striped

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

@ -5,31 +5,32 @@
// avatar
.herobox-wrap.main-herobox(ng-controller='UserCtrl')
+herobox({main:1})
// stat bars
.hero-stats
.meter.health(title=env.t('health'))
.meter.health(tooltip=env.t('health'))
.bar(style='width: {{Shared.percent(user.stats.hp, 50)}}%;')
span.meter-text
span.meter-text.title
span.glyphicon.glyphicon-heart
|  
| HP
span.meter-text.value
| {{Math.ceil(user.stats.hp)}} / 50
.meter.experience(title=env.t('experience'))
.meter.experience(tooltip=env.t('experience'))
.bar(style='width: {{Shared.percent(user.stats.exp,Shared.tnl(user.stats.lvl))}}%;')
span.meter-text
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}}
// FIXME doesn't look great here, but the "Experience" CSS title rollover covers it where it was before
span(ng-show='user.history.exp')
a(ng-click='toggleChart("exp")', tooltip=env.t('progress'))
|  
span.glyphicon.glyphicon-signal
.meter.mana(title='Mana', ng-if='user.flags.classSelected && !user.preferences.disableClasses')
.meter.mana(tooltip='Mana', ng-if='user.flags.classSelected && !user.preferences.disableClasses')
.bar(style='width: {{user.stats.mp / user._statsComputed.maxMP * 100}}%;')
span.meter-text
span.meter-text.title
span.glyphicon.glyphicon-fire
|  
| MP
span.meter-text.value
span
| {{Math.floor(user.stats.mp)}} / {{user._statsComputed.maxMP}}
// party