Simon Grim
9 years ago
21 changed files with 931 additions and 1881 deletions
@ -1,638 +0,0 @@
@@ -1,638 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>Following</title> |
||||
<link id="stylecss" rel="stylesheet" href="css/style.css" type="text/css"/> |
||||
<link id="profilecss" 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/options.js"></script> |
||||
<script src="js/franc.js"></script> |
||||
<script src="js/notify.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_timeline.js"></script> |
||||
<script src="js/twister_directmsg.js"></script> |
||||
<script src="js/twister_actions.js"></script> |
||||
<script src="js/interface_common.js"></script> |
||||
<script src="js/jquery.textcomplete.min.js"></script> |
||||
|
||||
<link rel="shortcut 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"><span class="selectable_theme theme_original label">Home</span></a></li> |
||||
<li class="userMenu-network selectable_theme theme_original theme_nin"><a class="label" href="network.html">Network</a></li> |
||||
<li class="userMenu-profile selectable_theme theme_original theme_nin"><a class="label" href="profile-edit.html">Profile</a></li> |
||||
<li class="userMenu-config"> |
||||
<a class="userMenu-config-dropdown" href="#"> |
||||
<div class="config-menu dialog-modal"> |
||||
<div class="mini-profile-info selectable_theme theme_original"> |
||||
<div class="mini-profile-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div> |
||||
<a href="#" class="mini-profile-name">Fulano da Silva</a> |
||||
<span class="mini-profile-view">View</span> |
||||
</div> |
||||
<a class="dropdown-menu-item" href="options.html">Options</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="network.html">Network config</a> |
||||
<a class="dropdown-menu-item" href="login.html">Change user</a> |
||||
<a class="dropdown-menu-item direct-messages selectable_theme theme_original theme_calm" href="#">Direct Messages</a> |
||||
<a class="dropdown-menu-item groupmessages selectable_theme theme_original theme_calm" href="#">Group Messages</a> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
<li class="userMenu-connections"> |
||||
<a href="#"> |
||||
<span class="messages-qtd" style="display:none;">0</span> |
||||
</a> |
||||
</li> |
||||
<li class="userMenu-messages"> |
||||
<a href="#"> |
||||
<span class="messages-qtd" style="display:none;">0</span> |
||||
</a> |
||||
</li> |
||||
<li class="userMenu-groupmessages"> |
||||
<a href="#"> |
||||
<span class="messages-qtd" style="display:none;">0</span> |
||||
</a> |
||||
</li> |
||||
<li class="userMenu-dhtindicator selectable_theme theme_calm"><a href="network.html"></a></li> |
||||
|
||||
<!-- BUSCA --> |
||||
<li class="userMenu-search"> |
||||
<input type="text" class="userMenu-search-field" placeholder="search"/> |
||||
<div class="search-results dialog-modal"> |
||||
<ul class="userMenu-search-sugestions" style="display: none;"> |
||||
<li><a href="#">Fulano</a></li> |
||||
<li><a href="#">Outro Fulano</a></li> |
||||
<li><a href="#">Mais outro</a></li> |
||||
</ul> |
||||
<ul class="userMenu-search-profiles"></ul> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
<!-- MENU SUPERIOR END --> |
||||
|
||||
<div class="wrapper"> |
||||
<!-- LADO ESQUERDO DE MÓDULOS INIT --> |
||||
<div class="dashboard left"> |
||||
<!-- THEME NIN added sub-menu (mentions, messages and edit profile) --> |
||||
<ul class="mini-profile-indicators selectable_theme theme_nin"> |
||||
<li class="userMenu-connections"> |
||||
<a href="#" title="Mentions"><span class="messages-qtd" style="display:none;">0</span><span>Mentions</span></a> |
||||
</li> |
||||
<li class="userMenu-groupmessages"> |
||||
<a href="#" title="Group Messages"><span class="messages-qtd" style="display:none;">0</span><span>Group Messages</span></a> |
||||
</li> |
||||
<li class="userMenu-messages"> |
||||
<a href="#" title="Direct Messages"><span class="messages-qtd" style="display:none;">0</span><span>Messages</span></a> |
||||
</li> |
||||
</ul> |
||||
<!-- PROFILE MODULE INIT --> |
||||
<div class="module mini-profile selectable_theme theme_nin"> |
||||
<div class="mini-profile-info"> |
||||
<div class="mini-profile-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div> |
||||
<a href="#" class="mini-profile-name open-profile-modal"></a> |
||||
<span class="mini-profile-view">View</span> |
||||
</div> |
||||
<ul class="module profile-data"> |
||||
<li><a href="#" class="open-profile-modal"><span class="posts-count"> </span><span class="label">Posts</span></a></li> |
||||
<li class="current"><a href="following.html" class="open-following-page"><span class="following-count"> </span><span class="label">Following</span></a></li> |
||||
<li><a href="#" class="open-followers"><span class="followers-count"> </span><span class="label">Followers</span> *</a></li> |
||||
</ul> |
||||
</div> |
||||
<!-- PROFILE MODULE INIT --> |
||||
</div> |
||||
|
||||
<!-- LADO ESQUERDO DE MÓDULOS INIT --> |
||||
<div class="following"> |
||||
<h2 class="header-bold"> 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> |
||||
<li>Display retransmissions</li> |
||||
</ul> |
||||
</div> |
||||
<div class="following-config"> |
||||
<button class="follow">Follow</button> |
||||
<button class="public-following">Public</button> |
||||
</div> |
||||
</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> |
||||
|
||||
<ul id="modals-minimized"></ul> |
||||
|
||||
<!-- TEMPLATES INIT --> |
||||
<div id="templates" style="display:none;"> |
||||
<div id="search-profile-template"> |
||||
<li> |
||||
<div class="mini-profile-info"> |
||||
<a class="open-profile-modal"> |
||||
<img class="mini-profile-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo" /> |
||||
<span class="mini-screen-name">@<b></b></span> |
||||
<span class="mini-profile-name"></span> |
||||
</a> |
||||
<button class="follow">Follow</button> |
||||
</div> |
||||
</li> |
||||
</div> |
||||
|
||||
<!-- 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> |
||||
|
||||
<div id="post-preview-template"> |
||||
<div id="post-preview" class="post-text"> |
||||
</div> |
||||
</div> |
||||
|
||||
<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"><span class="post-info-sent"></span> <span></span></a> |
||||
</div> |
||||
<p class="post-text"></p> |
||||
<div class="post-context" style="display: none;"></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="preview-container"> |
||||
</div> |
||||
<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="undo-unicode disabled" disabled="disabled">undo</button> |
||||
<button class="post-submit disabled" disabled="disabled">post</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<span class="show-more label">Show more in this conversation...</span> |
||||
</div> <!-- expanded-content --> |
||||
</div> <!-- post-data --> |
||||
</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> |
||||
<a class="post-info-time"><span></span></a> |
||||
</div> |
||||
<p class="post-text"></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="post-rt-by-template"> |
||||
<i class="post-rt-icon"></i> |
||||
<div class="post-rt-sign"> |
||||
<span class="prep">twisted again by</span><a class="open-profile-modal"></a> |
||||
</div> |
||||
<div class="post-rt-time"> |
||||
<span class="prep">at</span><span class="time"></span> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 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> |
||||
|
||||
<div class="modal-wrapper"> |
||||
<div class="modal-header"> |
||||
<h3></h3> |
||||
<span class="minimize-modal"><b>_</b></span> |
||||
<span id="closeModal" class="modal-close">×</span> |
||||
<span class="modal-back"><</span> |
||||
<span class="mark-all-as-read"></span> |
||||
</div> |
||||
<div class="modal-content"></div> |
||||
<div class="modal-blackout"></div> |
||||
</div> |
||||
|
||||
<div class="prompt-wrapper"> |
||||
<div class="modal-header"> |
||||
<h3></h3> |
||||
<span class="modal-close prompt-close">×</span> |
||||
</div> |
||||
<div class="modal-content"></div> |
||||
</div> |
||||
|
||||
<div id="confirm-popup-template"> |
||||
<div class="message"></div> |
||||
<div class="modal-buttons"> |
||||
<button class="confirm"></button> |
||||
<button class="cancel"></button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="reTwist-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="undo-unicode disabled" disabled="disabled">undo</button> |
||||
<button class="post-submit disabled" disabled="disabled">post</button> |
||||
</div> |
||||
<div class="modal-buttons"> |
||||
<span class="switch-mode">Switch to Reply</span> |
||||
<button class="modal-propagate">Retransmit</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
|
||||
<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="switch-mode">Switch to Retransmit</span> |
||||
<span class="post-area-remaining">140</span> |
||||
<button class="undo-unicode disabled" disabled="disabled">undo</button> |
||||
<button class="post-submit disabled" disabled="disabled">post</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 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=""><span></span></a> |
||||
</div> |
||||
<!-- o texto do post (restrição de caracteres?) --> |
||||
<p class="post-text"></p> |
||||
<div class="messages-qtd">0</div> |
||||
</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> |
||||
<div class="post-info"> |
||||
<a class="post-info-name open-profile-modal"></a> |
||||
<a class="post-info-time"><span class="post-info-sent"></span> <span></span></a> |
||||
</div> |
||||
<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="undo-unicode disabled" disabled="disabled">undo</button> |
||||
<button title="Direct messages are encrypted, only you and receiver can read them" style="margin-right:7.5%;" class="dm-submit disabled" disabled="disabled">send</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<!-- MODAL DE DIRECT MESSAGES INIT --> |
||||
|
||||
<div id="group-messages-profile-modal-control-template"> |
||||
<div class="group-messages-control b-buttons"> |
||||
<button class="new">New group</button> |
||||
<button class="join">Join group</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="group-messages-messages-modal-control-template"> |
||||
<div class="group-messages-control b-buttons"> |
||||
<button class="profile">Profile</button> |
||||
<button class="invite">Invite peers</button> |
||||
<button class="leave">Leave group</button> |
||||
<div class="invite-form"> |
||||
<textarea placeholder="@peer1 @peer2 …"></textarea><button disabled="disabled">Invite</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="group-profile-modal-template"> |
||||
<div class="profile-card" data-screen-name=""> |
||||
<div class="profile-card-main"> |
||||
<div class="profile-bio"> |
||||
<input class="group-description"></input> |
||||
<button class="save a-button" disabled="disabled">Save</button> |
||||
<button class="cancel a-button">Cancel</button> |
||||
</div> |
||||
</div> |
||||
<div class="profile-card-buttons group-messages-control b-buttons"> |
||||
<button class="direct-messages-with-user" disabled="disabled">Messages</button> |
||||
<button class="invite" disabled="disabled">Invite peers</button> |
||||
<button class="show-secret-key" disabled="disabled">Secret Key</button> |
||||
<button class="leave" disabled="disabled">Leave group</button> |
||||
<div class="invite-form"> |
||||
<textarea placeholder="@peer1 @peer2 …"></textarea><button disabled="disabled">Invite</button> |
||||
</div> |
||||
<div class="secret-key"></div> |
||||
</div> |
||||
</div> |
||||
<div class="members"></div> |
||||
</div> |
||||
|
||||
<div id="group-profile-member-template"> |
||||
<div class="twister-user"> |
||||
<div> |
||||
<a 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 class="twister-user-name open-profile-modal"> |
||||
<span class="twister-user-full"></span> |
||||
<span class="twister-user-tag"></span> |
||||
</a> |
||||
<div class="bio"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="group-messages-new-group-template"> |
||||
<div class="module"> |
||||
<div> |
||||
<p class="label">Group description</p> |
||||
<textarea class="description" placeholder="Describe group"></textarea> |
||||
</div> |
||||
<div> |
||||
<p class="label">Peers to invite</p> |
||||
<textarea class="invite" placeholder="Invite somebody"></textarea> |
||||
</div> |
||||
<div> |
||||
<button class="create" disabled="disabled">Create</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="group-messages-join-group-template"> |
||||
<div class="module"> |
||||
<div> |
||||
<p class="label">Select group(s)</p> |
||||
<ul class="groups-list"></ul> |
||||
</div> |
||||
<div> |
||||
<button class="join" disabled="disabled">Join</button> |
||||
</div> |
||||
</div> |
||||
<div class="module"> |
||||
<div> |
||||
<p class="label">Import secret key</p> |
||||
<input class="secret-key-import" type="textbox" placeholder="52-characters secret" size="52" rows="1"></input> |
||||
</div> |
||||
<div> |
||||
<p class="label">With group alias</p> |
||||
<input class="username-import" type="textbox" placeholder="Type group alias here" size="16" rows="1"></input> |
||||
</div> |
||||
<div> |
||||
<button class="import-secret-key" disabled="disabled">Import key</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="groups-list-item-template"> |
||||
<li> |
||||
<input type="checkbox" /> <a class="twister-user-name open-profile-modal"></a> // <span class="description"></span> |
||||
</li> |
||||
</div> |
||||
|
||||
<!-- 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 id="msngrswr"> |
||||
<div id="toxbtnwr" class="profile-extra-contact"> |
||||
<a class="profile-tox"><span class="selectable_theme theme_nin">TOX</span></a><a class="tox-ctc"></a> |
||||
</div> |
||||
<div id="bmbtnwr" class="profile-extra-contact"> |
||||
<a class="profile-bitmessage"><span class="selectable_theme theme_nin">BM</span></a><a class="bitmessage-ctc"></a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="twister-user-info"> |
||||
<div class="clearfix"> |
||||
<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> |
||||
</div> |
||||
<div class="profile-card-buttons b-buttons"> |
||||
<button class="follow" href="#">Follow</button> |
||||
<button class="direct-messages-with-user" href="#">Direct Messages</button> |
||||
<button class="mentions-from-user" href="#">Mentions</button> |
||||
</div> |
||||
</div> |
||||
<div class="who-follow"></div> |
||||
</div> |
||||
<!-- ÁREA DE POSTS END --> |
||||
|
||||
<!-- ÁREA DE POSTS INIT --> |
||||
<div class="postboard"> |
||||
<h2> |
||||
<span>Posts</span> |
||||
<!-- 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 --> |
||||
|
||||
<!-- MODAL OF FOLLOWING CONFIG --> |
||||
<div id="following-config-modal-template"> |
||||
<!-- ÁREA OF FOLLOWING METHOD --> |
||||
<div class="following-config-modal-content" data-screen-name=""> |
||||
<h2><span class="following-config-method-message">Which way do you want to follow</span> <span class="following-screen-name">@<b></b></span>:</h2> |
||||
<div class="following-config-method-buttons"> |
||||
<button class="public-following">Public</button> |
||||
<button class="public-following private">Private</button> |
||||
</div> |
||||
</div> |
||||
<!-- ÁREA OF FOLLOWING METHOD END --> |
||||
</div> |
||||
<!-- MODAL OF FOLLOWING CONFIG END --> |
||||
</div> |
||||
<!-- TEMPLATES END --> |
||||
|
||||
<audio id="player"></audio> |
||||
<audio id="playerSec"></audio> |
||||
</body> |
||||
</html> |
@ -1,239 +0,0 @@
@@ -1,239 +0,0 @@
|
||||
.following |
||||
width: 100%!important |
||||
|
||||
.following-list li |
||||
text-align: center |
||||
@extend .clear-fix |
||||
float: left |
||||
width: 30% |
||||
padding: 13px |
||||
+box-sizing(border-box) |
||||
float: left |
||||
margin: 0 2% 2% 0 |
||||
|
||||
|
||||
.following .mini-profile |
||||
margin-bottom: 10px |
||||
|
||||
.following .mini-profile-info |
||||
position: relative |
||||
|
||||
.following .mini-profile-photo |
||||
margin: 0 auto 10px auto |
||||
display: block |
||||
width: 64px |
||||
height: 64px |
||||
overflow: hidden |
||||
background: $main-background-color |
||||
|
||||
.following .mini-profile-view |
||||
display: inline |
||||
color: rgba(0, 0, 0, 0.5) |
||||
font-size: 12px |
||||
position: absolute |
||||
top: 32px |
||||
left: 65px |
||||
z-index: 1 |
||||
|
||||
.following .mini-profile-name |
||||
font-weight: 900 |
||||
font-size: 1em |
||||
line-height: 1em |
||||
padding: 0 |
||||
text-decoration: none |
||||
display: block |
||||
color: inherit |
||||
display: inline |
||||
.following .mini-screen-name |
||||
color: inherit |
||||
display: block |
||||
margin-bottom: 10px |
||||
|
||||
.following button |
||||
display: inline-block |
||||
margin: 5px 0 |
||||
&.unfollow |
||||
background-color: $main-color-light |
||||
&.public-following |
||||
background-color: $main-color-color |
||||
|
||||
|
||||
|
||||
.mini-profile-actions |
||||
position: absolute |
||||
width: auto |
||||
top: 0 |
||||
right: -16px |
||||
display: inline-block |
||||
|
||||
span |
||||
cursor: pointer!important |
||||
@extend button |
||||
border-top-right-radius: 0!important |
||||
border-bottom-right-radius: 0!important |
||||
@extend .extend-icon |
||||
@extend .icon-plus |
||||
&:before |
||||
margin: 0 |
||||
padding: 0 |
||||
line-height: 1em |
||||
font-size: 10px |
||||
ul |
||||
$action-padding-height: 8px |
||||
height: 0 |
||||
overflow: hidden |
||||
position: absolute |
||||
top: 2em |
||||
right: -2em |
||||
transition: height .4s linear |
||||
transition: padding-top .1s linear |
||||
background: $main-color-dark |
||||
z-index: 3 |
||||
|
||||
|
||||
|
||||
&:hover |
||||
ul |
||||
$action-li-height : 12px |
||||
$action-padding-height: 8px |
||||
padding: $action-padding-height |
||||
height: $action-li-height*4 + $action-padding-height*2*4 |
||||
ul li |
||||
text-align: left |
||||
margin: 0 |
||||
background: $main-color-dark |
||||
$action-li-height : 12px |
||||
$action-padding-height: 8px |
||||
white-space: nowrap |
||||
color: $main-color-light |
||||
font-size: $action-li-height |
||||
line-height: $action-li-height |
||||
cursor: pointer |
||||
display: block |
||||
float: none |
||||
width: auto |
||||
padding: $action-padding-height |
||||
|
||||
&:hover ul li:hover |
||||
color: $main-color-color |
||||
|
||||
|
||||
|
||||
|
||||
.following .who-follow |
||||
height: auto |
||||
background-color: rgba(69, 71, 77, 0.1) |
||||
overflow: hidden |
||||
font-size: 12px |
||||
|
||||
.following .show-more-followers |
||||
color: #f11 |
||||
font-weight: bold |
||||
cursor: pointer |
||||
float: right |
||||
|
||||
.following .mini-follower-link |
||||
display: inline-block |
||||
margin-right: 10px |
||||
&:before |
||||
content: " \2027" |
||||
|
||||
.following a.open-profile-modal |
||||
display: inline |
||||
text-align: center |
||||
color: $dark-grey |
||||
&:hover |
||||
color: $main-color-light |
||||
|
||||
|
||||
|
||||
|
||||
.following .post-area-new |
||||
padding-bottom: 4px |
||||
textarea |
||||
resize: none |
||||
width: 445px |
||||
display: block |
||||
transition: all .3s linear |
||||
-webkit-transition: height 0.3s linear |
||||
-moz-transition: height 0.3s linear |
||||
-o-transition: height 0.3s linear |
||||
-ms-transition: height 0.3s linear |
||||
height: 28px |
||||
border-radius: 3px |
||||
border: solid 1px rgba(0, 0, 0, 0.3) |
||||
margin-left: 55px |
||||
margin-bottom: 10px |
||||
padding: 4px |
||||
font-size: 13px |
||||
|
||||
.following .mini-profile .post-area-new |
||||
padding: 9px |
||||
textarea |
||||
margin-left: 0 |
||||
width: 100% |
||||
|
||||
.following .post-area-new.open textarea |
||||
height: 80px |
||||
border: solid 1px rgba(227, 79, 66, 0.5) |
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) |
||||
|
||||
.following textarea.splited-post |
||||
box-shadow: none!important |
||||
height: 28px |
||||
|
||||
.following .splited-post-counter |
||||
color: rgba(0, 0, 0, 0.3) |
||||
font-weight: bold |
||||
&:before |
||||
content: '\2026' |
||||
|
||||
.following .post-area-extras |
||||
overflow: hidden |
||||
height: 0 |
||||
text-align: right |
||||
|
||||
.following .post-submit |
||||
background: #45474d |
||||
color: rgba(255, 255, 255, 0.8) |
||||
border: none |
||||
padding: 5px 10px |
||||
cursor: pointer |
||||
display: inline-block |
||||
margin-top: 4px |
||||
|
||||
.following .post-area-new.open > .post-area-extras |
||||
height: 35px |
||||
transition: all .6s linear |
||||
|
||||
.following .post-area-remaining |
||||
font-size: 13px |
||||
&.warn |
||||
color: #ff0000 |
||||
|
||||
.following .post .show-more |
||||
font-size: 13px |
||||
font-weight: bold |
||||
margin-left: 60px |
||||
color: rgba(0, 0, 0, 0.5) |
||||
&:before |
||||
content: '💭' |
||||
|
||||
.swarm-status |
||||
display: none!important |
||||
|
||||
.mini-following-info |
||||
width: 45px |
||||
height: 45px |
||||
text-align: center |
||||
background: $bloc-background-color |
||||
margin: 1% |
||||
float: left |
||||
&:after |
||||
@extend .clear-fix |
||||
.mini-screen-name, .mini-following-name |
||||
display: none |
||||
.mini-profile-photo |
||||
height: 45px |
||||
width: 45px |
||||
border-radius: 0 |
Loading…
Reference in new issue