From 15a63d6e66cc8b2ee7130cc4c9a829c2dd5d42bf Mon Sep 17 00:00:00 2001
From: benmanley <info@benmanley.org>
Date: Thu, 3 Jul 2014 16:03:40 +0100
Subject: [PATCH] refactor(.hero-stats): re-restyle status meters

Improved status meter design based on user feedback
---
 public/css/header.styl          | 45 ++++++++++++++++-----------------
 views/shared/header/header.jade | 21 +++++++--------
 2 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/public/css/header.styl b/public/css/header.styl
index 9658cc3c67..de9063bc71 100644
--- a/public/css/header.styl
+++ b/public/css/header.styl
@@ -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%)
+        
\ No newline at end of file
diff --git a/views/shared/header/header.jade b/views/shared/header/header.jade
index b511a97b26..ce41538a52 100644
--- a/views/shared/header/header.jade
+++ b/views/shared/header/header.jade
@@ -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}}