middle of wrasslin the new header

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 = $('<div></div>')
+            .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);

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

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) {
+.site-header .pull-right
-  #head {
-    position: static;
-  }
-}
-
-#head .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
+  color: #111
-  right: 5px
+  float: right
-  top: 3px
+  margin-right: 1em
-  color: black
+  line-height: 2
 
 @media (max-width: 600px) {
-  .char-status {
+  // .char-status {
-    padding-top: 30px
+  //   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;
+  z-index: 1001;
+
+
+/* hero box
+-------------------- */
+@media (min-width: 37.5em)
+  .hero-box
+    width: 70%
+
+@media (min-width: 60em)
+  .hero-box
+    width: 50%

views/app/header.html

@@ -1,54 +1,49 @@
 <header:>
     {#unless equal(_user.preferences.hideHeader,true)}
-        <div class="row-fluid">
+        <div class='hero-box'>
-            <div class='char-status {#if gt(_partyMembers.length,1)}span8 offset2 has-party{else}span6 offset3{/}'>
+            <!-- avatar -->
+            <figure class="main-avatar-wrap">
+                <app:avatar:avatar profile={_user} main="true" />
+            </figure>
 
-                <!-- avatar -->
+            <!-- party -->
-                <figure class="main-avatar-wrap">
+            {{#each _partyMembers as :member}}
-                    <app:avatar:avatar profile={_user} main="true" />
+                {{#unless equal(:member.id, _userId)}}
-                </figure>
+                    <figure class="party-avatar-wrap" rel="popover" data-title="{{username(:member.auth)}}" data-placement="bottom" data-trigger="hover" data-html="true" data-content="
-
+                         <div>
-                <!-- party -->
+                            <div class='progress progress-danger' style='height:5px;'>
-                {{#each _partyMembers as :member}}
+                                <div class='bar' style='height: 5px; width: {percent(:member.stats.hp, 50)}%;'></div>
-                    {{#unless equal(:member.id, _userId)}}
-                        <figure class="party-avatar-wrap" rel="popover" data-title="{{username(:member.auth)}}" data-placement="bottom" data-trigger="hover" data-html="true" data-content="
-                             <div>
-                                <div class='progress progress-danger' style='height:5px;'>
-                                    <div class='bar' style='height: 5px; width: {percent(:member.stats.hp, 50)}%;'></div>
-                                </div>
-                                <div class='progress progress-warning' style='height:5px;'>
-                                    <div class='bar' style='height: 5px; width: {percent(:member.stats.exp, tnl(:member.stats.lvl))}%;'></div>
-                                </div>
-                                <div>GP: {{floor(:member.stats.gp)}}</div>
                             </div>
-                        ">
+                            <div class='progress progress-warning' style='height:5px;'>
-                        <!-- Would be way cleaner as a Derby template `data-content="<app:party:member-stats profile={{:member}} />"`, but it was just printing HTML as text -->
+                                <div class='bar' style='height: 5px; width: {percent(:member.stats.exp, tnl(:member.stats.lvl))}%;'></div>
+                            </div>
+                            <div>GP: {{floor(:member.stats.gp)}}</div>
+                        </div>
+                    ">
+                    <!-- Would be way cleaner as a Derby template `data-content="<app:party:member-stats profile={{:member}} />"`, but it was just printing HTML as text -->
 
-                            <app:avatar:avatar profile={{:member}} party="true" />
+                        <app:avatar:avatar profile={{:member}} party="true" />
-                        </figure>
+                    </figure>
-                    {{/}}
                 {{/}}
+            {{/}}
 
-                <!-- progress bars -->
+            <!-- progress bars -->
-                <div class="progress-bars">
+            <div class="progress-bars">
-                    <div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
+                <div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
-                        <div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
+                    <div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
-                        <span class="progress-text"><i class=icon-heart></i> {ceil(_user.stats.hp)} / 50</span>
+                    <span class="progress-text"><i class=icon-heart></i> {ceil(_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(_user.stats.lvl))}%;"></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> {floor(_user.stats.exp)} / {tnl(_user.stats.lvl)}
-                    </span>
-                    </div>
-                    <div id="exp-chart" style="display:none;"></div>
                 </div>
-                <!-- end .char-status -->
+
+                <div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
+                    <div class="bar" style="width: {percent(_user.stats.exp,tnl(_user.stats.lvl))}%;"></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> {floor(_user.stats.exp)} / {tnl(_user.stats.lvl)}
+                </span>
+                </div>
+                <div id="exp-chart" style="display:none;"></div>
             </div>
-            <!-- end .row-fluid -->
         </div>
     {/}

views/app/settings.html

@@ -134,7 +134,7 @@
     {{/}}
 
 <menu:>
-    <div class='pull-right'>
+    <div class="user-menu">
         {#unless _loggedIn}
         <a href="#" class="btn btn-small btn-info" data-target="#login-modal" data-toggle="modal">Login / Register</a>
         {else}