From 57eb80f9db8a20c32d72e6420a59b0a2b2770e9e Mon Sep 17 00:00:00 2001 From: benmanley Date: Thu, 5 Jun 2014 16:17:33 +0100 Subject: [PATCH] refactor(.hero-stats): restyle status meters Add text to icons to clarify purpose of each bar Tidy up tooltip behaviour Aesthetic changes --- public/css/global-colors.styl | 10 +++- public/css/global-modules.styl | 32 +++++++++---- public/css/header.styl | 81 ++++++++++++++++----------------- views/options/social/group.jade | 8 ++-- views/shared/header/header.jade | 31 +++++++------ 5 files changed, 89 insertions(+), 73 deletions(-) diff --git a/public/css/global-colors.styl b/public/css/global-colors.styl index 3cffd54907..67e162c9d7 100644 --- a/public/css/global-colors.styl +++ b/public/css/global-colors.styl @@ -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%) \ No newline at end of file +$color-filter-tag-challenge = lighten($color-purple,90%) \ No newline at end of file diff --git a/public/css/global-modules.styl b/public/css/global-modules.styl index bd11a8256a..737d852066 100644 --- a/public/css/global-modules.styl +++ b/public/css/global-modules.styl @@ -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 diff --git a/public/css/header.styl b/public/css/header.styl index 20d49ef1ba..9658cc3c67 100644 --- a/public/css/header.styl +++ b/public/css/header.styl @@ -11,7 +11,7 @@ overflow-x: auto // position relative @media screen and (max-width:768px) // remove padding-top when toolbar is static - padding: 0 + padding: 0 .toolbar.active ~ .header-wrap padding: 0 // remove padding when toolbar is hidden @@ -109,61 +109,58 @@ /* 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 header .hero-stats diff --git a/views/options/social/group.jade b/views/options/social/group.jade index 96ed43d961..c3809d5507 100644 --- a/views/options/social/group.jade +++ b/views/options/social/group.jade @@ -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 diff --git a/views/shared/header/header.jade b/views/shared/header/header.jade index 007b5c309a..b511a97b26 100644 --- a/views/shared/header/header.jade +++ b/views/shared/header/header.jade @@ -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