Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #379 from zakkain/master

Browse Source 
Refactor & Update Progress Bars
This commit is contained in:
Tyler Renelle
2013-02-12 19:21:49 -08:00
parent cd517c7f7c 188950c8fb
commit 917f2f17aa
6 changed files with 175 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/progress-polyfill.css
+48
View File
@@ -0,0 +1,48 @@
// Progress element polyfill css
progress[role] {
display: inline-block;
position: relative;
width: 10em;
height: 1em;
vertical-align: -.2em;
background-image: url('data:image/gif;base64,R0lGODlhIAAQAIAAAP///////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBwABACwAAAAAIAAQAAACLISPF8vtkWJ8lMlrasVXb554FBiKDomYJ5qpFgu4LysvcFzfNQTvet4D0hgFACH5BAkHAAEALAAAAAAgABAAAAIshH+hyx0Io3F0yTsrxVdvHnkOGIoMCZknmqgWC7gvKytwXN/1A+963gPSKAUAIfkECQcAAQAsAAAAACAAEAAAAi2EHanLcQ9hmyraR+ndee7bNZ8VMmNULqeUJivWOi8Sz3RrA7E77/LrswV7oQIAIfkECQcAAQAsAAAAACAAEAAAAixEjqkB7Q/bmijaR+ndee7bLZ8VKmNUJieUVqvTHi8cz1Jtx0yOz7pt6L10BQAh+QQJBwABACwAAAAAIAAQAAACLIyPB8vtkGJ8lMlrasVXb554FBiKDomYJ5qpFhu4LysvcFzfNQTvet4D0hgFACH5BAkHAAEALAAAAAAgABAAAAIsjH+gyw0Io3F0yTsrxVdvHnkOGIoMCZknmqgWG7gvKytwXN/1A+963gPSKAUAIfkECQcAAQAsAAAAACAAEAAAAi2MDanLcA9hmyraR+ndee7bNZ8VMmNULqeUJivWOi8Sz3RrB7E77/LrswV7oQIAIfkEAQcAAQAsAAAAACAAEAAAAiwMjqkQ7Q/bmijaR+ndee7bLZ8VKmNUJieUVqvTHi8cz1Jtx0yOz7pt6L10BQA7');
-moz-box-sizing: border-box;
box-sizing: border-box;
}
progress[role],
progress[aria-valuenow]:before {
background-color: #5af;
}
progress[role],
progress[role]:after {
background-repeat:repeat-x;
background-position: 0 0;
-moz-background-size: auto 100%;
-webkit-background-size: auto 100%;
background-size: auto 100%;
}
/* Determinate only overrides */
progress[aria-valuenow] {
background: #eee;
}
progress[aria-valuenow]:before {
content: "";
display: block;
height: 100%;
}
/* Overlay */
progress[role]:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAQBAMAAAAlsQiEAAAABGdBTUEAALGPC/xhBQAAAC1QTFRF////////gYGA+/v7////3NzcQUFCkZGQWFlZAAAAAAAA////WFhY////r6+w5vktvgAAAA90Uk5TZB4sW3ZODgMEJgBVHDY+cmAeZAAAACZJREFUeNpjmMBQwHCBAQQMGAIYHjAoMBxgSGBoYFjAIMCwgcEBAGgwBpG64ZoMAAAAAElFTkSuQmCC');
}
public/js/progress-polyfill.js
+5
View File
@@ -0,0 +1,5 @@
(function(){if(!("position"in document.createElement("progress"))){var h;h=Object.defineProperty?function(a,c,b){b.enumerable=!0;b.configurable=!0;try{Object.defineProperty(a,c,b)}catch(e){if(e.number===-2146823252)b.enumerable=!1,Object.defineProperty(a,c,b)}}:"__defineSetter__"in document.body?function(a,b,d){a.__defineGetter__(b,d.get);d.set&&a.__defineSetter__(b,d.set)}:function(a,b,d){a[b]=d.get.call(a)};try{[].slice.apply(document.images);var i=function(a){return[].slice.apply(a)}}catch(j){i=
function(a){for(var b=[],d=a.length,e=0;e<d;e++)b[e]=a[e];return b}}for(var f=function(){var a=document.createElement("div");a.foo="bar";return a.getAttribute("foo")==="bar"}(),b=window.ProgressPolyfill={DOMInterface:{max:{get:function(){return parseFloat(this.getAttribute("aria-valuemax"))||1},set:function(a){this.setAttribute("aria-valuemax",a);f||this.setAttribute("max",a);b.redraw(this)}},value:{get:function(){return parseFloat(this.getAttribute("aria-valuenow"))||0},set:function(a){this.setAttribute("aria-valuenow",
a);f||this.setAttribute("value",a);b.redraw(this)}},position:{get:function(){return this.hasAttribute("aria-valuenow")?this.value/this.max:-1}},labels:{get:function(){for(var a=this.parentNode;a&&a.nodeName!=="LABEL";)a=a.parentNode;a=a?[a]:[];if(this.id&&document.querySelectorAll){var b=i(document.querySelectorAll('label[for="'+this.id+'"]'));b.length&&(a=a.concat(b))}return a}}},redraw:function(a){b.isInited(a)?b.init(a):f||(a.setAttribute("aria-valuemax",parseFloat(a.getAttribute("max"))||1),a.hasAttribute("value")?
a.setAttribute("aria-valuenow",parseFloat(a.getAttribute("value"))||0):a.removeAttribute("aria-valuenow"));if(a.position!==-1)a.style.paddingRight=a.offsetWidth*(1-a.position)+"px"},isInited:function(a){return a.getAttribute("role")==="progressbar"},init:function(a){if(!b.isInited(a)){a.setAttribute("role","progressbar");a.setAttribute("aria-valuemin","0");a.setAttribute("aria-valuemax",parseFloat(a.getAttribute("max"))||1);a.hasAttribute("value")&&a.setAttribute("aria-valuenow",parseFloat(a.getAttribute("value"))||
0);for(var c in b.DOMInterface)h(a,c,{get:b.DOMInterface[c].get,set:b.DOMInterface[c].set});b.redraw(a)}},progresses:document.getElementsByTagName("progress")},g=b.progresses.length-1;g>=0;g--)b.init(b.progresses[g]);document.addEventListener&&(document.addEventListener("DOMAttrModified",function(a){var c=a.target,a=a.attrName;c.nodeName==="PROGRESS"&&(a==="max"||a==="value")&&b.redraw(c)},!1),document.addEventListener("DOMNodeInserted",function(a){a=a.target;a.nodeName==="PROGRESS"&&b.init(a)},!1))}})();
styles/app/avatar.styl
+40 -2
View File
@@ -13,11 +13,49 @@
bottom: 0px
right: 10px
.character-sprites span
position: absolute
// styling the "char-box"
.char-box
margin: 0
border: 1px solid darkgrey;
background: #fafafa;
width: 107px;
// .avatar
.char-level, .char-name
margin-top: 6px;
border-top: 1px solid darkgrey;
text-align: center
line-height: 2
font-size: 12px
// main and party avatars
.main-avatar, .party-avatar
.character-sprites
top: -15px
.main-avatar-wrap
margin: 0 5px 0 0
float: left
.party-avatar-wrap
margin: 0
float: right
.character-sprites span
position: absolute
// customization avatars
.customization-avatar-wrap
float: right
@media (max-width: 480px) {
.customization-avatar-wrap {
float: none;
margin-bottom: 1em;
}
}
styles/app/customizer.styl
-19
View File
@@ -1,18 +1,5 @@
// $customizations-modal layout
.avatar-window
margin: 0
border: 1px solid darkgrey;
width: 107px;
float: right;
.char-name
margin-top: 6px;
border-top: 1px solid darkgrey;
text-align: center
line-height: 2
menu
padding: 0;
margin: 0;
@@ -49,13 +36,7 @@ menu
.customize-option:not(:last-of-type)
margin-right: 10px
@media (max-width: 480px) {
.avatar-window {
float: none;
margin-bottom: 1em
}
.customize-menu {
width: 100%;
}
styles/app/index.styl
+64 -28
View File
@@ -17,11 +17,6 @@ html,body,p,h1,ul,li,table,tr,th,td
#head
background: #ddd
background: -webkit-gradient(linear,0 0,0 100%,from(#e7e7e7),to(#d0d0d0))
background: -moz-linear-gradient(#e7e7e7, #d0d0d0)
background: -ms-linear-gradient(#e7e7e7, #d0d0d0)
background: -o-linear-gradient(#e7e7e7, #d0d0d0)
background: linear-gradient(#e7e7e7, #d0d0d0)
-webkit-box-shadow: inset 0 1px #f7f7f7, 0 1px #888, 0 2px #e7e7e7
-moz-box-shadow: inset 0 1px #f7f7f7, 0 1px #888, 0 2px #e7e7e7
box-shadow: inset 0 1px #f7f7f7, 0 1px #888, 0 2px #e7e7e7
@@ -42,6 +37,9 @@ html,body,p,h1,ul,li,table,tr,th,td
margin-right: 0
margin-left: 1%
#exp-chart
padding-top: 3em
.modal
whitespace:normal
@@ -52,29 +50,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 +66,67 @@ 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
width: 100%
height: 25px
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
transition 0.25s linear
.health
progress::-webkit-progress-value
border-right: 1px solid #666
background:#dd514c;
progress::-moz-progress-bar
border-right: 1px solid #888
background:#dd514c;
.full-hp
progress::-webkit-progress-value
border-right: none
progress::-moz-progress-bar
border-right: none
.exp
progress::-webkit-progress-value
border-right: 1px solid #888
background:#faa732;
progress::-moz-progress-bar
border-right: 1px solid #888
background:#faa732;
/* Main Area
-------------------------------------------------- */
.well {
border: 1px solid #bbb
}
/* Footer
-------------------------------------------------- */
views/app/index.html
+18 -14
View File
@@ -4,6 +4,7 @@ do a find for the string after "→"
-----------------------------------
→ $modal-template
→ $customizations-modal
→ $avatar
→ $avatar-template
=================================== -->
@@ -13,6 +14,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}
@@ -142,7 +146,7 @@ do a find for the string after "→"
{#with _user.preferences}
<!-- user avatar preview -->
<figure class="avatar-window">
<figure class="customization-avatar-wrap char-box">
<app:avatar profile={_user} minimal="true" />
<figcaption class="char-name">{username(_user.auth)}</figcaption>
</figure>
@@ -260,7 +264,7 @@ do a find for the string after "→"
<div class="row-fluid">
<div class='char-status {#if gt(_partyMembers.length,1)}span8 offset2 has-party{else}span6 offset3{/}'>
<!-- avatar -->
<!-- $avatar -->
<figure class="main-avatar-wrap">
<app:avatar profile={_user} main="true" />
</figure>
@@ -276,19 +280,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 {#if gt(_user.stats.hp,49)}full-hp{/}">
<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>
@@ -662,6 +665,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 -->