From e18c53f97fe2232d6cf7c967f11ef37f6cd1c26e Mon Sep 17 00:00:00 2001 From: Zachary Kain Date: Mon, 18 Mar 2013 16:48:47 -0400 Subject: [PATCH] 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}