sudoxreboot/habitica
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica.git synced 2026-08-01 15:31:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace progress bar markup with <progress> element. Add polyfill & styles

Browse source
This commit is contained in:
Zachary Kain 2013-02-12 12:33:15 -05:00
parent 031b4029c6
commit 433329db43
2 changed files with 80 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
styles/app/index.styl
View file

@ -52,29 +52,6 @@ html,body,p,h1,ul,li,table,tr,th,td
.char-status
// border: 1px dotted grey
.main-avatar-wrap
margin: 0 5px 0 0
float: left
.party-avatar-wrap
margin: 0
float: right
.progress-bars
padding-top: 15px
.progress
position: relative
height: 25px
.bar
height: 25px
border: 1px solid black
.progress-text
position: absolute
right: 5px
top: 3px
color: black
@media (max-width: 600px) {
.char-status {
padding-top: 30px
@ -91,6 +68,71 @@ html,body,p,h1,ul,li,table,tr,th,td
}
}
.progress-bars
width: auto
.stat-meter
padding: 1em 1em 0 0.5em
display: block
overflow: hidden
.progress-text
position: relative
right: 6.5em
display: inline-block
width: 5.5em
text-align: right
vertical-align: 20%
progress
display: inline-block
width: 100%
height: 25px
line-height: 1.5em
border: 1px solid #111;
background: #fff;
-webkit-border-radius 4px
border-radius 4px
progress::-webkit-progress-bar {
background: transparent;
}
progress::-webkit-progress-value {
-webkit-transition 0.25s linear
-moz-transition 0.25s linear
-ms-transition 0.25s linear
-o-transition 0.25s linear
transition 0.25s linear
}
.health progress::-webkit-progress-value {
border-right: 1px solid #666
background:#dd514c;
background-image:-moz-linear-gradient(top,#ee5f5b,#c43c35);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#c43c35));
background-image:-webkit-linear-gradient(top,#ee5f5b,#c43c35);
background-image:-o-linear-gradient(top,#ee5f5b,#c43c35);
background-image:linear-gradient(to bottom,#ee5f5b,#c43c35);
background-repeat:repeat-x;
}
.exp progress::-webkit-progress-value {
border-right: 1px solid #888
background:#faa732;
background-image:-moz-linear-gradient(top,#fbb450,#f89406);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));
background-image:-webkit-linear-gradient(top,#fbb450,#f89406);
background-image:-o-linear-gradient(top,#fbb450,#f89406);
background-image:linear-gradient(to bottom,#fbb450,#f89406);
background-repeat:repeat-x;
}
#exp-chart
padding-top: 3em
/* Footer
-------------------------------------------------- */

27
views/app/index.html
View file

@ -13,6 +13,9 @@ do a find for the string after "→"
<Head:>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- progress element polyfill ** TODO: SET UP WITH MODERNIZR **-->
<script>document.createElement('progress');</script>
<link rel="stylesheet" href="css/progress-polyfill.css">
<modalDialogs:>
{#if _loggedIn}
@ -270,19 +273,18 @@ do a find for the string after "→"
<!-- progress bars -->
<div class="progress-bars">
<div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
<div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
<span class="progress-text"><i class=icon-heart></i> {round(_user.stats.hp)} / 50</span>
<div class="stat-meter health">
<progress max="50" value="{_user.stats.hp}" rel=tooltip data-placement=bottom title="Health"></progress>
<span class="progress-text"><i class=icon-heart></i> {round(_user.stats.hp)} / 50</span>
</div>
<div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
<div class="bar" style="width: {percent(_user.stats.exp,_tnl)}%;"></div>
<span class="progress-text">
{#if _user.history.exp}
<a x-bind=click:toggleChart data-toggle-id="exp-chart" data-history-path="_user.history.exp" rel=tooltip title="Progress"><i class=icon-signal></i></a>&nbsp;
{/}
<i class=icon-star></i> {round(_user.stats.exp)} / {_tnl}
</span>
<div class="stat-meter exp">
<progress max="{_tnl}" value="{round(_user.stats.exp)}" rel=tooltip data-placement=bottom title="Experience"></progress>
<span class="progress-text">
{#if _user.history.exp}
<a x-bind=click:toggleChart data-toggle-id="exp-chart" data-history-path="_user.history.exp" rel=tooltip title="Progress"><i class=icon-signal></i></a>&nbsp;
{/}
<i class=icon-star></i> {round(_user.stats.exp)} / {_tnl}
</span>
</div>
<div id="exp-chart" style="display:none;"></div>
</div>
@ -656,6 +658,7 @@ do a find for the string after "→"
</div>
<Scripts:>
<script src="js/progress-polyfill.js"></script>
<script src="https://checkout.stripe.com/v2/checkout.js"></script>
{#if equal(_view.nodeEnv,"production")}
<!-- Google Analytics -->