Browse Source

show post retwists with comment as posts with citation

master
Simon Grim 9 years ago
parent
commit
6537515dac
  1. 35
      css/style.css
  2. 25
      following.html
  3. 25
      home.html
  4. 57
      js/twister_formatpost.js
  5. 35
      theme_calm/css/style.css
  6. 34
      theme_nin/css/style.css
  7. 20
      theme_nin/sass/_postboard.sass
  8. 67
      tmobile.html

35
css/style.css

@ -1253,6 +1253,41 @@ ol.toptrends-list {
border-left: solid 3px #E34F42; border-left: solid 3px #E34F42;
margin-left: 2px; 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 *** ******** LOGIN AND NETWORK PAGES ***
***********************************/ ***********************************/

25
following.html

@ -222,11 +222,7 @@
<a class="post-info-time"></a> <a class="post-info-time"></a>
</div> </div>
<p class="post-text"></p> <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> <span class="post-expand">Expand</span>
<!-- elementos de interação com o post que são exibidos no hover --> <!-- elementos de interação com o post que são exibidos no hover -->
<div class="post-interactions"> <div class="post-interactions">
@ -261,6 +257,25 @@
</div> <!-- post-data --> </div> <!-- post-data -->
</li> <!-- post-template --> </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) --> <!-- template for user links in message (open profile modal) -->
<a id="msg-user-link-template" class="open-profile-modal"></a> <a id="msg-user-link-template" class="open-profile-modal"></a>
<!-- template for user links in message (open profile modal) --> <!-- template for user links in message (open profile modal) -->

25
home.html

@ -314,11 +314,7 @@
<a class="post-info-time"></a> <a class="post-info-time"></a>
</div> </div>
<p class="post-text"></p> <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> <span class="post-expand">Expand</span>
<!-- elementos de interação com o post que são exibidos no hover --> <!-- elementos de interação com o post que são exibidos no hover -->
<div class="post-interactions"> <div class="post-interactions">
@ -353,6 +349,25 @@
</div> <!-- post-data --> </div> <!-- post-data -->
</li> <!-- post-template --> </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) --> <!-- template for user links in message (open profile modal) -->
<a id="msg-user-link-template" class="open-profile-modal"></a> <a id="msg-user-link-template" class="open-profile-modal"></a>
<!-- template for user links in message (open profile modal) --> <!-- template for user links in message (open profile modal) -->

57
js/twister_formatpost.js

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

35
theme_calm/css/style.css

@ -1616,6 +1616,41 @@ textarea.splited-post {
border-left: solid 3px #43464d; border-left: solid 3px #43464d;
margin-left: 2px; 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 *** ******** LOGIN AND NETWORK PAGES ***
***********************************/ ***********************************/

34
theme_nin/css/style.css

@ -1101,6 +1101,40 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
margin-left: 1px; 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 */ /* MODAL */
/* line 316, ../sass/_postboard.sass */ /* line 316, ../sass/_postboard.sass */
.modal-content .postboard { .modal-content .postboard {

20
theme_nin/sass/_postboard.sass

@ -311,6 +311,26 @@
border-left: solid 3px $main-color-color border-left: solid 3px $main-color-color
margin-left: 1px 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

67
tmobile.html

@ -75,8 +75,45 @@
.header {position:fixed;z-index:10;top:0;width:100%} .header {position:fixed;z-index:10;top:0;width:100%}
.content {padding:15px 20px 20px 20px;} .content {padding:15px 20px 20px 20px;}
.footer {position:fixed;z-index:10;bottom:0;width:100%} .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> </style>
<div id="index" data-role="page"> <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> <span style='font-weight:lighter;font-size:12px;' class="post-info-time ui-li-aside"></span>
</h4> </h4>
<p class="post-text no-ellipsis"></p> <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> </div>
</li> <!-- post-template --> </li> <!-- post-template -->
@ -733,11 +766,7 @@
<span style='font-weight:lighter;font-size:12px;' class="post-info-time ui-li-aside"></span> <span style='font-weight:lighter;font-size:12px;' class="post-info-time ui-li-aside"></span>
</h4> </h4>
<p class="post-text no-ellipsis"></p> <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 --> <!-- elementos de interação com o post que são exibidos no hover -->
<fieldset class="post-interactions ui-grid-a" data-role="fieldcontain"> <fieldset class="post-interactions ui-grid-a" data-role="fieldcontain">
<div class="ui-block-a"> <div class="ui-block-a">
@ -761,6 +790,24 @@
</div> <!-- post-data --> </div> <!-- post-data -->
</li> <!-- post-template --> </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) --> <!-- template for user links in message (open profile modal) -->
<a id="msg-user-link-template" class="open-profile-modal"></a> <a id="msg-user-link-template" class="open-profile-modal"></a>

Loading…
Cancel
Save