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

Fix broken meters in IE

Browse source 
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.
This commit is contained in:
Kevin Gisi 2015-03-25 08:24:39 -04:00
parent 06ffd4db44
commit 7740f1969b
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
website/views/shared/header/header.jade
View file

@ -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}}