twisterarmy
/
twister-html
mirror of https://github.com/twisterarmy/twister-html.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

rewrite appending and styling of retwisters avatars of an expanded twist

readme-update
Simon Grim 6 years ago
parent
c39985c61d
commit
e4778b9342
11 changed files with 246 additions and 194 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 78
      css/style.css
  2. 27
      home.html
  3. 3
      js/interface_common.js
  4. 2
      js/interface_localization.js
  5. 2
      js/tmobile.js
  6. 59
      js/twister_actions.js
  7. 78
      theme_calm/css/style.css
  8. 68
      theme_nin/css/style.css
  9. 50
      theme_nin/sass/_postboard.sass
  10. 4
      theme_nin/sass/style.sass
  11. 69
      tmobile.html

78
css/style.css
Unescape View File

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

27
home.html
Unescape View File

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

3
js/interface_common.js
Unescape View File

@ -1702,7 +1702,7 @@ function postExpandFunction(e, postLi) { @@ -1702,7 +1702,7 @@ function postExpandFunction(e, postLi) {
// insert replies to this post after
requestRepliesAfter(originalLi);
// RTs faces and counter
requestRTs(originalLi);
requestRTs(originalPost);
} else {
postLi.removeClass(openClass);
@ -3049,6 +3049,7 @@ $(document).ready(function () { @@ -3049,6 +3049,7 @@ $(document).ready(function () {
.on('mouseup', {feeder: '.post-rt-reference'}, handleClickOpenConversation)
.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.profileShowMoreFollowers = extractTemplate('#template-profile-show-more-followers');

2
js/interface_localization.js
Unescape View File

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

2
js/tmobile.js
Unescape View File

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

59
js/twister_actions.js
Unescape View File

@ -120,37 +120,38 @@ function requestRepliesAfterAll(postLi) @@ -120,37 +120,38 @@ function requestRepliesAfterAll(postLi)
}
}
function requestRTs(postLi)
{
var originalPost = postLi.find(".post-data");
function requestRTs(postDataElem) {
var post_n = postDataElem.attr('data-screen-name');
var post_k = postDataElem.attr('data-id');
var original_n = originalPost.attr('data-screen-name');
var original_k = originalPost.attr('data-id');
if (!post_n || !post_k)
return;
if( original_n != undefined && original_k != undefined ) {
dhtget( original_n, "rts" + original_k, "m",
function(originalPost, postsFromJson) {
if( postsFromJson.length ) {
var statCountValue = originalPost.find(".stat-count-value");
statCountValue.text( postsFromJson.length );
var avatarRow = originalPost.find(".avatar-row");
avatarRow.empty();
for( var i = 0; i < postsFromJson.length && i < 8; i++) {
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");
}
}, originalPost);
}
dhtget(post_n, 'rts' + post_k, 'm',
function (req, ret) {
if (!ret.length)
return;
req.find('.stat-count-value').text(ret.length);
var avatarRowElem = req.find('.avatar-row').empty();
for (var i = 0; i < ret.length && i < 12; i++)
appendPeerAvatarToRTsRowElem(ret[i].userpost.n, avatarRowElem);
if (avatarRowElem.children().length)
req.slideDown('fast');
},
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) {

78
theme_calm/css/style.css
Unescape View File

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

68
theme_nin/css/style.css
Unescape View File

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

50
theme_nin/sass/_postboard.sass
Unescape View File

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

4
theme_nin/sass/style.sass
Unescape View File

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

69
tmobile.html
Unescape View File

@ -59,7 +59,11 @@ @@ -59,7 +59,11 @@
border-radius: 10px;
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;}
.ui-listview .post a{ color: #0030ff; }
@ -92,6 +96,41 @@ @@ -92,6 +96,41 @@
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 {
font-size: 60%;
}
@ -747,16 +786,14 @@ @@ -747,16 +786,14 @@
</div>
</fieldset>
<div class="expanded-content">
<span class="post-stats" style="display: none;">
<span class="stat-count" style="font-size:80%;">
<span class="stat-count-value"></span>
<span>Retransmits</span>
</span>
<span class="avatar-row">
<!-- use "avatar-row-template" here -->
</span>
</span>
</div> <!-- expanded-content -->
<div class="post-stats">
<div class="stat-count">
<div class="stat-count-value"></div>
<div>Retransmits</div>
</div>
<div class="avatar-row"></div>
</div>
</div>
</div> <!-- post-data -->
</li> <!-- post-template -->
@ -791,10 +828,12 @@ @@ -791,10 +828,12 @@
<a class="link-shortened" rel="nofollow noreferrer" target="_blank"></a>
</div>
<!-- template para ir dentro de avatar-row -->
<a id="avatar-row-template" class="open-profile-modal" href="">
<img class="avatar size24" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
</a>
<div id="template-avatar-tiny">
<a class="open-profile-modal" href="">
<img class="avatar tiny" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
<span class="user-name-tooltip"></span>
</a>
</div>
<div id="template-direct-messages-list-item">
<li class="module post message" data-icon="arrow-r">

Write Preview
Loading…
Cancel
Save