From c6ffb73999ff4374503ea57d1b1e6485a5bee472 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 16 Feb 2017 19:54:30 +0500 Subject: Multiple Ui improvements (#5398) * PLT-5475 - Adjusting tutorials on mobile * PLT-5475 - Adjusting tutorials on mobile * PLT-5457 - Adjusting save button * PLT-5443 - Updating highllight on status compact * PLT-5413 - Team sidebar not scrolling * PLT-5358 - Maintaing aspect ratio for emojis * PLT-5411 - Removing help text from LDAP signin * PLT-5420 - Updating emoticon for headings * Updating emoji size * Updating emoji size * Removing emoticon tag * Updating emoticon sizes * Updating emoji size --- webapp/components/emoji/components/add_emoji.jsx | 4 ++-- .../emoji/components/emoji_list_item.jsx | 4 ++-- .../components/post_view/components/reaction.jsx | 6 +++--- webapp/components/profile_popover.jsx | 2 +- .../user_settings/user_settings_general.jsx | 1 - webapp/sass/components/_emoticons.scss | 4 +++- webapp/sass/components/_popover.scss | 22 ++++++---------------- webapp/sass/layout/_post.scss | 15 +++++++++------ webapp/sass/layout/_team-sidebar.scss | 3 ++- webapp/sass/responsive/_mobile.scss | 19 +++++++++++++------ webapp/sass/routes/_backstage.scss | 12 ++++-------- webapp/sass/routes/_get-app.scss | 1 + webapp/utils/utils.jsx | 3 ++- 13 files changed, 48 insertions(+), 48 deletions(-) diff --git a/webapp/components/emoji/components/add_emoji.jsx b/webapp/components/emoji/components/add_emoji.jsx index e496e42a0..53c7ecccf 100644 --- a/webapp/components/emoji/components/add_emoji.jsx +++ b/webapp/components/emoji/components/add_emoji.jsx @@ -186,9 +186,9 @@ export default class AddEmoji extends React.Component { defaultMessage='This is a sentence with {image} in it.' values={{ image: ( - ) }} diff --git a/webapp/components/emoji/components/emoji_list_item.jsx b/webapp/components/emoji/components/emoji_list_item.jsx index dc27f3691..f2ed82ba7 100644 --- a/webapp/components/emoji/components/emoji_list_item.jsx +++ b/webapp/components/emoji/components/emoji_list_item.jsx @@ -98,9 +98,9 @@ export default class EmojiListItem extends React.Component { {':' + emoji.name + ':'} - diff --git a/webapp/components/post_view/components/reaction.jsx b/webapp/components/post_view/components/reaction.jsx index 0056953b0..79a8b70df 100644 --- a/webapp/components/post_view/components/reaction.jsx +++ b/webapp/components/post_view/components/reaction.jsx @@ -188,9 +188,9 @@ export default class Reaction extends React.Component { className={className} onClick={handleClick} > - {this.props.reactions.length} diff --git a/webapp/components/profile_popover.jsx b/webapp/components/profile_popover.jsx index 22cf60004..fc22c1314 100644 --- a/webapp/components/profile_popover.jsx +++ b/webapp/components/profile_popover.jsx @@ -244,7 +244,7 @@ export default class ProfilePopover extends React.Component {
- {helpText} ); } else if (this.props.user.auth_service === Constants.SAML_SERVICE) { diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss index 4ae27aed4..c5c4ca936 100644 --- a/webapp/sass/components/_emoticons.scss +++ b/webapp/sass/components/_emoticons.scss @@ -6,7 +6,9 @@ background-size: contain; display: inline-block; height: 20px; - vertical-align: text-top; + min-height: 1em; + min-width: 1em; + vertical-align: middle; width: 20px; } diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss index b4839bd1f..6b1c57725 100644 --- a/webapp/sass/components/_popover.scss +++ b/webapp/sass/components/_popover.scss @@ -35,26 +35,16 @@ } } - .popover-dm__content { - -webkit-border-radius: 0; - -moz-border-radius: 0; - -ms-border-radius: 0; - -o-border-radius: 0; - border-radius: 0; - max-width: 100%; - overflow: hidden; - padding: 5px 5px 5px 0px; - text-overflow: ellipsis; - margin: 0; - font-size: 14px; - border-top: 1px solid #ebebeb; - border-color: rgba(221, 221, 221, 0.2); - margin-top: 5px; - margin-bottom: -5px; + .popover__row { + border-top: 1px solid transparent; + margin: 9px -15px 0; + padding: 9px 15px 0; + > a { > i { margin-right: 5px; } + > span { text-transform: capitalize; } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 7915b7150..6afcf099a 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -575,14 +575,16 @@ .status { bottom: auto; - left: -3px; + height: 13px; + left: -2px; position: relative; right: auto; top: auto; + width: 13px; } svg { - top: 0; + top: 1px; } &:after { @@ -1023,7 +1025,7 @@ word-wrap: break-word; div { - margin: 0 0 .4em; + margin-bottom: .4em; } p + p { @@ -1135,10 +1137,11 @@ padding: 0 4px 0 3px; .post-reaction__emoji { - height: 16px; + height: auto; margin: 2px 3px 0 0; - vertical-align: top; - width: 16px; + max-height: 16px; + max-width: 16px; + vertical-align: middle; } .post-reaction__count { diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss index a600b8d44..cb003c828 100644 --- a/webapp/sass/layout/_team-sidebar.scss +++ b/webapp/sass/layout/_team-sidebar.scss @@ -8,7 +8,8 @@ z-index: 5; .team-wrapper { - background-color: rgba(0, 0, 0, 0.2); + -webkit-overflow-scrolling: touch; + background-color: alpha-color($black, .2); height: 100%; overflow: auto; padding-top: 15px; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index a7dd68b87..d1fc10428 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1556,17 +1556,24 @@ } .tutorial-steps__container { + left: 0; + position: fixed; + top: 0; + .tutorial__content { .tutorial__steps { + margin-top: 20px; + min-height: auto; padding: 0 20px; width: 100%; h1 { - font-size: 35px; + font-size: 2em; margin: -5px 0 20px; } h3 { + font-size: 1.5em; margin-bottom: 10px; } @@ -1575,14 +1582,14 @@ } .tutorial__circles { - bottom: 60px; - margin: 0 0 15px; - position: absolute; + bottom: auto; + margin: 15px 0 20px; + position: relative; } .tutorial__footer { - bottom: 30px; - position: absolute; + bottom: auto; + position: relative; } } } diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss index 290e13005..5274a583e 100644 --- a/webapp/sass/routes/_backstage.scss +++ b/webapp/sass/routes/_backstage.scss @@ -396,22 +396,22 @@ } .emoji-list__name { - padding: 20px 0px 20px 15px; + padding: 20px 0 20px 15px; width: 30%; } .emoji-list__image { - padding: 15px 0px; + padding: 15px 0; width: 15%; } .emoji-list__creator { - padding: 15px 0px; + padding: 15px 0; width: 40%; } .emoji-list__actions { - padding: 20px 15px 20px 0px; + padding: 20px 15px 20px 0; width: 15%; } @@ -434,8 +434,4 @@ .add-emoji__filename, .add-emoji__preview { padding-top: 7px; - - .emoticon { - margin-bottom: 0; - } } diff --git a/webapp/sass/routes/_get-app.scss b/webapp/sass/routes/_get-app.scss index 88797d053..4d018fd78 100644 --- a/webapp/sass/routes/_get-app.scss +++ b/webapp/sass/routes/_get-app.scss @@ -19,6 +19,7 @@ .get-app__continue-with-browser { display: block; margin-top: 40px; + padding-bottom: 30px; text-align: center; } } diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 40b049542..1d91ff788 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -548,6 +548,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); + changeCss('@media(max-width: 320px){.tutorial-steps__container', 'background:' + theme.centerChannelBg); 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, .app__body .status-wrapper .status', 'background:' + theme.centerChannelBg); changeCss('#post-list .post-list-holder-by-time, .app__body .post .dropdown-menu a', 'background:' + theme.centerChannelBg); changeCss('#post-create', 'background:' + theme.centerChannelBg); @@ -594,7 +595,7 @@ export function applyTheme(theme) { changeCss('.app__body .popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25)); changeCss('.app__body .popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25)); changeCss('.app__body .suggestion-list__content .command, .app__body .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); - changeCss('.app__body .suggestion-list__content .command, .app__body .popover .popover-dm__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); + changeCss('.app__body .suggestion-list__content .command, .app__body .popover .popover__row', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .suggestion-list__divider:before, .app__body .dropdown-menu .divider, .app__body .search-help-popover .search-autocomplete__divider:before', 'background:' + theme.centerChannelColor); changeCss('.app__body .custom-textarea', 'color:' + theme.centerChannelColor); changeCss('.app__body .post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); -- cgit v1.2.3-1-g7c22