summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorAsaad Mahmood <asaadmahmood@users.noreply.github.com>2017-02-16 19:54:30 +0500
committerHarrison Healey <harrisonmhealey@gmail.com>2017-02-16 09:54:30 -0500
commitc6ffb73999ff4374503ea57d1b1e6485a5bee472 (patch)
treea9784a52220934ab9ba1744cbddbb16ca12b3439 /webapp
parentd60d05f2d86400faf3303e655c46c5b8d77879c4 (diff)
downloadchat-c6ffb73999ff4374503ea57d1b1e6485a5bee472.tar.gz
chat-c6ffb73999ff4374503ea57d1b1e6485a5bee472.tar.bz2
chat-c6ffb73999ff4374503ea57d1b1e6485a5bee472.zip
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
Diffstat (limited to 'webapp')
-rw-r--r--webapp/components/emoji/components/add_emoji.jsx4
-rw-r--r--webapp/components/emoji/components/emoji_list_item.jsx4
-rw-r--r--webapp/components/post_view/components/reaction.jsx6
-rw-r--r--webapp/components/profile_popover.jsx2
-rw-r--r--webapp/components/user_settings/user_settings_general.jsx1
-rw-r--r--webapp/sass/components/_emoticons.scss4
-rw-r--r--webapp/sass/components/_popover.scss22
-rw-r--r--webapp/sass/layout/_post.scss15
-rw-r--r--webapp/sass/layout/_team-sidebar.scss3
-rw-r--r--webapp/sass/responsive/_mobile.scss19
-rw-r--r--webapp/sass/routes/_backstage.scss12
-rw-r--r--webapp/sass/routes/_get-app.scss1
-rw-r--r--webapp/utils/utils.jsx3
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: (
- <img
+ <span
className='emoticon'
- src={this.state.imageUrl}
+ style={{backgroundImage: 'url(' + this.state.imageUrl + ')'}}
/>
)
}}
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 + ':'}
</td>
<td className='emoji-list__image'>
- <img
+ <span
className='emoticon'
- src={EmojiStore.getEmojiImageUrl(emoji)}
+ style={{backgroundImage: 'url(' + EmojiStore.getEmojiImageUrl(emoji) + ')'}}
/>
</td>
<td className='emoji-list__creator'>
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}
>
- <img
- className='post-reaction__emoji'
- src={EmojiStore.getEmojiImageUrl(EmojiStore.get(this.props.emojiName))}
+ <span
+ className='post-reaction__emoji emoticon'
+ style={{backgroundImage: 'url(' + EmojiStore.getEmojiImageUrl(EmojiStore.get(this.props.emojiName)) + ')'}}
/>
<span className='post-reaction__count'>
{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 {
<div
data-toggle='tooltip'
key='user-popover-dm'
- className='popover-dm__content'
+ className='popover__row'
>
<a
href='#'
diff --git a/webapp/components/user_settings/user_settings_general.jsx b/webapp/components/user_settings/user_settings_general.jsx
index 7ac2069ff..d79507511 100644
--- a/webapp/components/user_settings/user_settings_general.jsx
+++ b/webapp/components/user_settings/user_settings_general.jsx
@@ -500,7 +500,6 @@ class UserSettingsGeneralTab extends React.Component {
}}
/>
</div>
- {helpText}
</div>
);
} 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));