From 7740f1969bb4f40f389c7f4c1b454f6d9581df51 Mon Sep 17 00:00:00 2001 From: Kevin Gisi Date: Wed, 25 Mar 2015 08:24:39 -0400 Subject: [PATCH] Fix broken meters in IE Health, XP, and Mana bars were broken in IE, due to the use of {{ }} within style attributes. Using Angular's string interpolation within style attributes doesn't work in IE, as IE will actually strip the property immediately upon DOM render. Using ng-style allows properties to be preserved, and renders cross-browser correctly. --- website/views/shared/header/header.jade | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/website/views/shared/header/header.jade b/website/views/shared/header/header.jade index 001081b729..4fc7cb3c03 100644 --- a/website/views/shared/header/header.jade +++ b/website/views/shared/header/header.jade @@ -10,22 +10,22 @@ .meter-label(tooltip=env.t('health')) span.glyphicon.glyphicon-heart .meter.health(tooltip='{{Math.round(user.stats.hp * 100) / 100}}') - .bar(style='width: {{Shared.percent(user.stats.hp, 50)}}%;') + .bar(ng-style='{"width": Shared.percent(user.stats.hp, 50)+"%"}') span.meter-text.value | {{Math.ceil(user.stats.hp)}} / 50 .meter-label(tooltip=env.t('experience')) span.glyphicon.glyphicon-star .meter.experience(tooltip='{{Math.round(user.stats.exp * 100) / 100}}') - .bar(style='width: {{Shared.percent(user.stats.exp,Shared.tnl(user.stats.lvl))}}%;') + .bar(ng-style='{"width": Shared.percent(user.stats.exp,Shared.tnl(user.stats.lvl))+"%"}') span.meter-text.value span(ng-show='user.history.exp', tooltip=env.t('progress')) - a(ng-click='toggleChart("exp")').glyphicon.glyphicon-signal + a(ng-click='toggleChart("exp")').glyphicon.glyphicon-signal span | {{Math.floor(user.stats.exp) | number:0}} / {{Shared.tnl(user.stats.lvl) | number:0}} .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', tooltip='{{Math.round(user.stats.mp * 100) / 100}}') - .bar(style='width: {{user.stats.mp / user._statsComputed.maxMP * 100}}%;') + .bar(ng-style='{"width": (user.stats.mp / user._statsComputed.maxMP * 100) + "%"}') span.meter-text.value span | {{Math.floor(user.stats.mp)}} / {{user._statsComputed.maxMP}}