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 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/styles/app/index.styl b/styles/app/index.styl index 7d96c44d20..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 @@ -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 -------------------------------------------------- */ diff --git a/views/app/index.html b/views/app/index.html index 7515038e58..78f5090367 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 =================================== --> @@ -13,6 +14,9 @@ do a find for the string after "→" + + + {#if _loggedIn} @@ -142,7 +146,7 @@ do a find for the string after "→" {#with _user.preferences} -
+
{username(_user.auth)}
@@ -260,7 +264,7 @@ do a find for the string after "→"
- +
@@ -276,19 +280,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} +
@@ -662,6 +665,7 @@ do a find for the string after "→"
+ {#if equal(_view.nodeEnv,"production")}