twisterarmy/twister-html
1
0
Fork 0
mirror of https://github.com/twisterarmy/twister-html.git synced 2025-01-27 15:14:40 +00:00
Code Issues Projects Releases Wiki Activity

rewrite appending and styling of retwisters avatars of an expanded twist

Browse Source
This commit is contained in:
Simon Grim 2018-11-01 00:48:32 +05:00
parent c39985c61d
commit e4778b9342
11 changed files with 243 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
css/style.css
View File

@ -840,6 +840,12 @@ textarea.splited-post {
color: #E34F42; color: #E34F42;
} }
.avatar.tiny {
width: 24px;
height: 24px;
border-radius: 100%;
}
/*********************************** /***********************************
********************* WHO TO FOLLOW ********************* WHO TO FOLLOW
***********************************/ ***********************************/
@ -1343,41 +1349,43 @@ ol.toptrends-list {
text-align: center; text-align: center;
overflow-y: auto; overflow-y: auto;
} }
.post-stats
{ .post-stats {
margin: 0 10px 0 55px; height: 34px;
border-top: solid 1px rgba( 69, 71, 77, .1 ); margin: 0 12px 8px 55px;
border-bottom: solid 1px rgba( 69, 71, 77, .1 ); border-top: solid 1px rgba(69, 71, 77, .1);
border-bottom: solid 1px rgba(69, 71, 77, .1);
} }
.post-stats li
{ .post-stats > div {
display: inline-block; display: inline-block;
line-height: 16px;
vertical-align: middle;
} }
.post-stats li.stat-count
{ .post-stats .stat-count {
border-right: solid 1px rgba( 69, 71, 77, .1 ); font-size: 12px;
padding-right: 10px; color: rgba(0, 0, 0, .5);
padding-right: 4px;
border-right: solid 1px rgba(69, 71, 77, .1);
} }
.post-stats li.stat-count span
{ .post-stats .stat-count .stat-count-value {
display: block;
font-weight: bold; font-weight: bold;
color: rgba( 0, 0, 0, .5 );
font-size: 13px;
} }
.post-stats li.stat-count span:last-child
{ .post-stats .avatar-row {
font-weight: normal; padding: 4px;
} }
.post-stats a
{ .post-stats .avatar-row a {
display: inline-block;
position: relative; position: relative;
margin-right: 2px;
} }
.post-stats a img
{ .post-stats .avatar-row a:hover .user-name-tooltip {
width: 24px; display: inline-block;
height: 24px;
border-radius: 100%;
} }
.post .new-replies-available { .post .new-replies-available {
@ -1397,8 +1405,7 @@ ol.toptrends-list {
background-color: #FFF; background-color: #FFF;
} }
.user-name-tooltip .user-name-tooltip {
{
display: none; display: none;
position: absolute; position: absolute;
background: #e34f42; background: #e34f42;
@ -1406,25 +1413,22 @@ ol.toptrends-list {
white-space: nowrap; white-space: nowrap;
padding: 3px 5px; padding: 3px 5px;
color: #fff; color: #fff;
top: -42px; top: -28px;
left: 0px; left: 2px;
border-radius: 5px; border-radius: 5px;
} }
.user-name-tooltip:after
{ .user-name-tooltip:after {
content: ""; content: "";
position: absolute; position: absolute;
width: 0; width: 0;
left: 4px; left: 4px;
bottom: -5px; bottom: -4px;
border-top: solid 5px #e34f42; border-top: solid 5px #e34f42;
border-left: solid 5px transparent; border-left: solid 5px transparent;
border-right: solid 5px transparent; border-right: solid 5px transparent;
} }
.post-stats a:hover .user-name-tooltip
{
display: inline-block;
}
.post-replies .sub-replies { .post-replies .sub-replies {
border-left: solid 3px #E34F42; border-left: solid 3px #E34F42;
margin-left: 2px; margin-left: 2px;

23
home.html
View File

@ -369,15 +369,13 @@
<span class="post-favorite">Favorite</span> <span class="post-favorite">Favorite</span>
</div> </div>
<div class="expanded-content" style="display: none;"> <div class="expanded-content" style="display: none;">
<ul class="post-stats" style="display: none;"> <div class="post-stats">
<li class="stat-count"> <div class="stat-count">
<span class="stat-count-value"></span> <div class="stat-count-value"></div>
<span>Retransmits</span> <div>Retransmits</div>
</li> </div>
<li class="avatar-row"> <div class="avatar-row"></div>
<!-- use "avatar-row-template" here --> </div>
</li>
</ul>
<div class="preview-container"> <div class="preview-container">
</div> </div>
<div class="post-reply-content" style="display: block;"> <div class="post-reply-content" style="display: block;">
@ -428,11 +426,12 @@
<a class="link-shortened" rel="nofollow noreferrer" target="_blank"></a> <a class="link-shortened" rel="nofollow noreferrer" target="_blank"></a>
</div> </div>
<!-- template para ir dentro de avatar-row --> <div id="template-avatar-tiny">
<a id="avatar-row-template" class="open-profile-modal" href=""> <a class="open-profile-modal" href="">
<img class="size24" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/> <img class="avatar tiny" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
<span class="user-name-tooltip"></span> <span class="user-name-tooltip"></span>
</a> </a>
</div>
<li class="descendant module post"> <li class="descendant module post">
</li> </li>

3
js/interface_common.js
View File

@ -1702,7 +1702,7 @@ function postExpandFunction(e, postLi) {
// insert replies to this post after // insert replies to this post after
requestRepliesAfter(originalLi); requestRepliesAfter(originalLi);
// RTs faces and counter // RTs faces and counter
requestRTs(originalLi); requestRTs(originalPost);
} else { } else {
postLi.removeClass(openClass); postLi.removeClass(openClass);
@ -3049,6 +3049,7 @@ $(document).ready(function () {
.on('mouseup', {feeder: '.post-rt-reference'}, handleClickOpenConversation) .on('mouseup', {feeder: '.post-rt-reference'}, handleClickOpenConversation)
.on('click', muteEvent) // to prevent post expanding or collapsing .on('click', muteEvent) // to prevent post expanding or collapsing
; ;
twister.tmpl.avatarTiny = extractTemplate('#template-avatar-tiny');
twister.tmpl.postRtBy = extractTemplate('#template-post-rt-by'); twister.tmpl.postRtBy = extractTemplate('#template-post-rt-by');
twister.tmpl.profileShowMoreFollowers = extractTemplate('#template-profile-show-more-followers'); twister.tmpl.profileShowMoreFollowers = extractTemplate('#template-profile-show-more-followers');

2
js/interface_localization.js
View File

@ -5607,7 +5607,7 @@ var fixedLabels = [
".post-interactions span", ".post-interactions span",
".post-expand", ".post-expand",
".post-context span", ".post-context span",
".post-stats .stat-count span", ".post-stats .stat-count div",
".postboard span", ".postboard span",
// following page // following page

2
js/tmobile.js
View File

@ -182,7 +182,7 @@ var router=new $.mobile.Router(
// insert replies to this post after // insert replies to this post after
requestRepliesAfter(originalLi); requestRepliesAfter(originalLi);
// RTs faces and counter // RTs faces and counter
requestRTs(originalLi); requestRTs(originalLi.find('.post-data'));
}); });
}, },
newmsg: function(type,match,ui) { newmsg: function(type,match,ui) {

53
js/twister_actions.js
View File

@ -120,37 +120,38 @@ function requestRepliesAfterAll(postLi)
} }
} }
function requestRTs(postLi) function requestRTs(postDataElem) {
{ var post_n = postDataElem.attr('data-screen-name');
var originalPost = postLi.find(".post-data"); var post_k = postDataElem.attr('data-id');
var original_n = originalPost.attr('data-screen-name'); if (!post_n || !post_k)
var original_k = originalPost.attr('data-id'); return;
if( original_n != undefined && original_k != undefined ) { dhtget(post_n, 'rts' + post_k, 'm',
dhtget( original_n, "rts" + original_k, "m", function (req, ret) {
function(originalPost, postsFromJson) { if (!ret.length)
return;
if( postsFromJson.length ) { req.find('.stat-count-value').text(ret.length);
var statCountValue = originalPost.find(".stat-count-value");
statCountValue.text( postsFromJson.length );
var avatarRow = originalPost.find(".avatar-row"); var avatarRowElem = req.find('.avatar-row').empty();
avatarRow.empty(); for (var i = 0; i < ret.length && i < 12; i++)
for( var i = 0; i < postsFromJson.length && i < 8; i++) { appendPeerAvatarToRTsRowElem(ret[i].userpost.n, avatarRowElem);
var n = postsFromJson[i]["userpost"]["n"];
var elemUser = $("#avatar-row-template").clone(true);
elemUser.removeAttr('id');
elemUser.attr('href',$.MAL.userUrl(n));
getFullname(n,elemUser.find(".user-name-tooltip"));
getAvatar(n,elemUser.find(".size24"));
avatarRow.append( elemUser );
}
originalPost.find(".post-stats").slideDown("fast"); if (avatarRowElem.children().length)
} req.slideDown('fast');
}, originalPost); },
} postDataElem.find('.post-stats').hide()
);
}
function appendPeerAvatarToRTsRowElem(peerAlias, rowElem) {
var elem = twister.tmpl.avatarTiny.clone(true)
.attr('href', $.MAL.userUrl(peerAlias))
.appendTo(rowElem)
;
getFullname(peerAlias, elem.find('.user-name-tooltip'));
getAvatar(peerAlias, elem.find('.avatar.tiny'));
} }
function appendPostToElem(post, elem) { function appendPostToElem(post, elem) {

78
theme_calm/css/style.css
View File

@ -1021,6 +1021,12 @@ textarea.splited-post {
opacity: .8; opacity: .8;
} }
.avatar.tiny {
width: 24px;
height: 24px;
border-radius: 100%;
}
/*********************************** /***********************************
********************* WHO TO FOLLOW ********************* WHO TO FOLLOW
***********************************/ ***********************************/
@ -1718,41 +1724,43 @@ textarea.splited-post {
display: none; display: none;
padding: 5px 5px 0 5px; padding: 5px 5px 0 5px;
} }
.post-stats
{ .post-stats {
margin: 0 10px 0 55px; height: 34px;
border-top: solid 1px rgba( 69, 71, 77, .1 ); margin: 0 12px 8px 55px;
border-bottom: solid 1px rgba( 69, 71, 77, .1 ); border-top: solid 1px rgba(69, 71, 77, .1);
border-bottom: solid 1px rgba(69, 71, 77, .1);
} }
.post-stats li
{ .post-stats > div {
display: inline-block; display: inline-block;
line-height: 16px;
vertical-align: middle;
} }
.post-stats li.stat-count
{ .post-stats .stat-count {
border-right: solid 1px rgba( 69, 71, 77, .1 ); font-size: 12px;
padding-right: 10px; color: rgba(0, 0, 0, .5);
padding-right: 4px;
border-right: solid 1px rgba(69, 71, 77, .1);
} }
.post-stats li.stat-count span
{ .post-stats .stat-count .stat-count-value {
display: block;
font-weight: bold; font-weight: bold;
color: rgba( 0, 0, 0, .5 );
font-size: 13px;
} }
.post-stats li.stat-count span:last-child
{ .post-stats .avatar-row {
font-weight: normal; padding: 4px;
} }
.post-stats a
{ .post-stats .avatar-row a {
display: inline-block;
position: relative; position: relative;
margin-right: 2px;
} }
.post-stats a img
{ .post-stats .avatar-row a:hover .user-name-tooltip {
width: 24px; display: inline-block;
height: 24px;
border-radius: 100%;
} }
.post .new-replies-available { .post .new-replies-available {
@ -1772,8 +1780,7 @@ textarea.splited-post {
background-color: #FFF; background-color: #FFF;
} }
.user-name-tooltip .user-name-tooltip {
{
display: none; display: none;
position: absolute; position: absolute;
background: #43464d; background: #43464d;
@ -1781,25 +1788,22 @@ textarea.splited-post {
white-space: nowrap; white-space: nowrap;
padding: 3px 5px; padding: 3px 5px;
color: #fff; color: #fff;
top: -42px; top: -28px;
left: 0px; left: 2px;
border-radius: 5px; border-radius: 5px;
} }
.user-name-tooltip:after
{ .user-name-tooltip:after {
content: ""; content: "";
position: absolute; position: absolute;
width: 0; width: 0;
left: 4px; left: 4px;
bottom: -5px; bottom: -4px;
border-top: solid 5px #43464d; border-top: solid 5px #43464d;
border-left: solid 5px transparent; border-left: solid 5px transparent;
border-right: solid 5px transparent; border-right: solid 5px transparent;
} }
.post-stats a:hover .user-name-tooltip
{
display: inline-block;
}
.post-replies .sub-replies { .post-replies .sub-replies {
border-left: solid 3px #43464d; border-left: solid 3px #43464d;
margin-left: 2px; margin-left: 2px;

68
theme_nin/css/style.css
View File

@ -1062,39 +1062,40 @@ samp {
background: black; background: black;
} }
/* line 259, ../sass/_postboard.sass */
.post-stats { .post-stats {
float: left; height: 34px;
margin: 0 12px 8px 55px;
} }
/* line 261, ../sass/_postboard.sass */
.post-stats li { .post-stats > div {
display: inline-block; display: inline-block;
line-height: 16px;
vertical-align: middle;
} }
/* line 263, ../sass/_postboard.sass */
.post-stats li.stat-count { .post-stats .stat-count {
font-weight: 700; font-size: 12px;
font-size: 11px; color: #b3b5b7;
float: left; padding-right: 4px;
line-height: 20px; border-right: solid 1px #E2E1DE;
color: llighten(#66686B, 30%);
} }
/* line 269, ../sass/_postboard.sass */
.post-stats li.stat-count span:last-child { .post-stats .stat-count .stat-count-value {
padding-right: 5px; font-weight: bold;
} }
/* line 271, ../sass/_postboard.sass */
.post-stats a { .post-stats .avatar-row {
padding: 4px;
}
.post-stats .avatar-row a {
display: inline-block;
position: relative; position: relative;
text-decoration: none; margin-right: 2px;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 1px 0 0;
} }
/* line 278, ../sass/_postboard.sass */
.post-stats a img { .post-stats .avatar-row a:hover .user-name-tooltip {
width: 20px; display: inline-block;
height: 20px;
} }
.post .new-replies-available { .post .new-replies-available {
@ -1120,8 +1121,8 @@ samp {
white-space: nowrap; white-space: nowrap;
padding: 3px 5px; padding: 3px 5px;
color: #fff; color: #fff;
top: -42px; top: -28px;
left: 0px; left: 2px;
} }
/* line 293, ../sass/_postboard.sass */ /* line 293, ../sass/_postboard.sass */
.user-name-tooltip:after { .user-name-tooltip:after {
@ -1129,17 +1130,12 @@ samp {
position: absolute; position: absolute;
width: 0; width: 0;
left: 4px; left: 4px;
bottom: -5px; bottom: -4px;
border-top: solid 5px #6d7073; border-top: solid 5px #6d7073;
border-left: solid 5px transparent; border-left: solid 5px transparent;
border-right: solid 5px transparent; border-right: solid 5px transparent;
} }
/* line 303, ../sass/_postboard.sass */
.post-stats a:hover .user-name-tooltip {
display: inline-block;
}
/* line 306, ../sass/_postboard.sass */ /* line 306, ../sass/_postboard.sass */
.post-replies .sub-replies { .post-replies .sub-replies {
border-left: solid 3px #B4C669; border-left: solid 3px #B4C669;
@ -2114,6 +2110,12 @@ textarea.splited-post {
padding: 4px; padding: 4px;
} }
.avatar.tiny {
width: 24px;
height: 24px;
border-radius: 100%;
}
/******** WHO TO FOLLOW ********/ /******** WHO TO FOLLOW ********/
/* line 411, ../sass/style.sass */ /* line 411, ../sass/style.sass */

46
theme_nin/sass/_postboard.sass
View File

@ -276,27 +276,28 @@
background: black background: black
.post-stats .post-stats
float: left height: 34px
li margin: 0 12px 8px 55px
> div
display: inline-block display: inline-block
&.stat-count line-height: 16px
font-weight: 700 vertical-align: middle
font-size: 11px .stat-count
float: left font-size: 12px
line-height: 20px color: lighten($dark-grey, 30%)
color: llighten($dark-grey,30%) padding-right: 4px
span:last-child border-right: solid 1px $light-grey
padding-right: 5px .stat-count-value
font-weight: bold
.avatar-row
padding: 4px
a a
position: relative
text-decoration: none
display: inline-block display: inline-block
width: 20px position: relative
height: 20px margin-right: 2px
margin: 0 1px 0 0 &:hover
img .user-name-tooltip
width: 20px display: inline-block
height: 20px
.post .new-replies-available .post .new-replies-available
text-align: center text-align: center
@ -316,21 +317,18 @@
white-space: nowrap white-space: nowrap
padding: 3px 5px padding: 3px 5px
color: #fff color: #fff
top: -42px top: -28px
left: 0px left: 2px
&:after &:after
content: "" content: ""
position: absolute position: absolute
width: 0 width: 0
left: 4px left: 4px
bottom: -5px bottom: -4px
border-top: solid 5px lighten($main-color-dark,3%) border-top: solid 5px lighten($main-color-dark,3%)
border-left: solid 5px transparent border-left: solid 5px transparent
border-right: solid 5px transparent border-right: solid 5px transparent
.post-stats a:hover .user-name-tooltip
display: inline-block
.post-replies .sub-replies .post-replies .sub-replies
border-left: solid 3px $main-color-color border-left: solid 3px $main-color-color
margin-left: 1px margin-left: 1px

4
theme_nin/sass/style.sass
View File

@ -473,6 +473,10 @@ textarea.splited-post
.avatar.tiny
width: 24px
height: 24px
border-radius: 100%
/******** WHO TO FOLLOW ********/ /******** WHO TO FOLLOW ********/

67
tmobile.html
View File

@ -59,7 +59,11 @@
border-radius: 10px; border-radius: 10px;
width: 50px; height: 50px; width: 50px; height: 50px;
} }
img.size24 {width: 24px; height: 24px;} .avatar.tiny {
width: 24px;
height: 24px;
border-radius: 100%;
}
#profile-edit img.avatar {display:block; margin-left: auto; margin-right: auto; width: 64px; height: 64px;} #profile-edit img.avatar {display:block; margin-left: auto; margin-right: auto; width: 64px; height: 64px;}
.ui-listview .post a{ color: #0030ff; } .ui-listview .post a{ color: #0030ff; }
@ -92,6 +96,41 @@
color: #555 !important; color: #555 !important;
} }
.post-stats {
height: 34px;
}
.post-stats > div {
display: inline-block;
line-height: 16px;
vertical-align: middle;
}
.post-stats .stat-count {
font-size: 80%;
color: rgba(0, 0, 0, .5);
padding-right: 4px;
border-right: solid 1px rgba(69, 71, 77, .1);
}
.post-stats .stat-count .stat-count-value {
font-weight: bold;
}
.post-stats .avatar-row {
padding: 4px;
}
.post-stats .avatar-row a {
display: inline-block;
position: relative;
margin-right: 2px;
}
.post-stats .avatar-row .user-name-tooltip {
display: none;
}
.post-rt-by { .post-rt-by {
font-size: 60%; font-size: 60%;
} }
@ -747,16 +786,14 @@
</div> </div>
</fieldset> </fieldset>
<div class="expanded-content"> <div class="expanded-content">
<span class="post-stats" style="display: none;"> <div class="post-stats">
<span class="stat-count" style="font-size:80%;"> <div class="stat-count">
<span class="stat-count-value"></span> <div class="stat-count-value"></div>
<span>Retransmits</span> <div>Retransmits</div>
</span> </div>
<span class="avatar-row"> <div class="avatar-row"></div>
<!-- use "avatar-row-template" here --> </div>
</span> </div>
</span>
</div> <!-- expanded-content -->
</div> <!-- post-data --> </div> <!-- post-data -->
</li> <!-- post-template --> </li> <!-- post-template -->
@ -791,10 +828,12 @@
<a class="link-shortened" rel="nofollow noreferrer" target="_blank"></a> <a class="link-shortened" rel="nofollow noreferrer" target="_blank"></a>
</div> </div>
<!-- template para ir dentro de avatar-row --> <div id="template-avatar-tiny">
<a id="avatar-row-template" class="open-profile-modal" href=""> <a class="open-profile-modal" href="">
<img class="avatar size24" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/> <img class="avatar tiny" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
<span class="user-name-tooltip"></span>
</a> </a>
</div>
<div id="template-direct-messages-list-item"> <div id="template-direct-messages-list-item">
<li class="module post message" data-icon="arrow-r"> <li class="module post message" data-icon="arrow-r">