Merge pull request #137 from erqan/profile-card

fixing #122 and unfollow button position

css/profile.css

@@ -59,7 +59,8 @@
 }
 .profile-card .direct-messages,
 .profile-card .direct-messages-with-user,
-.profile-card .follow
+.profile-card .follow,
+.profile-card .profileUnfollow
 {
     display: block;
     position: absolute;
@@ -74,16 +75,25 @@
     border: none;
     transition: all .2s linear;
 }
-.profile-card .follow
+.profile-card .follow,
+.profile-card .profileUnfollow
 {
     right: 135px;
 }
+.profile-card .profileUnfollow
+{
+    background-color: rgba( 0, 0, 0, .3 );
+}
 .profile-card .direct-messages:hover,
 .profile-card .direct-messages-with-user:hover,
 .profile-card .follow:hover
 {
     background: rgba( 0, 0, 0, .3 );
 }
+.profile-card .profileUnfollow:hover
+{
+    background: rgba( 0, 0, 0, .1 );
+}
 .profile-card.forEdition
 {
     margin: 0 auto;
@@ -178,11 +188,6 @@
     padding: 3px;
     height: 90%;
 }
-.profile-modal .profile-bio,
-{
-   min-height: 27px;
-   overflow-y: visible;
-}
 #msngrswr {
     display: none;
     margin-top: 20px;
@@ -297,7 +302,8 @@
 */
 .profile-modal .direct-messages,
 .profile-modal .direct-messages-with-user,
-.profile-modal .follow
+.profile-modal .follow,
+.profile-modal .profileUnfollow
 {
     bottom: 10px;
 }

css/style.css

@@ -74,6 +74,13 @@ h3
     font-size: 14px;
     color: rgba( 0, 0, 0, .5 );
 }
+.clearfix:before,
+.clearfix:after
+{
+    display: block;
+    content: "";
+    clear: both;
+}
 /*************************************
 **************************** BUTTONS **
 **************************************/

following.html

@@ -350,18 +350,27 @@
               <img class="profile-card-photo" src="img/grayed_avatar_placeholder_24.png"/>
               <h1 class="profile-name"></h1>
               <h2 class="profile-screen-name">@<b></b></h2>
-              <div class="profile-contact">
+              <div>
                 <span class="profile-location"></span>
                 <a class="profile-url" rel="nofollow" target="_blank"></a>
               </div>
-              <div class="profile-bio">
+              <div class="profile-bio"></div>
+              <div id="msngrswr">
+                <div id="toxbtnwr">
+                  <a class="profile-tox"></a><a class="tox-ctc"></a>
+                </div>
+                <div id="bmbtnwr">
+                  <a class="profile-bitmessage"></a><a class="bitmessage-ctc"></a>
                 </div>
               </div>
+            </div>
+            <div class="clearfix">
               <ul class="module profile-data">
                 <li><a href="#"><span class="posts-count">&nbsp;</span><span class="label">Posts</span></a></li>
                 <li><a href="#" class="open-following-modal"><span class="following-count">&nbsp;</span><span class="label">Following</span></a></li>
                 <li><a href="#"><span class="followers-count">&nbsp;</span><span class="label">Followers</span></a></li>
               </ul>
+            </div>
             <button class="follow" href="#">Follow</button>
             <button class="direct-messages-with-user" href="#">Direct Messages</button>
 

home.html

@@ -374,8 +374,10 @@
               <img class="profile-card-photo" src="img/grayed_avatar_placeholder_24.png"/>
               <h1 class="profile-name"></h1>
               <h2 class="profile-screen-name">@<b></b></h2>
+              <div>
                 <span class="profile-location"></span>
                 <a class="profile-url" rel="nofollow" target="_blank"></a>
+              </div>
               <div class="profile-bio"></div>
               <div id="msngrswr">
                 <div id="toxbtnwr">
@@ -386,11 +388,13 @@
                 </div>
               </div>
             </div>
+            <div class="clearfix">
               <ul class="module profile-data">
                 <li><a href="#"><span class="posts-count">&nbsp;</span><span class="label">Posts</span></a></li>
                 <li><a href="#" class="open-following-modal"><span class="following-count">&nbsp;</span><span class="label">Following</span></a></li>
                 <li><a href="#"><span class="followers-count">&nbsp;</span><span class="label">Followers</span></a></li>
               </ul>
+            </div>
             <button class="followButton follow" href="#">Follow</button>
             <button class="direct-messages-with-user" href="#">Direct Messages</button>