diff options
author | Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com> | 2016-07-06 00:46:36 +0500 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2016-07-05 15:46:36 -0400 |
commit | f91b9d4a654ff27777580651d853b6372a425af6 (patch) | |
tree | a91033056f245603eaa19acfd93c7f76ba6d49f3 /webapp/sass/layout | |
parent | f4dd8e579639637057e8717067bb0627d9eb1de3 (diff) | |
download | chat-f91b9d4a654ff27777580651d853b6372a425af6.tar.gz chat-f91b9d4a654ff27777580651d853b6372a425af6.tar.bz2 chat-f91b9d4a654ff27777580651d853b6372a425af6.zip |
PLT-3418, PLT-2950, PLT-3375, PLT-3382, PLT-3446, PLT-3465: Multiple UI Improvements (#3449)
Improving help text margins
Updating changes for get link and create post files
Fixing icon for select team screen
Fixing styles for select team button
Adding improvements to posts UI
Adding improvement to post layout
Updating changes for post controls
Updating z-index for sidebar--right
Updating help text position
Fixing code for posts
Fixing css for post view
Pushing improvements for posts view
Updating changes for post view
Updating post layout
Fixing system time css
Updating header for system posts
Updating post css
Removing opacity and changing color for system messages
Simplifying root post and system post behaviour
Removing images from compact view
Updating help text for display
Updating embed preview text for advanced option
PLT-3490 - Fixing RHS issue on Edge
Diffstat (limited to 'webapp/sass/layout')
-rw-r--r-- | webapp/sass/layout/_headers.scss | 6 | ||||
-rw-r--r-- | webapp/sass/layout/_navigation.scss | 9 | ||||
-rw-r--r-- | webapp/sass/layout/_post-right.scss | 232 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 94 |
4 files changed, 180 insertions, 161 deletions
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index cc9f0f713..56f7cd6e8 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -97,8 +97,10 @@ .header-dropdown__icon { color: inherit; - font-size: 11px; - top: 3px; + font-size: 12px; + margin-left: 1px; + position: relative; + top: 1px; } .channel-header__info { diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss index 50d144b9c..751171412 100644 --- a/webapp/sass/layout/_navigation.scss +++ b/webapp/sass/layout/_navigation.scss @@ -46,8 +46,10 @@ width: 21px; } - .glyphicon-search { - top: -1px; + .icon-search { + font-size: 17px; + position: relative; + top: -2px; } .icon--white { @@ -80,7 +82,8 @@ } .header-dropdown__icon { - top: 1px; + margin-left: 0; + top: -1px; } .dropdown-toggle { diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index 1040a324e..f1fe0cac3 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -1,152 +1,156 @@ @charset 'UTF-8'; -.post-right__container { - @include display-flex; - @include flex-direction(column); - height: 100%; - - .post-right-root-message { - padding: 1em 1em 0; - } +.app__body { + .post-right__container { + @include display-flex; + @include flex-direction(column); + height: 100%; + + .post-right-root-message { + padding: 1em 1em 0; + } - .post-right-comments-container { - position: relative; + .post-right-comments-container { + position: relative; - .post { - &:first-child { - padding-top: 15px; + .post { + &:first-child { + padding-top: 15px; + } } } - } - .help_format_text { - bottom: -63px; - right: auto; - } + .help_format_text { + bottom: -63px; + right: auto; + } - .post { - &.post--root { - border-bottom: 1px solid #ddd; - padding-bottom: 1em; + .post { + &.post--root { + border-bottom: 1px solid #ddd; + padding-bottom: 1em; - .post__body { - background: transparent !important; + .post__body { + background: transparent !important; + } } - } - .post__header { - .col__reply { - text-align: right; - top: 0; + .post__header { + .col__reply { + background: transparent !important; + border: none !important; + text-align: right; + top: 0; + } } - } - .post__body { - width: 100%; + .post__body { + width: 100%; + } } - } - hr { - border: none; - margin-bottom: 0; - } + hr { + border: none; + margin-bottom: 0; + } - .post-create__container { - width: 100%; + .post-create__container { + width: 100%; - .textarea-wrapper { - min-height: 100px; - } + .textarea-wrapper { + min-height: 100px; + } - .btn { - margin-bottom: 10px; - } + .btn { + margin-bottom: 10px; + } - .custom-textarea { - min-height: 100px; - } + .custom-textarea { + min-height: 100px; + } - .msg-typing { - @include opacity(.7); - display: block; - float: left; - font-size: 13px; - height: 20px; - line-height: 20px; - margin-top: 3px; - max-width: 230px; - min-width: 1px; - } + .msg-typing { + @include opacity(.7); + display: block; + float: left; + font-size: 13px; + height: 20px; + line-height: 20px; + margin-top: 3px; + max-width: 230px; + min-width: 1px; + } - .post-create-footer { - padding: 5px 0 10px; - width: 100%; - } + .post-create-footer { + padding: 5px 0 10px; + width: 100%; + } - .post-right-comments-upload-in-progress { - color: #a8adb7; - margin-right: 10px; - padding: 6px 0; + .post-right-comments-upload-in-progress { + color: #a8adb7; + margin-right: 10px; + padding: 6px 0; + } } } -} -.post-right-header { - border-bottom: $border-gray; - color: #999; - font-size: 1em; - font-weight: 400; - height: 39px; - padding: 10px 10px 0 15px; - text-transform: uppercase; -} + .post-right-header { + border-bottom: $border-gray; + color: #999; + font-size: 1em; + font-weight: 400; + height: 39px; + padding: 10px 10px 0 15px; + text-transform: uppercase; + } -.post-right-root-container { - border-bottom: $border-gray; - padding: 5px 10px; + .post-right-root-container { + border-bottom: $border-gray; + padding: 5px 10px; - ul { - margin-bottom: 2px; - padding-left: 0; + ul { + margin-bottom: 2px; + padding-left: 0; + } } -} -.post-right-channel__name { - font-weight: 600; - margin: 0 0 15px; -} + .post-right-channel__name { + font-weight: 600; + margin: 0 0 15px; + } -.post-right-root-container li { - display: inline; - list-style-type: none; - padding-right: 3px; -} + .post-right-root-container li { + display: inline; + list-style-type: none; + padding-right: 3px; + } -.post-right-root-time { - color: #a8adb7; -} + .post-right-root-time { + color: #a8adb7; + } -.post-right-create-comment-container { - bottom: 0; - left: 0; - margin-bottom: 18px; - padding: 5px; - position: absolute; - width: 100%; -} + .post-right-create-comment-container { + bottom: 0; + left: 0; + margin-bottom: 18px; + padding: 5px; + position: absolute; + width: 100%; + } -.post-right__scroll { - @include flex(1 1 auto); - -webkit-overflow-scrolling: touch; - overflow: auto; - position: relative; + .post-right__scroll { + @include flex(1 1 auto); + -webkit-overflow-scrolling: touch; + overflow: auto; + position: relative; - .file-preview__container { - margin-top: 5px; + .file-preview__container { + margin-top: 5px; + } } -} -.post-right-comment-time { - color: #a8adb7; + .post-right-comment-time { + color: #a8adb7; + } } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index baca9a127..ab7c851ea 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -86,8 +86,19 @@ body.ios { b, i, + span { + margin: 0 2px; + position: relative; + top: -1px; + } + + b { + @include opacity(.9); + } + code { - margin-right: 3px; + background: transparent; + padding: 0; } .textbox-preview-link { @@ -402,6 +413,11 @@ body.ios { right: 0; top: 1px; + svg { + height: 18px; + width: 18px; + } + &:hover, &:active { @include opacity(.9); @@ -452,7 +468,7 @@ body.ios { .dropdown-menu { &.bottom { - bottom: 25px; + bottom: 19px; top: auto; } } @@ -483,6 +499,14 @@ body.ios { background-color: beige; } + &.post--hide-controls { + .post__header { + .col__reply { + display: none; + } + } + } + &.post--compact { &.post--thread { .post__header { @@ -557,6 +581,16 @@ body.ios { padding: 0; width: 100%; + svg { + display: inline-block; + height: 13px; + margin: 5px 4px 0 0; + opacity: .5; + position: relative; + vertical-align: top; + width: 13px; + } + > div { display: none; } @@ -596,6 +630,10 @@ body.ios { } } + .post--fail { + position: relative; + } + p { font-size: .97em; line-height: 1.6em; @@ -634,33 +672,6 @@ body.ios { &.same--user { padding: 0 .5em 0 1em; - &.post--system { - padding: 8px .5em 0 1em; - - .post__header { - height: auto; - margin-bottom: 2px; - - .col__name { - display: inline-block; - } - - .col__reply { - - } - } - - .post__time { - @include opacity(.6); - font-size: .9em; - left: inherit; - line-height: inherit; - position: inherit; - text-rendering: inherit; - top: inherit; - } - } - &:hover { .post__time { @include opacity(.5); @@ -682,7 +693,7 @@ body.ios { } .col__reply { - top: 6px; + top: -1px; } } } @@ -721,7 +732,7 @@ body.ios { .post__header { .col__reply { - top: 53px; + top: -4px; } } } @@ -775,11 +786,14 @@ body.ios { } .col__reply { + border: 1px solid transparent; + border-radius: 2px; + min-width: 70px; + padding: 2px 5px; position: absolute; right: 0; - top: 30px; + top: -4px; white-space: nowrap; - width: 65px; } .permalink-popover { @@ -841,6 +855,7 @@ body.ios { min-width: 130px; padding: 2px 0; right: 0; + top: 20px; li { display: block; @@ -864,15 +879,15 @@ body.ios { @include opacity(.5); color: inherit; display: inline-block; + float: right; font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 600; height: 20px; line-height: 20px; position: relative; - right: 15px; + right: -10px; text-decoration: none; - top: -5px; vertical-align: top; visibility: hidden; width: 20px; @@ -885,9 +900,8 @@ body.ios { .post__body { @include legacy-pie-clearfix; padding: .2em .5em; - width: calc(100% - 75px); + width: 100%; word-wrap: break-word; - position: relative; p { margin: 0 0 .4em; @@ -1013,12 +1027,8 @@ body.ios { } .post__time { - font-size: .9em; - } - - .post__time, - &.post--system .post__body { @include opacity(.6); + font-size: .9em; } .post-loading-gif { |