mirror of
https://github.com/twisterarmy/twister-calm.git
synced 2025-01-11 15:37:54 +00:00
0c36f579ce
added autoupdate timeline after post. Fixed action menu bug on followings page. Fixed Russian localization. Added icon to options page.
387 lines
15 KiB
HTML
387 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>Following</title>
|
|
<link rel="stylesheet" href="css/style.css" type="text/css"/>
|
|
<link rel="stylesheet" href="css/profile.css" type="text/css"/>
|
|
<script src="js/jquery.min.js"></script>
|
|
<script src="js/jQueryPlugins.js"></script>
|
|
<script src="js/jquery.json-2.4.js"></script>
|
|
<script src="js/jquery.jsonrpcclient.js"></script>
|
|
<script src="js/jquery.storageapi.js"></script>
|
|
<script src="js/mobile_abstract.js"></script>
|
|
<script src="js/twister_io.js"></script>
|
|
<script src="js/polyglot.min.js"></script>
|
|
<script src="js/interface_localization.js"></script>
|
|
<script src="js/twister_network.js"></script>
|
|
<script src="js/twister_user.js"></script>
|
|
<script src="js/twister_formatpost.js"></script>
|
|
<script src="js/twister_newmsgs.js"></script>
|
|
<script src="js/twister_following.js"></script>
|
|
<script src="js/twister_directmsg.js"></script>
|
|
<script src="js/twister_actions.js"></script>
|
|
<script src="js/interface_common.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function()
|
|
{
|
|
initInterfaceFollowing();
|
|
});
|
|
</script>
|
|
|
|
<link rel="icon" type="image/png" href="img/twister_mini.png" />
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- MENU SUPERIOR INIT -->
|
|
<nav class="userMenu">
|
|
<ul>
|
|
<li class="userMenu-home"><a href="home.html"></a></li>
|
|
<li class="userMenu-following current"><a href="following.html">Following</a></li>
|
|
<li class="userMenu-config current">
|
|
<a class="userMenu-config-dropdown" href="#">
|
|
<div class="config-menu dialog-modal">
|
|
<a class="dropdown-menu-item" href="options.html">Options</a>
|
|
<a class="dropdown-menu-item" href="network.html">Network config</a>
|
|
<a class="dropdown-menu-item" href="profile-edit.html">Setup account</a>
|
|
<a class="dropdown-menu-item" href="following.html">Following users</a>
|
|
<a class="dropdown-menu-item" href="login.html">Change user</a>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- BUSCA -->
|
|
</ul>
|
|
</nav>
|
|
<!-- MENU SUPERIOR END -->
|
|
|
|
|
|
<div class="wrapper">
|
|
|
|
<!-- LADO ESQUERDO DE MÓDULOS INIT -->
|
|
<div class="following">
|
|
<!-- <h2> Following </h2> -->
|
|
|
|
<div class="postboard-loading" style="display: none;">
|
|
<div></div>
|
|
</div>
|
|
|
|
<ol class="following-list">
|
|
<li id="following-user-template" style="display: none;">
|
|
<div class="mini-profile-info" data-screen-name="">
|
|
<a href="#" class="open-profile-modal">
|
|
<img class="mini-profile-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
|
|
<span class="mini-profile-name">Fulano da Silva</span>
|
|
<span class="mini-screen-name">@
|
|
<b class="following-screen-name"></b>
|
|
</span>
|
|
</a>
|
|
<div>
|
|
<div class="mini-profile-actions">
|
|
<span>Actions ▼</span>
|
|
<ul>
|
|
<li class="direct-messages-with-user">Sent Direct Message</li>
|
|
<li>Sent Post to @
|
|
<b class="following-screen-name"></b>
|
|
</li>
|
|
<li class="mentions-from-user">Display mentions to @
|
|
<b class="following-screen-name"></b>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button class="unfollow">Unfollow</button>
|
|
<button class="public-following">Public</button>
|
|
</div>
|
|
<div>
|
|
<span class="swarm-status" style="display: none;"></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
|
|
<div class="not-following-any" style="display:none;">
|
|
<div> Not following any users! </div>
|
|
<div> Search some users in the right-upper search box and follow them. </div>
|
|
</div>
|
|
</div>
|
|
<!-- LADO ESQUERDO DE MÓDULOS END -->
|
|
|
|
</div>
|
|
|
|
<!-- TEMPLATES INIT -->
|
|
<div id="templates" style="display:none;">
|
|
|
|
|
|
<!-- TEMPLATE DE WHO-TO-FOLLOW SUGGESTION -->
|
|
<li id="follow-suggestion-template" class="twister-user">
|
|
<div class="">
|
|
<a href="#" class="twister-user-name open-profile-modal">
|
|
<img class="twister-user-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
|
|
</a>
|
|
</div>
|
|
<div class="twister-user-info" data-screen-name="">
|
|
<a href="#" class="twister-user-name open-profile-modal">
|
|
<span class="twister-user-tag"></span>
|
|
</a>
|
|
<div class="followers">
|
|
<span class="label">Followed by</span>
|
|
<span class="followed-by"></span>
|
|
</div>
|
|
<a class="twister-user-remove">×</a>
|
|
<button class="follow">Follow</button>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- TEMPLATE DA OL INVÓLUCRO DAS LIST ELEMENTS DO POST EXPANDIDO INIT -->
|
|
<ol class="expanded-post">
|
|
</ol>
|
|
<!-- TEMPLATE DA OL INVÓLUCRO DAS LIST ELEMENTS DO POST EXPANDIDO END -->
|
|
|
|
<!-- TEMPLATE DOS 3 TIPOS DE LI DO POST EXPANDIDO INIT -->
|
|
<li class="ancestor module post">
|
|
</li>
|
|
|
|
<li id="post-template" class="module post" data-time="">
|
|
<div class="post-data" data-userpost="" data-content_to_rt="" data-content_to_sigrt=""
|
|
data-screen-name="" data-id="" data-text="" data-text-mentions="">
|
|
<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>
|
|
<a class="post-info-time"></a>
|
|
</div>
|
|
<p class="post-text"></p>
|
|
<div class="post-context" style="display: none;">
|
|
<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">
|
|
<span class="post-reply">Reply</span>
|
|
<span class="post-propagate">Retransmit</span>
|
|
<!--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-reply-content" style="display: block;">
|
|
<form class="post-area-new">
|
|
<textarea placeholder="Reply..."></textarea>
|
|
<div class="post-area-extras">
|
|
<span class="post-area-remaining">140</span>
|
|
<button class="post-submit disabled" disabled="true">post</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div> <!-- expanded-content -->
|
|
</div> <!-- post-data -->
|
|
</li> <!-- post-template -->
|
|
|
|
<!-- 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) -->
|
|
<a id="external-page-link-template" rel="nofollow" target="_blank"></a>
|
|
<!-- template for user links in message (open profile modal) -->
|
|
<a id="hashtag-link-template" class="open-hashtag-modal"></a>
|
|
|
|
|
|
|
|
<!-- 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>
|
|
|
|
<li class="descendant module post">
|
|
</li>
|
|
<!-- TEMPLATE INVÓLUCRO DO POST EXPANDIDO END -->
|
|
|
|
<!-- TEMPLATE DO MODAL GENÉRICO INIT -->
|
|
<div class="modal-blackout">
|
|
<div class="modal-wrapper">
|
|
<div class="modal-header">
|
|
<h3></h3>
|
|
<span id="closeModal" class="modal-close cancel">×</span>
|
|
</div>
|
|
<div class="modal-content"></div>
|
|
<div class="modal-buttons">
|
|
<button class="modal-cancel cancel">Cancel</button>
|
|
<button class="modal-propagate">Retransmit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- TEMPLATE DO MODAL GENÉRICO END -->
|
|
|
|
<!-- MODAL DE RETWEET INIT -->
|
|
<!-- MODAL DE RETWEET END -->
|
|
|
|
<!-- MODAL DE REPLY INIT -->
|
|
<div id="reply-modal-template">
|
|
<div class="post-area">
|
|
<form class="post-area-new open">
|
|
<textarea placeholder="New Post..."></textarea>
|
|
<div class="post-area-extras">
|
|
<span class="post-area-remaining">140</span>
|
|
<button class="post-submit disabled" disabled="true">post</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- use "module post" here -->
|
|
</div>
|
|
<!-- MODAL DE REPLY END -->
|
|
|
|
<!-- MODAL DE DIRECT MESSAGES INIT -->
|
|
<!-- Este modal possui dois templates, o primeiro da lista de pessoas que enviaram mensagens e o segundo
|
|
com a thread de mensagens individual -->
|
|
<div class="direct-messages-template">
|
|
<ol class="direct-messages-list">
|
|
<!-- use "dm-snippet-template here -->
|
|
</ol>
|
|
</div>
|
|
|
|
<li id="dm-snippet-template" class="module post message">
|
|
<div class="post-photo"><img 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>
|
|
<a href="#" class="post-info-time" title="">10min</a>
|
|
</div>
|
|
<!-- o texto do post (restrição de caracteres?) -->
|
|
<p class="post-text"></p>
|
|
</li>
|
|
|
|
|
|
<div class="messages-thread-template">
|
|
<ol class="direct-messages-thread">
|
|
<!-- use "dm-chat-template" here -->
|
|
</ol>
|
|
</div>
|
|
|
|
<!-- cada li é uma mensagem -->
|
|
<li id="dm-chat-template" class="module post message">
|
|
<div class="post-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
|
|
<a href="#" class="post-info-time" title="08/10/13 às 18:00">10min</a>
|
|
<p class="post-text"></p>
|
|
</li>
|
|
|
|
<div class="dm-form-template">
|
|
<form class="post-area-new open">
|
|
<textarea placeholder="New direct message..."></textarea>
|
|
<div class="post-area-extras">
|
|
<span class="post-area-remaining">140</span>
|
|
<button class="dm-submit disabled" disabled="true">send</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- MODAL DE DIRECT MESSAGES INIT -->
|
|
|
|
|
|
<!-- MODAL DE PROFILE -->
|
|
<div id="profile-modal-template">
|
|
<!-- ÁREA DE PROFILE PHOTO INIT -->
|
|
<div class="profile-card" data-screen-name="">
|
|
<!-- Coloquei a imagem de fundo do card do usuário como background da div
|
|
abaixo inline na tag para poder ser alterada dinamicamente
|
|
style="background: url(img/imgBack.png) no-repeat center center;"-->
|
|
<div class="profile-card-main">
|
|
<img class="profile-card-photo" src="img/grayed_avatar_placeholder_24.png"/>
|
|
<h1 class="profile-name"></h1>
|
|
<h2 class="profile-screen-name">@<b></b></h2>
|
|
<div>
|
|
<span class="profile-location"></span>
|
|
<a class="profile-url" rel="nofollow" target="_blank"></a>
|
|
</div>
|
|
<div class="profile-bio">
|
|
</div>
|
|
</div>
|
|
<ul class="module profile-data">
|
|
<li><a href="#"><span class="posts-count"> </span><span class="label">Posts</span></a></li>
|
|
<li><a href="#" class="open-following-modal"><span class="following-count"> </span><span class="label">Following</span></a></li>
|
|
<li><a href="#"><span class="followers-count"> </span><span class="label">Followers</span></a></li>
|
|
</ul>
|
|
<button class="follow" href="#">Follow</button>
|
|
<button class="direct-messages-with-user" href="#">Direct Messages</button>
|
|
|
|
</div>
|
|
<!-- ÁREA DE POSTS END -->
|
|
|
|
<!-- ÁREA DE POSTS INIT -->
|
|
<div class="postboard">
|
|
<h2>
|
|
Posts
|
|
<!-- o botão de novas postagens deve ser ocultado quando o usuário clicá-lo via javascript -->
|
|
<button class="postboard-news" style="display:none;"></button>
|
|
</h2>
|
|
|
|
<ol id="profile-posts" class="postboard-posts">
|
|
</ol>
|
|
|
|
</div>
|
|
<!-- ÁREA DE POSTS END -->
|
|
</div>
|
|
<!-- MODAL DE PROFILE END -->
|
|
|
|
|
|
<!-- MODAL DE HASHTAGS -->
|
|
<div id="hashtag-modal-template">
|
|
|
|
<!-- ÁREA DE POSTS INIT -->
|
|
<div class="postboard">
|
|
<h2>
|
|
Posts
|
|
<!-- o botão de novas postagens deve ser ocultado quando o usuário clicá-lo via javascript -->
|
|
<button class="postboard-news" style="display:none;"></button>
|
|
</h2>
|
|
|
|
<ol id="profile-posts" class="postboard-posts">
|
|
</ol>
|
|
|
|
</div>
|
|
<!-- ÁREA DE POSTS END -->
|
|
</div>
|
|
<!-- MODAL DE HASHTAGS END -->
|
|
|
|
<!-- MODAL DE FOLLOWING -->
|
|
<div id="following-modal-template">
|
|
<!-- ÁREA DE PROFILE PHOTO INIT -->
|
|
<h2>All users publicly followed by <span class="following-screen-name">@<b></b></span></h2>
|
|
<!-- ÁREA DE PROFILE END -->
|
|
|
|
<!-- ÁREA DE FOLLOWING INIT -->
|
|
<ol class="">
|
|
<li id="following-by-user-template" style="display: none;">
|
|
<div class="mini-following-info" data-screen-name="">
|
|
<a href="#" class="open-profile-modal">
|
|
<img class="mini-profile-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
|
|
<span class="mini-following-name">Fulano da Silva</span>
|
|
<span class="mini-screen-name">@
|
|
<b class="following-screen-name"></b>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
|
|
<!-- ÁREA DE FOLLOWERS END -->
|
|
</div>
|
|
<!-- MODAL DE FOLLOWING END -->
|
|
|
|
|
|
</div>
|
|
<!-- TEMPLATES END -->
|
|
|
|
</body>
|
|
</html>
|