Merge pull request #9 from msjoinder/ui-ups

"Who to Follow" profiles clickable, timestamps show time ago

following.html

@@ -156,11 +156,14 @@
     <!-- TEMPLATE DE WHO-TO-FOLLOW SUGGESTION -->
     <li id="follow-suggestion-template" class="twister-user">
       <div class="">
-        <img class="twister-user-photo" src="img/grayed_avatar_placeholder_24.png" alt="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"></a>
+        <a href="#" class="twister-user-name open-profile-modal">
-        <span class="twister-user-tag"></span>
+          <span class="twister-user-tag"></span>
+        </a>
         <div class="followers">Followed by
           <span class="followed-by"></span>
         </div>

home.html

@@ -163,11 +163,14 @@
     <!-- TEMPLATE DE WHO-TO-FOLLOW SUGGESTION -->
     <li id="follow-suggestion-template" class="twister-user">
       <div class="">
-        <img class="twister-user-photo" src="img/grayed_avatar_placeholder_24.png" alt="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"></a>
+        <a href="#" class="twister-user-name open-profile-modal">
-        <span class="twister-user-tag"></span>
+          <span class="twister-user-tag"></span>
+        </a>
         <div class="followers">Followed by
           <span class="followed-by"></span>
         </div>

interface_common.js

@@ -66,6 +66,38 @@ function timeGmtToText(t) {
     return d.toString().replace(/GMT.*/g,"");
 }
 
+function timeSincePost(t) {
+    var d = new Date(0);
+    d.setUTCSeconds(t);
+    var now = new Date();
+    var t_delta = Math.ceil((now - d) / 1000);
+    var expression = "";
+    if(t_delta < 2) {
+        expression = "1 second"
+    }
+    else if(t_delta < 60) {
+        expression = t_delta + " seconds"
+    }
+    else if(t_delta < 120) {
+        expression = "1 second"    
+    }
+    else if(t_delta < 60 * 60) {
+        expression = Math.floor(t_delta/60) + " minutes"
+    }
+    else if(t_delta < 2 * 60 * 60) {
+        expression = "1 hour"
+    }
+    else if(t_delta < 24 * 60 * 60) {
+        expression = Math.floor(t_delta/60/60) + " hours"
+    }
+    else if(t_delta < 2 * 24 * 60 * 60) {
+        expression = "1 day"
+    }
+    else {
+        expression = Math.floor(t_delta/24/60/60) + " days"
+    }
+    return expression + " ago";
+}
 
 //
 // Profile, mentions and hashtag modal

twister_formatpost.js

@@ -76,6 +76,7 @@ function postToElem( post, kind ) {
     elem.find(".post-info-tag").text = "@" + n;
     getAvatar( n, elem.find(".avatar") );
     elem.find(".post-info-time").text(timeGmtToText(t));
+    elem.find(".post-info-time").attr("title",timeSincePost(t));
 
     var mentions = [];
     htmlFormatMsg( msg, elem.find(".post-text"), mentions);
@@ -117,6 +118,7 @@ function dmDataToSnippetItem(dmData, remoteUser) {
     getFullname( remoteUser, dmItem.find("a.post-info-name") );
     dmItem.find(".post-text").text(escapeHtmlEntities(dmData.text));
     dmItem.find(".post-info-time").text(timeGmtToText(dmData.time));
+    dmItem.find(".post-info-time").attr("title",timeSincePost(dmData.time));
 
     return dmItem;
 }
@@ -129,6 +131,7 @@ function dmDataToConversationItem(dmData, localUser, remoteUser) {
     dmItem.addClass(classDm);
     getAvatar(dmData.fromMe ? localUser : remoteUser, dmItem.find(".post-photo").find("img") );
     dmItem.find(".post-info-time").text(timeGmtToText(dmData.time));
+    dmItem.find(".post-info-time").attr("title",timeSincePost(dmData.time));
     var mentions = [];
     htmlFormatMsg( dmData.text, dmItem.find(".post-text"), mentions);
     return dmItem;