From b8fcc0a5c40a0d15db4606766d49b960e59b9bb4 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 2 Nov 2016 19:50:50 +0500 Subject: Multiple UI Improvements (#4420) --- webapp/sass/components/_dropdown.scss | 15 +++++++++------ webapp/sass/components/_modal.scss | 6 +++--- webapp/sass/components/_popover.scss | 6 ++++++ webapp/sass/components/_videos.scss | 4 ++++ webapp/sass/components/_webrtc.scss | 1 + webapp/sass/layout/_post-right.scss | 1 - webapp/sass/layout/_post.scss | 8 +++++++- webapp/sass/responsive/_mobile.scss | 24 +++++++++++++++++++++++- webapp/sass/responsive/_tablet.scss | 8 ++++++++ webapp/sass/routes/_admin-console.scss | 4 ---- webapp/utils/utils.jsx | 4 ++-- 11 files changed, 63 insertions(+), 18 deletions(-) (limited to 'webapp') diff --git a/webapp/sass/components/_dropdown.scss b/webapp/sass/components/_dropdown.scss index 39317358f..0051f09a3 100644 --- a/webapp/sass/components/_dropdown.scss +++ b/webapp/sass/components/_dropdown.scss @@ -17,13 +17,16 @@ @include opacity(.15); } - div > a { - color: inherit; - text-decoration: none; - - &:focus, - &:hover { + div, + li { + > a { color: inherit; + text-decoration: none; + + &:focus, + &:hover { + color: inherit; + } } } } diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 5f22c9a6a..71ed8e693 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -21,7 +21,7 @@ .custom-textarea { max-height: 60vh; - min-height: 8em; + min-height: 20em; } .suggestion-list { @@ -192,7 +192,7 @@ .btn { &.btn-primary { float: right; - margin: -4px 25px 0 0; + margin: -4px 33px 0 0; position: relative; i { @@ -592,7 +592,7 @@ .more-modal__row { border-bottom: 1px solid $light-gray; display: flex; - min-height: 65px; + min-height: 50px; padding: 8px 15px; } diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss index 2840c032e..4ff72da55 100644 --- a/webapp/sass/components/_popover.scss +++ b/webapp/sass/components/_popover.scss @@ -187,6 +187,12 @@ .member-list__popover { max-width: initial; + .more-modal__list { + .more-modal__row { + min-height: inherit; + } + } + .popover-content { max-height: 350px; padding: 0; diff --git a/webapp/sass/components/_videos.scss b/webapp/sass/components/_videos.scss index b2230f71d..93ad5707b 100644 --- a/webapp/sass/components/_videos.scss +++ b/webapp/sass/components/_videos.scss @@ -82,6 +82,10 @@ &.placeholder { height: 500px; } + + .sidebar--right & { + max-width: 100%; + } } .video-loading { diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss index 42d491341..b025ab00c 100644 --- a/webapp/sass/components/_webrtc.scss +++ b/webapp/sass/components/_webrtc.scss @@ -65,6 +65,7 @@ .control-label { @include border-radius(3px); background: #f2f2f2; + color: alpha-color($black, .7); font-size: 14px; font-weight: normal; margin: 1em 0 -1em; diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index 15e9c2d9d..4db717de1 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -51,7 +51,6 @@ hr { border: none; - margin-bottom: 0; } .post-create__container { diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 137ab4f1c..efba5b6f1 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -530,9 +530,15 @@ body.ios { } } + .post__img { + padding-top: 0; + } + .status-wrapper { + height: 14px; + &:after { - bottom: 10px; + bottom: 0; } } diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 3b65f0565..cb25639c9 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -192,7 +192,11 @@ &.post--compact { .status-wrapper { &:after { - bottom: 12px; + bottom: 3px; + + .sidebar--right & { + bottom: 0; + } } } } @@ -1305,6 +1309,24 @@ } @media screen and (max-width: 480px) { + .sidebar--right { + .post { + &.post--compact { + .post__header { + height: auto; + } + } + + .post__header { + .col__name { + .user-popover { + max-width: 100%; + } + } + } + } + } + .backstage-header { h1 { float: none; diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 45fc4fad4..75cdf8ea9 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -1,6 +1,14 @@ @charset 'UTF-8'; @media screen and (max-width: 960px) { + .channel-header { + .search-bar__container { + .search__form { + width: 150px; + } + } + } + .signup-team__container { &.branded { display: block; diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 83c68dc6b..aa90a7eaf 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -172,10 +172,6 @@ margin-bottom: 0.5em; } - .banner__content { - width: 80%; - } - &.warning { background: #e60000; } diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index f1b162c87..888414784 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -544,7 +544,7 @@ export function applyTheme(theme) { if (theme.centerChannelBg) { changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'background:' + theme.centerChannelBg, 1); - changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column, .app__body .suggestion-list__divider > span', 'background:' + theme.centerChannelBg, 1); + changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .modal-footer, .app__body .post.post--compact .post-image__column, .app__body .suggestion-list__divider > span', 'background:' + theme.centerChannelBg, 1); changeCss('#post-list .post-list-holder-by-time, .app__body .post .dropdown-menu a', 'background:' + theme.centerChannelBg, 1); changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); changeCss('.app__body .date-separator .separator__text, .app__body .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1); @@ -568,7 +568,7 @@ export function applyTheme(theme) { changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); changeCss('.app__body .post .dropdown-menu a, .app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.app__body .post.post--system .post__body', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1); - changeCss('.app__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu a, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor, 1); + changeCss('.app__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor, 1); changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65), 1); changeCss('.app__body #archive-link-home, .video-div .video-thumbnail__error', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('.app__body #post-create', 'color:' + theme.centerChannelColor, 2); -- cgit v1.2.3-1-g7c22