From 6f66f4219c519193ef48501b284cd0d1a7600424 Mon Sep 17 00:00:00 2001
From: Daniel Weigh <daniel@jamkazam.com>
Date: Wed, 8 Jan 2014 05:07:56 -0500
Subject: [PATCH] VRFS-929 Double Scroll Bars.

---
 .../stylesheets/client/content.css.scss       |  49 ++++++++
 web/app/views/clients/_profile.html.erb       | 105 +++++++++++-------
 2 files changed, 114 insertions(+), 40 deletions(-)

diff --git a/web/app/assets/stylesheets/client/content.css.scss b/web/app/assets/stylesheets/client/content.css.scss
index 38794f276..88550ab29 100644
--- a/web/app/assets/stylesheets/client/content.css.scss
+++ b/web/app/assets/stylesheets/client/content.css.scss
@@ -99,6 +99,55 @@
         box-sizing: border-box;
         padding-top: 49px;
     }
+
+    .profile-head {
+        position: absolute;
+        box-sizing: border-box;
+        width:100%;
+    }
+    .profile-body {
+        height:100%;
+        width:100%;
+        box-sizing: border-box;
+        padding-top: 157px;
+        > * {
+          box-sizing:border-box;
+        }
+    }
+    .profile-body-content {
+        height: inherit;
+        overflow:auto;
+        &.outer {
+          overflow:hidden;
+        }
+        &.padded {
+          padding:10px 25px;
+        }
+    }
+
+    .profile-social-head {
+        position: absolute;
+        width:100%;
+        padding:0 25px;
+        line-height:25px;
+        box-sizing:border-box;
+
+        +.profile-wrapper {
+          padding-top: 0;
+        }
+    }
+    .profile-social-body {
+        height:100%;
+        width:100%;
+        box-sizing:border-box;
+        padding-top:25px;
+        .profile-social-body-wrapper {
+          height:inherit;
+        }
+        .profile-social-content {
+          padding:0 25px;
+        }
+    }
 }
 
 .result-list-button-wrapper {
diff --git a/web/app/views/clients/_profile.html.erb b/web/app/views/clients/_profile.html.erb
index 1b1ae6e66..029292e0c 100644
--- a/web/app/views/clients/_profile.html.erb
+++ b/web/app/views/clients/_profile.html.erb
@@ -10,9 +10,8 @@
         <%= render "screen_navigation" %>
     </div>
     <div class="content-body">
-        <div class="content-body-scroller">
-            <form id="profile-form">
-                <div class="profile-header">
+            <form id="profile-form" class="inner-content">
+                <div class="profile-header profile-head">
 
                     <!-- profile name -->
                     <h2 id="profile-username"></h2>
@@ -45,57 +44,83 @@
                     </div>
                     <div class="clearall"></div>
                 </div>
-                <div class="content-scroller">
-                    <div id="profile-about" class="profile-wrapper">
+
+                <div class="profile-body">
+                    <div id="profile-about" class="profile-body-content">
                         <!-- stats & location -->
-                        <div class="profile-about-left">
-                            <h3>Location:</h3><br />
-                            <span id="profile-location"></span><br /><br /><br />
-                            <h3>Stats:</h3><br />
-                            <span id="profile-friend-stats"></span><br />
-                            <span id="profile-follower-stats"></span><br />
-                            <span id="profile-following-stats"></span><br />
-                            <span id="profile-favorite-stats"></span><br />
-                            <span id="profile-session-stats"></span><br />
-                            <span id="profile-recording-stats"></span><br />
-                        </div>
-                        <div class="profile-about-right">
-                            <p id="profile-biography"></p><br />
-                            <div id="profile-instruments">
+                        <div class="profile-wrapper">
+                            <div class="profile-about-left">
+                                <h3>Location:</h3><br />
+                                <span id="profile-location"></span><br /><br /><br />
+                                <h3>Stats:</h3><br />
+                                <span id="profile-friend-stats"></span><br />
+                                <span id="profile-follower-stats"></span><br />
+                                <span id="profile-following-stats"></span><br />
+                                <span id="profile-favorite-stats"></span><br />
+                                <span id="profile-session-stats"></span><br />
+                                <span id="profile-recording-stats"></span><br />
                             </div>
+                            <div class="profile-about-right">
+                                <p id="profile-biography"></p><br />
+                                <div id="profile-instruments"></div>
+                            </div>
+                            <br clear="all" />
                         </div>
-                        <br clear="all" />
                     </div>
                     <div id="profile-history" class="profile-wrapper">
+                        <div class="content-body-scroller">
+                            <br clear="all" />
+                        </div>
+                    </div>
+                    <div id="profile-bands" class="profile-wrapper profile-body-content">
                         <br clear="all" />
                     </div>
-                    <div id="profile-bands" class="profile-wrapper">
-                        <br clear="all" />
-                    </div>
-                    <div id="profile-social" class="profile-wrapper">
-                         <div class="profile-social-left">
-                            <h2>Friends</h2>
-                            <div id="profile-social-friends">
+                    <div id="profile-social" class="profile-body-content outer">
+                        <div class="profile-social-head">
+                            <div class="profile-social-left">
+                                <h2>Friends</h2>
+                            </div>
+                            <div class="profile-social-mid">
+                                <h2>Following</h2>
+                            </div>
+                            <div class="profile-social-right">
+                                <h2>Followers</h2>
+                            </div>
+                            <div class="clearall"></div>
+                        </div>
+                        <div class="profile-social-body">
+                            <div class="profile-social-body-wrapper">
+                                <div class="content-body-scroller">
+                                    <!-- @FIXME: seems like too many divs -->
+                                    <div class="profile-social-content">
+                                        <div class="profile-social-left">
+                                            <div id="profile-social-friends">
+                                            </div>
+                                        </div>
+                                        <div class="profile-social-mid">
+                                            <div id="profile-social-followings">
+                                            </div>
+                                        </div>
+                                        <div class="profile-social-right">
+                                            <div id="profile-social-followers">
+                                            </div>
+                                        </div>
+                                        <div class="clearall"></div>
+                                    </div>
+                                    <!-- @FIXME: end -->
+                                </div>
                             </div>
                         </div>
-                        <div class="profile-social-mid">
-                            <h2>Following</h2>
-                            <div id="profile-social-followings">
+                    </div>
+                    <div id="profile-favorites" class="profile-body-content">
+                        <div class="profile-wrapper">
+                            <div class="content-body-scroller">
                             </div>
                         </div>
-                        <div class="profile-social-right">
-                            <h2>Followers</h2>
-                            <div id="profile-social-followers">
-                            </div>
-                        </div>
-                        <br clear="all" />
-                    </div>
-                    <div id="profile-favorites" class="profile-wrapper">
-                        <br clear="all" />
                     </div>
+                    <!-- </div> -->
                 </div>
             </form>
-        </div>
     </div>
 </div>