Browse Source

Merge pull request #229 from slr/tasty-fixes

a few fixes and improvements of UI glitches
master
miguelfreitas 10 years ago
parent
commit
e03b1da4d2
  1. 78
      css/profile.css
  2. 116
      css/style.css
  3. 11
      following.html
  4. 7
      home.html
  5. 56
      js/interface_common.js
  6. 27
      js/twister_following.js
  7. 2
      network.html
  8. 4
      options.html
  9. 86
      theme_calm/css/profile.css
  10. 71
      theme_calm/css/style.css
  11. 34
      theme_nin/css/style.css
  12. 4
      theme_nin/js/theme_option.js
  13. 4
      theme_nin/sass/_profile.sass
  14. 12
      theme_nin/sass/style.sass

78
css/profile.css

@ -57,49 +57,37 @@
{ {
color: #fff; color: #fff;
} }
.profile-card .direct-messages,
.profile-card .direct-messages-with-user, .profile-card-buttons
.profile-card .mentions-from-user,
.profile-card .follow,
.profile-card .profileUnfollow
{ {
display: block;
position: absolute; position: absolute;
bottom: 20px; bottom: 30px;
right: 125px; right: 0;
padding: 10px; }
.profile-card-buttons .direct-messages-with-user,
.profile-card-buttons .mentions-from-user,
.profile-card-buttons .follow,
.profile-card-buttons .unfollow
{
display: inline;
padding: 4px 12px;
font-size: 12px; font-size: 12px;
width: 110px; width: auto;
text-align: center; text-align: center;
color: rgba( 0, 0, 0, .7 ); color: rgba( 0, 0, 0, .7 );
background: rgba( 0, 0, 0, .1 ); background: rgba( 0, 0, 0, .1 );
border: none; border: none;
transition: all .2s linear; transition: all .2s linear;
} }
.profile-card .follow,
.profile-card .profileUnfollow .profile-card-buttons .direct-messages-with-user:hover,
{ .profile-card-buttons .mentions-from-user:hover
right: 240px;
}
.profile-card .mentions-from-user
{
right: 10px;
}
.profile-card .profileUnfollow
{
background-color: rgba( 0, 0, 0, .3 );
}
.profile-card .direct-messages:hover,
.profile-card .direct-messages-with-user:hover,
.profile-card .mentions-from-user:hover,
.profile-card .follow:hover
{
background: rgba( 0, 0, 0, .3 );
}
.profile-card .profileUnfollow:hover
{ {
background: rgba( 0, 0, 0, .1 ); color: #fff;
background: #45474d;
} }
.profile-card.forEdition .profile-card.forEdition
{ {
margin: 0 auto; margin: 0 auto;
@ -175,24 +163,27 @@
padding: 10px; padding: 10px;
text-align: right; text-align: right;
} }
/************************************* /*************************************
****************** PROFILE MODAL ************ PROFILE MODAL ***********
************************************* **************************************/
.profile-modal .modal-wrapper .profile-modal .modal-wrapper
{ {
width: 580px; width: 580px;
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top:10%; top:5%;
height: 80%; height: 90%;
margin-left: -290px; margin-left: -290px;
}*/ }
.profile-modal .modal-content .profile-modal .modal-content
{ {
padding: 3px; padding: 3px;
height: 100%; height: 100%;
overflow-y: hidden;
} }
#msngrswr { #msngrswr {
display: none; display: none;
@ -274,7 +265,7 @@
{ {
margin-left: 0; margin-left: 0;
padding: 5px 0 5px 0; padding: 5px 0 5px 0;
height: 75%; height: 73%;
} }
.profile-modal .postboard h2 .profile-modal .postboard h2
{ {
@ -314,20 +305,13 @@
height: 200px; height: 200px;
} }
*/ */
.profile-modal .direct-messages,
.profile-modal .direct-messages-with-user,
.profile-modal .mentions-from-user,
.profile-modal .follow,
.profile-modal .profileUnfollow
{
bottom: 10px;
}
h1.profile-name { h1.profile-name {
display: inline; display: inline;
} }
h2.profile-screen-name { h2.profile-screen-name {
display: inline; display: block;
} }
.profile-modal .modal-buttons { .profile-modal .modal-buttons {

116
css/style.css

@ -90,9 +90,11 @@ h3
color: #1a1; color: #1a1;
content: '\2714'; content: '\2714';
} }
/************************************* /*************************************
**************************** BUTTONS ** ************** BUTTONS ***************
**************************************/ **************************************/
button button
{ {
background: #45474d; background: #45474d;
@ -101,18 +103,51 @@ button
padding: 5px 10px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
} }
button:hover button:hover
{ {
color: #fff; color: #fff;
} }
button.disabled button.disabled
{ {
opacity: .4; opacity: .4;
} }
button.disabled:hover button.disabled:hover
{ {
color: rgba( 255, 255, 255, .8 ); color: rgba( 255, 255, 255, .8 );
} }
button.follow, button.unfollow, .following-list button.private {
color: rgba( 0, 0, 0, .4 );
background: none;
border: solid 1px rgba( 0, 0, 0, .2 );
padding: 3px 15px;
}
.following-list .public-following {
padding: 4px 16px;
}
.following-list .public-following:hover {
color: rgba( 0, 0, 0, .4 );
background: none;
border: solid 1px rgba( 0, 0, 0, .2 );
padding: 3px 15px;
}
button.follow:hover, button.unfollow:hover, .following-list button.private:hover {
color: #fff;
background: #45474d;
}
.follow-suggestions .follow, .follow-suggestions .unfollow {
display: block;
position: relative;
left: 50%;
}
/************************************* /*************************************
**************************** MENU ***** **************************** MENU *****
**************************************/ **************************************/
@ -356,12 +391,7 @@ button.disabled:hover
.userMenu-search-sugestions a:hover, .userMenu-search-sugestions a:hover,
.userMenu-search-profiles li:hover a .userMenu-search-profiles li:hover a
{ {
background: #45474d; background: #fefef1;
color: #fff;
}
.userMenu-search-profiles li:hover span
{
color: #fff;
} }
.userMenu-search-profiles button .userMenu-search-profiles button
{ {
@ -749,17 +779,6 @@ textarea.splited-post {
opacity: 1; opacity: 1;
} }
.follow, .unfollow {
background: none;
border: solid 1px rgba( 0, 0, 0 ,.2 );
padding: 3px 15px;
color: rgba( 0, 0, 0 ,.4 );
}
.follow:hover, .unfollow:hover {
color: rgba( 0, 0, 0 ,.7 );
}
.refresh-users, .refresh-users,
.view-all-users .view-all-users
{ {
@ -885,7 +904,7 @@ ol.toptrends-list {
.post:hover, .post:hover,
.post .post .post .post
{ {
background: #ececed; background: #fefef1;
} }
.post:hover .post:hover
{ {
@ -1564,9 +1583,13 @@ ol.toptrends-list {
} }
/************************************* /*************************************
*************** FOLLOWING-CONFIG PROMPT ****** FOLLOWING-CONFIG PROMPT *******
**************************************/ **************************************/
.following-config-modal
{
margin-top: -80px;
}
.following-config-modal .modal-content .following-config-modal .modal-content
{ {
padding: 10px; padding: 10px;
@ -1581,10 +1604,8 @@ ol.toptrends-list {
padding: 10px; padding: 10px;
} }
/************************************* /*************************************
****************** RETWIST POSTS PROMPT ******** RETWIST POSTS PROMPT ********
**************************************/ **************************************/
.reTwist .reTwist
@ -1798,6 +1819,55 @@ ol.toptrends-list {
-ms-transition: height 1s linear; -ms-transition: height 1s linear;
} }
/* Following page */
.following-list
{
overflow-y: auto;
}
.following ol.following-list > li{
width: 425px;
height: 150px;
margin: 5px;
padding: 8px;
float: left;
border: 0;
background: #fff;
}
.w1200 .following ol.following-list > li{
width: 385px;
}
.following ol.following-list > li:hover{
background: #fefef1;
}
.following-list .following-config
{
position: absolute;
left: 30%;
top: 69px;
}
.following-list .mini-profile-actions
{
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
.following-list .swarm-status
{
font: 12px "Open Sans", sans-serif;
display: block;
position: absolute;
top: 110px;
right: 10px;
}
/* Autocomplite*/ /* Autocomplite*/
.textcomplete-wrapper textarea { .textcomplete-wrapper textarea {
display: inline; display: inline;

11
following.html

@ -176,9 +176,11 @@
<li>Display retransmissions</li> <li>Display retransmissions</li>
</ul> </ul>
</div> </div>
<button class="unfollow">Unfollow</button> <div class="following-config">
<button class="follow">Follow</button>
<button class="public-following">Public</button> <button class="public-following">Public</button>
</div> </div>
</div>
<div> <div>
<span class="swarm-status" style="display: none;"></span> <span class="swarm-status" style="display: none;"></span>
</div> </div>
@ -427,8 +429,11 @@
<li><a href="#"><span class="followers-count">&nbsp;</span><span class="label">Followers</span></a></li> <li><a href="#"><span class="followers-count">&nbsp;</span><span class="label">Followers</span></a></li>
</ul> </ul>
</div> </div>
<button class="dinamicFollowButton" href="#">Follow</button> <div class="profile-card-buttons">
<button class="follow" href="#">Follow</button>
<button class="direct-messages-with-user" href="#">Direct Messages</button> <button class="direct-messages-with-user" href="#">Direct Messages</button>
<button class="mentions-from-user" href="#">Mentions</button>
</div>
</div> </div>
<div class="who-follow"></div> <div class="who-follow"></div>
</div> </div>
@ -515,5 +520,7 @@
</div> </div>
<!-- TEMPLATES END --> <!-- TEMPLATES END -->
<audio id="player"></audio>
<audio id="playerSec"></audio>
</body> </body>
</html> </html>

7
home.html

@ -457,9 +457,11 @@
<li><a href="#"><span class="followers-count">&nbsp;</span><span class="label">Followers</span></a></li> <li><a href="#"><span class="followers-count">&nbsp;</span><span class="label">Followers</span></a></li>
</ul> </ul>
</div> </div>
<button class="dinamicFollowButton" href="#">Follow</button> <div class="profile-card-buttons">
<button class="follow" href="#">Follow</button>
<button class="direct-messages-with-user" href="#">Direct Messages</button> <button class="direct-messages-with-user" href="#">Direct Messages</button>
<button class="mentions-from-user" href="#">Mentions</a> <button class="mentions-from-user" href="#">Mentions</button>
</div>
</div> </div>
<div class="who-follow"></div> <div class="who-follow"></div>
</div> </div>
@ -546,6 +548,7 @@
</div> </div>
<!-- TEMPLATES END --> <!-- TEMPLATES END -->
<audio id="player"></audio> <audio id="player"></audio>
<audio id="playerSec"></audio> <audio id="playerSec"></audio>
<!-- hide elements --> <!-- hide elements -->

56
js/interface_common.js

@ -158,14 +158,14 @@ function openProfileModalWithUsernameHandler(username)
//título do modal //título do modal
$( "."+profileModalClass + " h3" ).text( polyglot.t("users_profile", { username: username }) ); $( "."+profileModalClass + " h3" ).text( polyglot.t("users_profile", { username: username }) );
//hed//add dinamic follow button in profile modal window //setup follow button in profile modal window
if(followingUsers.indexOf(username) != -1){ var button = $('.profile-card-buttons .follow');
$('.profile-card button.dinamicFollowButton').first().addClass('profileUnfollow').text(polyglot.t('Unfollow')).on('click', function(){ if (button) {
unfollow(username); if(followingUsers.indexOf(username) !== -1){
window.setTimeout("loadModalFromHash();",500); toggleFollowButton(username, true, function(){ window.setTimeout("loadModalFromHash();", 500);});
});
} else { } else {
$('.profile-card button.dinamicFollowButton').first().addClass('follow').text(polyglot.t('Follow')).on('click', userClickFollow ); button.on('click', userClickFollow);
};
}; };
$(".tox-ctc").attr("title", polyglot.t("Copy to clipboard")); $(".tox-ctc").attr("title", polyglot.t("Copy to clipboard"));
@ -558,31 +558,47 @@ function closeThis() {
$( this ).slideUp( "fast" ); $( this ).slideUp( "fast" );
} }
function toggleFollowButton(button, followingUser) { function toggleFollowButton(username, toggleUnfollow, bindFunc) {
if (!button || !followingUser) if (!username)
return; return;
button if (toggleUnfollow) {
$("[data-screen-name='"+username+"']").find(".follow")
.removeClass("follow") .removeClass("follow")
.addClass("unfollow") .addClass("unfollow")
.unbind("click") .unbind("click")
.bind("click", .bind("click",
(function(e) { (function(e) {
unfollow(this.toString(), e.stopPropagation();
unfollow(this.username.toString(),
(function() { (function() {
this toggleFollowButton(this.username);
if (this.bindFunc)
this.bindFunc;
}).bind({username: this.username, bindFunc: this.bindFunc})
);
}).bind({username: username, bindFunc: bindFunc})
)
.text(polyglot.t('Unfollow'))
.trigger("eventToggleUnfollow");
} else {
$("[data-screen-name='"+username+"']").find(".unfollow")
.removeClass("unfollow") .removeClass("unfollow")
.addClass("follow") .addClass("follow")
.unbind("click") .unbind("click")
.bind("click", userClickFollow) .bind("click",
.text(polyglot.t('Follow')) (function(e) {
.trigger("toggleFollow"); userClickFollow;
}).bind($(e.target))
); if (this.bindFunc)
}).bind(followingUser) this.bindFunc;
}).bind({bindFunc: bindFunc})
) )
.text(polyglot.t('Unfollow')) .text(polyglot.t('Follow'))
.trigger("toggleUnfollow"); .trigger("eventToggleFollow");
}
} }
var postExpandFunction = function( e, postLi ) var postExpandFunction = function( e, postLi )

27
js/twister_following.js

@ -524,7 +524,6 @@ function showFollowingUsers(){
resItem.find(".mini-profile-info").attr("data-screen-name", followingUsers[i]); resItem.find(".mini-profile-info").attr("data-screen-name", followingUsers[i]);
resItem.find(".following-screen-name").text(followingUsers[i]); resItem.find(".following-screen-name").text(followingUsers[i]);
resItem.find("a.open-profile-modal").attr("href",$.MAL.userUrl(followingUsers[i])); resItem.find("a.open-profile-modal").attr("href",$.MAL.userUrl(followingUsers[i]));
resItem.find("a.unfollow").attr("href",$.MAL.unfollowUrl(followingUsers[i]));
resItem.find("a.direct-messages-with-user").attr("href", $.MAL.dmchatUrl(followingUsers[i])); resItem.find("a.direct-messages-with-user").attr("href", $.MAL.dmchatUrl(followingUsers[i]));
if (isPublicFollowing(followingUsers[i])) { if (isPublicFollowing(followingUsers[i])) {
resItem.find(".public-following").text(polyglot.t("Public")); resItem.find(".public-following").text(polyglot.t("Public"));
@ -538,11 +537,11 @@ function showFollowingUsers(){
} }
resItem.prependTo($followingList); resItem.prependTo($followingList);
toggleFollowButton(followingUsers[i], true)
} }
$.MAL.followingListLoaded(); $.MAL.followingListLoaded();
} }
function processSuggestion(arg, suggestion, followedBy) { function processSuggestion(arg, suggestion, followedBy) {
var dashboard = $(".follow-suggestions"); var dashboard = $(".follow-suggestions");
if( suggestion ) { if( suggestion ) {
@ -656,9 +655,9 @@ function processDropdownUserResults(partialName, results){
resItem.find("a.open-profile-modal").attr("href",$.MAL.userUrl(results[i])); resItem.find("a.open-profile-modal").attr("href",$.MAL.userUrl(results[i]));
getAvatar(results[i],resItem.find(".mini-profile-photo")); getAvatar(results[i],resItem.find(".mini-profile-photo"));
getFullname(results[i],resItem.find(".mini-profile-name")); getFullname(results[i],resItem.find(".mini-profile-name"));
if (followingUsers.indexOf(results[i]) >= 0)
toggleFollowButton(resItem.find(".follow"), results[i]);
resItem.appendTo(typeaheadAccounts); resItem.appendTo(typeaheadAccounts);
if (followingUsers.indexOf(results[i]) >= 0)
toggleFollowButton(results[i], true);
} }
$.MAL.searchUserListLoaded(); $.MAL.searchUserListLoaded();
@ -682,11 +681,6 @@ function userClickFollow(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
var followingInitiator = $(".followingInitiator");
if (followingInitiator)
followingInitiator.removeClass("followingInitiator");
$(e.target).addClass("followingInitiator");
var $this = $(this); var $this = $(this);
var $userInfo = $this.closest("[data-screen-name]"); var $userInfo = $this.closest("[data-screen-name]");
var username = $userInfo.attr("data-screen-name"); var username = $userInfo.attr("data-screen-name");
@ -723,16 +717,6 @@ function initUserSearch() {
}); });
} }
function followingListUnfollow(e) {
e.stopPropagation();
e.preventDefault();
var $this = $(this);
var username = $this.closest(".mini-profile-info").attr("data-screen-name");
unfollow(username);
}
function followingListPublicCheckbox(e) { function followingListPublicCheckbox(e) {
e.stopPropagation(); e.stopPropagation();
@ -764,9 +748,7 @@ function setFollowingMethod(e) {
//console.log("start following @" +username +" by method "+publicFollow); //console.log("start following @" +username +" by method "+publicFollow);
follow(username, publicFollow, follow(username, publicFollow,
(function() { (function() {
var followingInitiator = $(".followingInitiator"); toggleFollowButton(this, true);
if (followingInitiator)
toggleFollowButton(followingInitiator, this);
}).bind(username) }).bind(username)
); );
} }
@ -818,7 +800,6 @@ function initInterfaceFollowing() {
initUserSearch(); initUserSearch();
initInterfaceDirectMsg(); initInterfaceDirectMsg();
$("button.unfollow").bind( "click", followingListUnfollow );
$(".mini-profile-info .public-following").bind( "click", followingListPublicCheckbox ); $(".mini-profile-info .public-following").bind( "click", followingListPublicCheckbox );
$(".mentions-from-user").bind( "click", openMentionsModal ); $(".mentions-from-user").bind( "click", openMentionsModal );

2
network.html

@ -225,5 +225,7 @@
</div> </div>
<audio id="player"></audio>
<audio id="playerSec"></audio>
</body> </body>
</html> </html>

4
options.html

@ -141,7 +141,6 @@
<input type="range" name="playerVol" id="playerVol" class="container" min="0" max="1" step="0.01"><span class="volValue container">0</span> <input type="range" name="playerVol" id="playerVol" class="container" min="0" max="1" step="0.01"><span class="volValue container">0</span>
</div> </div>
</form> </form>
<audio id="player"></audio>
</div> </div>
</div> </div>
<div class="module"> <div class="module">
@ -347,5 +346,8 @@
</div><!-- /tab-content --> </div><!-- /tab-content -->
</div><!-- /options --> </div><!-- /options -->
</div><!-- /options --> </div><!-- /options -->
<audio id="player"></audio>
<audio id="playerSec"></audio>
</body> </body>
</html> </html>

86
theme_calm/css/profile.css

@ -61,36 +61,37 @@
top: 19%; top: 19%;
color: #f8f8f8; color: #f8f8f8;
} }
.profile-card .direct-messages,
.profile-card .direct-messages-with-user, .profile-card-buttons
.profile-card .follow,
.profile-card .profileUnfollow
{ {
display: block;
position: absolute; position: absolute;
bottom: 20px; bottom: 30px;
right: 3px; right: 0;
padding: 10px 3px; }
.profile-card-buttons .direct-messages-with-user,
.profile-card-buttons .mentions-from-user,
.profile-card-buttons .follow,
.profile-card-buttons .unfollow
{
display: inline;
padding: 4px 12px;
font-size: 12px; font-size: 12px;
width: 120px; width: auto;
text-align: center; text-align: center;
color: rgba( 0, 0, 0, .7 ); color: rgba( 0, 0, 0, .7 );
background: rgba( 0, 0, 0, .1 ); background: rgba( 0, 0, 0, .1 );
border: none; border: none;
transition: all .2s linear; transition: all .2s linear;
} }
.profile-card .follow,
.profile-card .profileUnfollow .profile-card-buttons .direct-messages-with-user:hover,
{ .profile-card-buttons .mentions-from-user:hover
right: 128px;
}
.profile-card .direct-messages:hover,
.profile-card .direct-messages-with-user:hover,
.profile-card .follow:hover,
.profile-card .profileUnfollow:hover
{ {
background: rgba( 0, 0, 0, .3 ); color: #fff;
background: #b2d67b;
} }
.profile-card.forEdition .profile-card.forEdition
{ {
margin: 0 auto; margin: 0 auto;
@ -217,9 +218,11 @@
.secret-key-container .secret-key { .secret-key-container .secret-key {
color: #d2dbf1; color: #d2dbf1;
} }
/************************************* /*************************************
****************** PROFILE MODAL ************ PROFILE MODAL ***********
**************************************/ **************************************/
.profile-modal .modal-wrapper .profile-modal .modal-wrapper
{ {
width: 580px; width: 580px;
@ -228,7 +231,7 @@
position: absolute; position: absolute;
top:5%; top:5%;
height: 90%; height: 90%;
margin-left: -300px; margin-left: -290px;
} }
.profile-modal .modal-header, .profile-modal .profile-card { .profile-modal .modal-header, .profile-modal .profile-card {
@ -328,32 +331,11 @@
margin-left: -4px; margin-left: -4px;
border-bottom: 0; border-bottom: 0;
} }
button.follow:hover {
background: #b2d67b;
color: #fff;
}
.profile-modal button.follow:hover {
background: #b2d67b;
color: #fff;
}
.profile-card .profileUnfollow:hover {
background: #e18882;
color: #fff;
}
.profile-modal button.direct-messages-with-user:hover {
background: #b2d67b;
color: #fff;
}
.profile-modal .separator {
height: 10px;
width: 100%;
background-color: #000;
}
.profile-modal .postboard .profile-modal .postboard
{ {
margin-left: 0; margin-left: 0;
padding: 5px 0 5px 0; padding: 5px 0 5px 0;
height: 60%; height: 73%;
} }
.profile-modal .postboard h2 { .profile-modal .postboard h2 {
width: auto; width: auto;
@ -368,17 +350,6 @@ button.follow:hover {
font: 18px/40px 'Open Sans Condensed', sans-serif; font: 18px/40px 'Open Sans Condensed', sans-serif;
padding-left: 10px; padding-left: 10px;
} }
.profile-modal .postboard-posts-wrapper
{
position: absolute;
top: 0;
height: 100%;
width: 99%;
box-sizing: border-box;
border-top: 292px solid transparent;
overflow: auto;
z-index: 0;
}
.profile-modal .profile-card-main .profile-modal .profile-card-main
{ {
background: #f3f5fb; background: #f3f5fb;
@ -408,13 +379,6 @@ button.follow:hover {
height: 200px; height: 200px;
} }
*/ */
.profile-modal .direct-messages,
.profile-modal .direct-messages-with-user,
.profile-modal .follow,
.profile-card .profileUnfollow
{
bottom: 10px;
}
h1.profile-name { h1.profile-name {
display: inline; display: inline;

71
theme_calm/css/style.css

@ -101,9 +101,11 @@ h3
color: #1a1; color: #1a1;
content: '\2714'; content: '\2714';
} }
/************************************* /*************************************
**************************** BUTTONS ** ************** BUTTONS ***************
**************************************/ **************************************/
button button
{ {
background: #45474d; background: #45474d;
@ -112,18 +114,61 @@ button
padding: 5px 10px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
} }
button:hover button:hover
{ {
color: #fff; color: #fff;
} }
button.disabled button.disabled
{ {
opacity: .4; opacity: .4;
} }
button.disabled:hover button.disabled:hover
{ {
color: rgba( 255, 255, 255, .8 ); color: rgba( 255, 255, 255, .8 );
} }
button.follow, button.unfollow, .following-list button.private {
color: rgba( 0, 0, 0, .4 );
background: none;
border: solid 1px rgba( 0, 0, 0, .2 );
padding: 3px 15px;
}
.following-list .public-following {
padding: 4px 16px;
}
.following-list .public-following:hover {
color: rgba( 0, 0, 0, .4 );
background: none;
border: solid 1px rgba( 0, 0, 0, .2 );
padding: 3px 15px;
}
.following-list button.private:hover {
color: #fff;
background: #45474d;
}
button.follow:hover {
color: #fff;
background: #b2d67b;
}
button.unfollow:hover {
color: #fff;
background: #e18882;
}
.follow-suggestions .follow, .follow-suggestions .unfollow {
display: block;
position: relative;
left: 50%;
}
/************************************* /*************************************
**************************** MENU ***** **************************** MENU *****
**************************************/ **************************************/
@ -921,17 +966,6 @@ textarea.splited-post {
text-decoration: none; text-decoration: none;
} }
.follow, .unfollow {
background: none;
border: solid 1px rgba( 0, 0, 0 ,.2 );
padding: 3px 15px;
color: rgba( 0, 0, 0 ,.4 );
}
.follow:hover, .unfollow:hover {
color: rgba( 0, 0, 0 ,.7 );
}
.refresh-users, .refresh-users,
.view-all-users .view-all-users
{ {
@ -1747,14 +1781,14 @@ textarea.splited-post {
{ {
padding: 5px 20px; padding: 5px 20px;
} }
/************************************* /*************************************
*************** FOLLOWING-CONFIG MODAL ****** FOLLOWING-CONFIG PROMPT *******
**************************************/ **************************************/
.following-config-modal .modal-wrapper
.following-config-modal
{ {
top: 43%; margin-top: -80px;
left: 25%;
width: 50%;
} }
.following-config-modal .modal-content .following-config-modal .modal-content
{ {
@ -1769,8 +1803,9 @@ textarea.splited-post {
{ {
padding: 10px; padding: 10px;
} }
/************************************* /*************************************
****************** RETWIST POSTS PROMPT ******** RETWIST POSTS PROMPT ********
**************************************/ **************************************/
.reTwist .reTwist

34
theme_nin/css/style.css

@ -556,7 +556,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
padding: 15px; padding: 15px;
} }
/* line 146, ../sass/_profile.sass */ /* line 146, ../sass/_profile.sass */
.profile-card .direct-messages-with-user, .profile-card .follow, .profile-card .profileUnfollow, .profile-card .follow { .profile-card .direct-messages-with-user, .profile-card .follow, .profile-card .unfollow {
display: inline-block; display: inline-block;
position: static; position: static;
} }
@ -566,7 +566,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
position: absolute; position: absolute;
} }
/* line 154, ../sass/_profile.sass */ /* line 154, ../sass/_profile.sass */
.profile-card .profileUnfollow { .profile-card .unfollow {
background: #aaa; background: #aaa;
} }
/* line 157, ../sass/_profile.sass */ /* line 157, ../sass/_profile.sass */
@ -2579,18 +2579,46 @@ ol.toptrends-list a:hover {
.following-config-method-buttons { .following-config-method-buttons {
padding: 10px; padding: 10px;
} }
/****** FOLLOWING-CONFIG PROMPT ***** */
/* line 699, ../sass/style.sass */ /* line 699, ../sass/style.sass */
.following-config-modal
{
margin-top: -100px;
}
.following-config-modal .modal-content
{
padding: 10px;
text-align: center;
}
.following-config-modal .modal-buttons
{
display: none;
}
.following-config-method-buttons .public-following { .following-config-method-buttons .public-following {
background-color: #B4C669; background-color: #B4C669;
margin: 0px 2px;
padding: 6px 16px;
} }
/************ RETWIST POSTS MODAL ********* */ /********** RETWIST POSTS PROMPT ********* */
/* line 705, ../sass/style.sass */ /* line 705, ../sass/style.sass */
.reTwist {
margin-top: -110px;
}
.reTwist .modal-wrapper { .reTwist .modal-wrapper {
width: 520px; width: 520px;
top: 20%; top: 20%;
margin: 0 0 0 -260px; margin: 0 0 0 -260px;
} }
.reTwist .modal-content
{
padding: 20px 15px;
}
.reTwist button.modal-propagate
{
background-color: #B4C669;
}
/* line 709, ../sass/style.sass */ /* line 709, ../sass/style.sass */
.reTwist .post-expand, .reTwist .post-interactions { .reTwist .post-expand, .reTwist .post-interactions {
display: none; display: none;

4
theme_nin/js/theme_option.js

@ -39,10 +39,10 @@ $(function(){
}); });
$(".userMenu-search-profiles .follow") $(".userMenu-search-profiles .follow")
.on("toggleFollow", function() { .on("eventToggleFollow", function() {
$(this).text('').attr('title', polyglot.t('Follow')); $(this).text('').attr('title', polyglot.t('Follow'));
}) })
.on("toggleUnfollow", function() { .on("eventToggleUnfollow", function() {
$(this).text('').attr('title', polyglot.t('Unfollow')); $(this).text('').attr('title', polyglot.t('Unfollow'));
}); });

4
theme_nin/sass/_profile.sass

@ -143,7 +143,7 @@ $modal-postboard-post-height: $modal-height - 45px
position: relative position: relative
padding: $modal-gut padding: $modal-gut
.direct-messages-with-user, .follow, .profileUnfollow, .follow .direct-messages-with-user, .follow, .unfollow
display: inline-block display: inline-block
position: static position: static
@ -151,7 +151,7 @@ $modal-postboard-post-height: $modal-height - 45px
font-size: 15px font-size: 15px
position: absolute position: absolute
.profileUnfollow .unfollow
background: $main-color-light background: $main-color-light
.twister-user-info .twister-user-info

12
theme_nin/sass/style.sass

@ -697,6 +697,7 @@ ol.toptrends-list
/************ FOLLOWING-CONFIG MODAL **********/ /************ FOLLOWING-CONFIG MODAL **********/
.following-config-modal .following-config-modal
margin-top: -100px
h2 h2
text-transform: none text-transform: none
.modal-wrapper .modal-wrapper
@ -710,17 +711,24 @@ ol.toptrends-list
.modal-buttons .modal-buttons
display: none display: none
.following-config-method-buttons .following-config-method-buttons
padding: 10px
.public-following .public-following
background-color: #B4C669 background-color: $color-green
margin: 0px 2px
padding: 6px 16px
/************ RETWIST POSTS MODAL **********/ /************ RETWIST POSTS MODAL **********/
.reTwist .reTwist
margin-top: -110px
.modal-wrapper .modal-wrapper
width: $postboard-modal-width width: $postboard-modal-width
top: 20% top: 20%
margin: 0 0 0 0-($postboard-modal-width/2) margin: 0 0 0 0-($postboard-modal-width/2)
.modal-content
padding: 20px 15px
.modal-buttons
.modal-propagate
background-color: $color-green
.post-expand, .post-interactions .post-expand, .post-interactions
display: none display: none

Loading…
Cancel
Save