From f1679cb2a0435834ae5e2e3284e686830753d06a Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 4 Jan 2017 04:23:27 +0500 Subject: Ui improvements (#4900) * PLT-5091 - Updating teams sidebar style * PLT-4650 - Updating bot indicator * Removing text decoration * Fixing dropdown menu in admin console * Updating bot indicator position on desktop * Updating bot indicator on mobile * Moving bot indicator below for mobile * Adding bg to the bot indicator * Updating css for bot indicator in compact view --- webapp/sass/layout/_post.scss | 6 ++--- webapp/sass/layout/_team-sidebar.scss | 6 ++++- webapp/sass/responsive/_mobile.scss | 8 ++++++ webapp/sass/responsive/_tablet.scss | 2 +- webapp/sass/routes/_admin-console.scss | 48 ++++++++++++++++++---------------- webapp/utils/utils.jsx | 4 +-- 6 files changed, 44 insertions(+), 30 deletions(-) diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 7d1125b19..fae09a21a 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -1234,10 +1234,10 @@ .bot-indicator { border-radius: 2px; font-family: inherit; - font-size: 11px; + font-size: 10px; font-weight: 600; - margin: 0 10px 0 -4px; - padding: 2px 4px; + margin: 2px 10px 0 -4px; + padding: 1px 4px; } .permalink-text { diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss index 2bf072ed0..52f2dbd06 100644 --- a/webapp/sass/layout/_team-sidebar.scss +++ b/webapp/sass/layout/_team-sidebar.scss @@ -20,10 +20,14 @@ text-align: center; width: 100%; + a { + text-decoration: none; + } + .team-btn { @include border-radius(2px); background-color: alpha-color($black, .3); - border: 1px solid transparent; + border: 1px solid alpha-color($white, .2); display: table-cell; font-size: 12px; font-weight: bold; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 39f2b1a35..b0302afba 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -175,6 +175,14 @@ } .post { + &:not(.post--compact) { + .bot-indicator { + left: 6px; + position: absolute; + top: 31px; + } + } + .post__dropdown { display: inline-block; height: 28px; diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 64b8ab6dd..5e5e6180a 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -16,7 +16,7 @@ } .heading { - max-width: 150px; + max-width: 110px; } } diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 6ab1645e8..64fad6aec 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -245,38 +245,38 @@ .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; + overflow: hidden; } +} - .member-list-holder { - background: $white; - margin-bottom: 4em; - overflow: visible; - padding: 5px 0; +.member-list-holder { + background: $white; + margin-bottom: 4em; + overflow: visible; + padding: 5px 0; - .more-modal__list { - overflow: visible; - } + .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 { @@ -299,8 +299,10 @@ z-index: 5; .dropdown-menu { + max-height: 80vh; max-width: 200px; min-width: 200px; + overflow: auto; } .team__header { diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 1ddb28690..e7ed9567b 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -618,8 +618,8 @@ export function applyTheme(theme) { changeCss('.app__body .post.post--hovered', 'background:' + changeOpacity(theme.centerChannelColor, 0.08)); changeCss('@media(min-width: 768px){.app__body .post:hover, .app__body .more-modal__list .more-modal__row:hover, .app__body .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.08)); changeCss('.app__body .date-separator.hovered--before:after, .app__body .date-separator.hovered--after:before, .app__body .new-separator.hovered--after:before, .app__body .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07)); - changeCss('@media(min-width: 768px){.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15)); - changeCss('.app__body .suggestion--selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); + changeCss('@media(min-width: 768px){.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.15)); + changeCss('.app__body .suggestion--selected, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('code, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1)); changeCss('@media(min-width: 960px){.app__body .post.current--user:hover .post__body ', 'background: none;'); changeCss('.app__body .sidebar--right', 'color:' + theme.centerChannelColor); -- cgit v1.2.3-1-g7c22