From 84a0b78d66a785ce6bd9d4978d14ded3f782c683 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Fri, 6 Nov 2015 19:30:15 +0500 Subject: [PATCH 1/5] #fix of group profile modal: show scroll-bar if member list doesn't fit to window --- css/style.css | 3 +++ sass/layout/_profile.sass | 6 +++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 84beee5..23dcdfc 100644 --- a/css/style.css +++ b/css/style.css @@ -1112,6 +1112,9 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { .profile-modal .modal-content .profile-data { background: none; } +.profile-modal .modal-content .members { + overflow-y: auto; +} .profile-modal h2.profile-screen-name { display: block; diff --git a/sass/layout/_profile.sass b/sass/layout/_profile.sass index 6139b51..2f56bd3 100644 --- a/sass/layout/_profile.sass +++ b/sass/layout/_profile.sass @@ -15,7 +15,6 @@ $modal-postboard-post-height: 100% .profile-modal - .modal-content overflow: hidden padding: 0 @@ -28,13 +27,11 @@ $modal-postboard-post-height: 100% height: 100% position: absolute - .postboard-posts display: block height: $modal-postboard-post-height overflow: auto - .profile-card margin: 0 padding: 0 @@ -42,6 +39,9 @@ $modal-postboard-post-height: 100% .profile-data background: none + .members + overflow-y: auto + .profile-modal h2.profile-screen-name display: block From 823b62b651c2c57f8c0311fd920cb4a4f5db1e24 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Fri, 6 Nov 2015 20:51:53 +0500 Subject: [PATCH 2/5] add 'change DM's group description' related CSS rules --- css/style.css | 24 ++++++++++++++++++++++++ sass/layout/_groupchat.sass | 26 +++++++++++++++++++++++++- 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 23dcdfc..0a8afc4 100644 --- a/css/style.css +++ b/css/style.css @@ -1714,6 +1714,30 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { border: 1px solid #ebebeb; } +.profile-card[data-screen-name^=\*] .profile-bio { + text-align: center; + margin: 0; +} +.profile-card[data-screen-name^=\*] .profile-bio .group-description { + display: inline-block; + border: 1px solid rgba(0, 0, 0, 0); + background: none; + text-align: center; + width: 58%; + padding: 4px; + vertical-align: middle; +} +.profile-card[data-screen-name^=\*] .profile-bio .group-description:focus { + border: 1px solid rgba(0, 0, 0, .1); + background: white; +} +.profile-card[data-screen-name^=\*] .profile-bio .group-description:hover { + border: 1px solid rgba(0, 0, 0, .1); +} +.profile-card[data-screen-name^=\*] .profile-bio .save, .profile-card[data-screen-name^=\*] .profile-bio .cancel { + display: none; +} + .group-messages-control { text-align: left !important; } diff --git a/sass/layout/_groupchat.sass b/sass/layout/_groupchat.sass index 69e585d..72e19fa 100644 --- a/sass/layout/_groupchat.sass +++ b/sass/layout/_groupchat.sass @@ -59,6 +59,30 @@ border: 1px solid darken( #F8F8F8 , 5%) +// there is no special class for group DM profile modal window currently +.profile-card[data-screen-name^=\*] + .profile-bio + text-align: center + margin: 0 + + .group-description + display: inline-block + border: 1px solid rgba(0, 0, 0, 0) + background: none + text-align: center + width: 58% + padding: 4px + vertical-align: middle + + &:focus + border: 1px solid rgba(0, 0, 0, .1) + background: white + + &:hover + border: 1px solid rgba(0, 0, 0, .1) + + .save, .cancel + display: none // messages control @@ -113,4 +137,4 @@ float: none display: inline-block padding: 7px - @extend .color-1 \ No newline at end of file + @extend .color-1 From ab64c8c5411dea7ce3f4b5d98ba07b96b930f177 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Fri, 6 Nov 2015 21:21:36 +0500 Subject: [PATCH 3/5] tune DM's counters --- css/style.css | 8 ++++++++ sass/layout/_dm.sass | 6 ++++++ sass/style.sass | 1 + 3 files changed, 15 insertions(+) diff --git a/css/style.css b/css/style.css index 0a8afc4..44b483f 100644 --- a/css/style.css +++ b/css/style.css @@ -996,6 +996,13 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { .direct-messages-list .post:hover { background: white; } + +.direct-messages-list .post .messages-qtd { + display: none; + top: 4px; + left: 56px; +} + .direct-messages-list li { position: relative; border-bottom: 1px solid #eee; @@ -2377,6 +2384,7 @@ ul.userMenu-search-profiles button, ul.userMenu-search-profiles .show-more-follo top: 5px; right: 5px; background: #A1B775; + text-align: center; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); color: #fff; width: 25px; diff --git a/sass/layout/_dm.sass b/sass/layout/_dm.sass index 9d4132c..583ef50 100644 --- a/sass/layout/_dm.sass +++ b/sass/layout/_dm.sass @@ -73,6 +73,12 @@ right: 5px .post:hover background: white + + .post .messages-qtd + display: none + top: 4px + left: 56px + li position: relative border-bottom: 1px solid $main-background-color diff --git a/sass/style.sass b/sass/style.sass index 52eda45..3aedb0c 100755 --- a/sass/style.sass +++ b/sass/style.sass @@ -234,6 +234,7 @@ ul.userMenu-search-profiles top: 5px right: 5px background: $main-color-color + text-align: center +text-shadow(1px 1px 0 rgba(#000,.2)) color: #fff width: 25px From 42d40f9c1a32255f0ead9e9eb8de86172490f4b5 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Fri, 6 Nov 2015 21:36:12 +0500 Subject: [PATCH 4/5] tune confirmation pop-up position --- css/style.css | 4 ++++ sass/layout/_prompt.sass | 3 +++ 2 files changed, 7 insertions(+) diff --git a/css/style.css b/css/style.css index 44b483f..c916f3c 100644 --- a/css/style.css +++ b/css/style.css @@ -863,6 +863,10 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { line-height: 0.8rem; } +.confirm-popup.prompt-wrapper { + margin-top: -100px; +} + /************ FOLLOWING-CONFIG MODAL ********* */ .prompt-wrapper.following-config-modal, .direct-messages-thread + .group-messages-control .following-config-modal.invite-form, .mini-profile .following-config-modal.post-area.display { margin-top: -100px; diff --git a/sass/layout/_prompt.sass b/sass/layout/_prompt.sass index 40cfb8f..c07b51a 100644 --- a/sass/layout/_prompt.sass +++ b/sass/layout/_prompt.sass @@ -44,6 +44,9 @@ @extend .ion-shuffle +.confirm-popup.prompt-wrapper + margin-top: -100px + /************ FOLLOWING-CONFIG MODAL **********/ From 3f598a919c9dc13cc64d35eba0aa1f29761b55cc Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Fri, 6 Nov 2015 21:50:57 +0500 Subject: [PATCH 5/5] tune RTs 'twisted again by @' line --- css/style.css | 19 +++++++++++++------ js/theme_option.js | 16 ++++++++-------- sass/layout/_postboard.sass | 15 +++++++++++---- 3 files changed, 32 insertions(+), 18 deletions(-) diff --git a/css/style.css b/css/style.css index c916f3c..7f95c57 100644 --- a/css/style.css +++ b/css/style.css @@ -114,7 +114,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, font-weight: normal; font-style: normal; } -.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .direct-messages-thread + .group-messages-control .invite-form .modal-header span:before, .mini-profile .post-area .modal-header span:before, .prompt-wrapper .switch-mode:before, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-retransmited-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .mini-profile-indicators .userMenu-groupmessages a:before, .mini-profile-indicators .userMenu-collapsePosts a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .view-all-users:before, .ion-after:after, .isFollowing:after, .direct-messages-list .post:after { +.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .direct-messages-thread + .group-messages-control .invite-form .modal-header span:before, .mini-profile .post-area .modal-header span:before, .prompt-wrapper .switch-mode:before, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-rt-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .mini-profile-indicators .userMenu-groupmessages a:before, .mini-profile-indicators .userMenu-collapsePosts a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .view-all-users:before, .ion-after:after, .isFollowing:after, .direct-messages-list .post:after { display: inline-block; font-family: "Ionicons"; speak: none; @@ -128,11 +128,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, -moz-osx-font-smoothing: grayscale; } -.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .direct-messages-thread + .group-messages-control .invite-form .modal-header span:before, .mini-profile .post-area .modal-header span:before, .prompt-wrapper .switch-mode:before, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-retransmited-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .mini-profile-indicators .userMenu-groupmessages a:before, .mini-profile-indicators .userMenu-collapsePosts a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .view-all-users:before { +.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .direct-messages-thread + .group-messages-control .invite-form .modal-header span:before, .mini-profile .post-area .modal-header span:before, .prompt-wrapper .switch-mode:before, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-rt-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .mini-profile-indicators .userMenu-groupmessages a:before, .mini-profile-indicators .userMenu-collapsePosts a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .view-all-users:before { padding: 0 3px; } -.ion:after, .userMenu li.userMenu-config > a:after, .modal-header span:after, .prompt-wrapper .modal-header span:after, .direct-messages-thread + .group-messages-control .invite-form .modal-header span:after, .mini-profile .post-area .modal-header span:after, .prompt-wrapper .switch-mode:after, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:after, .mini-profile .post-area.display .switch-mode:after, .bitmessage-ctc:after, .tox-ctc:after, .profile-modal .profile-tox:after, .profile-modal .profile-bitmessage:after, .post-retransmited-icon:after, .post-interactions span:after, .post-stats li.stat-count:after, .mini-profile-indicators .userMenu-connections a:after, .mini-profile-indicators .userMenu-messages a:after, .mini-profile-indicators .userMenu-user a:after, .mini-profile-indicators .userMenu-groupmessages a:after, .mini-profile-indicators .userMenu-collapsePosts a:after, .twister-user-remove:after, .refresh-toptrends:after, .twistday-reminder .refresh:after, .refresh-users:after, .view-all-users:after, .ion-after:before, .isFollowing:before, .direct-messages-list .post:before { +.ion:after, .userMenu li.userMenu-config > a:after, .modal-header span:after, .prompt-wrapper .modal-header span:after, .direct-messages-thread + .group-messages-control .invite-form .modal-header span:after, .mini-profile .post-area .modal-header span:after, .prompt-wrapper .switch-mode:after, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:after, .mini-profile .post-area.display .switch-mode:after, .bitmessage-ctc:after, .tox-ctc:after, .profile-modal .profile-tox:after, .profile-modal .profile-bitmessage:after, .post-rt-icon:after, .post-interactions span:after, .post-stats li.stat-count:after, .mini-profile-indicators .userMenu-connections a:after, .mini-profile-indicators .userMenu-messages a:after, .mini-profile-indicators .userMenu-user a:after, .mini-profile-indicators .userMenu-groupmessages a:after, .mini-profile-indicators .userMenu-collapsePosts a:after, .twister-user-remove:after, .refresh-toptrends:after, .twistday-reminder .refresh:after, .refresh-users:after, .view-all-users:after, .ion-after:before, .isFollowing:before, .direct-messages-list .post:before { display: none; } @@ -148,7 +148,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, content: ""; } -.ion-shuffle:before, .prompt-wrapper .switch-mode:before, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .post-retransmited-icon:before, .post-interactions span.post-propagate:before, .post-stats li.stat-count:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before { +.ion-shuffle:before, .prompt-wrapper .switch-mode:before, .direct-messages-thread + .group-messages-control .invite-form .switch-mode:before, .mini-profile .post-area.display .switch-mode:before, .post-rt-icon:before, .post-interactions span.post-propagate:before, .post-stats li.stat-count:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before { content: ""; } @@ -1480,11 +1480,18 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { margin: 2px 0 4px 60px; color: #8a8691; } -.post-context.post-retransmited-by-container { + +.post-rt-by { margin: 0 0 1em; } +.post-rt-by div { + display: inline; +} +.post-rt-by .prep:before, .post-rt-by .prep:after { + content: ' '; +} -.post-retransmited-icon:before { +.post-rt-icon:before { display: block; float: left; color: #A1B775; diff --git a/js/theme_option.js b/js/theme_option.js index 086e923..b04819b 100644 --- a/js/theme_option.js +++ b/js/theme_option.js @@ -13,12 +13,12 @@ $(window).load(function() $(document).ready(function() { var windowHeight = $(window).height(); - + testRightSide(); reOrganizeTemplates(); $.globalEval(postToElem.toString().replace(/postContext.append\(_templatePostRtBy/, - 'postContext.addClass(\'post-retransmited-by-container\').prependTo(postContext.parent()).append(_templatePostRtBy')); + 'postContext.prependTo(postContext.parent()).append(_templatePostRtBy')); $( '.userMenu-home.current a' ).on( 'click', function() { $('html, body').animate({scrollTop:0},300); @@ -45,7 +45,7 @@ $(document).ready(function() }); - // Collapse all .post.open + // Collapse all .post.open var allPostButton = $('
  • ').addClass('userMenu-collapsePosts').append('Collapse All'); $('.mini-profile-indicators').append(allPostButton); $(allPostButton).children('a').on('click', function(e) { @@ -82,7 +82,7 @@ function reOrganizeTemplates() { // for nin's templating $('.profile-card-main').attr('style', ''); $('.mini-profile-actions span').html(''); - //group chat + //group chat $('.mini-profile-indicators li.userMenu-groupmessages a span:last-child ').html('Group Msg'); $('button.invite').html('invite'); @@ -94,7 +94,7 @@ function reOrganizeTemplates() { // for nin's templating $('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators')); $('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data')); - ///// page profile + ///// page profile $('.forEdition .profile-card-main h2').detach().insertBefore($('.profile-card-main')); //loader @@ -135,7 +135,7 @@ function reOrganizeTemplates() { // for nin's templating }) .on("eventToggleUnfollow", function() { $(this).text('-').attr('title', polyglot.t('Unfollow')); - }); + }); } // Close new post prompt with esc key @@ -168,7 +168,7 @@ function localizeLabels() { } function openModal(modal) { - + var windowHeight = $(window).height(); if (!modal.classBase) modal.classBase = '.modal-wrapper'; @@ -188,7 +188,7 @@ function openModal(modal) { modal.postboard = modal.self.find('.postboard-posts'); modal.self.prependTo('body').slideDown(); - + if (modal.classBase === '.modal-wrapper') { modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight()); diff --git a/sass/layout/_postboard.sass b/sass/layout/_postboard.sass index d5f3c8d..9fc65f0 100755 --- a/sass/layout/_postboard.sass +++ b/sass/layout/_postboard.sass @@ -197,10 +197,17 @@ margin: 2px 0 4px 60px color: lighten($dark-grey,30%) - &.post-retransmited-by-container - margin: 0 0 1em -.post-retransmited-icon + +.post-rt-by + margin: 0 0 1em + div + display: inline + .prep:before, .prep:after + content: ' ' + + +.post-rt-icon @extend .ion-shuffle @extend .ion &:before @@ -372,4 +379,4 @@ .post-info-time font-size: 80% .post-area - padding-left: 0 \ No newline at end of file + padding-left: 0