Merge pull request #246 from slr/tasty-twistday-reminder

twistday reminder with most of functionality

css/style.css

@@ -323,18 +323,24 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover
     position: fixed;
     top: 55px;
 }
+
 .dashboard.right {
     width: 320px;
     position: fixed;
     top: 55px;
     margin-left: 864px;
 }
+
 .module
 {
     border: solid 1px rgba( 69, 71, 77, .1 );
     background: #fff;
 }
 
+.dashboard .module {
+    margin: 0 0 3%;
+}
+
 .messages-qtd
 {
     position: absolute;
@@ -786,6 +792,7 @@ textarea.splited-post {
 }
 
 .refresh-toptrends,
+.twistday-reminder .refresh,
 .refresh-users,
 .view-all-users
 {
@@ -798,6 +805,10 @@ textarea.splited-post {
 ************ TOP TRENDS ************
 ***********************************/
 
+.module.toptrends {
+    padding: 8px 4px;
+}
+
 ol.toptrends-list {
     margin: 0% 5% 5% 5%;
     padding: 5px;
@@ -810,6 +821,50 @@ ol.toptrends-list {
     display: inline;
 }
 
+/***********************************
+********* TWISTDAY REMINDER ********
+***********************************/
+
+.module.twistday-reminder {
+    padding: 8px 4px;
+}
+
+.twistday-reminder h3 {
+    margin: 5% 0% 2% 5%;
+    display: inline;
+}
+
+.twistday-reminder h4 {
+    margin: 1% 1% 1% 16%;
+    font-size: 90%;
+    color: rgba(0, 0, 0, 0.5);
+}
+
+.twistday-reminder a:hover {
+    text-decoration: none;
+}
+
+.twistday-reminder .list {
+  margin: 0% 5% 5% 5%;
+  padding: 5px;
+}
+
+.twistday-reminder .twister-user-tag,
+.twistday-reminder .twister-user-full {
+    display: block;
+    margin: 0;
+    text-align: center;
+}
+
+.twistday-reminder .twisterday {
+    font-size: 80%;
+    margin-left: 11%;
+}
+
+.twistday-reminder .twisterday:hover {
+    cursor: pointer;
+}
+
 /***********************************
 ********************* POST BOARD ***
 ***********************************/
@@ -1743,12 +1798,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;
@@ -1758,8 +1813,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;
@@ -1782,8 +1837,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;
@@ -1807,8 +1862,8 @@ ol.toptrends-list {
     left: 2px;
   }
 }
-@-webkit-keyframes slide
+
-{
+@-webkit-keyframes slide {
   0% {
     right: 100px;
     left: 2px;
@@ -1832,8 +1887,8 @@ ol.toptrends-list {
     left: 2px;
   }
 }
-@-moz-keyframes slide
+
-{
+@-moz-keyframes slide {
   0% {
     right: 60px;
     left: 2px;
@@ -1946,11 +2001,6 @@ ol.toptrends-list {
 *********** FOLLOWING PAGE ***********
 **************************************/
 
-.following .postboard-loading
-{
-    text-align: center;
-}
-
 .following .header-bold {
     display: block;
     width: 100%;

home.html

@@ -158,6 +158,9 @@
       <!-- TOP TRENDS MODULE -->
       <div class="module toptrends"></div>
 
+      <!-- TWISTDAY REMINDER MODULE -->
+      <div class="module twistday-reminder"></div>
+
     </div>
   <!-- LADO ESQUERDO DE MÓDULOS END -->
 
@@ -210,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>
@@ -218,18 +222,67 @@
         <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 class="toptrends-list"></ol>
-          <!-- use "follow-suggestion-template" here -->
+      </div>
-        </ol>
+      <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">Who's celebrating Twistday</h3>
+        <small>.</small>
+        <a class="refresh label">Refresh</a>
+        <div class="current">
+            <h4 class="label">Today's luckies:</h4>
+            <ol class="list">
+                <!-- use "twistday-reminder-suggestion-template" here -->
+            </ol>
+        </div>
+        <div class="upcoming">
+            <h4 class="label">Upcoming ones:</h4>
+            <ol class="list">
+                <!-- 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 -->
+    <li id="twistday-reminder-suggestion-template" class="twister-user">
+      <div class="twister-user-photo">
+        <a href="#" class="twister-user-name open-profile-modal">
+          <img class="twister-user-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
+        </a>
+      </div>
+      <div class="twister-user-info" data-screen-name="">
+        <a href="#" class="twister-user-name open-profile-modal">
+          <div class="twister-user-full"></div>
+          <div class="twister-user-tag"></div>
+        </a>
+      </div>
+      <div>
+        <span class="twisterday"></span>
+      </div>
+    </li>
+
     <!-- TEMPLATE DE WHO-TO-FOLLOW SUGGESTION -->
     <li id="follow-suggestion-template" class="twister-user">
       <div class="">

js/interface_common.js

@@ -288,15 +288,18 @@ function openFollowingModal(username)
     $( "."+followingModalClass + " h3" ).text( polyglot.t("followed_by", { username: username }) );
 }
 
-function refreshWhoToFollow(e) {
+function refreshWhoToFollow() {
-    e.stopPropagation();
+    var $module = $('.module.who-to-follow');
-    e.preventDefault();
+    var $list = $module.find('.follow-suggestions');
+    if ($list.length) {
+        $list.empty().hide();
+        $module.find('.refresh-users').hide();
+        $module.find('.loading-roller').show();
 
-    $('.module.who-to-follow .follow-suggestions').empty();
+        getRandomFollowSuggestion(processSuggestion);
-
+        getRandomFollowSuggestion(processSuggestion);
-    getRandomFollowSuggestion(processSuggestion);
+        getRandomFollowSuggestion(processSuggestion);
-    getRandomFollowSuggestion(processSuggestion);
+    }
-    getRandomFollowSuggestion(processSuggestion);
 }
 
 function fillWhoToFollowModal(list, hlist, start) {
@@ -522,16 +525,15 @@ var replyInitPopup = function(e, post)
     openPrompt( replyClass );
 
     //título do modal
-    var fullname = post.find(".post-info-name").text();
+    $('.reply h3').html(polyglot.t('reply_to', { 'fullname': '<span class="fullname">'+post.userpost.n+'</span>' }));
-    $( ".reply h3" ).text( polyglot.t("reply_to", { fullname: fullname }) );
+    getFullname(post.userpost.n, $('.reply h3 .fullname'));
 
     //para poder exibir a thread selecionada...
     var replyModalContent = $(".reply .modal-content").hide();
     var retweetContent = $( "#reply-modal-template" ).children().clone(true);
     retweetContent.appendTo(replyModalContent);
 
-    var postdata = post.find(".post-data").attr("data-userpost");
+    var postElem = postToElem(post,"");
-    var postElem = postToElem($.evalJSON(postdata),"");
     postElem.appendTo(replyModalContent);
 
     var replyArea = $(".reply .post-area .post-area-new");
@@ -690,7 +692,7 @@ var postReplyClick = function( e )
     }
     var post = $(this).closest(".post");
     if( !post.hasClass( "original" ) ) {
-        replyInitPopup(e, post);
+        replyInitPopup(e, $.evalJSON(post.find(".post-data").attr("data-userpost")));
     } else {
         var postLiOpen = post.parents(".post.open");
         if( !postLiOpen.length ) {
@@ -1538,19 +1540,13 @@ function replaceDashboards() {
     if ($(window).width() >= 1200 && !$('.wrapper').hasClass('w1200')) {
         $('.wrapper').addClass('w1200');
         $('.userMenu').addClass('w1200');
-        var wtf = $('.module.who-to-follow');
+        $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
-        if (wtf.length > 0) {
+        $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
-            wtf.detach();
-            wtf.appendTo($('.dashboard.right'));
-        }
     } else if ($(window).width() < 1200 && $('.wrapper').hasClass('w1200')) {
         $('.wrapper').removeClass('w1200');
         $('.userMenu').removeClass('w1200');
-        var wtf = $('.module.who-to-follow');
+        $('.module.who-to-follow').detach().insertAfter($('.module.mini-profile'));
-        if (wtf.length > 0) {
+        $('.module.twistday-reminder').detach().insertAfter($('.module.toptrends'));
-            wtf.detach();
-            $('.module.mini-profile').after(wtf);
-        }
     }
 }
 
@@ -1618,7 +1614,7 @@ function initInterfaceCommon() {
     if ($.Options.getWhoToFollowOpt() === 'enable')
         initWhoToFollow();
     else
-        killWhoToFollow();
+        killInterfaceModule('who-to-follow');
 
     $('.tox-ctc').on('click', function(){
         window.prompt(polyglot.t('copy_to_clipboard'), $(this).attr('data'))
@@ -1635,11 +1631,17 @@ function initInterfaceCommon() {
     }
 }
 
+function initInterfaceModule(module) {
+    return $('.module.'+module).html($('#'+module+'-template').html()).show();
+}
+
+function killInterfaceModule(module) {
+    $('.module.'+module).empty().hide();
+}
 
 function initWhoToFollow() {
-    var wtf = $('.module.who-to-follow');
+    var wtf = initInterfaceModule('who-to-follow');
     if (wtf.length) {
-        wtf.html($('#who-to-follow-template').html()).show();
         var wtfRefresh = wtf.find('.refresh-users');
             wtfRefresh.on('click', refreshWhoToFollow);
             setTimeout(function() { wtfRefresh.click() }, 100);
@@ -1647,12 +1649,6 @@ function initWhoToFollow() {
     }
 }
 
-function killWhoToFollow() {
-    var wtf = $('.module.who-to-follow');
-    if (wtf.length)
-        wtf.empty().hide();
-}
-
 function setTextcompleteOn(element) {
     var $this = $(element);
     // Cursor has not set yet. And wait 100ms to skip global click event.

js/interface_home.js

@@ -121,32 +121,33 @@ var InterfaceFunctions = function()
         if ($.Options.getTopTrendsOpt() === 'enable')
             initTopTrends();
         else
-            killTopTrends();
+            killInterfaceModule('toptrends');
+
+        if ($.Options.getTwistdayReminderOpt() === 'enable')
+            initTwistdayReminder();
+        else
+            killInterfaceModule('twistday-reminder');
     }
 };
 
 function initTopTrends() {
-    var $tt = $('.module.toptrends');
+    var $tt = initInterfaceModule('toptrends');
     if ($tt.length) {
-        $tt.html($('#toptrends-template').html()).show();
         var $ttRefresh = $tt.find('.refresh-toptrends');
             $ttRefresh.on('click', updateTrendingHashtags);
             setTimeout(function() { $ttRefresh.click() }, 100);
     }
 }
 
-function killTopTrends() {
-    var $tt = $('.module.toptrends');
-    if ($tt.length)
-        $tt.empty().hide();
-}
-
 function updateTrendingHashtags() {
-    var $ttl = $('.module.toptrends .toptrends-list');
+    var $module = $('.module.toptrends');
-    if ($ttl.length) {
+    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())
@@ -168,19 +169,127 @@ 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);
     }
 };
 
+function initTwistdayReminder() {
+    var $module = initInterfaceModule('twistday-reminder');
+    if ($module.length) {
+        var $moduleRefresh = $module.find('.refresh');
+            $moduleRefresh.on('click', refreshTwistdayReminder);
+            setTimeout(function() { $moduleRefresh.click() }, 100);
+        $module.find('.current').hide();
+        $module.find('.upcoming').hide();
+    }
+}
+
+function refreshTwistdayReminder() {
+    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) {
+                for (var i = 0; i < suggests.length; i++) {
+                    suggests[i] = {'username': suggests[i], 'max_id': 0};
+                }
+                twisterRpc('getposts', [suggests.length + 1,suggests],
+                    function(arg, posts) {
+                        function addLuckyToList(list, post, time) {
+                            var lucky = post.userpost.n;
+                            if (list.find('[data-screen-name='+lucky+']').length < 1) {
+                                var item = $('#twistday-reminder-suggestion-template').clone(true);
+                                item.removeAttr('id');
+                                item.find('.twister-user-info').attr('data-screen-name', lucky);
+                                item.find('.twister-user-name').attr('href', $.MAL.userUrl(lucky));
+                                item.find('.twister-user-tag').text('@' +lucky);
+                                if (typeof(time) !== 'undefined')
+                                    item.find('.twisterday').text(timeGmtToText(time));
+                                else
+                                    item.find('.twisterday').text(timeGmtToText(post.userpost.time));
+                                item.find('.twisterday').bind('click', (function(e) { replyInitPopup(e, post); }).bind(post));
+
+                                getAvatar(lucky, item.find('.twister-user-photo'));
+                                getFullname(lucky, item.find('.twister-user-full'));
+
+                                list.append(item);
+                            }
+                        }
+                        function removeLuckyFromList(list, post) {
+                            var lucky = post.userpost.n;
+                            list.find('[data-screen-name='+lucky+']').closest('li').remove();
+                        }
+
+                        var showUpcomingTimer = ($.Options.getTwistdayReminderShowUpcomingOpt() === 'enable') ? $.Options.getTwistdayReminderShowUpcomingTimerOpt() *3600 : 0;
+                        var listCurrent = $module.find('.current .list');
+                        var listUpcoming = $module.find('.upcoming .list');
+                        var d = new Date();
+                        var todayYear = d.getUTCFullYear();
+                        var todayMonth = d.getUTCMonth();
+                        var todayDate = d.getUTCDate();
+                        var todaySec = Date.UTC(todayYear,todayMonth,todayDate,d.getUTCHours(),d.getUTCMinutes(),d.getUTCSeconds()) /1000;
+                        var thatSec;
+
+                        posts.sort(function(a,b) {
+                            if (parseInt(a.userpost.time) > parseInt(b.userpost.time))
+                                return 1;
+                            else
+                                return -1;
+                        });
+
+                        for (var i = 0; i < posts.length; i++) {
+                            d.setTime(0);
+                            d.setUTCSeconds(posts[i].userpost.time);
+                            if (d.getUTCMonth() === todayMonth && d.getUTCDate() === todayDate) {
+                                addLuckyToList(listCurrent, posts[i]);
+                            } else if (showUpcomingTimer > 0) {
+                                thatSec = Date.UTC(todayYear,d.getUTCMonth(),d.getUTCDate(),d.getUTCHours(),d.getUTCMinutes(),d.getUTCSeconds()) /1000;
+                                if (thatSec > todaySec && thatSec -todaySec <= showUpcomingTimer) {
+                                    d.setTime(0);
+                                    d.setUTCSeconds(thatSec);
+                                    addLuckyToList(listUpcoming, posts[i], d.getTime() /1000);
+                                } else {
+                                    removeLuckyFromList(listCurrent, posts[i]);
+                                    removeLuckyFromList(listUpcoming, posts[i]);
+                                }
+                            } else {
+                                removeLuckyFromList(listCurrent, posts[i]);
+                                removeLuckyFromList(listUpcoming, posts[i]);
+                            }
+                        }
+
+                        if (listCurrent.children().length > 1)
+                            listCurrent.parent().show();
+                        if (listUpcoming.children().length > 1)
+                            listUpcoming.parent().show();
+                        $module.find('.refresh').show();
+                        $module.find('.loading-roller').hide();
+                    }, null,
+                    function(arg, ret) { console.log('ajax error:' + ret); }, null);
+            }
+        }
+        if ($.Options.getTwistdayReminderAutoUpdateOpt() === 'enable' && $.Options.getTwistdayReminderAutoUpdateTimerOpt() > 0)
+            setTimeout(refreshTwistdayReminder, $.Options.getTwistdayReminderAutoUpdateTimerOpt()*1000);
+    }
+}
+
 //***********************************************
 //******************* INIT **************
 //***********************************************

js/interface_localization.js

@@ -276,6 +276,11 @@ if(preferredLanguage == "en"){
       "Messages": "Messages",
       "Edit profile": "Edit profile",
       "Top Trends": "Top Trends",
+      "Twistday Reminder": "Twistday Reminder",
+      "Show upcoming in near future": "Show upcoming in near future",
+      "Who's celebrating Twistday": "Who's celebrating Twistday",
+      "Today's luckies:": "Today's luckies:",
+      "Upcoming ones:": "Upcoming ones:",
       "twisted again by": "twisted again by",
       "undo": "undo",
       "Are you sure you want to exit the daemon?\nThe Twister client will stop working.": "Are you sure you want to exit the daemon?\nThe Twister client will stop working.",
@@ -559,6 +564,11 @@ if(preferredLanguage == "es"){
       "Messages": "Mensajes",
       "Edit profile": "Editar perfil",
       "Top Trends": "Tendencias principales",
+      "Twistday Reminder": "Twistday Reminder",
+      "Show upcoming in near future": "Show upcoming in near future",
+      "Who's celebrating Twistday": "Who's celebrating Twistday",
+      "Today's luckies:": "Today's luckies:",
+      "Upcoming ones:": "Upcoming ones:",
       "twisted again by": "twisted again by",
       "undo": "deshacer",
       "Are you sure you want to exit the daemon?\nThe Twister client will stop working.": "Are you sure you want to exit the daemon?\nThe Twister client will stop working.",
@@ -826,6 +836,11 @@ if(preferredLanguage == "uk"){
       "Messages": "Повідомлення",
       "Edit profile": "Редагувати профіль",
       "Top Trends": "Тренди",
+      "Twistday Reminder": "Twistday Reminder",
+      "Show upcoming in near future": "Show upcoming in near future",
+      "Who's celebrating Twistday": "Who's celebrating Twistday",
+      "Today's luckies:": "Today's luckies:",
+      "Upcoming ones:": "Upcoming ones:",
       "twisted again by": "twisted again by",
       "undo": "відмінити",
       "Are you sure you want to exit the daemon?\nThe Twister client will stop working.": "Ви впевнені, що бажаєте зупинити системний демон? \nУ такому разі, клієнт Twister буде зупинено допоки ви не запустите його знову.",
@@ -1092,6 +1107,11 @@ if(preferredLanguage == "zh-CN"){
       "Messages": "消息",
       "Edit profile": "编辑个人简介",
       "Top Trends": "热门趋势",
+      "Twistday Reminder": "Twistday Reminder",
+      "Show upcoming in near future": "Show upcoming in near future",
+      "Who's celebrating Twistday": "Who's celebrating Twistday",
+      "Today's luckies:": "Today's luckies:",
+      "Upcoming ones:": "Upcoming ones:",
       "twisted again by": "转推由",
       "undo": "撤销",
       "Are you sure you want to exit the daemon?\nThe Twister client will stop working.": "你确定要退出后台进程？\nTwister 客户端将停止工作。",
@@ -1376,6 +1396,11 @@ if(preferredLanguage == "nl"){
       "Messages": "Messages",
       "Edit profile": "Edit profile",
       "Top Trends": "Top Trends",
+      "Twistday Reminder": "Twistday Reminder",
+      "Show upcoming in near future": "Show upcoming in near future",
+      "Who's celebrating Twistday": "Who's celebrating Twistday",
+      "Today's luckies:": "Today's luckies:",
+      "Upcoming ones:": "Upcoming ones:",
       "twisted again by": "twisted again by",
       "undo": "undo",
       "Are you sure you want to exit the daemon?\nThe Twister client will stop working.": "Are you sure you want to exit the daemon?\nThe Twister client will stop working.",
@@ -1640,6 +1665,11 @@ if(preferredLanguage == "it"){
       "Messages": "Messages",
       "Edit profile": "Edit profile",
       "Top Trends": "Top Trends",
+      "Twistday Reminder": "Twistday Reminder",
+      "Show upcoming in near future": "Show upcoming in near future",
+      "Who's celebrating Twistday": "Who's celebrating Twistday",
+      "Today's luckies:": "Today's luckies:",
+      "Upcoming ones:": "Upcoming ones:",
       "twisted again by": "twisted again by",
       "undo": "undo",
       "Are you sure you want to exit the daemon?\nThe Twister client will stop working.": "Are you sure you want to exit the daemon?\nThe Twister client will stop working.",
@@ -1908,6 +1938,11 @@ if(preferredLanguage == "fr"){
       "Messages": "Messages",
       "Edit profile": "Edit profile",
       "Top Trends": "Top Trends",
+      "Twistday Reminder": "Twistday Reminder",
+      "Show upcoming in near future": "Show upcoming in near future",
+      "Who's celebrating Twistday": "Who's celebrating Twistday",
+      "Today's luckies:": "Today's luckies:",
+      "Upcoming ones:": "Upcoming ones:",
       "twisted again by": "twisted again by",
       "undo": "undo",
       "Are you sure you want to exit the daemon?\nThe Twister client will stop working.": "Are you sure you want to exit the daemon?\nThe Twister client will stop working.",
@@ -2177,6 +2212,11 @@ if(preferredLanguage == "ru"){
        "Messages": "Сообщения",
        "Edit profile": "Изменить профиль",
        "Top Trends": "Топ Трендов",
+       "Twistday Reminder": "Твистоденный Календарь",
+       "Show upcoming in near future": "Показывать намечающиеся юбиляров",
+       "Who's celebrating Twistday": "Кто празднует Твистодень",
+       "Today's luckies:": "Сегодняшные счастливчики", // няшные, ок?
+       "Upcoming ones:": "Намечающиеся вскоре",
        "twisted again by": "Перепостил",
        "undo": "отменить",
        "Are you sure you want to exit the daemon?\nThe Twister client will stop working.": "Вы уверены, что хотите "+
@@ -2450,6 +2490,11 @@ if(preferredLanguage == "de"){
       "Messages": "Messages",
       "Edit profile": "Edit profile",
       "Top Trends": "Top Trends",
+      "Twistday Reminder": "Twistday Reminder",
+      "Show upcoming in near future": "Show upcoming in near future",
+      "Who's celebrating Twistday": "Who's celebrating Twistday",
+      "Today's luckies:": "Today's luckies:",
+      "Upcoming ones:": "Upcoming ones:",
       "twisted again by": "twisted again by",
       "undo": "undo",
       "Are you sure you want to exit the daemon?\nThe Twister client will stop working.": "Are you sure you want to exit the daemon?\nThe Twister client will stop working.",
@@ -2714,6 +2759,11 @@ if(preferredLanguage == "ja"){
       "Messages": "Messages",
       "Edit profile": "Edit profile",
       "Top Trends": "Top Trends",
+      "Twistday Reminder": "Twistday Reminder",
+      "Show upcoming in near future": "Show upcoming in near future",
+      "Who's celebrating Twistday": "Who's celebrating Twistday",
+      "Today's luckies:": "Today's luckies:",
+      "Upcoming ones:": "Upcoming ones:",
       "twisted again by": "twisted again by",
       "undo": "undo",
       "Are you sure you want to exit the daemon?\nThe Twister client will stop working.": "Are you sure you want to exit the daemon?\nThe Twister client will stop working.",
@@ -2984,6 +3034,11 @@ if(preferredLanguage == "pt-BR"){
       "Messages": "Messages",
       "Edit profile": "Edit profile",
       "Top Trends": "Top Trends",
+      "Twistday Reminder": "Twistday Reminder",
+      "Show upcoming in near future": "Show upcoming in near future",
+      "Who's celebrating Twistday": "Who's celebrating Twistday",
+      "Today's luckies:": "Today's luckies:",
+      "Upcoming ones:": "Upcoming ones:",
       "twisted again by": "twisted again by",
       "undo": "undo",
       "Are you sure you want to exit the daemon?\nThe Twister client will stop working.": "Are you sure you want to exit the daemon?\nThe Twister client will stop working.",
@@ -3250,6 +3305,11 @@ if(preferredLanguage == "tr"){
       "Messages": "Messages",
       "Edit profile": "Edit profile",
       "Top Trends": "Top Trends",
+      "Twistday Reminder": "Twistday Reminder",
+      "Show upcoming in near future": "Show upcoming in near future",
+      "Who's celebrating Twistday": "Who's celebrating Twistday",
+      "Today's luckies:": "Today's luckies:",
+      "Upcoming ones:": "Upcoming ones:",
       "twisted again by": "twisted again by",
       "undo": "undo",
       "Are you sure you want to exit the daemon?\nThe Twister client will stop working.": "Are you sure you want to exit the daemon?\nThe Twister client will stop working.",
@@ -3515,6 +3575,11 @@ if(preferredLanguage == "cs"){
       "Messages": "Zprávy",
       "Edit profile": "Upravit profil",
       "Top Trends": "Hlavní trendy",
+      "Twistday Reminder": "Twistday Reminder",
+      "Show upcoming in near future": "Show upcoming in near future",
+      "Who's celebrating Twistday": "Who's celebrating Twistday",
+      "Today's luckies:": "Today's luckies:",
+      "Upcoming ones:": "Upcoming ones:",
       "twisted again by": "přeposlal(a)",
       "undo": "zpět",
       "Are you sure you want to exit the daemon?\nThe Twister client will stop working.": "Skutečně chcete ukončit server?\nTwister tím vypnete.",

js/options.js

@@ -389,6 +389,81 @@ var TwisterOptions = function()
         $('#TopTrendsAutoUpdateTimer').on('keyup', function () { setElemValNumeric(this, polyglot.t('second(s)')); });
     }
 
+    this.getTwistdayReminderOpt = function() {
+        return this.getOption('TwistdayReminder', 'enable');
+    }
+
+    this.setTwistdayReminderOpt = function () {
+        function TwistdayReminderCfg() {
+            if ($.Options.getTwistdayReminderOpt() === 'enable')
+                $('#TwistdayReminderCont').show();
+            else
+                $('#TwistdayReminderCont').hide();
+        }
+        $('#TwistdayReminder').val( this.getTwistdayReminderOpt() );
+        TwistdayReminderCfg();
+        $('#TwistdayReminder').on('change', function() {
+            $.Options.setOption(this.id, this.value);
+            TwistdayReminderCfg();
+        });
+    }
+
+    this.getTwistdayReminderAutoUpdateOpt = function() {
+        return this.getOption('TwistdayReminderAutoUpdate', 'enable');
+    }
+
+    this.setTwistdayReminderAutoUpdateOpt = function () {
+        function TwistdayReminderAutoUpdateCfg() {
+            if ($.Options.getTwistdayReminderAutoUpdateOpt() === 'enable')
+                $('#TwistdayReminderAutoUpdateOpt').css('display', 'inline');
+            else
+                $('#TwistdayReminderAutoUpdateOpt').css('display', 'none');
+        }
+        $('#TwistdayReminderAutoUpdate').val( this.getTwistdayReminderAutoUpdateOpt() );
+        TwistdayReminderAutoUpdateCfg();
+        $('#TwistdayReminderAutoUpdate').on('change', function() {
+            $.Options.setOption(this.id, this.value);
+            TwistdayReminderAutoUpdateCfg();
+        });
+    }
+
+    this.getTwistdayReminderAutoUpdateTimerOpt = function () {
+        return parseInt(this.getOption('TwistdayReminderAutoUpdateTimer', '3600'));
+    }
+
+    this.setTwistdayReminderAutoUpdateTimerOpt = function () {
+        $('#TwistdayReminderAutoUpdateTimer').val( this.getTwistdayReminderAutoUpdateTimerOpt().toString() );
+        $('#TwistdayReminderAutoUpdateTimer').on('keyup', function () { setElemValNumeric(this, polyglot.t('second(s)')); });
+    }
+
+    this.getTwistdayReminderShowUpcomingOpt = function() {
+        return this.getOption('TwistdayReminderShowUpcoming', 'enable');
+    }
+
+    this.setTwistdayReminderShowUpcomingOpt = function () {
+        function TwistdayReminderShowUpcomingCfg() {
+            if ($.Options.getTwistdayReminderShowUpcomingOpt() === 'enable')
+                $('#TwistdayReminderShowUpcomingOpt').css('display', 'inline');
+            else
+                $('#TwistdayReminderShowUpcomingOpt').css('display', 'none');
+        }
+        $('#TwistdayReminderShowUpcoming').val( this.getTwistdayReminderShowUpcomingOpt() );
+        TwistdayReminderShowUpcomingCfg();
+        $('#TwistdayReminderShowUpcoming').on('change', function() {
+            $.Options.setOption(this.id, this.value);
+            TwistdayReminderShowUpcomingCfg();
+        });
+    }
+
+    this.getTwistdayReminderShowUpcomingTimerOpt = function () {
+        return parseInt(this.getOption('TwistdayReminderShowUpcomingTimer', '72'));
+    }
+
+    this.setTwistdayReminderShowUpcomingTimerOpt = function () {
+        $('#TwistdayReminderShowUpcomingTimer').val( this.getTwistdayReminderShowUpcomingTimerOpt().toString() );
+        $('#TwistdayReminderShowUpcomingTimer').on('keyup', function () { setElemValNumeric(this, polyglot.t('hour(s)')); });
+    }
+
     this.getWhoToFollowOpt = function() {
         return this.getOption('WhoToFollow', 'enable');
     }
@@ -564,9 +639,14 @@ var TwisterOptions = function()
         this.setConvertFractionsOpt();
         this.setUseProxyOpt();
         this.setUseProxyForImgOnlyOpt();
-        this.setTopTrendsAutoUpdateOpt();
         this.setTopTrendsOpt();
+        this.setTopTrendsAutoUpdateOpt();
         this.setTopTrendsAutoUpdateTimerOpt();
+        this.setTwistdayReminderOpt();
+        this.setTwistdayReminderAutoUpdateOpt();
+        this.setTwistdayReminderAutoUpdateTimerOpt();
+        this.setTwistdayReminderShowUpcomingOpt();
+        this.setTwistdayReminderShowUpcomingTimerOpt();
         this.setWhoToFollowOpt();
         this.setSplitPostsOpt();
         this.setHideRepliesOpt();

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()

options.html

@@ -335,6 +335,37 @@
               </form>
             </div>
           </div>
+          <div class="module">
+            <p class="label label-h"> Twistday Reminder </p>
+            <div class="container">
+              <form>
+                <p>
+                  <select id="TwistdayReminder">
+                    <option value="enable">Enable</option>
+                    <option value="disable">Disable</option>
+                  </select>
+                </p>
+                <div id="TwistdayReminderCont" class="container">
+                  <p class="label">Auto updating</p>
+                  <select id="TwistdayReminderAutoUpdate" class="container">
+                    <option value="enable">Enable</option>
+                    <option value="disable">Disable</option>
+                  </select>
+                  <div id="TwistdayReminderAutoUpdateOpt" class="container">
+                    <input type="text" id="TwistdayReminderAutoUpdateTimer" maxlength="6" size="6"/> <span class="label">second(s)</span>
+                  </div>
+                  <p class="label">Show upcoming in near future</p>
+                  <select id="TwistdayReminderShowUpcoming" class="container">
+                    <option value="enable">Enable</option>
+                    <option value="disable">Disable</option>
+                  </select>
+                  <div id="TwistdayReminderShowUpcomingOpt" class="container">
+                    <input type="text" id="TwistdayReminderShowUpcomingTimer" maxlength="4" size="6"/> <span class="label">hour(s)</span>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
 
         <div class="post-editor">
           <div class="module">

theme_calm/css/style.css

@@ -453,6 +453,7 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     top: 55px;
     margin-left: 864px;
 }
+
 .module
 {
     border: solid 1px rgba( 69, 71, 77, .1 );
@@ -460,6 +461,7 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     
 }
 .dashboard .module {
+    margin: 0 0 3%;
     border-radius: 6px;
 }
 .messages-qtd
@@ -970,6 +972,7 @@ textarea.splited-post {
 }
 
 .refresh-toptrends,
+.twistday-reminder .refresh,
 .refresh-users,
 .view-all-users
 {
@@ -984,13 +987,15 @@ textarea.splited-post {
 ***********************************/
 
 .module.toptrends {
-    margin-top: 10px;
+    padding: 8px 4px;
 }
+
 .module.toptrends h3 {
     margin: 5px 0 5px 10px;
     font: 14px 'Open Sans', sans-serif;
     display: inline;
 }
+
 .module.toptrends ol {
     margin: 0 0 10px 10px;
 }
@@ -999,6 +1004,50 @@ textarea.splited-post {
     font: 13px 'Open Sans', sans-serif;
 }
 
+/***********************************
+********* TWISTDAY REMINDER ********
+***********************************/
+
+.module.twistday-reminder {
+    padding: 8px 4px;
+}
+
+.twistday-reminder h3 {
+    margin: 5% 0% 2% 5%;
+    display: inline;
+}
+
+.twistday-reminder h4 {
+    margin: 1% 1% 1% 16%;
+    font-size: 90%;
+    color: rgba(0, 0, 0, 0.5);
+}
+
+.twistday-reminder a:hover {
+    text-decoration: none;
+}
+
+.twistday-reminder .list {
+  margin: 0% 5% 5% 5%;
+  padding: 5px;
+}
+
+.twistday-reminder .twister-user-tag,
+.twistday-reminder .twister-user-full {
+    display: block;
+    margin: 0;
+    text-align: center;
+}
+
+.twistday-reminder .twisterday {
+    font-size: 80%;
+    margin-left: 11%;
+}
+
+.twistday-reminder .twisterday:hover {
+    cursor: pointer;
+}
+
 /***********************************
 ********************* POST BOARD ***
 ***********************************/
@@ -2161,12 +2210,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;
@@ -2176,8 +2225,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;
@@ -2200,8 +2249,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;
@@ -2225,8 +2274,8 @@ textarea.splited-post {
     left: 2px;
   }
 }
-@-webkit-keyframes slide
+
-{
+@-webkit-keyframes slide {
   0% {
     right: 100px;
     left: 2px;
@@ -2250,8 +2299,8 @@ textarea.splited-post {
     left: 2px;
   }
 }
-@-moz-keyframes slide
+
-{
+@-moz-keyframes slide {
   0% {
     right: 60px;
     left: 2px;
@@ -2392,11 +2441,6 @@ textarea.splited-post {
 *********** FOLLOWING PAGE ***********
 **************************************/
 
-.following .postboard-loading
-{
-    text-align: center;
-}
-
 .following .header-bold {
     display: block;
     width: 100%;

theme_nin/css/style.css

@@ -56,7 +56,7 @@
   font-style: normal;
 }
 /* line 64, ../sass/_fonts.sass */
-[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .userMenu li.userMenu-config > a:before, .post-context span:before, .post-reply:before, .post-propagate:before, .post-favorite:before, .post .show-more:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .twister-user-remove:before, .refresh-toptrends:before, .refresh-users:before, .modal-close:before, .mark-all-as-read:before, .modal-back:before, .icon-down-after:after {
+[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .userMenu li.userMenu-config > a:before, .post-context span:before, .post-reply:before, .post-propagate:before, .post-favorite:before, .post .show-more:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .modal-close:before, .mark-all-as-read:before, .modal-back:before, .icon-down-after:after {
   font-family: "fontello";
   font-style: normal;
   font-weight: normal;
@@ -198,7 +198,7 @@
 
 /* '' */
 /* line 183, ../sass/_fonts.sass */
-.icon-arrows:before, .refresh-toptrends:before, .refresh-users:before {
+.icon-arrows:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before {
   content: "";
 }
 
@@ -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, .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, .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,16 +1891,10 @@ button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disab
 }
 /* line 63, ../sass/style.sass */
 .dashboard.right {
-  display: block;
+  margin-left: 880px;
-  position: absolute;
-  right: 0;
-}
-/* line 67, ../sass/style.sass */
-.dashboard.right .module {
-  position: fixed;
-  height: 100%;
 }
 
+
 /********** CONFIG SUBMENU & SEARCH RESULTS *********** */
 /* line 76, ../sass/style.sass */
 .dialog-modal {
@@ -2322,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;
@@ -2377,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 */
@@ -2449,7 +2451,7 @@ button.follow:hover, .mini-profile-actions span.follow:hover, button.unfollow, .
 }
 
 /* line 499, ../sass/style.sass */
-.refresh-toptrends, .refresh-users {
+.refresh-toptrends, .twistday-reminder .refresh, .refresh-users {
   color: #66686B;
   cursor: pointer;
   font-size: 11px;
@@ -2479,16 +2481,26 @@ button.follow:hover, .mini-profile-actions span.follow:hover, button.unfollow, .
 }
 
 /* line 527, ../sass/style.sass */
-.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: #B4C669;
   text-decoration: none;
   background-color: transparent;
 }
 
 /***********TOP TRENDS************** */
+
+.module.toptrends {
+  margin-bottom: 20px;
+}
+
+.toptrends small {
+  display: none;
+}
+
 .toptrends h3 {
   float: left;
 }
+
 /* line 534, ../sass/style.sass */
 ol.toptrends-list {
   margin: 0;
@@ -2515,6 +2527,53 @@ ol.toptrends-list a:hover {
   color: #66686B;
 }
 
+/********* TWISTDAY REMINDER *******/
+
+.twistday-reminder {
+  width: 300px;
+}
+
+.twistday-reminder small {
+  display: none;
+}
+
+.twistday-reminder h3 {
+  float: left;
+}
+
+.twistday-reminder h4 {
+  margin: 1% 1% 1% 16%;
+  font-size: 90%;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.twistday-reminder a:hover {
+  text-decoration: none;
+}
+
+.twistday-reminder .twister-user-info {
+  margin-top: 8px;
+}
+.twistday-reminder .twister-user-tag,
+.twistday-reminder .twister-user-full {
+  display: block;
+  margin: 0;
+  text-align: center;
+}
+
+.twistday-reminder img.twister-user-photo {
+  margin: 0;
+}
+
+.twistday-reminder .twisterday {
+  font-size: 80%;
+  margin-left: 8%;
+}
+
+.twistday-reminder .twisterday:hover {
+  cursor: pointer;
+}
+
 /*********** POPUP PROMPT ************ */
 /* line 558, ../sass/style.sass */
 .prompt-wrapper {
@@ -2716,14 +2775,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;
@@ -2739,10 +2794,8 @@ ol.toptrends-list a:hover {
 
 /********* REPLY POSTS MODAL************** */
 /* line 715, ../sass/style.sass */
-.reply .modal-wrapper {
+.reply.prompt-wrapper {
-  width: 520px;
+  margin-top: -110px;
-  top: 20%;
-  margin: 0 0 0 -260px;
 }
 /* line 719, ../sass/style.sass */
 .reply .modal-buttons, .reply .post-expand, .reply .post-interactions {
@@ -3023,15 +3076,15 @@ ol.toptrends-list a:hover {
 /* line 943, ../sass/style.sass */
 .who-to-follow-modal .modal-wrapper {
   width: 520px;
-  top: 10%;
+  top: 50%;
-  height: 455px;
+  height: 555px;
-  margin: 0 0 0 -260px;
+  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 */
@@ -3061,6 +3114,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;
 }
@@ -3072,11 +3126,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;
@@ -3085,7 +3140,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;
@@ -3243,10 +3298,8 @@ ul.dropdown-menu .active, ul.dropdown-menu .active a {
   }
 
   /* line 14, ../sass/_responsive.sass */
-  .following-list li {
+  .following-list li, .twistday-reminder li {
-    width: 47%;
     float: left;
-    margin: 0 2% 2% 0;
     font-size: 80%;
   }
 }
@@ -3271,7 +3324,7 @@ ul.dropdown-menu .active, ul.dropdown-menu .active a {
   }
 
   /* line 32, ../sass/_responsive.sass */
-  .who-to-follow, .toptrends {
+  .module.who-to-follow, .module.toptrends, .module.twistday-reminder {
     display: none;
   }
 
@@ -3281,7 +3334,7 @@ ul.dropdown-menu .active, ul.dropdown-menu .active a {
   }
 
   /* line 37, ../sass/_responsive.sass */
-  .following-list li {
+  .following-list li, .twistday-reminder li {
     width: 98%;
     float: none;
     margin: 2% 1%;

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'
 
 /* ''*/
@@ -193,4 +193,4 @@
 .icon-bell:before
   content: '\e816'
 
-/* '' */
+/* '' */

theme_nin/sass/_responsive.sass

@@ -11,10 +11,8 @@
 	.postboard
 		width: 100%
 		
-	.following-list li
+	.following-list li, .twistday-reminder li
-		width: 47%
 		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
-		display: none
+	    .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
+    margin-left: 880px;
-    position: absolute
-    right: 0
-    .module
-      position: fixed
-      height: 100%
     @extend .clear-fix
 
 
@@ -434,11 +429,12 @@ textarea.splited-post
 
 
 
-/****** WHO TO FOLLOW *******/
+/******** WHO TO FOLLOW ********/
 
 .who-to-follow
-  width: inherit
+  &.module
-  margin-bottom: 20px
+    width: inherit
+    margin-bottom: 20px
   small 
     display: none
   h3 
@@ -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,33 @@ 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%
+    &.hover
+      cursor: pointer
 
 /*********** POPUP PROMPT *************/
 .prompt-wrapper
@@ -728,11 +756,8 @@ ol.toptrends-list
 /************ RETWIST POSTS MODAL **********/
 
 .reTwist
-  margin-top: -110px
+  &.prompt-wrapper
-  .modal-wrapper
+    margin-top: -110px
-    width: $postboard-modal-width
-    top: 20%
-    margin: 0 0 0 0-($postboard-modal-width/2)
   .modal-content
     padding: 20px 15px
   .modal-buttons
@@ -744,10 +769,8 @@ ol.toptrends-list
 /********* REPLY POSTS MODAL***************/
 
 .reply
-  .modal-wrapper
+  &.prompt-wrapper
-    width: $postboard-modal-width
+    margin-top: -110px
-    top: 20%
-    margin: 0 0 0 0-($postboard-modal-width/2)
   .modal-buttons, .post-expand, .post-interactions
     display: none
   .post-area
@@ -974,13 +997,13 @@ ol.toptrends-list
 .who-to-follow-modal
   .modal-wrapper
     width: $postboard-modal-width
-    top: 10%
+    top: 50%
-    height: 455px
+    height: 555px
-    margin: 0 0 0 0-($postboard-modal-width/2)
+    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 +1022,7 @@ ol.toptrends-list
     display: block
   .twister-user-info
     position: relative
+    margin-top: 4px
     padding-left: 70px
     width: auto
   .bio
@@ -1007,7 +1031,8 @@ ol.toptrends-list
 
 /******* LOADER *************/
 
-.postboard-loading
+.postboard-loading, .loading-roller
+  clear: both
   text-align: center
   div
     display: inline-block
@@ -1100,7 +1125,7 @@ ol.toptrends-list
   #filterLangList
     width: 90%
 
-  #filterLangListCont div, #TopTrendsCont div
+  #filterLangListCont div, #TopTrendsCont div, #TwistdayReminderCont div
     float: none
     padding: 0px 4px