show post retwists with comment as posts with citation

css/style.css

@@ -1253,6 +1253,41 @@ ol.toptrends-list {
     border-left: solid 3px #E34F42;
     margin-left: 2px;
 }
+
+.post-rt-reference {
+    background-color: #FAFAFA;
+    border: 1px solid #ccc;
+}
+
+.post-rt-reference:hover {
+    background-color: #FFF;
+    cursor: pointer;
+}
+
+.post-rt-reference .post-photo {
+    width: 24px;
+    height: 24px;
+}
+
+.post-rt-reference .post-photo img {
+    width: 24px;
+    height: auto;
+}
+
+.post-rt-reference .post-info-name {
+    font-size: 10px;
+}
+
+.post-rt-reference .post-text {
+    font-size: 10px;
+    margin: 2px 10px 4px 10px;
+}
+
+.post-rt-reference .post-info-time {
+    font-size: 9px;
+    color: #000;
+}
+
 /***********************************
 ******** LOGIN AND NETWORK PAGES ***
 ***********************************/

following.html

@@ -222,11 +222,7 @@
                 <a class="post-info-time"></a>
             </div>
             <p class="post-text"></p>
-            <div class="post-context" style="display: none;">
+            <div class="post-context" style="display: none;"></div>
-                <i class="post-retransmited-icon"></i>
-                <span>twisted again by</span>
-                <a class="post-retransmited-by open-profile-modal" href=""></a>
-            </div>
             <span class="post-expand">Expand</span>
             <!-- elementos de interação com o post que são exibidos no hover -->
             <div class="post-interactions">
@@ -261,6 +257,25 @@
         </div> <!-- post-data -->
     </li> <!-- post-template -->
 
+    <div id="post-rt-reference-template">
+        <div class="post-rt-reference">
+            <div class="post-photo"><img class="avatar" src="img/grayed_avatar_placeholder_24.png" alt="user-photo" /></div>
+            <div class="post-info">
+                <a href="#" class="post-info-name open-profile-modal"></a>
+                <span class="post-info-tag"></span>
+                <span class="post-info-sent"></span>
+                <a class="post-info-time"></a>
+            </div>
+            <p class="post-text"></p>
+        </div>
+    </div>
+
+    <div id="post-retransmited-by-template">
+        <i class="post-retransmited-icon"></i>
+        <span>twisted again by</span><span> </span>
+        <a class="post-retransmited-by open-profile-modal" href=""></a>
+    </div>
+
     <!-- template for user links in message (open profile modal) -->
     <a id="msg-user-link-template" class="open-profile-modal"></a>
     <!-- template for user links in message (open profile modal) -->

home.html

@@ -314,11 +314,7 @@
                 <a class="post-info-time"></a>
             </div>
             <p class="post-text"></p>
-            <div class="post-context" style="display: none;">
+            <div class="post-context" style="display: none;"></div>
-                <i class="post-retransmited-icon"></i>
-                <span>twisted again by</span>
-                <a class="post-retransmited-by open-profile-modal" href=""></a>
-            </div>
             <span class="post-expand">Expand</span>
             <!-- elementos de interação com o post que são exibidos no hover -->
             <div class="post-interactions">
@@ -353,6 +349,25 @@
         </div> <!-- post-data -->
     </li> <!-- post-template -->
 
+    <div id="post-rt-reference-template">
+        <div class="post-rt-reference">
+            <div class="post-photo"><img class="avatar" src="img/grayed_avatar_placeholder_24.png" alt="user-photo" /></div>
+            <div class="post-info">
+                <a href="#" class="post-info-name open-profile-modal"></a>
+                <span class="post-info-tag"></span>
+                <span class="post-info-sent"></span>
+                <a class="post-info-time"></a>
+            </div>
+            <p class="post-text"></p>
+        </div>
+    </div>
+
+    <div id="post-retransmited-by-template">
+        <i class="post-retransmited-icon"></i>
+        <span>twisted again by</span><span> </span>
+        <a class="post-retransmited-by open-profile-modal" href=""></a>
+    </div>
+
     <!-- template for user links in message (open profile modal) -->
     <a id="msg-user-link-template" class="open-profile-modal"></a>
     <!-- template for user links in message (open profile modal) -->

js/twister_formatpost.js

@@ -3,12 +3,16 @@
 //
 // Format JSON posts and DMs to HTML.
 
