rebuilt header boiiii. Tested FF, Safari, Chrome

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

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%

views/app/header.html

@@ -2,33 +2,12 @@
     {#unless equal(_user.preferences.hideHeader,true)}
         <div class='hero-box'>
             <!-- avatar -->
-            <figure class="main-avatar-wrap">
+            <figure class="hero-avatar main-avatar-wrap">
                 <app:avatar:avatar profile={_user} main="true" />
             </figure>
 
-            <!-- party -->
-            {{#each _partyMembers as :member}}
-                {{#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>
-                    ">
-                    <!-- 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" />
-                    </figure>
-                {{/}}
-            {{/}}
-
             <!-- progress bars -->
-            <div class="progress-bars">
+            <div class="hero-progress progress-bars">
                 <div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
                     <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>
@@ -45,5 +24,27 @@
                 </div>
                 <div id="exp-chart" style="display:none;"></div>
             </div>
+
+            <!-- party -->
+            {{#each _partyMembers as :member}}
+                {{#unless equal(:member.id, _userId)}}
+                    <figure class="hero-party-member 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>
+                    ">
+                    <!-- 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" />
+                    </figure>
+                {{/}}
+            {{/}}
+        <!-- close hero box -->
         </div>
     {/}

views/app/settings.html

@@ -136,9 +136,19 @@
 <menu:>
     <div class="user-menu">
         {#unless _loggedIn}
-        <a href="#" class="btn btn-small btn-info" data-target="#login-modal" data-toggle="modal">Login / Register</a>
+        <button class="task-action-btn tile solid" href="#" data-target="#login-modal" data-toggle="modal">Login / Register</button>
         {else}
-        <div class="btn-group">
+        <ul class="nav site-nav">
+            <li class="flyout">
+                <h1 class="task-action-btn tile solid user-reporter">{username(_user.auth)}</h1>
+                <ul class="flyout-content nav stacked">
+                    <li><a class="task-action-btn tile solid" data-target="#settings-modal" data-toggle="modal">Settings</a></li>
+                    <li>{#if _user.flags.partyEnabled}<a class="task-action-btn tile solid" data-target="#party-modal" data-toggle="modal">Party</a>{/}</li>
+                    <li><a class="task-action-btn tile solid" href="/logout">Logout</a></li>
+                </ul>
+            </li>
+        </ul>
+        <!-- <div class="btn-group">
             <button class="btn btn-small">
                 {#if _user.party.invitation}<span class="badge badge-success">1</span>{/}
                 {username(_user.auth)}
@@ -155,6 +165,6 @@
                 {/}
                 <li><a href='/logout'>Logout</a></li>
             </ul>
-        </div>
+        </div> -->
         {/}
     </div>