diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-03-17 17:19:54 +0500 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-03-17 08:19:54 -0400 |
commit | bfae88e60c7a623afae82e06ce1421ca778c06e7 (patch) | |
tree | 38cc13b8c095cf9bd0ad152ba9d80989137aed27 /webapp/sass | |
parent | 6f87438cbb0eca34e1104bcda41ea40477a23bd1 (diff) | |
download | chat-bfae88e60c7a623afae82e06ce1421ca778c06e7.tar.gz chat-bfae88e60c7a623afae82e06ce1421ca778c06e7.tar.bz2 chat-bfae88e60c7a623afae82e06ce1421ca778c06e7.zip |
Ui improvements (#5755)
* PLT-5816 - Flagged posts tooltip fix
* PLT-5766 - Link previews appearing outside the box
* PLT-5795 - Fixing alignment user list in channel
* PLT-5818 - Reset password error not aligned
* PLT-5837 - Adjusting image preview max height
* PLT-5778 - Updating word break for paragraphs
* PLT-5848 - Updating label for file error
* PLT-5846 - Markdown tables extra border on mobile
* PLT-5662 - Pinned post UI improvement
* Fixing eslint error
* Updating tooltip eslint issue
* PLT-5832 - Removing error styling on labels
Diffstat (limited to 'webapp/sass')
-rw-r--r-- | webapp/sass/components/_modal.scss | 2 | ||||
-rw-r--r-- | webapp/sass/components/_popover.scss | 9 | ||||
-rw-r--r-- | webapp/sass/components/_tooltip.scss | 6 | ||||
-rw-r--r-- | webapp/sass/layout/_forms.scss | 5 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 6 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 10 | ||||
-rw-r--r-- | webapp/sass/layout/_webhooks.scss | 16 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 6 |
8 files changed, 48 insertions, 12 deletions
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 03a8ad1e8..3698e8dc9 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -345,7 +345,7 @@ } img { - max-height: 100%; + max-height: calc(100vh - 200px); max-width: 100%; } diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss index 6b1c57725..93b567ad3 100644 --- a/webapp/sass/components/_popover.scss +++ b/webapp/sass/components/_popover.scss @@ -209,6 +209,15 @@ .more-modal__row { min-height: inherit; } + + .more-modal__details { + line-height: 32px; + } + + .more-modal__actions { + line-height: 31px; + margin: 0; + } } .popover-content { diff --git a/webapp/sass/components/_tooltip.scss b/webapp/sass/components/_tooltip.scss index 0049fe1b8..6953dad58 100644 --- a/webapp/sass/components/_tooltip.scss +++ b/webapp/sass/components/_tooltip.scss @@ -7,6 +7,12 @@ padding: 3px 10px 4px; word-break: break-word; } + + &.text-nowrap { + .tooltip-inner { + white-space: nowrap; + } + } } #webrtcTooltip { diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss index 7552290d8..64c74b0a5 100644 --- a/webapp/sass/layout/_forms.scss +++ b/webapp/sass/layout/_forms.scss @@ -62,7 +62,6 @@ .has-error { .help-block, - .control-label, .radio, .checkbox, .radio-inline, @@ -70,6 +69,10 @@ color: $red; } + .control-label { + color: inherit; + } + &.radio, &.checkbox, &.radio-inline, diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index d38819d03..f8211d433 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -9,10 +9,10 @@ .member-popover__trigger, .pinned-posts-button { + cursor: pointer; display: inline-block; + margin-left: 7px; min-width: 30px; - cursor: pointer; - margin-left: 10px; text-align: center; white-space: nowrap; @@ -65,7 +65,7 @@ } &:last-child { - padding-right: 8px; + padding-right: 6px; width: 8.9%; } } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index debcd70e7..8d14bfafc 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -359,6 +359,10 @@ } .post-create__container { + label { + font-weight: normal; + } + form { margin: 0 auto; padding: .5em 15px 0; @@ -523,6 +527,7 @@ .col__reply { min-width: 0; } + .dropdown { margin-right: 0; } @@ -749,6 +754,7 @@ line-height: 1.6em; margin: 0; white-space: pre-wrap; + word-break: break-word; } .post__header--info { @@ -786,7 +792,7 @@ .flag-icon__container { left: 36px; - margin-left: 5px; + margin-left: 7px; position: absolute; top: 8px; } @@ -1358,6 +1364,8 @@ .post__pinned-badge { margin-left: 7px; + position: relative; + top: -1px; } .permalink-text { diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss index f3a8c6fd3..c36edb8a2 100644 --- a/webapp/sass/layout/_webhooks.scss +++ b/webapp/sass/layout/_webhooks.scss @@ -41,6 +41,7 @@ &.attachment--opengraph { max-width: 800px; } + .attachment__content { border-radius: 4px; border-style: solid; @@ -71,16 +72,18 @@ &.attachment__container--danger { border-left-color: #e40303; } + &.attachment__container--opengraph { display: table; - table-layout: fixed; - width: 100%; margin: 0; padding-bottom: 13px; + width: 100%; + div { margin: 0; } } + .sitename { color: #A3A3A3; } @@ -89,8 +92,8 @@ .attachment__body__wrap { &.attachment__body__wrap--opengraph { display: table-cell; - width: 100%; vertical-align: top; + width: 100%; } } @@ -104,6 +107,7 @@ &.attachment__body--no_thumb { width: 100%; } + &.attachment__body--opengraph { float: none; padding-right: 0; @@ -142,6 +146,7 @@ margin-top: 10px; max-height: 200px; max-width: 400px; + width: 100%; &.loading { height: 150px; @@ -164,16 +169,17 @@ &.has-link { color: #2f81b7; - text-overflow: ellipsis; overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } &.attachment__title--opengraph { height: auto; word-wrap: break-word; + &.is-url { - word-break: break-all + word-break: break-all; } } } diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index ec406c405..66c288a48 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,10 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .table-responsive { + border: none; + } + .multi-select__container { .btn { display: block; @@ -1336,7 +1340,7 @@ a { border-bottom: 1px solid; - line-height: 50px; + line-height: 45px; position: relative; text-align: center; } |