From 433329db431e171ba0f1c43e7a6d1e3fff70fb04 Mon Sep 17 00:00:00 2001
From: Zachary Kain <zakkain@gmail.com>
Date: Tue, 12 Feb 2013 12:33:15 -0500
Subject: [PATCH] Replace progress bar markup with <progress> element. Add
 polyfill & styles

---
 styles/app/index.styl | 88 ++++++++++++++++++++++++++++++++-----------
 views/app/index.html  | 27 +++++++------
 2 files changed, 80 insertions(+), 35 deletions(-)

diff --git a/styles/app/index.styl b/styles/app/index.styl
index 7d96c44d20..ede6756464 100644
--- a/styles/app/index.styl
+++ b/styles/app/index.styl
@@ -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
 -------------------------------------------------- */
 
diff --git a/views/app/index.html b/views/app/index.html
index 4ee39b1fee..1eb0d36dba 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -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 -->