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

twistday reminder with most of functionality
miguelfreitas · Apr 22, 2015 · f0d997c · f0d997c
2 parents e9e80f8 + d45f8e9
commit f0d997c
Show file tree

Hide file tree

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

diff --git a/home.html b/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 @@ <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>
@@ -218,18 +222,67 @@ <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">
-          <!-- use "follow-suggestion-template" here -->
-        </ol>
+        <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">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="">

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) {
@@ -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" ).text( polyglot.t("reply_to", { fullname: fullname }) );
+    $('.reply h3').html(polyglot.t('reply_to', { 'fullname': '<span class="fullname">'+post.userpost.n+'</span>' }));
+    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($.evalJSON(postdata),"");
+    var postElem = postToElem(post,"");
     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');
-        if (wtf.length > 0) {
-            wtf.detach();
-            wtf.appendTo($('.dashboard.right'));
-        }
+        $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
+        $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
     } else if ($(window).width() < 1200 && $('.wrapper').hasClass('w1200')) {
         $('.wrapper').removeClass('w1200');
         $('.userMenu').removeClass('w1200');
-        var wtf = $('.module.who-to-follow');
-        if (wtf.length > 0) {
-            wtf.detach();
-            $('.module.mini-profile').after(wtf);
-        }
+        $('.module.who-to-follow').detach().insertAfter($('.module.mini-profile'));
+        $('.module.twistday-reminder').detach().insertAfter($('.module.toptrends'));
     }
 }
 
@@ -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,24 +1631,24 @@ 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);
         //wtf.find('.view-all-users').on('click', function() { window.location.hash = '#whotofollow'; });
     }
 }
 
-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.