fix of follow-unfollow button behaviour, multiple fixes and improveme…

…nts of UI glitches, adding of missing players
miguelfreitas · Mar 7, 2015 · 9281f8f · 9281f8f
1 parent 032049b
commit 9281f8f
Show file tree

Hide file tree

Showing 14 changed files with 322 additions and 222 deletions.
diff --git a/css/profile.css b/css/profile.css
@@ -57,49 +57,37 @@
 {
     color: #fff;    
 }
-.profile-card .direct-messages,
-.profile-card .direct-messages-with-user,
-.profile-card .mentions-from-user,
-.profile-card .follow,
-.profile-card .profileUnfollow
+
+.profile-card-buttons
 {
-    display: block;
     position: absolute;
-    bottom: 20px;
-    right: 125px;
-    padding: 10px;
+    bottom: 30px;
+    right: 0;
+}
+
+.profile-card-buttons .direct-messages-with-user,
+.profile-card-buttons .mentions-from-user,
+.profile-card-buttons .follow,
+.profile-card-buttons .unfollow
+{
+    display: inline;
+    padding: 4px 12px;
     font-size: 12px;
-    width: 110px;
+    width: auto;
     text-align: center;
     color: rgba( 0, 0, 0, .7 );
     background: rgba( 0, 0, 0, .1 );
     border: none;
     transition: all .2s linear;
 }
-.profile-card .follow,
-.profile-card .profileUnfollow
-{
-    right: 240px;
-}
-.profile-card .mentions-from-user
-{
-    right: 10px;
-}
-.profile-card .profileUnfollow
-{
-    background-color: rgba( 0, 0, 0, .3 );
-}
-.profile-card .direct-messages:hover,
-.profile-card .direct-messages-with-user:hover,
-.profile-card .mentions-from-user:hover,
-.profile-card .follow:hover
-{
-    background: rgba( 0, 0, 0, .3 );
-}
-.profile-card .profileUnfollow:hover
+
+.profile-card-buttons .direct-messages-with-user:hover,
+.profile-card-buttons .mentions-from-user:hover
 {
-    background: rgba( 0, 0, 0, .1 );
+    color: #fff;
+    background: #45474d;
 }
+
 .profile-card.forEdition
 {
     margin: 0 auto;
@@ -175,24 +163,27 @@
     padding: 10px;
     text-align: right;
 }
+
 /*************************************
-****************** PROFILE MODAL
-*************************************
+************ PROFILE MODAL ***********
+**************************************/
+
 .profile-modal .modal-wrapper
 {
     width: 580px;
     border-radius: 5px;
     overflow: hidden;
     position: absolute;
-    top:10%;
-    height: 80%;
+    top:5%;
+    height: 90%;
     margin-left: -290px;
 
-}*/
+}
 .profile-modal .modal-content
 {
     padding: 3px;
     height: 100%;
+    overflow-y: hidden;
 }
 #msngrswr {
     display: none;
@@ -274,7 +265,7 @@
 {
     margin-left: 0;
     padding: 5px 0 5px 0;
-    height: 75%;
+    height: 73%;
 }
 .profile-modal .postboard h2
 {
@@ -314,20 +305,13 @@
     height: 200px;
 }
 */
-.profile-modal .direct-messages,
-.profile-modal .direct-messages-with-user,
-.profile-modal .mentions-from-user,
-.profile-modal .follow,
-.profile-modal .profileUnfollow
-{
-    bottom: 10px;
-}
 
 h1.profile-name {
     display: inline;
 }
+
 h2.profile-screen-name {
-    display: inline;
+    display: block;
 }
 
 .profile-modal .modal-buttons {

diff --git a/css/style.css b/css/style.css
@@ -90,9 +90,11 @@ h3
     color: #1a1;
     content: '\2714';
 }
+
 /*************************************
-**************************** BUTTONS **
+************** BUTTONS ***************
 **************************************/
+
 button
 {
     background: #45474d;
@@ -101,18 +103,51 @@ button
     padding: 5px 10px;
     cursor: pointer;
 }
+
 button:hover
 {
     color: #fff;
 }
+
 button.disabled
 {
     opacity: .4;
 }
+
 button.disabled:hover
 {
     color: rgba( 255, 255, 255, .8 );
 }
+
+button.follow, button.unfollow, .following-list button.private {
+    color: rgba( 0, 0, 0, .4 );
+    background: none;
+    border: solid 1px rgba( 0, 0, 0, .2 );
+    padding: 3px 15px;
+}
+
+.following-list .public-following {
+    padding: 4px 16px;
+}
+
+.following-list .public-following:hover {
+    color: rgba( 0, 0, 0, .4 );
+    background: none;
+    border: solid 1px rgba( 0, 0, 0, .2 );
+    padding: 3px 15px;
+}
+
+button.follow:hover, button.unfollow:hover, .following-list button.private:hover {
+    color: #fff;
+    background: #45474d;
+}
+
+.follow-suggestions .follow, .follow-suggestions .unfollow {
+    display: block;
+    position: relative;
+    left: 50%;
+}
+
 /*************************************
 **************************** MENU *****
 **************************************/
