tunning of dashboard modules

css/style.css

@@ -1794,12 +1794,12 @@ ol.toptrends-list {
 **************** LOADER **************
 **************************************/
 
-.postboard-loading
-{
+.postboard-loading, .loading-roller {
+    clear: both;
     text-align: center;
 }
-.postboard-loading div
-{
+
+.postboard-loading div, .loading-roller div {
     display: inline-block;
     width: 120px;
     height: 10px;
@@ -1809,8 +1809,8 @@ ol.toptrends-list {
     position: relative;
     margin: 10px 0 0 0;
 }
-.postboard-loading div:after
-{
+
+.postboard-loading div:after, .loading-roller div:after {
     border-radius: 50px;
     content: "";
     position: absolute;
@@ -1833,8 +1833,8 @@ ol.toptrends-list {
     -moz-animation-iteration-count: infinite;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
-@keyframes slide 
-{
+
+@keyframes slide {
   0% {
     right: 60px;
     left: 2px;
@@ -1858,8 +1858,8 @@ ol.toptrends-list {
     left: 2px;
   }
 }
-@-webkit-keyframes slide
-{
+
+@-webkit-keyframes slide {
   0% {
     right: 100px;
     left: 2px;
@@ -1883,8 +1883,8 @@ ol.toptrends-list {
     left: 2px;
   }
 }
-@-moz-keyframes slide
-{
+
+@-moz-keyframes slide {
   0% {
     right: 60px;
     left: 2px;
@@ -1997,11 +1997,6 @@ ol.toptrends-list {
 *********** FOLLOWING PAGE ***********
 **************************************/
 
-.following .postboard-loading
-{
-    text-align: center;
-}
-
 .following .header-bold {
     display: block;
     width: 100%;

home.html

@@ -213,6 +213,7 @@
 
     <!-- TEMPLATE DE WHO-TO-FOLLOW MODULE -->
     <div id="who-to-follow-template">
+      <div>
         <h3 class="label">Who to Follow</h3>
         <small>.</small>
         <a class="refresh-users">Refresh</a>
@@ -222,17 +223,27 @@
           <!-- use "follow-suggestion-template" here -->
         </ol>
       </div>
+      <div class="loading-roller" style="display: none;">
+        <div></div>
+      </div>
+    </div>
 
     <!-- TEMPLATE DE TOP TRENDS MODULE -->
     <div id="toptrends-template">
+      <div>
         <h3 class="label">Top Trends</h3>
         <small>.</small>
         <a class="refresh-toptrends">Refresh</a>
         <ol class="toptrends-list"></ol>
       </div>
+      <div class="loading-roller" style="display: none;">
+        <div></div>
+      </div>
+    </div>
 
     <!-- TEMPLATE DE TWISTDAY REMINDER MODULE -->
     <div id="twistday-reminder-template">
+      <div>
         <h3 class="label">Twistday Reminder</h3>
         <small>.</small>
         <a class="refresh">Refresh</a>
@@ -249,6 +260,10 @@
             </ol>
         </div>
       </div>
+      <div class="loading-roller" style="display: none;">
+        <div></div>
+      </div>
+    </div>
 
     <!-- TEMPLATE DE TWISTDAY REMINDER SUGGESTION -->
     <li id="twistday-reminder-suggestion-template" class="twister-user">

js/interface_common.js

@@ -288,16 +288,19 @@ function openFollowingModal(username)
     $( "."+followingModalClass + " h3" ).text( polyglot.t("followed_by", { username: username }) );
 }
 
-function refreshWhoToFollow(e) {
-    e.stopPropagation();
-    e.preventDefault();
-
-    $('.module.who-to-follow .follow-suggestions').empty();
+function refreshWhoToFollow() {
+    var $module = $('.module.who-to-follow');
+    var $list = $module.find('.follow-suggestions');
+    if ($list.length) {
+        $list.empty().hide();
+        $module.find('.refresh-users').hide();
+        $module.find('.loading-roller').show();
 
         getRandomFollowSuggestion(processSuggestion);
         getRandomFollowSuggestion(processSuggestion);
         getRandomFollowSuggestion(processSuggestion);
     }
+}
 
 function fillWhoToFollowModal(list, hlist, start) {
     var i;

js/interface_home.js

@@ -140,11 +140,14 @@ function initTopTrends() {
 }
 
 function updateTrendingHashtags() {
-    var $ttl = $('.module.toptrends .toptrends-list');
-    if ($ttl.length) {
+    var $module = $('.module.toptrends');
+    var $list = $module.find('.toptrends-list');
+    if ($list.length) {
+        $list.empty().hide();
+        $module.find('.refresh-toptrends').hide();
+        $module.find('.loading-roller').show();
         twisterRpc('gettrendinghashtags', [10],
             function(args, ret) {
-                $ttl.empty();
                 //console.log('hashtags trends: '+ret);
                 for( var i = 0; i < ret.length; i++ ) {
                     if ($.Options.getFilterLangOpt() !== 'disable' && $.Options.getFilterLangForTopTrendsOpt())
@@ -166,15 +169,20 @@ function updateTrendingHashtags() {
                             }
                         }
 
-                        $ttl.append($li);
+                        $list.append($li);
                     }
                 }
+
+                if ($list.children().length)
+                    $list.show();
+                $module.find('.refresh-toptrends').show();
+                $module.find('.loading-roller').hide();
             }, {},
             function(args, ret) {
                 console.log('Error with gettrendinghashtags. Older twister daemon?');
             }, {}
         );
-        if ($.Options.getTopTrendsAutoUpdateOpt() === 'enable' && $.Options.getTopTrendsAutoUpdateTimerOpt() > 0)
+        if ($list.children().length && $.Options.getTopTrendsAutoUpdateOpt() === 'enable' && $.Options.getTopTrendsAutoUpdateTimerOpt() > 0)
             setTimeout(updateTrendingHashtags, $.Options.getTopTrendsAutoUpdateTimerOpt()*1000);
     }
 };
@@ -191,8 +199,11 @@ function initTwistdayReminder() {
 }
 
 function refreshTwistdayReminder() {
-    var $list = $('.module.twistday-reminder .list');
+    var $module = $('.module.twistday-reminder');
+    var $list = $module.find('.list');
     if ($list.length) {
+        $module.find('.refresh').hide();
+        $module.find('.loading-roller').show();
         if (defaultScreenName && typeof(followingUsers) !== 'undefined') {
             var suggests = followingUsers.slice();
             if (suggests.length > 0) {
@@ -226,8 +237,8 @@ function refreshTwistdayReminder() {
                         }
 
                         var showUpcomingTimer = ($.Options.getTwistdayReminderShowUpcomingOpt() === 'enable') ? $.Options.getTwistdayReminderShowUpcomingTimerOpt() *3600 : 0;
-                        var listCurrent = $('.module.twistday-reminder .current .list');
-                        var listUpcoming = $('.module.twistday-reminder .upcoming .list');
+                        var listCurrent = $module.find('.current .list');
+                        var listUpcoming = $module.find('.upcoming .list');
                         var d = new Date();
                         var todayYear = d.getUTCFullYear();
                         var todayMonth = d.getUTCMonth();
@@ -264,9 +275,11 @@ function refreshTwistdayReminder() {
                         }
 
                         if (listCurrent.children().length > 1)
-                            listCurrent.parent().show()
+                            listCurrent.parent().show();
                         if (listUpcoming.children().length > 1)
-                            listUpcoming.parent().show()
+                            listUpcoming.parent().show();
+                        $module.find('.refresh').show();
+                        $module.find('.loading-roller').hide();
                     }, null,
                     function(arg, ret) { console.log("ajax error:" + ret); }, null);
             }

js/twister_following.js

@@ -563,8 +563,9 @@ function showFollowingUsers(){
 }
 
 function processSuggestion(arg, suggestion, followedBy) {
-    var dashboard = $('.module.who-to-follow .follow-suggestions');
     if( suggestion ) {
+        var $module = $('.module.who-to-follow');
+        var $list = $module.find('.follow-suggestions');
         var item = $("#follow-suggestion-template").clone(true);
         item.removeAttr("id");
 
@@ -586,8 +587,11 @@ function processSuggestion(arg, suggestion, followedBy) {
             getRandomFollowSuggestion(processSuggestion);
         });
 
-        dashboard.append(item);
-    }
+        $list.append(item).show();
+        $module.find('.refresh-users').show();
+        $module.find('.loading-roller').hide();
+    } else
+        getRandomFollowSuggestion(processSuggestion);
 }
 
 function closeSearchDialog()

theme_calm/css/style.css

@@ -2206,12 +2206,12 @@ textarea.splited-post {
 **************** LOADER **************
 **************************************/
 
-.postboard-loading
-{
+.postboard-loading, .loading-roller {
+    clear: both;
     text-align: center;
 }
-.postboard-loading div
-{
+
+.postboard-loading div, .loading-roller div {
     display: inline-block;
     width: 120px;
     height: 10px;
@@ -2221,8 +2221,8 @@ textarea.splited-post {
     position: relative;
     margin: 10px 0 0 0;
 }
-.postboard-loading div:after
-{
+
+.postboard-loading div:after, .loading-roller div:after {
     border-radius: 50px;
     content: "";
     position: absolute;
@@ -2245,8 +2245,8 @@ textarea.splited-post {
     -moz-animation-iteration-count: infinite;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
-@keyframes slide 
-{
+
+@keyframes slide {
   0% {
     right: 60px;
     left: 2px;
@@ -2270,8 +2270,8 @@ textarea.splited-post {
     left: 2px;
   }
 }
-@-webkit-keyframes slide
-{
+
+@-webkit-keyframes slide {
   0% {
     right: 100px;
     left: 2px;
@@ -2295,8 +2295,8 @@ textarea.splited-post {
     left: 2px;
   }
 }
-@-moz-keyframes slide
-{
+
+@-moz-keyframes slide {
   0% {
     right: 60px;
     left: 2px;
@@ -2437,11 +2437,6 @@ textarea.splited-post {
 *********** FOLLOWING PAGE ***********
 **************************************/
 
-.following .postboard-loading
-{
-    text-align: center;
-}
-
 .following .header-bold {
     display: block;
     width: 100%;

theme_nin/css/style.css

@@ -282,7 +282,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 
 /* FONTS */
 /* line 2, ../sass/_utils.sass */
-.clear-fix:after, .userMenu ul:after, .profile-modal .profile-data:after, .profile-card .twister-user-info:after, .forEdition.profile-card:after, .postboard:after, .following:after, .expanded-content:after, .following-list li:after, .twistday-reminder li:after, .mini-following-info:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, .dashboard.right:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .twistday-reminder ol:after, .twister-user:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after {
+.clear-fix:after, .userMenu ul:after, .profile-modal .profile-data:after, .profile-card .twister-user-info:after, .forEdition.profile-card:after, .postboard:after, .following:after, .expanded-content:after, .following-list li:after, .twistday-reminder li:after, .mini-following-info:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, .dashboard.right:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .toptrends ol:after, .twistday-reminder ol:after, .twister-user:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after {
   content: "";
   display: table;
   clear: both;
@@ -1823,7 +1823,7 @@ button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disab
     width: 90%;
 }
 
-.options #filterLangListCont div,.options #TopTrendsCont div {
+.options #filterLangListCont div, .options #TopTrendsCont div, .options #TwistdayReminderCont div {
     float: none;
     padding: 0px 4px;
 }
@@ -1891,19 +1891,9 @@ button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disab
 }
 /* line 63, ../sass/style.sass */
 .dashboard.right {
-  display: block;
-  position: absolute;
-  right: 0;
-}
-/* line 67, ../sass/style.sass */
-.dashboard.right .module {
-  position: fixed;
-  height: 100%;
+  margin-left: 880px;
 }
 
-.dashboard .module {
-    margin: 0 0 3%;
-}
 
 /********** CONFIG SUBMENU & SEARCH RESULTS *********** */
 /* line 76, ../sass/style.sass */
@@ -2326,25 +2316,33 @@ textarea.splited-post {
   color: #ff0000;
 }
 
-/****** WHO TO FOLLOW ****** */
+/******** WHO TO FOLLOW ********/
+
 /* line 411, ../sass/style.sass */
-.who-to-follow {
+.who-to-follow.module {
   width: inherit;
   margin-bottom: 20px;
 }
+
 /* line 414, ../sass/style.sass */
 .who-to-follow small {
   display: none;
 }
+
 /* line 416, ../sass/style.sass */
 .who-to-follow h3 {
   float: left;
 }
+
 /* line 418, ../sass/style.sass */
 .who-to-follow ol {
   clear: both;
 }
 
+.who-to-follow .twister-user-info {
+  margin-top: 8px;
+}
+
 /* line 422, ../sass/style.sass */
 .twister-user {
   clear: both;
@@ -2381,7 +2379,7 @@ textarea.splited-post {
 }
 /* line 450, ../sass/style.sass */
 .followers label, .followers a {
-  display: block;
+  display: inline-block;
 }
 
 /* line 453, ../sass/style.sass */
@@ -2483,7 +2481,7 @@ button.follow:hover, .mini-profile-actions span.follow:hover, button.unfollow, .
 }
 
 /* line 527, ../sass/style.sass */
-.refresh-toptrends:hover, .twistday-reminder .refresh, .refresh-users:hover, .view-all-users:hover {
+.refresh-toptrends:hover, .twistday-reminder .refresh:hover, .refresh-users:hover, .view-all-users:hover {
   color: #B4C669;
   text-decoration: none;
   background-color: transparent;
@@ -2492,12 +2490,17 @@ button.follow:hover, .mini-profile-actions span.follow:hover, button.unfollow, .
 /***********TOP TRENDS************** */
 
 .module.toptrends {
-  padding: 8px 4px;
+  margin-bottom: 20px;
+}
+
+.toptrends small {
+  display: none;
 }
 
 .toptrends h3 {
   float: left;
 }
+
 /* line 534, ../sass/style.sass */
 ol.toptrends-list {
   margin: 0;
@@ -2526,26 +2529,15 @@ ol.toptrends-list a:hover {
 
 /********* TWISTDAY REMINDER *******/
 
-.module.twistday-reminder {
-  padding: 8px 4px;
-  top: 30%;
-}
-
 .twistday-reminder {
-  width: inherit;
+  width: 300px;
 }
 
 .twistday-reminder small {
   display: none;
 }
 
-.twistday-reminder ol {
-  clear: both;
-}
-
 .twistday-reminder h3 {
-  margin: 5% 0% 2% 5%;
-  display: inline;
   float: left;
 }
 
@@ -2559,12 +2551,9 @@ ol.toptrends-list a:hover {
   text-decoration: none;
 }
 
-.twistday-reminder .list {
-  width: 300px;
-  margin: 0% 5% 5% 5%;
-  padding: 5px;
+.twistday-reminder .twister-user-info {
+  margin-top: 8px;
 }
-
 .twistday-reminder .twister-user-tag,
 .twistday-reminder .twister-user-full {
   display: block;
@@ -2572,9 +2561,13 @@ ol.toptrends-list a:hover {
   text-align: center;
 }
 
+.twistday-reminder img.twister-user-photo {
+  margin: 0;
+}
+
 .twistday-reminder .twisterday {
   font-size: 80%;
-  margin: 0 11%;
+  margin-left: 8%;
 }
 
 /*********** POPUP PROMPT ************ */
@@ -2778,14 +2771,10 @@ ol.toptrends-list a:hover {
 
 /********** RETWIST POSTS PROMPT ********* */
 /* line 705, ../sass/style.sass */
-.reTwist {
+.reTwist.prompt-wrapper {
   margin-top: -110px;
 }
-.reTwist .modal-wrapper {
-  width: 520px;
-  top: 20%;
-  margin: 0 0 0 -260px;
-}
+
 .reTwist .modal-content
 {
   padding: 20px 15px;
@@ -2801,10 +2790,8 @@ ol.toptrends-list a:hover {
 
 /********* REPLY POSTS MODAL************** */
 /* line 715, ../sass/style.sass */
-.reply .modal-wrapper {
-  width: 520px;
-  top: 20%;
-  margin: 0 0 0 -260px;
+.reply.prompt-wrapper {
+  margin-top: -110px;
 }
 /* line 719, ../sass/style.sass */
 .reply .modal-buttons, .reply .post-expand, .reply .post-interactions {
@@ -3085,15 +3072,15 @@ ol.toptrends-list a:hover {
 /* line 943, ../sass/style.sass */
 .who-to-follow-modal .modal-wrapper {
   width: 520px;
-  top: 10%;
-  height: 455px;
-  margin: 0 0 0 -260px;
+  top: 50%;
+  height: 555px;
+  margin: -275px 0 0 -260px;
   overflow-x: hidden;
 }
 /* line 949, ../sass/style.sass */
 .who-to-follow-modal .modal-content {
   padding: 15px;
-  height: 400px;
+  height: 480px;
   overflow-y: auto;
 }
 /* line 953, ../sass/style.sass */
@@ -3123,6 +3110,7 @@ ol.toptrends-list a:hover {
 /* line 968, ../sass/style.sass */
 .who-to-follow-modal .twister-user-info {
   position: relative;
+  margin-top: 4px;
   padding-left: 70px;
   width: auto;
 }
@@ -3134,11 +3122,12 @@ ol.toptrends-list a:hover {
 
 /******* LOADER ************ */
 /* line 978, ../sass/style.sass */
-.postboard-loading {
+.postboard-loading, .loading-roller {
+  clear: both;
   text-align: center;
 }
 /* line 980, ../sass/style.sass */
-.postboard-loading div {
+.postboard-loading div, .loading-roller div {
   display: inline-block;
   width: 120px;
   height: 10px;
@@ -3147,7 +3136,7 @@ ol.toptrends-list a:hover {
   margin: 10px 0 0 0;
 }
 /* line 987, ../sass/style.sass */
-.postboard-loading div:after {
+.postboard-loading div:after, .loading-roller div:after {
   content: "";
   position: absolute;
   background-color: white;
@@ -3306,9 +3295,7 @@ ul.dropdown-menu .active, ul.dropdown-menu .active a {
 
   /* line 14, ../sass/_responsive.sass */
   .following-list li, .twistday-reminder li {
-    width: 47%;
     float: left;
-    margin: 0 2% 2% 0;
     font-size: 80%;
   }
 }
@@ -3333,7 +3320,7 @@ ul.dropdown-menu .active, ul.dropdown-menu .active a {
   }
 
   /* line 32, ../sass/_responsive.sass */
-  .who-to-follow, .toptrends, .twistday-reminder {
+  .module.who-to-follow, .module.toptrends, .module.twistday-reminder {
     display: none;
   }
 

theme_nin/sass/_fonts.sass

@@ -180,7 +180,7 @@
 
 /* ''*/
 
-.icon-arrows:before
+.icon-arrows:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before
   content: '\e814'
 
 /* ''*/

theme_nin/sass/_responsive.sass

@@ -11,10 +11,8 @@
 	.postboard
 		width: 100%
 		
-	.following-list li
-		width: 47%
+	.following-list li, .twistday-reminder li
 		float: left
-		margin: 0 2% 2% 0
 		font-size: 80%
 
 @media (max-width: 900px)
@@ -29,12 +27,13 @@
 	.postboard
 		margin: 0
 		padding: 10px
-	.who-to-follow, .toptrends
+    .module
+	    .who-to-follow, .toptrends, .twistday-reminder
 		    display: none
 	.mini-profile
 		.post-area, .post-area-new
 			display: none
-	.following-list li
+	.following-list li, .twistday-reminder li
 		width: 98%
 		float: none
 		margin: 2% 1%

theme_nin/sass/style.sass

@@ -62,12 +62,7 @@
     padding-top: 70px
     height: 100%
   &.right
-    display: block
-    position: absolute
-    right: 0
-    .module
-      position: fixed
-      height: 100%
+    margin-left: 880px;
     @extend .clear-fix
 
 
@@ -434,9 +429,10 @@ textarea.splited-post
 
 
 
-/****** WHO TO FOLLOW *******/
+/******** WHO TO FOLLOW ********/
 
 .who-to-follow
+  &.module
     width: inherit
     margin-bottom: 20px
   small 
@@ -446,6 +442,8 @@ textarea.splited-post
   ol 
     @extend .clear-fix
     clear: both
+  .twister-user-info
+    margin-top: 8px
 
 .twister-user
   clear: both
@@ -476,7 +474,7 @@ textarea.splited-post
   font-size: 12px
   color: $dark-grey
   label, a
-    display: block
+    display: inline-block
 
 .followed-by
   color: $main-color-light
@@ -516,7 +514,7 @@ textarea.splited-post
 .twister-user-remove:hover
   opacity: 1
 
-.refresh-toptrends, .refresh-users
+.refresh-toptrends, .twistday-reminder .refresh, .refresh-users
   @extend .icon-arrows
   @extend .extend-icon
   color: $main-color-dark
@@ -544,7 +542,7 @@ textarea.splited-post
   margin: 0 0 0 15px
   position: relative
 
-.refresh-toptrends:hover, .refresh-users:hover, .view-all-users:hover
+.refresh-toptrends:hover, .twistday-reminder .refresh:hover, .refresh-users:hover, .view-all-users:hover
   color: $main-color-color
   text-decoration: none
   background-color: transparent
@@ -552,6 +550,10 @@ textarea.splited-post
 /***********TOP TRENDS***************/
 
 .toptrends
+  &.module
+    margin-bottom: 20px
+  small
+    display: none
   h3
     float: left
 
@@ -576,7 +578,31 @@ ol.toptrends-list
       background: white
       color: $main-color-dark
 
+/********* TWISTDAY REMINDER *******/
 
+.twistday-reminder
+  width: 300px
+  small
+    display: none
+  h3
+    float: left
+  h4
+    margin: 1% 1% 1% 16%
+    font-size: 90%
+    color: rgba(0, 0, 0, 0.5)
+  a:hover
+    text-decoration: none
+  .twister-user-info
+    margin-top: 8px
+  .twister-user-tag, .twister-user-full
+    display: block
+    margin: 0
+    text-align: center
+  img.twister-user-photo
+    margin: 0
+  .twisterday
+    font-size: 80%
+    margin-left: 8%
 
 /*********** POPUP PROMPT *************/
 .prompt-wrapper
@@ -728,11 +754,8 @@ ol.toptrends-list
 /************ RETWIST POSTS MODAL **********/
 
 .reTwist
+  &.prompt-wrapper
     margin-top: -110px
-  .modal-wrapper
-    width: $postboard-modal-width
-    top: 20%
-    margin: 0 0 0 0-($postboard-modal-width/2)
   .modal-content
     padding: 20px 15px
   .modal-buttons
@@ -744,10 +767,8 @@ ol.toptrends-list
 /********* REPLY POSTS MODAL***************/
 
 .reply
-  .modal-wrapper
-    width: $postboard-modal-width
-    top: 20%
-    margin: 0 0 0 0-($postboard-modal-width/2)
+  &.prompt-wrapper
+    margin-top: -110px
   .modal-buttons, .post-expand, .post-interactions
     display: none
   .post-area
@@ -974,13 +995,13 @@ ol.toptrends-list
 .who-to-follow-modal
   .modal-wrapper
     width: $postboard-modal-width
-    top: 10%
-    height: 455px
-    margin: 0 0 0 0-($postboard-modal-width/2)
+    top: 50%
+    height: 555px
+    margin: -275px 0 0 0-($postboard-modal-width/2)
     overflow-x: hidden
   .modal-content
     padding: 15px
-    height: 400px
+    height: 480px
     overflow-y: auto
   .modal-buttons
     display: none
@@ -999,6 +1020,7 @@ ol.toptrends-list
     display: block
   .twister-user-info
     position: relative
+    margin-top: 4px
     padding-left: 70px
     width: auto
   .bio
@@ -1007,7 +1029,8 @@ ol.toptrends-list
 
 /******* LOADER *************/
 
-.postboard-loading
+.postboard-loading, .loading-roller
+  clear: both
   text-align: center
   div
     display: inline-block
@@ -1100,7 +1123,7 @@ ol.toptrends-list
   #filterLangList
     width: 90%
 
-  #filterLangListCont div, #TopTrendsCont div
+  #filterLangListCont div, #TopTrendsCont div, #TwistdayReminderCont div
     float: none
     padding: 0px 4px