diff --git a/css/style.css b/css/style.css index 8987aec4..be7de9bd 100644 --- a/css/style.css +++ b/css/style.css @@ -1794,12 +1794,12 @@ ol.toptrends-list { **************** LOADER ************** **************************************/ -.postboard-loading -{ +.postboard-loading, .loading-roller { + clear: both; text-align: center; } -.postboard-loading div -{ + +.postboard-loading div, .loading-roller div { display: inline-block; width: 120px; height: 10px; @@ -1809,8 +1809,8 @@ ol.toptrends-list { position: relative; margin: 10px 0 0 0; } -.postboard-loading div:after -{ + +.postboard-loading div:after, .loading-roller div:after { border-radius: 50px; content: ""; position: absolute; @@ -1833,8 +1833,8 @@ ol.toptrends-list { -moz-animation-iteration-count: infinite; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } -@keyframes slide -{ + +@keyframes slide { 0% { right: 60px; left: 2px; @@ -1858,8 +1858,8 @@ ol.toptrends-list { left: 2px; } } -@-webkit-keyframes slide -{ + +@-webkit-keyframes slide { 0% { right: 100px; left: 2px; @@ -1883,8 +1883,8 @@ ol.toptrends-list { left: 2px; } } -@-moz-keyframes slide -{ + +@-moz-keyframes slide { 0% { right: 60px; left: 2px; @@ -1997,11 +1997,6 @@ ol.toptrends-list { *********** FOLLOWING PAGE *********** **************************************/ -.following .postboard-loading -{ - text-align: center; -} - .following .header-bold { display: block; width: 100%; diff --git a/home.html b/home.html index 9df1b863..84c088e6 100644 --- a/home.html +++ b/home.html @@ -213,6 +213,7 @@

+

Who to Follow

. Refresh @@ -221,18 +222,28 @@

Who to Follow

+
+
+

Top Trends

. Refresh
    +
    +
    +

    Twistday Reminder

    . Refresh @@ -248,6 +259,10 @@

    Upcoming ones:

    +
    + diff --git a/js/interface_common.js b/js/interface_common.js index 0f84a9cd..756675b9 100644 --- a/js/interface_common.js +++ b/js/interface_common.js @@ -288,15 +288,18 @@ function openFollowingModal(username) $( "."+followingModalClass + " h3" ).text( polyglot.t("followed_by", { username: username }) ); } -function refreshWhoToFollow(e) { - e.stopPropagation(); - e.preventDefault(); - - $('.module.who-to-follow .follow-suggestions').empty(); - - getRandomFollowSuggestion(processSuggestion); - getRandomFollowSuggestion(processSuggestion); - getRandomFollowSuggestion(processSuggestion); +function refreshWhoToFollow() { + var $module = $('.module.who-to-follow'); + var $list = $module.find('.follow-suggestions'); + if ($list.length) { + $list.empty().hide(); + $module.find('.refresh-users').hide(); + $module.find('.loading-roller').show(); + + getRandomFollowSuggestion(processSuggestion); + getRandomFollowSuggestion(processSuggestion); + getRandomFollowSuggestion(processSuggestion); + } } function fillWhoToFollowModal(list, hlist, start) { diff --git a/js/interface_home.js b/js/interface_home.js index 63f23541..733ba013 100644 --- a/js/interface_home.js +++ b/js/interface_home.js @@ -140,11 +140,14 @@ function initTopTrends() { } function updateTrendingHashtags() { - var $ttl = $('.module.toptrends .toptrends-list'); - if ($ttl.length) { + var $module = $('.module.toptrends'); + var $list = $module.find('.toptrends-list'); + if ($list.length) { + $list.empty().hide(); + $module.find('.refresh-toptrends').hide(); + $module.find('.loading-roller').show(); twisterRpc('gettrendinghashtags', [10], function(args, ret) { - $ttl.empty(); //console.log('hashtags trends: '+ret); for( var i = 0; i < ret.length; i++ ) { if ($.Options.getFilterLangOpt() !== 'disable' && $.Options.getFilterLangForTopTrendsOpt()) @@ -166,15 +169,20 @@ function updateTrendingHashtags() { } } - $ttl.append($li); + $list.append($li); } } + + if ($list.children().length) + $list.show(); + $module.find('.refresh-toptrends').show(); + $module.find('.loading-roller').hide(); }, {}, function(args, ret) { console.log('Error with gettrendinghashtags. Older twister daemon?'); }, {} ); - if ($.Options.getTopTrendsAutoUpdateOpt() === 'enable' && $.Options.getTopTrendsAutoUpdateTimerOpt() > 0) + if ($list.children().length && $.Options.getTopTrendsAutoUpdateOpt() === 'enable' && $.Options.getTopTrendsAutoUpdateTimerOpt() > 0) setTimeout(updateTrendingHashtags, $.Options.getTopTrendsAutoUpdateTimerOpt()*1000); } }; @@ -191,8 +199,11 @@ function initTwistdayReminder() { } function refreshTwistdayReminder() { - var $list = $('.module.twistday-reminder .list'); + var $module = $('.module.twistday-reminder'); + var $list = $module.find('.list'); if ($list.length) { + $module.find('.refresh').hide(); + $module.find('.loading-roller').show(); if (defaultScreenName && typeof(followingUsers) !== 'undefined') { var suggests = followingUsers.slice(); if (suggests.length > 0) { @@ -226,8 +237,8 @@ function refreshTwistdayReminder() { } var showUpcomingTimer = ($.Options.getTwistdayReminderShowUpcomingOpt() === 'enable') ? $.Options.getTwistdayReminderShowUpcomingTimerOpt() *3600 : 0; - var listCurrent = $('.module.twistday-reminder .current .list'); - var listUpcoming = $('.module.twistday-reminder .upcoming .list'); + var listCurrent = $module.find('.current .list'); + var listUpcoming = $module.find('.upcoming .list'); var d = new Date(); var todayYear = d.getUTCFullYear(); var todayMonth = d.getUTCMonth(); @@ -264,9 +275,11 @@ function refreshTwistdayReminder() { } if (listCurrent.children().length > 1) - listCurrent.parent().show() + listCurrent.parent().show(); if (listUpcoming.children().length > 1) - listUpcoming.parent().show() + listUpcoming.parent().show(); + $module.find('.refresh').show(); + $module.find('.loading-roller').hide(); }, null, function(arg, ret) { console.log("ajax error:" + ret); }, null); } diff --git a/js/twister_following.js b/js/twister_following.js index 6cda3473..7de60411 100644 --- a/js/twister_following.js +++ b/js/twister_following.js @@ -563,8 +563,9 @@ function showFollowingUsers(){ } function processSuggestion(arg, suggestion, followedBy) { - var dashboard = $('.module.who-to-follow .follow-suggestions'); if( suggestion ) { + var $module = $('.module.who-to-follow'); + var $list = $module.find('.follow-suggestions'); var item = $("#follow-suggestion-template").clone(true); item.removeAttr("id"); @@ -586,8 +587,11 @@ function processSuggestion(arg, suggestion, followedBy) { getRandomFollowSuggestion(processSuggestion); }); - dashboard.append(item); - } + $list.append(item).show(); + $module.find('.refresh-users').show(); + $module.find('.loading-roller').hide(); + } else + getRandomFollowSuggestion(processSuggestion); } function closeSearchDialog() diff --git a/theme_calm/css/style.css b/theme_calm/css/style.css index 4d90f024..9a54c046 100644 --- a/theme_calm/css/style.css +++ b/theme_calm/css/style.css @@ -2206,12 +2206,12 @@ textarea.splited-post { **************** LOADER ************** **************************************/ -.postboard-loading -{ +.postboard-loading, .loading-roller { + clear: both; text-align: center; } -.postboard-loading div -{ + +.postboard-loading div, .loading-roller div { display: inline-block; width: 120px; height: 10px; @@ -2221,8 +2221,8 @@ textarea.splited-post { position: relative; margin: 10px 0 0 0; } -.postboard-loading div:after -{ + +.postboard-loading div:after, .loading-roller div:after { border-radius: 50px; content: ""; position: absolute; @@ -2245,8 +2245,8 @@ textarea.splited-post { -moz-animation-iteration-count: infinite; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } -@keyframes slide -{ + +@keyframes slide { 0% { right: 60px; left: 2px; @@ -2270,8 +2270,8 @@ textarea.splited-post { left: 2px; } } -@-webkit-keyframes slide -{ + +@-webkit-keyframes slide { 0% { right: 100px; left: 2px; @@ -2295,8 +2295,8 @@ textarea.splited-post { left: 2px; } } -@-moz-keyframes slide -{ + +@-moz-keyframes slide { 0% { right: 60px; left: 2px; @@ -2437,11 +2437,6 @@ textarea.splited-post { *********** FOLLOWING PAGE *********** **************************************/ -.following .postboard-loading -{ - text-align: center; -} - .following .header-bold { display: block; width: 100%; diff --git a/theme_nin/css/style.css b/theme_nin/css/style.css index 4d131e47..93642a70 100644 --- a/theme_nin/css/style.css +++ b/theme_nin/css/style.css @@ -282,7 +282,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, /* FONTS */ /* line 2, ../sass/_utils.sass */ -.clear-fix:after, .userMenu ul:after, .profile-modal .profile-data:after, .profile-card .twister-user-info:after, .forEdition.profile-card:after, .postboard:after, .following:after, .expanded-content:after, .following-list li:after, .twistday-reminder li:after, .mini-following-info:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, .dashboard.right:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .twistday-reminder ol:after, .twister-user:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after { +.clear-fix:after, .userMenu ul:after, .profile-modal .profile-data:after, .profile-card .twister-user-info:after, .forEdition.profile-card:after, .postboard:after, .following:after, .expanded-content:after, .following-list li:after, .twistday-reminder li:after, .mini-following-info:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, .dashboard.right:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .toptrends ol:after, .twistday-reminder ol:after, .twister-user:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after { content: ""; display: table; clear: both; @@ -1823,7 +1823,7 @@ button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disab width: 90%; } -.options #filterLangListCont div,.options #TopTrendsCont div { +.options #filterLangListCont div, .options #TopTrendsCont div, .options #TwistdayReminderCont div { float: none; padding: 0px 4px; } @@ -1891,19 +1891,9 @@ button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disab } /* line 63, ../sass/style.sass */ .dashboard.right { - display: block; - position: absolute; - right: 0; -} -/* line 67, ../sass/style.sass */ -.dashboard.right .module { - position: fixed; - height: 100%; + margin-left: 880px; } -.dashboard .module { - margin: 0 0 3%; -} /********** CONFIG SUBMENU & SEARCH RESULTS *********** */ /* line 76, ../sass/style.sass */ @@ -2326,25 +2316,33 @@ textarea.splited-post { color: #ff0000; } -/****** WHO TO FOLLOW ****** */ +/******** WHO TO FOLLOW ********/ + /* line 411, ../sass/style.sass */ -.who-to-follow { +.who-to-follow.module { width: inherit; margin-bottom: 20px; } + /* line 414, ../sass/style.sass */ .who-to-follow small { display: none; } + /* line 416, ../sass/style.sass */ .who-to-follow h3 { float: left; } + /* line 418, ../sass/style.sass */ .who-to-follow ol { clear: both; } +.who-to-follow .twister-user-info { + margin-top: 8px; +} + /* line 422, ../sass/style.sass */ .twister-user { clear: both; @@ -2381,7 +2379,7 @@ textarea.splited-post { } /* line 450, ../sass/style.sass */ .followers label, .followers a { - display: block; + display: inline-block; } /* line 453, ../sass/style.sass */ @@ -2483,7 +2481,7 @@ button.follow:hover, .mini-profile-actions span.follow:hover, button.unfollow, . } /* line 527, ../sass/style.sass */ -.refresh-toptrends:hover, .twistday-reminder .refresh, .refresh-users:hover, .view-all-users:hover { +.refresh-toptrends:hover, .twistday-reminder .refresh:hover, .refresh-users:hover, .view-all-users:hover { color: #B4C669; text-decoration: none; background-color: transparent; @@ -2492,12 +2490,17 @@ button.follow:hover, .mini-profile-actions span.follow:hover, button.unfollow, . /***********TOP TRENDS************** */ .module.toptrends { - padding: 8px 4px; + margin-bottom: 20px; +} + +.toptrends small { + display: none; } .toptrends h3 { float: left; } + /* line 534, ../sass/style.sass */ ol.toptrends-list { margin: 0; @@ -2526,26 +2529,15 @@ ol.toptrends-list a:hover { /********* TWISTDAY REMINDER *******/ -.module.twistday-reminder { - padding: 8px 4px; - top: 30%; -} - .twistday-reminder { - width: inherit; + width: 300px; } .twistday-reminder small { display: none; } -.twistday-reminder ol { - clear: both; -} - .twistday-reminder h3 { - margin: 5% 0% 2% 5%; - display: inline; float: left; } @@ -2559,12 +2551,9 @@ ol.toptrends-list a:hover { text-decoration: none; } -.twistday-reminder .list { - width: 300px; - margin: 0% 5% 5% 5%; - padding: 5px; +.twistday-reminder .twister-user-info { + margin-top: 8px; } - .twistday-reminder .twister-user-tag, .twistday-reminder .twister-user-full { display: block; @@ -2572,9 +2561,13 @@ ol.toptrends-list a:hover { text-align: center; } +.twistday-reminder img.twister-user-photo { + margin: 0; +} + .twistday-reminder .twisterday { font-size: 80%; - margin: 0 11%; + margin-left: 8%; } /*********** POPUP PROMPT ************ */ @@ -2778,14 +2771,10 @@ ol.toptrends-list a:hover { /********** RETWIST POSTS PROMPT ********* */ /* line 705, ../sass/style.sass */ -.reTwist { +.reTwist.prompt-wrapper { margin-top: -110px; } -.reTwist .modal-wrapper { - width: 520px; - top: 20%; - margin: 0 0 0 -260px; -} + .reTwist .modal-content { padding: 20px 15px; @@ -2801,10 +2790,8 @@ ol.toptrends-list a:hover { /********* REPLY POSTS MODAL************** */ /* line 715, ../sass/style.sass */ -.reply .modal-wrapper { - width: 520px; - top: 20%; - margin: 0 0 0 -260px; +.reply.prompt-wrapper { + margin-top: -110px; } /* line 719, ../sass/style.sass */ .reply .modal-buttons, .reply .post-expand, .reply .post-interactions { @@ -3085,15 +3072,15 @@ ol.toptrends-list a:hover { /* line 943, ../sass/style.sass */ .who-to-follow-modal .modal-wrapper { width: 520px; - top: 10%; - height: 455px; - margin: 0 0 0 -260px; + top: 50%; + height: 555px; + margin: -275px 0 0 -260px; overflow-x: hidden; } /* line 949, ../sass/style.sass */ .who-to-follow-modal .modal-content { padding: 15px; - height: 400px; + height: 480px; overflow-y: auto; } /* line 953, ../sass/style.sass */ @@ -3123,6 +3110,7 @@ ol.toptrends-list a:hover { /* line 968, ../sass/style.sass */ .who-to-follow-modal .twister-user-info { position: relative; + margin-top: 4px; padding-left: 70px; width: auto; } @@ -3134,11 +3122,12 @@ ol.toptrends-list a:hover { /******* LOADER ************ */ /* line 978, ../sass/style.sass */ -.postboard-loading { +.postboard-loading, .loading-roller { + clear: both; text-align: center; } /* line 980, ../sass/style.sass */ -.postboard-loading div { +.postboard-loading div, .loading-roller div { display: inline-block; width: 120px; height: 10px; @@ -3147,7 +3136,7 @@ ol.toptrends-list a:hover { margin: 10px 0 0 0; } /* line 987, ../sass/style.sass */ -.postboard-loading div:after { +.postboard-loading div:after, .loading-roller div:after { content: ""; position: absolute; background-color: white; @@ -3306,9 +3295,7 @@ ul.dropdown-menu .active, ul.dropdown-menu .active a { /* line 14, ../sass/_responsive.sass */ .following-list li, .twistday-reminder li { - width: 47%; float: left; - margin: 0 2% 2% 0; font-size: 80%; } } @@ -3333,7 +3320,7 @@ ul.dropdown-menu .active, ul.dropdown-menu .active a { } /* line 32, ../sass/_responsive.sass */ - .who-to-follow, .toptrends, .twistday-reminder { + .module.who-to-follow, .module.toptrends, .module.twistday-reminder { display: none; } diff --git a/theme_nin/sass/_fonts.sass b/theme_nin/sass/_fonts.sass index 17958758..8f0af4a6 100755 --- a/theme_nin/sass/_fonts.sass +++ b/theme_nin/sass/_fonts.sass @@ -180,7 +180,7 @@ /* ''*/ -.icon-arrows:before +.icon-arrows:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before content: '\e814' /* ''*/ @@ -193,4 +193,4 @@ .icon-bell:before content: '\e816' -/* '' */ \ No newline at end of file +/* '' */ diff --git a/theme_nin/sass/_responsive.sass b/theme_nin/sass/_responsive.sass index 589800fc..f93decc5 100644 --- a/theme_nin/sass/_responsive.sass +++ b/theme_nin/sass/_responsive.sass @@ -11,10 +11,8 @@ .postboard width: 100% - .following-list li - width: 47% + .following-list li, .twistday-reminder li float: left - margin: 0 2% 2% 0 font-size: 80% @media (max-width: 900px) @@ -29,12 +27,13 @@ .postboard margin: 0 padding: 10px - .who-to-follow, .toptrends - display: none + .module + .who-to-follow, .toptrends, .twistday-reminder + display: none .mini-profile .post-area, .post-area-new display: none - .following-list li + .following-list li, .twistday-reminder li width: 98% float: none margin: 2% 1% diff --git a/theme_nin/sass/style.sass b/theme_nin/sass/style.sass index 6c3e78f9..aea2fd79 100755 --- a/theme_nin/sass/style.sass +++ b/theme_nin/sass/style.sass @@ -62,12 +62,7 @@ padding-top: 70px height: 100% &.right - display: block - position: absolute - right: 0 - .module - position: fixed - height: 100% + margin-left: 880px; @extend .clear-fix @@ -434,11 +429,12 @@ textarea.splited-post -/****** WHO TO FOLLOW *******/ +/******** WHO TO FOLLOW ********/ .who-to-follow - width: inherit - margin-bottom: 20px + &.module + width: inherit + margin-bottom: 20px small display: none h3 @@ -446,6 +442,8 @@ textarea.splited-post ol @extend .clear-fix clear: both + .twister-user-info + margin-top: 8px .twister-user clear: both @@ -476,7 +474,7 @@ textarea.splited-post font-size: 12px color: $dark-grey label, a - display: block + display: inline-block .followed-by color: $main-color-light @@ -516,7 +514,7 @@ textarea.splited-post .twister-user-remove:hover opacity: 1 -.refresh-toptrends, .refresh-users +.refresh-toptrends, .twistday-reminder .refresh, .refresh-users @extend .icon-arrows @extend .extend-icon color: $main-color-dark @@ -544,7 +542,7 @@ textarea.splited-post margin: 0 0 0 15px position: relative -.refresh-toptrends:hover, .refresh-users:hover, .view-all-users:hover +.refresh-toptrends:hover, .twistday-reminder .refresh:hover, .refresh-users:hover, .view-all-users:hover color: $main-color-color text-decoration: none background-color: transparent @@ -552,6 +550,10 @@ textarea.splited-post /***********TOP TRENDS***************/ .toptrends + &.module + margin-bottom: 20px + small + display: none h3 float: left @@ -576,7 +578,31 @@ ol.toptrends-list background: white color: $main-color-dark +/********* TWISTDAY REMINDER *******/ +.twistday-reminder + width: 300px + small + display: none + h3 + float: left + h4 + margin: 1% 1% 1% 16% + font-size: 90% + color: rgba(0, 0, 0, 0.5) + a:hover + text-decoration: none + .twister-user-info + margin-top: 8px + .twister-user-tag, .twister-user-full + display: block + margin: 0 + text-align: center + img.twister-user-photo + margin: 0 + .twisterday + font-size: 80% + margin-left: 8% /*********** POPUP PROMPT *************/ .prompt-wrapper @@ -728,11 +754,8 @@ ol.toptrends-list /************ RETWIST POSTS MODAL **********/ .reTwist - margin-top: -110px - .modal-wrapper - width: $postboard-modal-width - top: 20% - margin: 0 0 0 0-($postboard-modal-width/2) + &.prompt-wrapper + margin-top: -110px .modal-content padding: 20px 15px .modal-buttons @@ -744,10 +767,8 @@ ol.toptrends-list /********* REPLY POSTS MODAL***************/ .reply - .modal-wrapper - width: $postboard-modal-width - top: 20% - margin: 0 0 0 0-($postboard-modal-width/2) + &.prompt-wrapper + margin-top: -110px .modal-buttons, .post-expand, .post-interactions display: none .post-area @@ -974,13 +995,13 @@ ol.toptrends-list .who-to-follow-modal .modal-wrapper width: $postboard-modal-width - top: 10% - height: 455px - margin: 0 0 0 0-($postboard-modal-width/2) + top: 50% + height: 555px + margin: -275px 0 0 0-($postboard-modal-width/2) overflow-x: hidden .modal-content padding: 15px - height: 400px + height: 480px overflow-y: auto .modal-buttons display: none @@ -999,6 +1020,7 @@ ol.toptrends-list display: block .twister-user-info position: relative + margin-top: 4px padding-left: 70px width: auto .bio @@ -1007,7 +1029,8 @@ ol.toptrends-list /******* LOADER *************/ -.postboard-loading +.postboard-loading, .loading-roller + clear: both text-align: center div display: inline-block @@ -1100,7 +1123,7 @@ ol.toptrends-list #filterLangList width: 90% - #filterLangListCont div, #TopTrendsCont div + #filterLangListCont div, #TopTrendsCont div, #TwistdayReminderCont div float: none padding: 0px 4px