From 58e8da11b1aa74327c360e7ca1e44aabee3001a3 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 20 Dec 2016 02:44:13 +0500 Subject: Multiple UI improvements (#4835) * Updating sizes for teams sidebar * PLT-4641 - Rearranging notification option * PLT-4504 - Updating styles for Oauth apps * PLT-4852 - Updating font size for lists * Fix for the unread indicator with teams sidebar --- webapp/components/navbar.jsx | 2 +- webapp/sass/layout/_forms.scss | 2 +- webapp/sass/layout/_post.scss | 1 + webapp/sass/layout/_team-sidebar.scss | 39 +++++++++++++++++++---------------- webapp/sass/responsive/_mobile.scss | 17 +++++++-------- webapp/sass/routes/_settings.scss | 1 - webapp/utils/utils.jsx | 4 ++-- 7 files changed, 33 insertions(+), 33 deletions(-) (limited to 'webapp') diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx index 0a49d2497..07049446d 100644 --- a/webapp/components/navbar.jsx +++ b/webapp/components/navbar.jsx @@ -539,11 +539,11 @@ export default class Navbar extends React.Component { role='menu' > {viewInfoOption} + {notificationPreferenceOption} {addMembersOption} {manageMembersOption} {setChannelHeaderOption} {setChannelPurposeOption} - {notificationPreferenceOption} {renameChannelOption} {deleteChannelOption} {leaveChannelOption} diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss index 100b618e8..7552290d8 100644 --- a/webapp/sass/layout/_forms.scss +++ b/webapp/sass/layout/_forms.scss @@ -23,7 +23,7 @@ .input__help { @include opacity(.8); color: inherit; - margin: 10px 0 0 10px; + margin: 10px 0 0 0; word-break: break-word; &.dark { diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 258b29ed8..370e67729 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -1022,6 +1022,7 @@ li { ul, ol { + font-size: 1em; margin: 0; padding: 0 0 0 20px; } diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss index dd80a4d12..562944984 100644 --- a/webapp/sass/layout/_team-sidebar.scss +++ b/webapp/sass/layout/_team-sidebar.scss @@ -4,7 +4,7 @@ left: 0; position: fixed; text-align: center; - width: 75px; + width: 65px; z-index: 5; .team-wrapper { @@ -14,41 +14,40 @@ padding-top: 15px; .team-container { - width: 100%; - text-align: center; display: table; margin-bottom: 10px; position: relative; + text-align: center; + width: 100%; .team-btn { - border: none; - height: 42px; - text-align: center; + @include border-radius(2px); + background-color: alpha-color($black, .3); + display: table-cell; font-weight: bold; - border-radius: 5px; + height: 35px; position: relative; - width: 42px; - background-color: rgba(0, 0, 0, 0.3); - display: table-cell; + text-align: center; vertical-align: middle; + width: 35px; .badge { + font-size: 10px; position: absolute; - top: -3px; right: -6px; - font-size: 10px; + top: -3px; } } &.active { .team-btn { - border: 1px solid #fff; background-color: transparent; + border: 1px solid $white; } } &.active:before { - background: black; + background: $black; content: ''; height: 100%; left: 0; @@ -58,7 +57,7 @@ } &.unread:before { - background: black; + background: $black; border-radius: 50%; content: ''; height: 5px; @@ -69,8 +68,8 @@ } a.team-disabled { + @include opacity(.5); cursor: not-allowed; - opacity: 0.5; } } @@ -81,10 +80,14 @@ } .sidebar--left { - left: 75px; + left: 65px; + + .nav-pills__unread-indicator { + left: 80px; + } } .app__content { - margin-left: 295px; + margin-left: 285px; } } diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index ab305a5b0..a969a74d5 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1165,9 +1165,6 @@ } .multi-teams { - .team-sidebar { - width: 75px; - } .app__content { margin-left: 0; @@ -1177,7 +1174,11 @@ left: 0; &.move--right { - left: 75px; + left: 65px; + + .nav-pills__unread-indicator { + left: 15px; + } } } @@ -1521,15 +1522,11 @@ @media screen and (max-width: 320px) { .multi-teams { - .team-sidebar { - width: 65px; - } - .sidebar--left { width: 220px; - &.move--right { - left: 65px; + .nav-pills__unread-indicator { + width: 190px; } } } diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss index 6b7f8a5f1..a150e8904 100644 --- a/webapp/sass/routes/_settings.scss +++ b/webapp/sass/routes/_settings.scss @@ -15,7 +15,6 @@ } .authorized-apps__wrapper { - background-color: #fff; padding: 10px 0; } diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 7f9af571f..38d59a82c 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -610,7 +610,7 @@ export function applyTheme(theme) { changeCss('.app__body .date-separator .separator__hr, .app__body .modal-footer, .app__body .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .search-item-container, .app__body .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1)); changeCss('.app__body .modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3)); - changeCss('.app__body .channel-intro, .app__body .modal .settings-modal .settings-table .settings-content .divider-dark, .app__body hr, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); + changeCss('.app__body .channel-intro, .app__body .modal .settings-modal .settings-table .settings-content .divider-dark, .app__body hr, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header, .app__body .user-settings .authorized-app:not(:last-child)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .post.current--user .post__body, .app__body .post.post--comment.other--root.current--user .post-comment, .app__body pre, .app__body .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.05)); changeCss('.app__body .post.post--comment.other--root.current--user .post-comment, .app__body .more-modal__list .more-modal__row, .app__body .member-div:first-child, .app__body .member-div, .app__body .access-history__table .access__report, .app__body .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1)); changeCss('@media(max-width: 1800px){.app__body .inner-wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07)); @@ -637,7 +637,7 @@ export function applyTheme(theme) { changeCss('.app__body .channel-header__info .status .offline--icon', 'fill:' + theme.centerChannelColor); changeCss('.app__body .navbar .status .offline--icon', 'fill:' + theme.centerChannelColor); changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.25)); - changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'color:' + changeOpacity(theme.centerChannelColor, 0.6)); + changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'color:' + changeOpacity(theme.centerChannelColor, 0.7)); } if (theme.newMessageSeparator) { -- cgit v1.2.3-1-g7c22