From 7a24b39edcc6e0756b87bda25c674bde40fab74b Mon Sep 17 00:00:00 2001
From: Zachary Kain <zakkain@gmail.com>
Date: Sat, 9 Feb 2013 17:25:08 -0500
Subject: [PATCH] rewrite header markup, reduce fiddly avatar css, improve
 mobile layout

---
 styles/app/avatar.styl | 23 -------------
 styles/app/index.styl  | 48 +++++++++++++++++++++++++-
 views/app/index.html   | 77 ++++++++++++++++++++----------------------
 3 files changed, 84 insertions(+), 64 deletions(-)

diff --git a/styles/app/avatar.styl b/styles/app/avatar.styl
index aeb26fbb14..369f0483c4 100644
--- a/styles/app/avatar.styl
+++ b/styles/app/avatar.styl
@@ -1,24 +1,3 @@
-#character
-  float:none
-  margin:0px auto
-
-  td#bars
-    padding-top: 10px
-
-#bars
-  .progress
-    position: relative
-    height: 25px
-  .bar
-    height: 25px
-    border: 1px solid black
-  .progress-text
-    position: absolute
-    right: 5px
-    top: 3px
-    color: black
-
-
 // basic avatar sprite group
 .avatar
     cursor: pointer
@@ -36,8 +15,6 @@
 
 // main and party avatars
 .main-avatar, .party-avatar
-  margin-top: -12px
-
   .character-sprites
     top: -15px
 
diff --git a/styles/app/index.styl b/styles/app/index.styl
index 553bce1d73..519fb18de6 100644
--- a/styles/app/index.styl
+++ b/styles/app/index.styl
@@ -29,15 +29,61 @@ html,body,p,h1,ul,li,table,tr,th,td
   white-space: nowrap
   position:fixed
   width: 100%
+  box-sizing: border-box
   z-index: 1000
 
 #head .pull-right
-  margin-right: 2%
+  margin-right: 0
   margin-left: 1%
 
 .modal
   whitespace:normal
 
+.dropdown-menu
+  right: 0
+  left: auto
+  
+.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
+  }
+  .main-avatar-wrap {
+    border-right: 1px solid grey;
+    padding-right: 20px
+  }
+  .party-avatar-wrap {
+    float: left;
+  }
+  .progress-bars {
+    clear: both
+  }
+}
 
 /* Footer
 -------------------------------------------------- */
diff --git a/views/app/index.html b/views/app/index.html
index 3aa610ab9e..ab9af3bcee 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -205,8 +205,9 @@ do a find for the string after "→"
 <Header:>
   <app:modalDialogs />
   <ui:connectionAlert>
-  <div id="head">
+  <div id="head" class="container-fluid">
 
+  <!-- options menu -->
     <div class='pull-right'>
       {#unless _loggedIn}
         <a href="#" class="btn btn-small btn-info" data-target="#login-modal" data-toggle="modal">Login / Register</a>
@@ -232,52 +233,48 @@ do a find for the string after "→"
       {/}
     </div>
 
-    <div class='container-fluid'>
+  <!-- main header -->
+    <div class="row-fluid">
+      <div class='char-status {#if gt(_partyMembers.length,1)}span8 offset2 has-party{else}span6 offset3{/}'>
+        
+        <!-- avatar -->
+        <figure class="main-avatar-wrap">
+          <app:avatar profile={_user} main="true" />
+        </figure>
 
-      <div class='row-fluid'>
-        <div id=character class='{#if gt(_partyMembers.length,1)}span8{else}span5{/}'>
-          <table>
-            <tr>
+        <!-- party -->
+        {#each _partyMembers as :member}
+          {#unless equal(:member.id, _userId)}
+          <figure class="party-avatar-wrap" rel="tooltip" title="{username(:member.auth)}" data-placement="bottom">
+            <app:avatar profile={:member} party="true" />
+          </figure>
+          {/}
+        {/}
 
-              <!-- Avatar -->
-              <td>
-                <app:avatar profile={_user} main="true" />
-              </td>
+        <!-- progress bars -->
+        <div class="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> {round(_user.stats.hp)} / 50</span>  
+          </div>
 
-              <!-- Progress Bars -->
-              <td id="bars" style="width:{#if gt(_partyMembers.length,1)}75%{else}90%{/};">
-                <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> {round(_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)}%;"></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> {round(_user.stats.exp)} / {_tnl}
-                  </span>
-                </div>
-              </td>
-
-              <!-- Party -->
-              {#each _partyMembers as :member}
-                {#unless equal(:member.id, _userId)}
-                    <td rel="tooltip" title="{username(:member.auth)}" data-placement="bottom" >
-                        <app:avatar profile={:member} party="true" />
-                    </td>
-                {/}
+          <div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
+            <div class="bar" style="width: {percent(_user.stats.exp,_tnl)}%;"></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;
               {/}
-
-            </tr>
-
-          </table>
+              <i class=icon-star></i> {round(_user.stats.exp)} / {_tnl}
+            </span>
+          </div>
           <div id="exp-chart" style="display:none;"></div>
         </div>
+      <!-- end .char-status -->
       </div>
-    </div>    
+    <!-- end .row-fluid -->
+    </div>
+
+  <!-- end #head -->
   </div>
 
 <Body:>