tunning of dashboard modules

miguelfreitas · Apr 21, 2015 · 252f22f · 252f22f
1 parent fa825f7
commit 252f22f
Show file tree

Hide file tree

Showing 10 changed files with 181 additions and 147 deletions.
diff --git a/css/style.css b/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%;

diff --git a/home.html b/home.html
@@ -213,6 +213,7 @@ <h2>
 
     <!-- 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>
@@ -221,18 +222,28 @@ <h3 class="label">Who to Follow</h3>
         <ol class="follow-suggestions">
           <!-- 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>
@@ -248,6 +259,10 @@ <h4>Upcoming ones:</h4>
                 <!-- use "twistday-reminder-suggestion-template" here -->
             </ol>
         </div>
+      </div>
+      <div class="loading-roller" style="display: none;">
+        <div></div>
+      </div>
     </div>
 
     <!-- TEMPLATE DE TWISTDAY REMINDER SUGGESTION -->

diff --git a/js/interface_common.js b/js/interface_common.js
@@ -288,15 +288,18 @@ 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();
-
-    getRandomFollowSuggestion(processSuggestion);
-    getRandomFollowSuggestion(processSuggestion);
-    getRandomFollowSuggestion(processSuggestion);
+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) {

diff --git a/js/interface_home.js b/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);
             }

diff --git a/js/twister_following.js b/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()

diff --git a/theme_calm/css/style.css b/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%;