From 932783484a2db511b84a70464c0e2da09a82c703 Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 14:02:30 -0400 Subject: [PATCH 01/21] fix price input bug --- styles/app/responsive.styl | 30 ++++++++++++++++++++++++++++++ styles/app/tasks.styl | 9 ++++++++- views/app/tasks.html | 12 ++++++------ 3 files changed, 44 insertions(+), 7 deletions(-) diff --git a/styles/app/responsive.styl b/styles/app/responsive.styl index d79c8dc14e..c7200751f8 100644 --- a/styles/app/responsive.styl +++ b/styles/app/responsive.styl @@ -1,3 +1,33 @@ +// widths +.full + width: 100%; +.half + width: 50%; +.third + width: 33.3333%; +.two-thirds + width: 66.6666%; +.quarter + width: 25%; +.three-quarters + width: 75%; +.fifth + width: 20%; +.two-fifths + width: 40%; +.three-fifths + width: 60%; +.four-fifths + width: 80%; +.sixth + width: 16.6667%; +.eighth + width: 12.5%; +.tenth + width: 10%; +.twelfth + width: 8.3333%; + .grid padding: 0 1.5em 1.5em 0 letter-spacing: -4px diff --git a/styles/app/tasks.styl b/styles/app/tasks.styl index d02012c28c..b27ff34d90 100644 --- a/styles/app/tasks.styl +++ b/styles/app/tasks.styl @@ -300,13 +300,20 @@ for $stage in $stages box-shadow: none border-radius: 0 font-family: 'Lato', sans-serif //bootstrap override - + textarea.option-content height: 5em padding-top: 0.25em resize: none margin-bottom: 0 +.option-pricer + .option-content + width: 20% + display: inline-block + .money [class^="shop_"] + vertical-align: 0 + // button-group .task-controls.tile-group display: block diff --git a/views/app/tasks.html b/views/app/tasks.html index d5cd9525b1..3ecf9e8a2b 100644 --- a/views/app/tasks.html +++ b/views/app/tasks.html @@ -237,12 +237,12 @@ {else if equal(:task.type, 'reward')} -
- -
- Gold -
-
+
+ Price + +
+
+ {else if equal(:task.type, 'todo')} From 68ca52f1253682f5aac02f460249ce9e8b38f487 Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 14:15:22 -0400 Subject: [PATCH 02/21] wah my beautiful designery fonts don't work in modals --- styles/base.styl | 3 +++ 1 file changed, 3 insertions(+) diff --git a/styles/base.styl b/styles/base.styl index f5e0233db5..c3f33b8642 100644 --- a/styles/base.styl +++ b/styles/base.styl @@ -3,6 +3,9 @@ body { padding: 2em; + // I am getting really frustrated that I can't override base bootstrap styles :( + // is there a fix? + font-family: 'Lato', sans-serif !important; // remember to remove !important once shenanigans solved } h1 { font-size: 2em; From eceae48b2bcf45f79da62696dd539867224dcfb3 Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 14:28:00 -0400 Subject: [PATCH 03/21] robustify input stuff. Still NEED to rip out existing bootstrap classes so mine take hold --- styles/app/tasks.styl | 11 ++++++----- views/app/settings.html | 8 ++++---- views/app/tasks.html | 4 ++-- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/styles/app/tasks.styl b/styles/app/tasks.styl index b27ff34d90..7d00a8665a 100644 --- a/styles/app/tasks.styl +++ b/styles/app/tasks.styl @@ -264,7 +264,7 @@ for $stage in $stages // task editing // ------------ -.task-options +[class$="-options"] padding: 0 0.5em margin-top: 1.25em color: #333 @@ -307,12 +307,13 @@ for $stage in $stages resize: none margin-bottom: 0 -.option-pricer +.option-short .option-content - width: 20% + width: 3em display: inline-block - .money [class^="shop_"] - vertical-align: 0 + .input-suffix + vertical-align: 20% + padding-left: 0.25em // button-group .task-controls.tile-group diff --git a/views/app/settings.html b/views/app/settings.html index c60eaf325f..e6fc882034 100644 --- a/views/app/settings.html +++ b/views/app/settings.html @@ -7,11 +7,11 @@
-
+

Custom Day Start

-
- - :00 (24h) +
+ + :00 (24h clock)
Habit defaults to check and reset your dailies at midnight each day. You can customize that here (Enter number between 0 and 24). diff --git a/views/app/tasks.html b/views/app/tasks.html index 3ecf9e8a2b..3bb6233f0d 100644 --- a/views/app/tasks.html +++ b/views/app/tasks.html @@ -237,10 +237,10 @@ {else if equal(:task.type, 'reward')} -
+
Price -
+
From ba16338bf9c83921e9d975229a70a1a8275edea1 Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 14:32:44 -0400 Subject: [PATCH 04/21] fix text showing behind button b/c of opacity bug --- styles/app/tasks.styl | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/styles/app/tasks.styl b/styles/app/tasks.styl index 7d00a8665a..2e1d445c23 100644 --- a/styles/app/tasks.styl +++ b/styles/app/tasks.styl @@ -95,15 +95,14 @@ for $stage in $stages outline: 0 border: 0 border-radius: 0 //required to nuke BB-playbook user agent styles - background-color: darken($best, 20%) - opacity: 0.75 + background-color: darken($best, 15%) &:hover, &:focus - opacity: 1 + // opacity: 1 background-color: darken($best, 20%) &:active background-color: darken($best, 30%) - opacity: 1 + // opacity: 1 // an individual task entry From e67295651fc90ccf2b119bdf83a559dd5362bfad Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 14:33:05 -0400 Subject: [PATCH 05/21] didn't need that reset, probably will remove the whole thing once tested for shenanigans --- styles/reset.styl | 3 --- 1 file changed, 3 deletions(-) diff --git a/styles/reset.styl b/styles/reset.styl index 8f42218c28..0bb961d75a 100644 --- a/styles/reset.styl +++ b/styles/reset.styl @@ -1,6 +1,3 @@ -body,h1,h2,h3,h4,th { - font: 13px/normal Arial,sans-serif; -} body { background: #fff; color: #000; From 13673c3ec744b7805ba72ace0fa850340373f552 Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 15:21:03 -0400 Subject: [PATCH 06/21] flattenize header, change to
, even margins --- styles/app/index.styl | 15 ++++----------- views/app/index.html | 4 ++-- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/styles/app/index.styl b/styles/app/index.styl index f3b02898dd..76d962d608 100644 --- a/styles/app/index.styl +++ b/styles/app/index.styl @@ -36,17 +36,10 @@ hr /* Header -------------------------------------------------- */ -#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 - padding: 12px 16px +.site-header + padding: 0.75em + background: #f5f5f5 + border: 1px solid #ccc white-space: nowrap position:fixed width: 100% diff --git a/views/app/index.html b/views/app/index.html index 6a88e40aab..925ebb3d67 100644 --- a/views/app/index.html +++ b/views/app/index.html @@ -25,13 +25,13 @@ - +

From e18c53f97fe2232d6cf7c967f11ef37f6cd1c26e Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 16:48:47 -0400 Subject: [PATCH 07/21] middle of wrasslin the new header --- public/sticky.js | 129 ++++++++++++++++++++++++++++++++++++++++ src/app/browser.coffee | 7 +++ styles/app/index.styl | 83 ++++++++++++++++++-------- views/app/header.html | 81 ++++++++++++------------- views/app/settings.html | 2 +- 5 files changed, 233 insertions(+), 69 deletions(-) create mode 100644 public/sticky.js diff --git a/public/sticky.js b/public/sticky.js new file mode 100644 index 0000000000..8e9fa66045 --- /dev/null +++ b/public/sticky.js @@ -0,0 +1,129 @@ +// Sticky Plugin v1.0.0 for jQuery +// ============= +// Author: Anthony Garand +// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk) +// Improvements by Leonardo C. Daronco (daronco) +// Created: 2/14/2011 +// Date: 2/12/2012 +// Website: http://labs.anthonygarand.com/sticky +// Description: Makes an element on the page stick on the screen as you scroll +// It will only set the 'top' and 'position' of your element, you +// might need to adjust the width in some cases. + +(function($) { + var defaults = { + topSpacing: 0, + bottomSpacing: 0, + className: 'is-sticky', + wrapperClassName: 'sticky-wrapper', + center: false, + getWidthFrom: '' + }, + $window = $(window), + $document = $(document), + sticked = [], + windowHeight = $window.height(), + scroller = function() { + var scrollTop = $window.scrollTop(), + documentHeight = $document.height(), + dwh = documentHeight - windowHeight, + extra = (scrollTop > dwh) ? dwh - scrollTop : 0; + + for (var i = 0; i < sticked.length; i++) { + var s = sticked[i], + elementTop = s.stickyWrapper.offset().top, + etse = elementTop - s.topSpacing - extra; + + if (scrollTop <= etse) { + if (s.currentTop !== null) { + s.stickyElement + .css('position', '') + .css('top', ''); + s.stickyElement.parent().removeClass(s.className); + s.currentTop = null; + } + } + else { + var newTop = documentHeight - s.stickyElement.outerHeight() + - s.topSpacing - s.bottomSpacing - scrollTop - extra; + if (newTop < 0) { + newTop = newTop + s.topSpacing; + } else { + newTop = s.topSpacing; + } + if (s.currentTop != newTop) { + s.stickyElement + .css('position', 'fixed') + .css('top', newTop); + + if (typeof s.getWidthFrom !== 'undefined') { + s.stickyElement.css('width', $(s.getWidthFrom).width()); + } + + s.stickyElement.parent().addClass(s.className); + s.currentTop = newTop; + } + } + } + }, + resizer = function() { + windowHeight = $window.height(); + }, + methods = { + init: function(options) { + var o = $.extend(defaults, options); + return this.each(function() { + var stickyElement = $(this); + + stickyId = stickyElement.attr('id'); + wrapper = $('
') + .attr('id', stickyId + '-sticky-wrapper') + .addClass(o.wrapperClassName); + stickyElement.wrapAll(wrapper); + + if (o.center) { + stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"}); + } + + if (stickyElement.css("float") == "right") { + stickyElement.css({"float":"none"}).parent().css({"float":"right"}); + } + + var stickyWrapper = stickyElement.parent(); + stickyWrapper.css('height', stickyElement.outerHeight()); + sticked.push({ + topSpacing: o.topSpacing, + bottomSpacing: o.bottomSpacing, + stickyElement: stickyElement, + currentTop: null, + stickyWrapper: stickyWrapper, + className: o.className, + getWidthFrom: o.getWidthFrom + }); + }); + }, + update: scroller + }; + + // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer): + if (window.addEventListener) { + window.addEventListener('scroll', scroller, false); + window.addEventListener('resize', resizer, false); + } else if (window.attachEvent) { + window.attachEvent('onscroll', scroller); + window.attachEvent('onresize', resizer); + } + + $.fn.sticky = function(method) { + if (methods[method]) { + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); + } else if (typeof method === 'object' || !method ) { + return methods.init.apply( this, arguments ); + } else { + $.error('Method ' + method + ' does not exist on jQuery.sticky'); + } + }; + $(function() { + setTimeout(scroller, 0); + }); +})(jQuery); \ No newline at end of file diff --git a/src/app/browser.coffee b/src/app/browser.coffee index 6042821d90..493708345d 100644 --- a/src/app/browser.coffee +++ b/src/app/browser.coffee @@ -20,6 +20,7 @@ loadJavaScripts = (model) -> require '../../public/vendor/jquery-ui/ui/jquery.ui.widget' require '../../public/vendor/jquery-ui/ui/jquery.ui.mouse' require '../../public/vendor/jquery-ui/ui/jquery.ui.sortable' + require '../../public/sticky.js' require '../../public/vendor/bootstrap-tour/bootstrap-tour' @@ -120,6 +121,11 @@ setupTour = (model) -> tour._current = 0 if isNaN(tour._current) #bootstrap-tour bug tour.start() + +# jquery sticky header on scroll, no need for position fixed +initStickyHeader = (model) -> + # $('.site-header').sticky({topSpacing:1}) + ### Sets up "+1 Exp", "Level Up", etc notifications ### @@ -192,6 +198,7 @@ module.exports.app = (appExports, model, app) -> setupSortable(model) setupTooltips(model) setupTour(model) + initStickyHeader(model) unless model.get('_view.mobileDevice') $('.datepicker').datepicker({autoclose:true, todayBtn:true}) .on 'changeDate', (ev) -> #for some reason selecting a date doesn't fire a change event on the field, meaning our changes aren't saved diff --git a/styles/app/index.styl b/styles/app/index.styl index 76d962d608..2bf380dbb6 100644 --- a/styles/app/index.styl +++ b/styles/app/index.styl @@ -37,35 +37,31 @@ hr -------------------------------------------------- */ .site-header - padding: 0.75em + padding: 0 0.75em 0.75em background: #f5f5f5 border: 1px solid #ccc white-space: nowrap - position:fixed width: 100% box-sizing: border-box - z-index: 1000 + z-index: 1 -@media (max-width: 600px) { - #head { - position: static; - } -} - -#head .pull-right +.site-header .pull-right margin-right: 0 margin-left: 1% .modal whitespace:normal +.user-menu { + text-align: right + position: relative + top: 1em +} + .dropdown-menu right: 0 left: auto -.char-status - // border: 1px dotted grey - .main-avatar-wrap margin: 0 5px 0 0 float: left @@ -75,24 +71,24 @@ hr float: right .progress-bars - padding-top: 15px + // padding-top: 15px .progress position: relative - height: 25px + height: 2em .bar - height: 25px + height: 2em border: 1px solid black .progress-text - position: absolute - right: 5px - top: 3px - color: black + color: #111 + float: right + margin-right: 1em + line-height: 2 @media (max-width: 600px) { - .char-status { - padding-top: 30px - } + // .char-status { + // padding-top: 30px + // } .main-avatar-wrap { border-right: 1px solid grey; padding-right: 20px @@ -105,6 +101,30 @@ hr } } +$worse = rgb(244, 204, 204) +$neutral = rgb(255, 242, 204) + +.progress-bars + .progress + border-radius: 0 + background: white + opacity: 1 + outline: 1px solid rgba(0,0,0,0.3) + overflow: hidden + outline-offset: -1px + box-shadow: none + .bar + background-image: none + border: 1px solid rgba(0,0,0,0.3) + box-shadow: none + + .progress-danger .bar + background-color: darken($worse, 40%) + + .progress-warning .bar + background-color: darken($neutral, 40%) + + /* Footer -------------------------------------------------- */ @@ -128,7 +148,9 @@ hr /* Customizations to make footer sticky */ /*html, body {height: 100%;}*/ -#wrap {min-height: 100%; margin-top:130px; z-index:-1} +#wrap + min-height: 100% + z-index:-1 #main /*overflow:auto;*/ padding-bottom: 250px; /* don't know why this works, sticky footers are weird */ @@ -200,4 +222,15 @@ hr position: fixed; top: 0; right: 0px; - z-index: 1001; \ No newline at end of file + z-index: 1001; + + +/* hero box +-------------------- */ +@media (min-width: 37.5em) + .hero-box + width: 70% + +@media (min-width: 60em) + .hero-box + width: 50% diff --git a/views/app/header.html b/views/app/header.html index d7c7ab9b83..fb655e944b 100644 --- a/views/app/header.html +++ b/views/app/header.html @@ -1,54 +1,49 @@ {#unless equal(_user.preferences.hideHeader,true)} -
-
+
+ +
+ +
- -
- -
- - - {{#each _partyMembers as :member}} - {{#unless equal(:member.id, _userId)}} -
- +
+
+
+
GP: {{floor(:member.stats.gp)}}
+
+ "> + - - - {{/}} + + {{/}} + {{/}} - -
-
-
- {ceil(_user.stats.hp)} / 50 -
- -
-
- - {#if _user.history.exp} -   - {/} - {floor(_user.stats.exp)} / {tnl(_user.stats.lvl)} - -
- + +
+
+
+ {ceil(_user.stats.hp)} / 50
- + +
+
+ + {#if _user.history.exp} +   + {/} + {floor(_user.stats.exp)} / {tnl(_user.stats.lvl)} + +
+
-
{/} \ No newline at end of file diff --git a/views/app/settings.html b/views/app/settings.html index e6fc882034..6f6b18e92a 100644 --- a/views/app/settings.html +++ b/views/app/settings.html @@ -134,7 +134,7 @@ {{/}} -
+
{#unless _loggedIn} Login / Register {else} From 8284693d0fc11008eec05cba8d7e0f7969324228 Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 18:29:53 -0400 Subject: [PATCH 08/21] rebuilt header boiiii. Tested FF, Safari, Chrome --- src/app/browser.coffee | 2 +- styles/app/index.styl | 102 +--------------------------------------- views/app/header.html | 47 +++++++++--------- views/app/settings.html | 16 +++++-- 4 files changed, 39 insertions(+), 128 deletions(-) diff --git a/src/app/browser.coffee b/src/app/browser.coffee index 493708345d..7ae4958a3e 100644 --- a/src/app/browser.coffee +++ b/src/app/browser.coffee @@ -124,7 +124,7 @@ setupTour = (model) -> # jquery sticky header on scroll, no need for position fixed initStickyHeader = (model) -> - # $('.site-header').sticky({topSpacing:1}) + $('.site-header').sticky({topSpacing:1}) ### Sets up "+1 Exp", "Level Up", etc notifications diff --git a/styles/app/index.styl b/styles/app/index.styl index 2bf380dbb6..4a51cc54b7 100644 --- a/styles/app/index.styl +++ b/styles/app/index.styl @@ -9,6 +9,7 @@ @import "./alerts.styl"; @import "./helpers.styl"; @import "./responsive.styl"; +@import "./header.styl"; @import "./scrollbars.styl"; @@ -33,96 +34,6 @@ hr border-color: rgba(0,0,0,0.1) -/* Header --------------------------------------------------- */ - -.site-header - padding: 0 0.75em 0.75em - background: #f5f5f5 - border: 1px solid #ccc - white-space: nowrap - width: 100% - box-sizing: border-box - z-index: 1 - -.site-header .pull-right - margin-right: 0 - margin-left: 1% - -.modal - whitespace:normal - -.user-menu { - text-align: right - position: relative - top: 1em -} - -.dropdown-menu - right: 0 - left: auto - -.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: 2em -.bar - height: 2em - border: 1px solid black -.progress-text - color: #111 - float: right - margin-right: 1em - line-height: 2 - -@media (max-width: 600px) { - // .char-status { - // padding-top: 30px - // } - .main-avatar-wrap { - border-right: 1px solid grey; - padding-right: 20px - } - .party-avatar-wrap { - float: left; - } - .progress-bars { - clear: both - } -} - -$worse = rgb(244, 204, 204) -$neutral = rgb(255, 242, 204) - -.progress-bars - .progress - border-radius: 0 - background: white - opacity: 1 - outline: 1px solid rgba(0,0,0,0.3) - overflow: hidden - outline-offset: -1px - box-shadow: none - .bar - background-image: none - border: 1px solid rgba(0,0,0,0.3) - box-shadow: none - - .progress-danger .bar - background-color: darken($worse, 40%) - - .progress-warning .bar - background-color: darken($neutral, 40%) /* Footer @@ -223,14 +134,3 @@ $neutral = rgb(255, 242, 204) top: 0; right: 0px; z-index: 1001; - - -/* hero box --------------------- */ -@media (min-width: 37.5em) - .hero-box - width: 70% - -@media (min-width: 60em) - .hero-box - width: 50% diff --git a/views/app/header.html b/views/app/header.html index fb655e944b..3a177b94eb 100644 --- a/views/app/header.html +++ b/views/app/header.html @@ -2,33 +2,12 @@ {#unless equal(_user.preferences.hideHeader,true)}
-
+
- - {{#each _partyMembers as :member}} - {{#unless equal(:member.id, _userId)}} -
- - - -
- {{/}} - {{/}} - -
+
{ceil(_user.stats.hp)} / 50 @@ -45,5 +24,27 @@
+ + + {{#each _partyMembers as :member}} + {{#unless equal(:member.id, _userId)}} +
+ + + +
+ {{/}} + {{/}} +
{/} \ No newline at end of file diff --git a/views/app/settings.html b/views/app/settings.html index 6f6b18e92a..022f35111c 100644 --- a/views/app/settings.html +++ b/views/app/settings.html @@ -136,9 +136,19 @@
{#unless _loggedIn} - Login / Register + {else} -
+
    +
  • +

    {username(_user.auth)}

    + +
    • +
+ {/}
From 4061aaf825110c8bc1fd9900c12328c03c312c8a Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 18:30:25 -0400 Subject: [PATCH 09/21] include header.styl, minor tweaks to the button styles, housekeeping --- styles/app/header.styl | 150 +++++++++++++++++++++++++++++++++++++++++ styles/app/index.styl | 3 + styles/app/tasks.styl | 13 ++-- 3 files changed, 160 insertions(+), 6 deletions(-) create mode 100644 styles/app/header.styl diff --git a/styles/app/header.styl b/styles/app/header.styl new file mode 100644 index 0000000000..96f55240ba --- /dev/null +++ b/styles/app/header.styl @@ -0,0 +1,150 @@ +/* site header +-------------------- */ + +.site-header + width: 100% // this is for the sticky + height: 10em + padding: 2.5em 1.5em 2em + z-index: 1 + background: #f5f5f5 + border-bottom: 1px solid #ccc + +.user-menu + position: absolute + top: 0.5em + right: 0.5em + .tile + cursor: pointer + font-weight: 400 + color: #494949 + color: hsla(0, 0%, 15%, 0.8) + background-color: darken($better, 10%) + &:hover, &:focus + background-color: darken($best, 20%) + &:active + background-color: darken($best, 30%) + color: white + +.user-reporter:after + content: '▾' + float: right + +.stacked > li + display:list-item + > a + display:block + +.flyout, .flyout-alt + position: relative +.flyout-content + position: absolute + top: 100% + right: -99999px + height: 0 + overflow: hidden +.flyout:hover > .flyout-content + right: 0 +.flyout-alt:hover > .flyout-content + top: 0 + right: 100% + +.flyout:hover > .flyout-content, +.flyout-alt:hover > .flyout-content + height: auto + overflow: visible + +.flyout .tile { + width: 5em; +} +.stacked .tile { + outline: 0 + border: 1px solid rgba(0,0,0,0.2) + border-top: 0 +} + + +.progress + position: relative + height: 2em +.bar + border: 1px solid black +.progress-text + color: #111 + float: right + margin-right: 1em + line-height: 2 + +@media (max-width: 600px) { + .main-avatar-wrap { + border-right: 1px solid grey; + padding-right: 20px + } + .party-avatar-wrap { + float: left; + } + .progress-bars { + clear: both + } +} + +$worse = rgb(244, 204, 204) +$neutral = rgb(255, 242, 204) + +.progress-bars + padding: 0 + margin: 0 + .progress + border-radius: 0 + background: white + opacity: 1 + outline: 1px solid rgba(0,0,0,0.2) + outline-offset: -1px + overflow: hidden + box-shadow: none + margin-bottom: 1em + .bar + background-image: none + border: 1px solid rgba(0,0,0,0.2) + border: 0 + box-shadow: none + + .progress-danger .bar + background-color: darken($worse, 38%) + + .progress-warning .bar + background-color: darken($neutral, 30%) + + +/* hero box +-------------------- */ +.hero-box + display: table + margin: 0 auto + +.hero-box > [class^="hero-"] + display: table-cell + vertical-align: top + +@media (min-width: 37.5em) + .hero-box + width: 70% +@media (min-width: 60em) + .hero-box + width: 70% + +.main-avatar-wrap, .party-avatar-wrap + display: inline-block + padding: 0 + margin: 0 + +.main-avatar-wrap + width: 105px + +.party-avatar-wrap + +.hero-progress + padding: 0 + margin: 0 + +.hero-party-member + width: 105px \ No newline at end of file diff --git a/styles/app/index.styl b/styles/app/index.styl index 4a51cc54b7..c2f4dd465a 100644 --- a/styles/app/index.styl +++ b/styles/app/index.styl @@ -117,6 +117,9 @@ hr /* Misc -------------------------------------------------- */ +.modal + whitespace: normal + .notification-character float:left diff --git a/styles/app/tasks.styl b/styles/app/tasks.styl index 2e1d445c23..1d40d39f45 100644 --- a/styles/app/tasks.styl +++ b/styles/app/tasks.styl @@ -96,13 +96,10 @@ for $stage in $stages border: 0 border-radius: 0 //required to nuke BB-playbook user agent styles background-color: darken($best, 15%) - &:hover, - &:focus - // opacity: 1 + &:hover, &:focus background-color: darken($best, 20%) &:active background-color: darken($best, 30%) - // opacity: 1 // an individual task entry @@ -201,7 +198,6 @@ for $stage in $stages position: relative // uncompleted icon label:after, label:before - // content: '◯' content: '' display: block height: 1.714285714em @@ -213,7 +209,10 @@ for $stage in $stages opacity: 0.2 label:after - content: '▨' + // content: '◯' + // content: '⬚' + content: '▢' + // content: '⧠' label:before position: absolute left: 0 @@ -335,6 +334,8 @@ for $stage in $stages &.active opacity: 1 +.tile.solid + opacity: 1 .tile.spacious margin: 0.75em 0 font-size: 1.5em From f453eb9833ee2bd7524ca76e291cc90abcfc241b Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 18:31:26 -0400 Subject: [PATCH 10/21] cut old menu. Next up, avatars then MODALS --- views/app/settings.html | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/views/app/settings.html b/views/app/settings.html index 022f35111c..cdd8c1638a 100644 --- a/views/app/settings.html +++ b/views/app/settings.html @@ -148,23 +148,5 @@ - {/} -
+
\ No newline at end of file From 411c61440878f104df1a1bcc4bbec2fe6a7f3ce7 Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 19:33:30 -0400 Subject: [PATCH 11/21] fix the 1px gap --- src/app/browser.coffee | 2 +- styles/app/color-vars.styl | 9 +++ styles/app/header.styl | 130 +++++++++++++++++-------------------- styles/app/tasks.styl | 9 +-- views/app/header.html | 36 +++++----- views/app/index.html | 4 +- 6 files changed, 89 insertions(+), 101 deletions(-) create mode 100644 styles/app/color-vars.styl diff --git a/src/app/browser.coffee b/src/app/browser.coffee index 7ae4958a3e..1d9e2d0eaf 100644 --- a/src/app/browser.coffee +++ b/src/app/browser.coffee @@ -124,7 +124,7 @@ setupTour = (model) -> # jquery sticky header on scroll, no need for position fixed initStickyHeader = (model) -> - $('.site-header').sticky({topSpacing:1}) + $('.header-wrap').sticky({topSpacing:1}) ### Sets up "+1 Exp", "Level Up", etc notifications diff --git a/styles/app/color-vars.styl b/styles/app/color-vars.styl new file mode 100644 index 0000000000..2b2250be6f --- /dev/null +++ b/styles/app/color-vars.styl @@ -0,0 +1,9 @@ +// color variables +$worst = rgb(230, 184, 175) +$worse = rgb(244, 204, 204) +$bad = rgb(252, 229, 205) +$neutral = rgb(255, 242, 204) +$good = rgb(217, 234, 211) +$better = rgb(208, 224, 227) +$best = rgb(201, 218, 248) +$completed = rgb(217, 217, 217) \ No newline at end of file diff --git a/styles/app/header.styl b/styles/app/header.styl index 96f55240ba..75f7273c01 100644 --- a/styles/app/header.styl +++ b/styles/app/header.styl @@ -1,13 +1,14 @@ /* site header -------------------- */ -.site-header +.header-wrap width: 100% // this is for the sticky height: 10em - padding: 2.5em 1.5em 2em + padding: 2.25em 1.5em 2em z-index: 1 background: #f5f5f5 border-bottom: 1px solid #ccc + margin-top: -1px .user-menu position: absolute @@ -29,6 +30,9 @@ content: '▾' float: right + +/* flyout navigation pattern +----------------------------- */ .stacked > li display:list-item > a @@ -62,89 +66,71 @@ border-top: 0 } +/* hero box +-------------------- */ +.site-header + display: table + margin: 0 auto + width: 100% -.progress - position: relative - height: 2em -.bar - border: 1px solid black -.progress-text - color: #111 - float: right - margin-right: 1em - line-height: 2 +.hero-avatar, .party-member-avatar + display: table-cell -@media (max-width: 600px) { - .main-avatar-wrap { - border-right: 1px solid grey; - padding-right: 20px - } - .party-avatar-wrap { - float: left; - } - .progress-bars { - clear: both - } -} +@media (min-width: 37.5em) + .site-header + width: 80% +@media (min-width: 60em) + .site-header + width: 60% -$worse = rgb(244, 204, 204) -$neutral = rgb(255, 242, 204) - -.progress-bars +.hero-avatar, .party-member-avatar padding: 0 margin: 0 - .progress + vertical-align: top + +.hero-avatar + width: 90px + +.party-member-avatar + width: 90px + + +/* progress bars +-------------------- */ +.hero-stats + padding: 0 0.5em + display: table-cell + vertical-align: middle + + .meter, .bar + box-shadow: none border-radius: 0 + + .meter + position: relative background: white opacity: 1 outline: 1px solid rgba(0,0,0,0.2) outline-offset: -1px - overflow: hidden - box-shadow: none - margin-bottom: 1em + overflow: visible // firefox outline fix + margin-bottom: 1.5em + height: 2em + .bar - background-image: none + background: none border: 1px solid rgba(0,0,0,0.2) - border: 0 - box-shadow: none + height: 100% - .progress-danger .bar + + .health .bar background-color: darken($worse, 38%) - - .progress-warning .bar + .experience .bar background-color: darken($neutral, 30%) - -/* hero box --------------------- */ -.hero-box - display: table - margin: 0 auto - -.hero-box > [class^="hero-"] - display: table-cell - vertical-align: top - -@media (min-width: 37.5em) - .hero-box - width: 70% -@media (min-width: 60em) - .hero-box - width: 70% - -.main-avatar-wrap, .party-avatar-wrap - display: inline-block - padding: 0 - margin: 0 - -.main-avatar-wrap - width: 105px - -.party-avatar-wrap - -.hero-progress - padding: 0 - margin: 0 - -.hero-party-member - width: 105px \ No newline at end of file + .meter-text + position: absolute + top: 0 + right: 1em + z-index: 1 + color: #111 + line-height: 2 \ No newline at end of file diff --git a/styles/app/tasks.styl b/styles/app/tasks.styl index 1d40d39f45..0ac6d138ab 100644 --- a/styles/app/tasks.styl +++ b/styles/app/tasks.styl @@ -2,14 +2,7 @@ // ======================== // color variables -$worst = rgb(230, 184, 175) -$worse = rgb(244, 204, 204) -$bad = rgb(252, 229, 205) -$neutral = rgb(255, 242, 204) -$good = rgb(217, 234, 211) -$better = rgb(208, 224, 227) -$best = rgb(201, 218, 248) -$completed = rgb(217, 217, 217) +@import "./color-vars.styl"; // array of keywords and their associated color vars $stages = (worst $worst) (worse $worse) (bad $bad) (neutral $neutral) (good $good) (better $better) (best $best) diff --git a/views/app/header.html b/views/app/header.html index 3a177b94eb..396542bae0 100644 --- a/views/app/header.html +++ b/views/app/header.html @@ -1,34 +1,35 @@ {#unless equal(_user.preferences.hideHeader,true)} -
+ +

From 507a0fc3c97ea5880510c42ba8fd26a091d74ec1 Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 23:42:03 -0400 Subject: [PATCH 12/21] MASSIVE HEADER CHANGES OH SHIT --- src/app/browser.coffee | 2 +- src/app/helpers.coffee | 2 + styles/app/avatar.styl | 84 +++++++++++++++++++++++++++-------- styles/app/header.styl | 99 ++++++++++++++++++++++++------------------ styles/app/index.styl | 7 +-- views/app/alerts.html | 6 +-- views/app/avatar.html | 11 +++-- views/app/header.html | 38 +++++++--------- 8 files changed, 155 insertions(+), 94 deletions(-) diff --git a/src/app/browser.coffee b/src/app/browser.coffee index 1d9e2d0eaf..a097bb8035 100644 --- a/src/app/browser.coffee +++ b/src/app/browser.coffee @@ -124,7 +124,7 @@ setupTour = (model) -> # jquery sticky header on scroll, no need for position fixed initStickyHeader = (model) -> - $('.header-wrap').sticky({topSpacing:1}) + $('.header-wrap').sticky({topSpacing:0}) ### Sets up "+1 Exp", "Level Up", etc notifications diff --git a/src/app/helpers.coffee b/src/app/helpers.coffee index 363f0b7ada..88230466ce 100644 --- a/src/app/helpers.coffee +++ b/src/app/helpers.coffee @@ -42,4 +42,6 @@ module.exports.viewHelpers = (view) -> view.fn "and", -> _.reduce arguments, (cumm, curr) -> cumm && curr view.fn "or", -> _.reduce arguments, (cumm, curr) -> cumm || curr + view.fn "truarr", (num) -> + return num-1 diff --git a/styles/app/avatar.styl b/styles/app/avatar.styl index 369f0483c4..f7170566f7 100644 --- a/styles/app/avatar.styl +++ b/styles/app/avatar.styl @@ -1,23 +1,71 @@ -// basic avatar sprite group -.avatar - cursor: pointer - position: relative - width: 90px - height: 90px +/* herobox & avatar +====================== +* this is the canonical `herobox` avatar component +* it can be placed anywhere on the site and look the +* way it's supposed to. TODO: add variables for show/ +* or hiding user metadata in different situations - .character-sprites - position: absolute +Seeing as the sprites might change drastically in the +future re: pets and whatnot, this is just temporary. +---------------------------------------------------- */ - .lvl - position: absolute - bottom: 0px - right: 10px +// basic herobox styles +.herobox + height: 10.5em // higher to acct for the name area + width: 10em + max-width: 10em + margin: 0 // need this b/c of bootstrap, remove or reset later + padding: 0 // push down the sprite + position: relative + cursor: pointer + background: #f5f5f5 + transition: padding 0.13s ease-out, border 0.25s ease-out, background 0.25s ease-out + outline: 1px solid rgba(0,0,0,0.1) -// main and party avatars -.main-avatar, .party-avatar - .character-sprites - top: -15px +// vertically center avatar sprite +// depending on if they have a pet +.herobox[data-haspet="hasPet"] + padding-top: 2em +.herobox:not([data-haspet="hasPet"]) + padding-top: 1.75em + +// the hero's info frame +.herobox:after + content: attr(data-name) ": " "lv " attr(data-level) // " " attr(data-class) + opacity: 0 // hidden by default + position: absolute + top: 0 + display: block + width: 100% + line-height: 2 + color: black + text-align: center + border-bottom: 1px solid rgba(0,0,0,0.1) + background: darken($good, 15%) + transition: opacity 0.2s ease-out + +// expose hero info on hover, taking +// into account the extra pet space +.herobox:hover, .herobox:focus + background: desaturate(lighten($better, 30%), 10%) + &:after + opacity: 1 + +.herobox[data-haspet="hasPet"] + &:hover, &:focus + padding-top: 3.25em + +.herobox:not([data-haspet="hasPet"]) + &:hover, &:focus + padding-top: 2.5em -.character-sprites span - position: absolute \ No newline at end of file +// positioning the sprites, etc +.herobox + .character-sprites + width: 6.428571429em // 90px + height: 6.428571429em + margin: 0 auto + + .character-sprites span, .pet + position: absolute \ No newline at end of file diff --git a/styles/app/header.styl b/styles/app/header.styl index 75f7273c01..335769823e 100644 --- a/styles/app/header.styl +++ b/styles/app/header.styl @@ -1,30 +1,31 @@ -/* site header +/* header wrapper -------------------- */ - .header-wrap width: 100% // this is for the sticky - height: 10em - padding: 2.25em 1.5em 2em + padding: 0 z-index: 1 background: #f5f5f5 - border-bottom: 1px solid #ccc - margin-top: -1px + border-bottom: 1px solid rgba(0,0,0,0.2) + // margin-top: -1px + overflow: hidden +/* login/menu buttons +--------------------- */ .user-menu position: absolute top: 0.5em right: 0.5em + font-size: 0.85em .tile cursor: pointer font-weight: 400 color: #494949 color: hsla(0, 0%, 15%, 0.8) - background-color: darken($better, 10%) + background-color: darken($better, 5%) &:hover, &:focus - background-color: darken($best, 20%) + background-color: darken($good, 15%) &:active - background-color: darken($best, 30%) - color: white + background-color: darken($good, 25%) .user-reporter:after content: '▾' @@ -66,39 +67,39 @@ border-top: 0 } -/* hero box + +/* header layout -------------------- */ .site-header display: table - margin: 0 auto - width: 100% + height: 10.5em -.hero-avatar, .party-member-avatar - display: table-cell - -@media (min-width: 37.5em) +@media (min-width: 42.5em) .site-header - width: 80% + width: 75% @media (min-width: 60em) .site-header - width: 60% - -.hero-avatar, .party-member-avatar - padding: 0 - margin: 0 - vertical-align: top - -.hero-avatar - width: 90px - -.party-member-avatar - width: 90px + // margin: 0 auto + width: 66% +@media (min-width: 70em) + .site-header + width: 70% + +// this is a wrapper for avatars in the header +// inside this is the actual `herobox` module +// that can be used anywhere on the site +.herobox-wrap + display: table-cell + vertical-align: middle + width: 10em + height: 10.5em /* progress bars -------------------- */ .hero-stats - padding: 0 0.5em + padding: 0 1.25em + margin: 0 display: table-cell vertical-align: middle @@ -112,25 +113,39 @@ opacity: 1 outline: 1px solid rgba(0,0,0,0.2) outline-offset: -1px - overflow: visible // firefox outline fix - margin-bottom: 1.5em - height: 2em - + overflow: hidden // firefox outline fix + height: 2.25em + margin: 0 0 1em + cursor: help; + color: #111 + &:last-of-type + margin-bottom: 0 + &:after + content: attr(title) + position: absolute + left: -1em + top 0.4em + font-weight: 400 + z-index: -1 + transition: all 0.25s ease-out + .bar - background: none - border: 1px solid rgba(0,0,0,0.2) + border: 1px solid rgba(0,0,0,0.1) height: 100% + transition: width 0.25s ease-out + .meter:hover:after + left: 1em + z-index: 1 .health .bar - background-color: darken($worse, 38%) + background: darken($worse, 38%) .experience .bar - background-color: darken($neutral, 30%) + background: darken($neutral, 30%) .meter-text position: absolute top: 0 - right: 1em + right: 0.5em z-index: 1 - color: #111 - line-height: 2 \ No newline at end of file + line-height: 2.25 \ No newline at end of file diff --git a/styles/app/index.styl b/styles/app/index.styl index c2f4dd465a..fefd934fc2 100644 --- a/styles/app/index.styl +++ b/styles/app/index.styl @@ -28,6 +28,8 @@ html,body,p,h1,ul,li,table,tr,th,td -moz-box-sizing: border-box box-sizing: border-box +* { font-family: "Lato", sans-serif } + hr border-top: 0 border-bottom: 1px solid #ddd @@ -58,12 +60,11 @@ hr } /* Customizations to make footer sticky */ -/*html, body {height: 100%;}*/ +/*html, body {height: 100%;}*/ #wrap min-height: 100% z-index:-1 -#main - /*overflow:auto;*/ +#main padding-bottom: 250px; /* don't know why this works, sticky footers are weird */ @media (max-width: 600px) { diff --git a/views/app/alerts.html b/views/app/alerts.html index 55ad0571e8..0c16ba0e70 100644 --- a/views/app/alerts.html +++ b/views/app/alerts.html @@ -7,7 +7,7 @@ {#if equal(_user.flags.algosNotification,'show')}
- [x] + ✕

New features! Custom day start, new and better algorithms, authentication enhancements. See details here.  "Hey, I had more Exp before this roll-out!" Restore your Exp here.

@@ -15,7 +15,7 @@ {#if equal(_user.flags.onliesNotification, 'show')}
- [x] + ✕

"Onlies" now gain / lose value just like other habits, and are reset back to 0 at the beginning of each day.  See details here, and @@ -26,7 +26,7 @@ {#if equal(_user.flags.priorityNotification, 'show')}

- [x] + ✕

New Feature: Priority Multiplier! You can now multiply "more important" tasks on a 1x, 1.5x, or 2x scale. See details.

{/} \ No newline at end of file diff --git a/views/app/avatar.html b/views/app/avatar.html index d39b5c57f4..5036de68df 100644 --- a/views/app/avatar.html +++ b/views/app/avatar.html @@ -24,9 +24,13 @@ -
- {#unless @minimal}{#if @profile.items.pet}{/}{/} +
+ {#unless @minimal}{#if @profile.items.pet}{/}{/} {#with @profile.preferences as :p} @@ -41,9 +45,8 @@ {/}
{{#unless @minimal}} -
Lvl {@profile.stats.lvl}
{{/}} -
+ diff --git a/views/app/header.html b/views/app/header.html index 396542bae0..796ade9802 100644 --- a/views/app/header.html +++ b/views/app/header.html @@ -1,24 +1,25 @@ {#unless equal(_user.preferences.hideHeader,true)} -