From ac8913c0277d3d89478fcb72102078d2fab05f27 Mon Sep 17 00:00:00 2001
From: Daniel Weigh <daniel@jamkazam.com>
Date: Thu, 6 Feb 2014 08:11:20 -0500
Subject: [PATCH] VRFS-294

Updates to the band profile page
---
 .../assets/stylesheets/client/band.css.scss   |  35 ++++
 web/app/views/api_bands/musician_index.rabl   |   5 +
 web/app/views/clients/_bandProfile.html.erb   | 164 ++++++++++--------
 3 files changed, 132 insertions(+), 72 deletions(-)

diff --git a/web/app/assets/stylesheets/client/band.css.scss b/web/app/assets/stylesheets/client/band.css.scss
index 814fed92f..90952e2e1 100644
--- a/web/app/assets/stylesheets/client/band.css.scss
+++ b/web/app/assets/stylesheets/client/band.css.scss
@@ -147,6 +147,41 @@
     border-bottom: dotted 1px #444;
     position:relative;
     display:block;
+
+    .result-name {
+      font-size: 12px;
+      font-weight: bold;
+      margin-bottom: 2px;
+    }
+    .stats {
+      margin-top: 4px;
+      img {
+        vertical-align: middle;
+      }
+    }
+    .lcol {
+      width: 148px;
+    }
+    .instruments {
+      width:128px;
+      img {
+        height:24px;
+        width:24px;
+        margin-right:2px;
+
+        &:last-child {
+          margin-right:0px;
+        }
+
+      }
+    }
+    .button-row {
+      margin-top:10px;
+      margin-bottom:5px;
+      .result-list-button-wrapper {
+        margin:0;
+      }
+    }
 }
 
 .band-profile-about-left {
diff --git a/web/app/views/api_bands/musician_index.rabl b/web/app/views/api_bands/musician_index.rabl
index 57b723984..967467c22 100644
--- a/web/app/views/api_bands/musician_index.rabl
+++ b/web/app/views/api_bands/musician_index.rabl
@@ -9,3 +9,8 @@ node :instruments do |musician|
     end
   end
 end
+
+node :biography do |musician|
+  musician.biography.nil? ? "" : musician.biography
+end
+
diff --git a/web/app/views/clients/_bandProfile.html.erb b/web/app/views/clients/_bandProfile.html.erb
index 12c321312..affb37669 100644
--- a/web/app/views/clients/_bandProfile.html.erb
+++ b/web/app/views/clients/_bandProfile.html.erb
@@ -9,90 +9,110 @@
 
         <%= render "screen_navigation" %>
     </div>
-    <form id="band-profile-form">
-        <div class="band-profile-header">
-            <h2 id="band-profile-name"></h2>
+    <div class="content-body">
+        <form id="band-profile-form" class="inner-content">
+            <div class="profile-header profile-head">
+                <h2 id="band-profile-name"></h2>
 
-            <div class="band-profile-status">
-            </div>
-
-            <div class="right">
-                <a id="btn-follow-band" class="button-orange">FOLLOW</a>
-                <a id="btn-edit-band-profile" class="button-orange">EDIT PROFILE</a>
-            </div>
-
-            <br clear="all" /><br />
-            <!-- avatar -->
-            <div class="band-profile-photo">
-                <div class="avatar-profile">
-                    <img id="band-profile-avatar" width="200" height="200" />
+                <div class="band-profile-status">
                 </div>
-            </div>
 
-            <!-- profile navigation -->
-            <div class="band-profile-nav">
-                <a id="band-profile-about-link" class="band active">about</a>
-                <a id="band-profile-history-link" class="band">history</a>
-                <a id="band-profile-members-link" class="band">members</a>
-                <a id="band-profile-social-link" class="band last">social</a>
-            </div>
-        </div>
-        <br clear="all" />
-        <div class="content-scroller" style="height:350px;">
-            <div id="band-profile-about" class="band-profile-wrapper">
-                <!-- stats & location -->
-                <div class="band-profile-about-left">
-                    <h3>Location:</h3><br />
-                    <span id="band-profile-location"></span><br /><br /><br />
-                    <h3>Stats:</h3><br />
-                    <span id="band-profile-follower-stats"></span><br />
-                    <span id="band-profile-session-stats"></span><br />
-                    <span id="band-profile-recording-stats"></span><br />
+                <div class="right">
+                    <a id="btn-follow-band" class="button-orange">FOLLOW</a>
+                    <a id="btn-edit-band-profile" class="button-orange">EDIT PROFILE</a>
                 </div>
-                <div class="band-profile-about-right">
-                    <p id="band-profile-biography"></p><br />
-                </div>
-                <br clear="all" />
-            </div>
-            <div id="band-profile-history" class="band-profile-wrapper">
-                <br clear="all" />
-            </div>
-            <div id="band-profile-members" class="band-profile-wrapper">
-                <br clear="all" />
-            </div>
-            <div id="band-profile-social" class="band-profile-wrapper">
-                <div class="band-profile-social-left">
-                    <h2>Followers</h2>
-                    <div id="band-profile-social-followers">
+
+                <br clear="all" /><br />
+                <!-- avatar -->
+                <div class="band-profile-photo">
+                    <div class="avatar-profile">
+                        <img id="band-profile-avatar" width="200" height="200" />
                     </div>
                 </div>
-                <br clear="all" />
+
+                <!-- profile navigation -->
+                <div class="band-profile-nav">
+                    <a id="band-profile-about-link" class="band active">about</a>
+                    <a id="band-profile-history-link" class="band">history</a>
+                    <a id="band-profile-members-link" class="band">members</a>
+                    <a id="band-profile-social-link" class="band last">social</a>
+                </div>
+                <div class="clearall"></div>
             </div>
-        </div>
-    </form>
+            <div class="profile-body">
+                <div id="band-profile-about" class="profile-body-content">
+                    <div class="band-profile-wrapper">
+                        <!-- stats & location -->
+                        <div class="band-profile-about-left">
+                            <h3>Location:</h3><br />
+                            <span id="band-profile-location"></span><br /><br /><br />
+                            <h3>Stats:</h3><br />
+                            <span id="band-profile-follower-stats"></span><br />
+                            <span id="band-profile-session-stats"></span><br />
+                            <span id="band-profile-recording-stats"></span><br />
+                        </div>
+                        <div class="band-profile-about-right">
+                            <p id="band-profile-biography"></p><br />
+                        </div>
+                        <br clear="all" />
+                    </div>
+                </div>
+                <div id="band-profile-history" class="band-profile-wrapper">
+                    <div class="content-body-scroller">
+                        <br clear="all" />
+                    </div>
+                </div>
+                <div id="band-profile-members" class="band-profile-wrapper profile-body-content f11">
+                    <br clear="all" />
+                </div>
+                <!-- @FIXME cf clients/_profile.html.erb to mimic layout for scrolling header -->
+                <div id="band-profile-social" class="band-profile-wrapper">
+                    <div class="band-profile-social-left">
+                        <h2>Followers</h2>
+                        <div id="band-profile-social-followers">
+                        </div>
+                    </div>
+                    <br clear="all" />
+                </div>
+            </div>
+        </form>
+    </div>
 </div>
 
 <script type="text/template" id="template-band-profile-members">
     <div user-id="{userId}" class="band-profile-members">
-        <div class="avatar-small">
-            <img src="{avatar_url}" width="275" height="183" />
+        <div class="left" style="width:63px;">
+            <div class="avatar-small">
+                <img src="{avatar_url}" />
+            </div>
         </div>
-        <div class="profile-band-name">
-            {name}<br />
-            <span class="band-profile-member-location">{location}</span>
-            <br clear="left" /><br />
-            <div style="width:100px;">{instruments}</div><br /><br />
-            {friend_count}&nbsp;<img src="../assets/content/icon_friend.png" width="22" height="12" align="absmiddle" />&nbsp;
-            {follower_count}&nbsp;<img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;
-            {recording_count}&nbsp;<img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;
-            {session_count}&nbsp;<img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" />
-        </div>
-        <div style="height:90px" class="left ml20 f11 whitespace w60"><br />
-            {biography}<br /><br />
-            <a class="button-orange smallbutton m0" href="{profile_url}">PROFILE</a>&nbsp;&nbsp;
-            <a id="btn-follow-member" class="button-orange smallbutton m0">FOLLOW</a>&nbsp;&nbsp;
-            <a id="btn-remove-member" class="button-orange smallbutton m0">REMOVE MEMBER</a>&nbsp;&nbsp;
-            <a id="btn-friend-member" style="display:none;" class="button-orange smallbutton m0">CONNECT</a>
+        <div class="" style="margin-left: 63px;margin-top:12px;">
+            <div class="first-row" data-hint="top-row">
+                <div class="lcol left">
+                    <div class="result-name">{name}</div>
+                    <div class="result-location">{location}</div>
+                    <br />
+                    <div class="nowrap mt10">{instruments}</div>
+                </div>
+                <div class="whitespace">
+                    <div class="biography">{biography}</div>
+                </div>
+                <div class="clearleft"></div>
+            </div>
+            <div class="button-row">
+                <div class="lcol stats left">
+                    {friend_count} <img src="../assets/content/icon_friend.png" width="22" height="12" align="absmiddle" />
+                    {follower_count} <img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" />
+                    {recording_count} <img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" />
+                    {session_count} <img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" />
+                </div>
+                <div class="result-list-button-wrapper">
+                    <a class="button-orange smallbutton" href="{profile_url}">PROFILE</a>
+                    <a id="btn-follow-member" class="button-orange smallbutton">FOLLOW</a>
+                    <a id="btn-remove-member" class="button-orange smallbutton">REMOVE MEMBER</a>
+                    <a id="btn-friend-member" style="display:none;" class="button-orange smallbutton">CONNECT</a>
+                </div>
+            </div>
         </div>
     </div>
 </script>