From 433329db431e171ba0f1c43e7a6d1e3fff70fb04 Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Tue, 12 Feb 2013 12:33:15 -0500 Subject: [PATCH 1/5] Replace progress bar markup with 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 "→" + + + {#if _loggedIn} @@ -270,19 +273,18 @@ do a find for the string after "→"
-
-
- {round(_user.stats.hp)} / 50 +
+ + {round(_user.stats.hp)} / 50
- -
-
- - {#if _user.history.exp} -   - {/} - {round(_user.stats.exp)} / {_tnl} - +
+ + + {#if _user.history.exp} +   + {/} + {round(_user.stats.exp)} / {_tnl} +
@@ -656,6 +658,7 @@ do a find for the string after "→"
+ {#if equal(_view.nodeEnv,"production")} From 7864865065bbef0270eb836e132cef1f95e9004f Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Tue, 12 Feb 2013 12:33:41 -0500 Subject: [PATCH 2/5] ACTUALLY add the polyfill for this time --- public/css/progress-polyfill.css | 48 ++++++++++++++++++++++++++++++++ public/js/progress-polyfill.js | 5 ++++ 2 files changed, 53 insertions(+) create mode 100644 public/css/progress-polyfill.css create mode 100644 public/js/progress-polyfill.js diff --git a/public/css/progress-polyfill.css b/public/css/progress-polyfill.css new file mode 100644 index 0000000000..721b4f2373 --- /dev/null +++ b/public/css/progress-polyfill.css @@ -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'); +} \ No newline at end of file diff --git a/public/js/progress-polyfill.js b/public/js/progress-polyfill.js new file mode 100644 index 0000000000..78679191c0 --- /dev/null +++ b/public/js/progress-polyfill.js @@ -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=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))}})(); \ No newline at end of file From 8c9cd3cb67d1b266537716e1e0255da5d2df0cbf Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Tue, 12 Feb 2013 12:36:38 -0500 Subject: [PATCH 3/5] start re-marking up avatars in prep for charbox module. WILL DO A FEATURE BRANCH, PROMISE --- styles/app/avatar.styl | 42 ++++++++++++++++++++++++++++++++++++-- styles/app/customizer.styl | 19 ----------------- views/app/index.html | 5 +++-- 3 files changed, 43 insertions(+), 23 deletions(-) diff --git a/styles/app/avatar.styl b/styles/app/avatar.styl index 369f0483c4..4d31a23179 100644 --- a/styles/app/avatar.styl +++ b/styles/app/avatar.styl @@ -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 \ No newline at end of file + +// customization avatars +.customization-avatar-wrap + float: right + +@media (max-width: 480px) { + .customization-avatar-wrap { + float: none; + margin-bottom: 1em; + } +} \ No newline at end of file diff --git a/styles/app/customizer.styl b/styles/app/customizer.styl index 6e881355d4..cb1a6ad952 100644 --- a/styles/app/customizer.styl +++ b/styles/app/customizer.styl @@ -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%; } diff --git a/views/app/index.html b/views/app/index.html index 1eb0d36dba..ff1f1b7a26 100644 --- a/views/app/index.html +++ b/views/app/index.html @@ -4,6 +4,7 @@ do a find for the string after "→" ----------------------------------- → $modal-template → $customizations-modal +→ $avatar → $avatar-template =================================== --> @@ -139,7 +140,7 @@ do a find for the string after "→" {#with _user.preferences} -
+
{username(_user.auth)}
@@ -257,7 +258,7 @@ do a find for the string after "→"
- +
From 08c76380cec2cc125609ae02f5eb65cd271345f1 Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Tue, 12 Feb 2013 12:41:50 -0500 Subject: [PATCH 4/5] remove gradient code, doesn't add much and looks cool w/out it --- styles/app/index.styl | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/styles/app/index.styl b/styles/app/index.styl index ede6756464..fcd8e94405 100644 --- a/styles/app/index.styl +++ b/styles/app/index.styl @@ -106,26 +106,23 @@ progress::-webkit-progress-value { transition 0.25s linear } +.health progress::-moz-progress-bar { + border-right: 1px solid #888 + background:#dd514c; +} + .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::-moz-progress-bar { + border-right: 1px solid #888 + background:#faa732; +} .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; } From 188950c8fb90fb8d8c1214b60ff18adf812032fb Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Tue, 12 Feb 2013 13:13:35 -0500 Subject: [PATCH 5/5] refactor a bit --- styles/app/index.styl | 61 ++++++++++++++++++++----------------------- views/app/index.html | 2 +- 2 files changed, 30 insertions(+), 33 deletions(-) diff --git a/styles/app/index.styl b/styles/app/index.styl index fcd8e94405..e7531a2351 100644 --- a/styles/app/index.styl +++ b/styles/app/index.styl @@ -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 @@ -85,49 +83,48 @@ html,body,p,h1,ul,li,table,tr,th,td 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 { +progress::-webkit-progress-bar background: transparent; -} -progress::-webkit-progress-value { +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::-moz-progress-bar { - border-right: 1px solid #888 - background:#dd514c; -} +.health + progress::-webkit-progress-value + border-right: 1px solid #666 + background:#dd514c; + progress::-moz-progress-bar + border-right: 1px solid #888 + background:#dd514c; -.health progress::-webkit-progress-value { - border-right: 1px solid #666 - background:#dd514c; -} +.full-hp + progress::-webkit-progress-value + border-right: none + progress::-moz-progress-bar + border-right: none -.exp progress::-moz-progress-bar { - border-right: 1px solid #888 - background:#faa732; -} -.exp progress::-webkit-progress-value { - border-right: 1px solid #888 - background:#faa732; -} +.exp + progress::-webkit-progress-value + border-right: 1px solid #888 + background:#faa732; + progress::-moz-progress-bar + border-right: 1px solid #888 + background:#faa732; - -#exp-chart - padding-top: 3em +/* Main Area +-------------------------------------------------- */ +.well { + border: 1px solid #bbb +} /* Footer diff --git a/views/app/index.html b/views/app/index.html index ff1f1b7a26..f575eebb7b 100644 --- a/views/app/index.html +++ b/views/app/index.html @@ -274,7 +274,7 @@ do a find for the string after "→"
-
+
{round(_user.stats.hp)} / 50