From 28d07758fc77591a08ebc4f8a0c5696eda8935d5 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 6 Jan 2017 19:04:11 +0500 Subject: Bug fixes for search and direct messages (#4986) * PLT-5145 - Fixing search popover on mobile * PLT-5093 - Fixing direct messages list height --- webapp/sass/components/_modal.scss | 51 ++++++++++++---------------------- webapp/sass/components/_popover.scss | 5 +++- webapp/sass/responsive/_mobile.scss | 45 +++++++++++++++--------------- webapp/sass/routes/_admin-console.scss | 51 +++++++++++++++++----------------- 4 files changed, 69 insertions(+), 83 deletions(-) (limited to 'webapp/sass') diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index d17ba1706..81c241986 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -24,6 +24,10 @@ min-height: 8em; } + .suggestion-list { + bottom: -149px; + } + .suggestion-list__content { max-height: 150px; } @@ -460,24 +464,10 @@ float: right; margin-top: 5px; } - - .more-modal__list { - max-height: calc(100vh - 270px); - } } } .more-modal { - .more-modal__list { - height: 100vh; - max-height: calc(100vh - 340px); - } - - &.more-direct-channels { - .more-modal__list { - max-height: calc(100vh - 325px); - } - } .user-list { margin-top: 10px; @@ -492,7 +482,6 @@ } .filter-row { - @include clearfix; margin: 5px 0 10px; width: 300px; } @@ -557,7 +546,11 @@ .more-modal__list { display: flex; flex-direction: column; - overflow: auto; + + > div { + min-height: 100%; + overflow: auto; + } .popover & { font-size: .95em; @@ -602,6 +595,7 @@ .more-modal__actions { flex-grow: 0; flex-shrink: 0; + margin: 5px 0 10px; padding-left: 20px; } @@ -624,8 +618,7 @@ .more-modal__row { border-bottom: 1px solid $light-gray; display: flex; - min-height: 70px; - padding: 8px 15px; + padding: 10px 15px; } p { @@ -646,16 +639,15 @@ .filtered-user-list { display: flex; flex-direction: column; + height: calc(90vh - 120px); width: 100%; - .filter-row { - flex-grow: 0; - flex-shrink: 0; + > div { + flex: 1; } - .user-list { - flex-grow: 1; - flex-shrink: 1; + .more-modal__list { + flex-grow: 500; } .filter-button { @@ -665,9 +657,6 @@ } .filter-controls { - @include clearfix; - flex-grow: 0; - flex-shrink: 0; padding: 1em 1.5em 0; .filter-control__next { @@ -679,10 +668,4 @@ margin-left: 0; padding-left: 0; } -} - -.channel-switch-modal { - .modal-body { - overflow: visible; - } -} +} \ No newline at end of file diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss index 31ef83d6a..1f5ed7248 100644 --- a/webapp/sass/components/_popover.scss +++ b/webapp/sass/components/_popover.scss @@ -94,10 +94,13 @@ .search-help-popover { font-size: em(13px); - margin-top: 17px !important; max-width: 300px; width: 100%; + &:not(.autocomplete) { + margin-top: 17px !important; + } + &.autocomplete { display: block; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index d9a929690..8fcf2e94e 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -427,8 +427,14 @@ } .search-help-popover { + left: 0 !important; margin-left: 10px; - max-width: calc(100% - 20px); + max-width: calc(100% - 80px); + + .focused & { + left: 45px !important; + margin-top: 50px; + } } .modal-direct-channels, @@ -1085,7 +1091,7 @@ .post-error { top: 0; left: 0; - } + } } } @@ -1214,6 +1220,16 @@ } @media screen and (max-width: 640px) { + .filtered-user-list { + height: calc(100vh - 80px); + } + + .more-modal--action { + .filtered-user-list { + height: calc(100vh - 110px); + } + } + .app__body { .modal { .more-modal { @@ -1221,10 +1237,6 @@ max-height: calc(100vh - 62px); padding-bottom: 5px; } - - .more-modal__list { - max-height: calc(100vh - 230px); - } } } @@ -1385,15 +1397,14 @@ @media screen and (max-width: 550px) { .app__body { .more-modal { - .filter-row { - width: 100%; - } - - &.more-direct-channels { + &.more-system-members { .filter-row { - padding-bottom: 50px; + min-height: 80px; + width: 100%; } + } + &.more-direct-channels { .member-show { display: none; } @@ -1451,16 +1462,6 @@ .app__body { .modal { - &.more-channel__modal { - .more-modal__list { - max-height: calc(100vh - 250px); - } - - .modal-body { - padding-bottom: 35px; - } - } - .settings-modal { &.display--content { .modal-body { diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 64fad6aec..56199a545 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -245,38 +245,37 @@ .more-modal__list { .filtered-user-list { - .filter-controls { - padding-bottom: 1em; + .filter-controls { + padding-bottom: 1em; + } } - } - .filter-row { - margin: 10px 0; - overflow: hidden; + .filter-row { + margin: 10px 0; + } } -} - -.member-list-holder { - background: $white; - margin-bottom: 4em; - overflow: visible; - padding: 5px 0; - .more-modal__list { + .member-list-holder { + background: $white; + margin-bottom: 4em; overflow: visible; - } + padding: 5px 0; + + .more-modal__list { + overflow: visible; + } - .more-modal__row { - &:last-child { - border: none; + .more-modal__row { + &:last-child { + border: none; + } } } -} -.member-count { - @include opacity(.7); - margin-top: 8px; -} + .member-count { + @include opacity(.7); + margin-top: 8px; + } } .brand-img { @@ -469,13 +468,13 @@ } .cluster-status { - width: 24px; height: 24px; + width: 24px; } .config-hash { - width: 130px; - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; + width: 130px; } -- cgit v1.2.3-1-g7c22 From 657d4101f9a5e04edcbab2d84d6467c18aa395bf Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Fri, 6 Jan 2017 09:04:17 -0500 Subject: Fixed post height changes caused by reactions (#4982) --- webapp/sass/layout/_post.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'webapp/sass') diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 1e7b45fba..cd32ba55e 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -1252,6 +1252,10 @@ min-width: 320px; } +.post-reaction-list { + min-height: 30px; +} + .post-reaction { @include user-select(none); @include border-radius(3px); -- cgit v1.2.3-1-g7c22 From 93a526f7ed5464e18e11137f798d09c0561b16a8 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 9 Jan 2017 19:32:27 +0500 Subject: PLT-5179 - Fixing modal overflow for autocomplete (#5002) * PLT-5179 - Fixing modal overflow for autocomplete * PLT-5171 - Fixing search bar popover behaviour --- webapp/sass/components/_modal.scss | 5 ----- webapp/sass/components/_popover.scss | 16 ++++++++++------ webapp/sass/responsive/_mobile.scss | 8 +------- 3 files changed, 11 insertions(+), 18 deletions(-) (limited to 'webapp/sass') diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 81c241986..ac2c3acd4 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -12,7 +12,6 @@ .modal-body { max-height: calc(90vh - 62px); - overflow: auto; padding: 20px 15px; } @@ -24,10 +23,6 @@ min-height: 8em; } - .suggestion-list { - bottom: -149px; - } - .suggestion-list__content { max-height: 150px; } diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss index 1f5ed7248..b4839bd1f 100644 --- a/webapp/sass/components/_popover.scss +++ b/webapp/sass/components/_popover.scss @@ -93,21 +93,20 @@ } .search-help-popover { + @include single-transition(opacity, .3s, ease-in); font-size: em(13px); - max-width: 300px; + max-width: 350px; + top: 36px; + visibility: hidden; width: 100%; - &:not(.autocomplete) { - margin-top: 17px !important; - } - &.autocomplete { display: block; .popover-content { - -webkit-overflow-scrolling: touch; padding: 10px; position: relative; + -webkit-overflow-scrolling: touch; } } @@ -206,6 +205,11 @@ .tooltip-inner { max-width: 100%; } + + &.visible { + @include opacity(1); + visibility: visible; + } } .member-list__popover { diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 8fcf2e94e..bd39f6af7 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -427,14 +427,8 @@ } .search-help-popover { - left: 0 !important; - margin-left: 10px; + left: 55px; max-width: calc(100% - 80px); - - .focused & { - left: 45px !important; - margin-top: 50px; - } } .modal-direct-channels, -- cgit v1.2.3-1-g7c22 From de822a3f3c346490cdd0f28c618b8abb98b42ba5 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 10 Jan 2017 00:22:35 +0500 Subject: Minor UI fixes (#5023) * PLT-5207 - Enabling scroll in settings modal * PLT-5194 - Removing status indicator on mobile --- webapp/sass/responsive/_mobile.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'webapp/sass') diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index bd39f6af7..11b6312c9 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -20,6 +20,12 @@ } } + .settings-modal { + .modal-body { + overflow: auto; + } + } + #header-popover { @include single-transition(all, .35s, ease); @include translate3d(0, 100%, 0); @@ -344,10 +350,6 @@ } .post__img { - .status-wrapper { - display: inline-block; - } - img { display: block; } -- cgit v1.2.3-1-g7c22 From 056be669fc99eaa23905fb79ce970ac87302bd69 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 10 Jan 2017 21:36:43 +0500 Subject: PLT-5191 - Filter box overlapping fix for IE (#5034) * PLT-5191 - Filter box overlapping fix for IE * Updating flex value for direct divs --- webapp/sass/components/_modal.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'webapp/sass') diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index ac2c3acd4..83f2ef907 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -542,6 +542,10 @@ display: flex; flex-direction: column; + .browser--ie & { + flex: 20; + } + > div { min-height: 100%; overflow: auto; @@ -638,7 +642,7 @@ width: 100%; > div { - flex: 1; + flex: 1 1 auto; } .more-modal__list { -- cgit v1.2.3-1-g7c22