diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-05-01 09:18:21 +0500 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2017-05-01 00:18:21 -0400 |
commit | 5ab7726c1ec72678e505b87335eb011f97a09b3c (patch) | |
tree | 196c3727bba1dd0b81fae9b2b26689f0a5652378 | |
parent | 6f6b7e4e97f466ee0f29c96b7fee0d9b98ce751c (diff) | |
download | chat-5ab7726c1ec72678e505b87335eb011f97a09b3c.tar.gz chat-5ab7726c1ec72678e505b87335eb011f97a09b3c.tar.bz2 chat-5ab7726c1ec72678e505b87335eb011f97a09b3c.zip |
Multiple Ui fixes (#6272)
* PLT-6453 - Improving headings in the web app
* PLT-6414 - Fixing view members modal issue
* PLT-5863 - Fixing alignment in new channel menu
* PLT-6391 - Fixing code block overlay
-rw-r--r-- | webapp/components/code_preview.jsx | 22 | ||||
-rw-r--r-- | webapp/components/new_channel_modal.jsx | 2 | ||||
-rw-r--r-- | webapp/components/popover_list_members/popover_list_members.jsx | 3 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 4 | ||||
-rw-r--r-- | webapp/sass/layout/_forms.scss | 2 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 6 | ||||
-rw-r--r-- | webapp/sass/layout/_markdown.scss | 25 | ||||
-rw-r--r-- | webapp/sass/layout/_post-right.scss | 1 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 4 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 9 |
10 files changed, 62 insertions, 16 deletions
diff --git a/webapp/components/code_preview.jsx b/webapp/components/code_preview.jsx index 67088972a..a4a708adf 100644 --- a/webapp/components/code_preview.jsx +++ b/webapp/components/code_preview.jsx @@ -118,16 +118,18 @@ export default class CodePreview extends React.Component { <span className='post-code__language'> {`${this.props.fileInfo.name} - ${language}`} </span> - <code className='hljs'> - <table> - <tbody> - <tr> - <td className='post-code__lineno'>{strlines}</td> - <td dangerouslySetInnerHTML={{__html: highlighted}}/> - </tr> - </tbody> - </table> - </code> + <div className='post-code__container'> + <code className='hljs'> + <table> + <tbody> + <tr> + <td className='post-code__lineno'>{strlines}</td> + <td dangerouslySetInnerHTML={{__html: highlighted}}/> + </tr> + </tbody> + </table> + </code> + </div> </div> ); } diff --git a/webapp/components/new_channel_modal.jsx b/webapp/components/new_channel_modal.jsx index 7f78c53c2..49103b7a8 100644 --- a/webapp/components/new_channel_modal.jsx +++ b/webapp/components/new_channel_modal.jsx @@ -113,7 +113,7 @@ export default class NewChannelModal extends React.Component { } if (this.props.serverError) { - serverError = <div className='form-group has-error'><p className='input__help error'>{this.props.serverError}</p></div>; + serverError = <div className='form-group has-error'><div className='col-sm-12'><p className='input__help error'>{this.props.serverError}</p></div></div>; } let createPublicChannelLink = ( diff --git a/webapp/components/popover_list_members/popover_list_members.jsx b/webapp/components/popover_list_members/popover_list_members.jsx index e435126ff..cf6042943 100644 --- a/webapp/components/popover_list_members/popover_list_members.jsx +++ b/webapp/components/popover_list_members/popover_list_members.jsx @@ -177,8 +177,7 @@ export default class PopoverListMembers extends React.Component { className='more-modal__row' key={'popover-member-more'} > - <div className='col-sm-3'/> - <div className='more-modal__details'> + <div className='more-modal__details text-center'> <div className='more-modal__name' > diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 7e5d0cd3d..6e54d60ff 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -275,6 +275,10 @@ overflow-y: visible; } + .post-code__container { + overflow: auto; + } + .modal-image__wrapper { @include border-radius(3px); display: table-cell; diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss index c5f00c813..fe847d1d6 100644 --- a/webapp/sass/layout/_forms.scss +++ b/webapp/sass/layout/_forms.scss @@ -71,7 +71,7 @@ .form__label { &.control-label { - color: inherit; + color: inherit !important; } } diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 6796570b6..000a7819e 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -27,6 +27,12 @@ } .member-popover__trigger { + & + div { + display: none; + } + } + + .member-popover__trigger { .fa { margin-left: 4px; position: relative; diff --git a/webapp/sass/layout/_markdown.scss b/webapp/sass/layout/_markdown.scss index 65f50b789..6fcbc7ff3 100644 --- a/webapp/sass/layout/_markdown.scss +++ b/webapp/sass/layout/_markdown.scss @@ -1,11 +1,36 @@ @charset 'UTF-8'; +h1 { + font-size: 28px; +} + +h2 { + font-size: 25px; +} + +h3 { + font-size: 22px; +} + +h4 { + font-size: 19px; +} + +h5 { + font-size: 15px; +} + +h6 { + font-size: 1em; +} + .markdown__link { } .markdown__heading { font-weight: 700; line-height: 1.5; + margin: 10px 0; } .markdown__paragraph-inline { diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index 4125d88fc..48fc57629 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -33,6 +33,7 @@ .col__reply { background: transparent !important; border: none !important; + right: 5px; text-align: right; top: 0; } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 2766943af..4acf4dcf2 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -167,7 +167,7 @@ text-align: center; top: 0; width: 100%; - z-index: 6; + z-index: 11; .overlay__indent { @include clearfix; @@ -361,7 +361,7 @@ .post-create__container { @include flex(0 0 auto); width: 100%; - z-index: 1000; + z-index: 9; label { font-weight: normal; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 96fb86843..45707913c 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -727,8 +727,17 @@ z-index: 5; .modal-title { + max-width: 100%; + padding: 0 40px; text-align: center; width: 100%; + + > span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } } |