From 6537515dac21f33924e58b175d5b836149ec8f2c Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Wed, 12 Aug 2015 05:10:56 +0500 Subject: [PATCH] show post retwists with comment as posts with citation --- css/style.css | 35 +++++++++++++++++ following.html | 25 +++++++++--- home.html | 25 +++++++++--- js/twister_formatpost.js | 69 ++++++++++++++++++++++++---------- theme_calm/css/style.css | 35 +++++++++++++++++ theme_nin/css/style.css | 34 +++++++++++++++++ theme_nin/sass/_postboard.sass | 20 ++++++++++ tmobile.html | 67 ++++++++++++++++++++++++++++----- 8 files changed, 270 insertions(+), 40 deletions(-) diff --git a/css/style.css b/css/style.css index a020344..905fe34 100644 --- a/css/style.css +++ b/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 *** ***********************************/ diff --git a/following.html b/following.html index 1a5a81d..12f5462 100644 --- a/following.html +++ b/following.html @@ -222,11 +222,7 @@

- + Expand
@@ -261,6 +257,25 @@
+
+
+
user-photo
+
+ + + + +
+

+
+
+ +
+ + twisted again by + +
+ diff --git a/home.html b/home.html index 848137f..6f3ad15 100644 --- a/home.html +++ b/home.html @@ -314,11 +314,7 @@

- + Expand
@@ -353,6 +349,25 @@
+
+
+
user-photo
+
+ + + + +
+

+
+
+ +
+ + twisted again by + +
+ diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index 5699170..4f6c7d4 100644 --- a/js/twister_formatpost.js +++ b/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; - k = rt.k; - t = rt.time; - msg = rt.msg; - content_to_rt = $.toJSON(rt); - content_to_sigrt = userpost.sig_rt; + if (userpost.msg) { + username = userpost.n; + k = userpost.k; + time = userpost.time; + msg = userpost.msg; + 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') - .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)); + setPostCommon(elem, username, time); 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(); - elem.find('.post-retransmited-by') - .attr('href', $.MAL.userUrl(retweeted_by)) - .text('@' + retweeted_by) - ; + var postContext = elem.find('.post-context'); + if (userpost.msg) { + postContext.append(_templatePostRtReference.clone(true)) + .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) { diff --git a/theme_calm/css/style.css b/theme_calm/css/style.css index 7505ef0..90b2ca4 100644 --- a/theme_calm/css/style.css +++ b/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 *** ***********************************/ diff --git a/theme_nin/css/style.css b/theme_nin/css/style.css index 3bc5cdf..49643fd 100644 --- a/theme_nin/css/style.css +++ b/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 { diff --git a/theme_nin/sass/_postboard.sass b/theme_nin/sass/_postboard.sass index a027644..9f0f7a9 100755 --- a/theme_nin/sass/_postboard.sass +++ b/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 diff --git a/tmobile.html b/tmobile.html index 6a7699b..45f9e7f 100644 --- a/tmobile.html +++ b/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; +}
@@ -710,11 +747,7 @@

- +
@@ -733,11 +766,7 @@

- +
@@ -761,6 +790,24 @@
+
+
+
user-photo
+
+ + + + +
+

+
+
+ +
+ + twisted again by + +