+var _templatePostRtReference
+var _templatePostRtBy
 var _htmlFormatMsgLinkTemplateExternal;
 var _htmlFormatMsgLinkTemplateUser;
 var _htmlFormatMsgLinkTemplateHashtag;
 
 $(document).ready(function() {
     // we're setting it here for perfomance improvement purpose  // to not search and prepare it for for every post every time
+    _templatePostRtReference = $('#post-rt-reference-template').children().clone(true);
+    _templatePostRtBy = $('#post-retransmited-by-template').children().clone(true);
     _htmlFormatMsgLinkTemplateExternal = $('#external-page-link-template')
     if (_htmlFormatMsgLinkTemplateExternal.length) {
         _htmlFormatMsgLinkTemplateExternal = _htmlFormatMsgLinkTemplateExternal[0].cloneNode();
@@ -29,6 +33,18 @@ $(document).ready(function() {
 // format "userpost" to html element
 // kind = "original"/"ancestor"/"descendant"
 function postToElem(post, kind, promoted) {
+
+    function setPostCommon(elem, username, time) {
+        var postInfoName = elem.find('.post-info-name')
+            .text(username).attr('href', $.MAL.userUrl(username));
+
+        getFullname(username, postInfoName);
+        //elem.find('.post-info-tag').text("@" + username);  // FIXME
+        getAvatar(username, elem.find('.avatar'));
+
+        elem.find('.post-info-time').text(timeGmtToText(time)).attr('title', timeSincePost(time));
+    }
+
     /*
     "userpost" :
     {
@@ -49,23 +65,33 @@ function postToElem(post, kind, promoted) {
     }
     "sig_userpost" : signature by userpost.n
     */
-    var username, k, t, msg, rt, content_to_rt, content_to_sigrt, retweeted_by;
+
+    var username, k, time, msg, rt, content_to_rt, content_to_sigrt, retweeted_by;
 
     // Obtain data from userpost
     var userpost = post.userpost;
     if (userpost.rt) {
         rt = userpost.rt;
-        username = rt.n;
+        if (userpost.msg) {
-        k = rt.k;
+            username = userpost.n;
-        t = rt.time;
+            k = userpost.k;
-        msg = rt.msg;
+            time = userpost.time;
-        content_to_rt = $.toJSON(rt);
+            msg = userpost.msg;
-        content_to_sigrt = userpost.sig_rt;
+            content_to_rt = $.toJSON(userpost);
+            content_to_sigrt = post.sig_userpost;
+        } else {
+            username = rt.n;
+            k = rt.k;
+            time = rt.time;
+            msg = rt.msg;
+            content_to_rt = $.toJSON(rt);
+            content_to_sigrt = userpost.sig_rt;
+        }
         retweeted_by = userpost.n;
     } else {
         username = userpost.n;
         k = userpost.k;
-        t = userpost.time;
+        time = userpost.time;
         msg = userpost.msg;
         content_to_rt = $.toJSON(userpost);
         content_to_sigrt = post.sig_userpost;
@@ -75,7 +101,7 @@ function postToElem(post, kind, promoted) {
     var elem = $.MAL.getPostTemplate().clone(true);
     elem.removeAttr('id')
         .addClass(kind)
-        .attr('data-time', t)
+        .attr('data-time', time)
     ;
 
     if (post.isNew)
@@ -103,12 +129,7 @@ function postToElem(post, kind, promoted) {
         ;
     }
 
-    var postInfoName = elem.find('.post-info-name')
+    setPostCommon(elem, username, time);
-        .text(username).attr('href', $.MAL.userUrl(username));
-    getFullname(username, postInfoName);
-    //elem.find('.post-info-tag').text("@" + username);
-    getAvatar(username, elem.find('.avatar'));
-    elem.find('.post-info-time').text(timeGmtToText(t)).attr('title', timeSincePost(t));
 
     msg = htmlFormatMsg(msg);
     elem.find('.post-text').html(msg.html);
@@ -138,11 +159,19 @@ function postToElem(post, kind, promoted) {
     postData.attr('data-reply-to', replyTo);
 
     if (typeof retweeted_by !== 'undefined') {
-        elem.find('.post-context').show();
+        var postContext = elem.find('.post-context');
-        elem.find('.post-retransmited-by')
+        if (userpost.msg) {
-            .attr('href', $.MAL.userUrl(retweeted_by))
+            postContext.append(_templatePostRtReference.clone(true))
-            .text('@' + retweeted_by)
+                .find('.post-text').html(htmlFormatMsg(rt.msg).html);
-        ;
+            ;
+            setPostCommon(postContext, rt.n, rt.time)
+        } else {
+            postContext.append(_templatePostRtBy.clone(true))
+                .find('.post-retransmited-by')
+                    .attr('href', $.MAL.userUrl(retweeted_by)).text('@' + retweeted_by)
+            ;
+        }
+        postContext.show();
     }
 
     if (typeof promoted !== 'undefined' && promoted) {

theme_calm/css/style.css

@@ -1616,6 +1616,41 @@ textarea.splited-post {
     border-left: solid 3px #43464d;
     margin-left: 2px;
 }
+
+.post-rt-reference {
+    background-color: #FAFAFA;
+    border: 1px solid #ccc;
+}
+
+.post-rt-reference:hover {
+    background-color: #FFF;
+    cursor: pointer;
+}
+
+.post-rt-reference .post-photo {
+    width: 24px;
+    height: 24px;
+}
+
+.post-rt-reference .post-photo img {
+    width: 24px;
+    height: auto;
+}
+
+.post-rt-reference .post-info-name {
+    font-size: 10px;
+}
+
+.post-rt-reference .post-text {
+    font-size: 10px;
+    margin: 2px 10px 4px 10px;
+}
+
+.post-rt-reference .post-info-time {
+    font-size: 9px;
+    color: #000;
+}
+
 /***********************************
 ******** LOGIN AND NETWORK PAGES ***
 ***********************************/

theme_nin/css/style.css

@@ -1101,6 +1101,40 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
   margin-left: 1px;
 }
 
+.post-rt-reference {
+    background-color: #FAFAFA;
+    border: 1px solid #ccc;
+}
+
+.post-rt-reference:hover {
+    background-color: #FFF;
+    cursor: pointer;
+}
+
+.post-rt-reference .post-photo {
+    width: 24px;
+    height: 24px;
+}
+
+.post-rt-reference .post-photo img {
+    width: 24px;
+    height: auto;
+}
+
+.post-rt-reference .post-info-name {
+    font-size: 10px;
+}
+
+.post-rt-reference .post-text {
+    font-size: 10px;
+    margin: 2px 10px 4px 10px;
+}
+
+.post-rt-reference .post-info-time {
+    font-size: 9px;
+    color: #000;
+}
+
 /* MODAL */
 /* line 316, ../sass/_postboard.sass */
 .modal-content .postboard {

theme_nin/sass/_postboard.sass

@@ -311,6 +311,26 @@
     border-left: solid 3px $main-color-color
     margin-left: 1px
 
+.post-rt-reference
+    background-color: #FAFAFA
+    border: 1px solid #ccc
+    &:hover
+        background-color: #FFF
+        cursor: pointer
+    .post-photo
+        width: 24px
+        height: 24px
+        img
+            width: 24px
+            height: auto
+    .post-info-name
+        font-size: 10px
+    .post-text
+        font-size: 10px
+        margin: 2px 10px 4px 10px
+    .post-info-time
+        font-size: 9px
+        color: #000
 
 
 

tmobile.html

@@ -75,8 +75,45 @@
   .header {position:fixed;z-index:10;top:0;width:100%}
   .content {padding:15px 20px 20px 20px;}
   .footer {position:fixed;z-index:10;bottom:0;width:100%}
+
+.post-rt-reference {
+    background-color: #FAFAFA;
+    border: 1px solid #ccc;
+    padding: 4px;
 }
 
+.post-rt-reference:hover {
+    background-color: #FFF;
+    cursor: pointer;
+}
+
+.post-rt-reference .post-photo {
+    float: left;
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+}
+
+.post-rt-reference .post-photo img {
+    width: 24px;
+    height: auto;
+}
+
+.post-rt-reference .post-info-name {
+    font-size: 10px;
+}
+
+.post-rt-reference .post-text {
+    font-size: 10px;
+    margin: 2px 10px 4px 10px;
+}
+
+.post-rt-reference .post-info-time {
+    font-size: 9px;
+    font-weight: lighter;
+    color: #000 !important;
+    float: right;
+}
 </style>
 
 <div id="index" data-role="page">
@@ -710,11 +747,7 @@
                 <span style='font-weight:lighter;font-size:12px;' class="post-info-time ui-li-aside"></span>
             </h4>
             <p class="post-text no-ellipsis"></p>
-            <div class="post-context" style="display: none;">
+            <div class="post-context" style="display: none;"></div>
-                <i class="post-retransmited-icon"></i>
-                <span style="font-size:60%;">twisted again by</span>
-                <a style="font-size:60%;" class="post-retransmited-by open-profile-modal" href=""></a>
-            </div>
         </div>
     </li> <!-- post-template -->
 
@@ -733,11 +766,7 @@
                 <span style='font-weight:lighter;font-size:12px;' class="post-info-time ui-li-aside"></span>
             </h4>
             <p class="post-text no-ellipsis"></p>
-            <div class="post-context" style="display: none;">
+            <div class="post-context" style="display: none;"></div>
-                <i class="post-retransmited-icon"></i>
-                <span style="font-size:60%;">twisted again by</span>
-                <a style="font-size:60%;" class="post-retransmited-by open-profile-modal" href=""></a>
-            </div>
             <!-- elementos de interação com o post que são exibidos no hover -->
             <fieldset class="post-interactions ui-grid-a" data-role="fieldcontain">
                 <div class="ui-block-a">
@@ -761,6 +790,24 @@
         </div> <!-- post-data -->
     </li> <!-- post-template -->
 
+    <div id="post-rt-reference-template">
+        <div class="post-rt-reference">
+            <div class="post-photo"><img class="avatar" src="img/grayed_avatar_placeholder_24.png" alt="user-photo" /></div>
+            <div class="post-info">
+                <a href="#" class="post-info-name open-profile-modal"></a>
+                <span class="post-info-tag"></span>
+                <span class="post-info-sent"></span>
+                <a class="post-info-time"></a>
+            </div>
+            <p class="post-text"></p>
+        </div>
+    </div>
+
+    <div id="post-retransmited-by-template">
+        <i class="post-retransmited-icon"></i>
+        <span style="font-size:60%;">twisted again by</span><span> </span>
+        <a style="font-size:60%;" class="post-retransmited-by open-profile-modal" href=""></a>
+    </div>
 
     <!-- template for user links in message (open profile modal) -->
     <a id="msg-user-link-template" class="open-profile-modal"></a>