@@ -356,12 +391,7 @@ button.disabled:hover
 .userMenu-search-sugestions a:hover,
 .userMenu-search-profiles li:hover a
 {
-    background: #45474d;
-    color: #fff;
-}
-.userMenu-search-profiles li:hover span
-{
-    color: #fff;    
+    background: #fefef1;
 }
 .userMenu-search-profiles button
 {
@@ -749,17 +779,6 @@ textarea.splited-post {
     opacity: 1;
 }
 
-.follow, .unfollow {
-    background: none;
-    border: solid 1px rgba( 0, 0, 0 ,.2 );
-    padding: 3px 15px;
-    color: rgba( 0, 0, 0 ,.4 );
-}
-
-.follow:hover, .unfollow:hover {
-    color: rgba( 0, 0, 0 ,.7 );
-}
-
 .refresh-users,
 .view-all-users
 {
@@ -885,7 +904,7 @@ ol.toptrends-list {
 .post:hover,
 .post .post
 {
-    background: #ececed;
+    background: #fefef1;
 }
 .post:hover
 {
@@ -1564,9 +1583,13 @@ ol.toptrends-list {
 }
 
 /*************************************
-*************** FOLLOWING-CONFIG PROMPT
+****** FOLLOWING-CONFIG PROMPT *******
 **************************************/
 
+.following-config-modal
+{
+    margin-top: -80px;
+}
 .following-config-modal .modal-content
 {
     padding: 10px;
@@ -1581,10 +1604,8 @@ ol.toptrends-list {
     padding: 10px;
 }
 
-
-
 /*************************************
-****************** RETWIST POSTS PROMPT
+******** RETWIST POSTS PROMPT ********
 **************************************/
 
 .reTwist
@@ -1798,6 +1819,55 @@ ol.toptrends-list {
     -ms-transition: height 1s linear;
 }
 
+/* Following page */
+
+.following-list
+{
+    overflow-y: auto;
+}
+
+.following ol.following-list > li{
+    width: 425px;
+    height: 150px;
+    margin: 5px;
+    padding: 8px;
+    float: left;
+    border: 0;
+    background: #fff;
+}
+
+.w1200 .following ol.following-list > li{
+    width: 385px;
+}
+
+.following ol.following-list > li:hover{
+    background: #fefef1;
+}
+
+.following-list .following-config
+{
+    position: absolute;
+    left: 30%;
+    top: 69px;
+}
+
+.following-list .mini-profile-actions
+{
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+}
+
+.following-list .swarm-status
+{
+    font: 12px "Open Sans", sans-serif;
+    display: block;
+    position: absolute;
+    top: 110px;
+    right: 10px;
+}
+
 /* Autocomplite*/
 .textcomplete-wrapper textarea {
     display: inline;

diff --git a/following.html b/following.html
@@ -176,8 +176,10 @@ <h2><span>Following</span></h2>
                             <li>Display retransmissions</li>
                         </ul>
                     </div>
-                    <button class="unfollow">Unfollow</button>
-                    <button class="public-following">Public</button>
+                    <div class="following-config">
+                        <button class="follow">Follow</button>
+                        <button class="public-following">Public</button>
+                    </div>
                 </div>
                 <div>
                     <span class="swarm-status" style="display: none;"></span>
@@ -427,8 +429,11 @@ <h2 class="profile-screen-name">@<b></b></h2>
                         <li><a href="#"><span class="followers-count">&nbsp;</span><span class="label">Followers</span></a></li>
                     </ul>
                 </div>
-                <button class="dinamicFollowButton" href="#">Follow</button>
+              <div class="profile-card-buttons">
+                <button class="follow" href="#">Follow</button>
                 <button class="direct-messages-with-user" href="#">Direct Messages</button>
+                <button class="mentions-from-user" href="#">Mentions</button>
+              </div>
             </div>
             <div class="who-follow"></div>
           </div>
@@ -514,6 +519,8 @@ <h2><span class="following-config-method-message">Which way do you want to follo
 
   </div>
   <!-- TEMPLATES END -->
-
+
+  <audio id="player"></audio>
+  <audio id="playerSec"></audio>
   </body>
 </html>
diff --git a/home.html b/home.html
@@ -457,9 +457,11 @@ <h2 class="profile-screen-name">@<b></b></h2>
                   <li><a href="#"><span class="followers-count">&nbsp;</span><span class="label">Followers</span></a></li>
                 </ul>
               </div>
-              <button class="dinamicFollowButton" href="#">Follow</button>
-              <button class="direct-messages-with-user" href="#">Direct Messages</button>
-              <button class="mentions-from-user" href="#">Mentions</a>
+              <div class="profile-card-buttons">
+                <button class="follow" href="#">Follow</button>
+                <button class="direct-messages-with-user" href="#">Direct Messages</button>
+                <button class="mentions-from-user" href="#">Mentions</button>
+              </div>
             </div>
             <div class="who-follow"></div>
           </div>
@@ -546,8 +548,9 @@ <h2><span class="following-config-method-message">Which way do you want to follo
 
   </div>
   <!-- TEMPLATES END -->
+
   <audio id="player"></audio>
-  <audio id="playerSec"></audio> 
+  <audio id="playerSec"></audio>
   <!-- hide elements -->
   </body>
 </html>