From 62974f19cd0025a3a5098741210f1b61b08765a9 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 17 Apr 2017 06:27:15 +0500 Subject: Ui improvements (#6089) * PLT-6084 - Fixing emoji reaction overflow * PLT-6158 - Fixing pinned badge alignment in RHS * PLT-6306 - Post alignment in compact view * PLT-6266 - Adjusting spacing for files (compact) * PLT-6245 - Adjusting spacing in emoji screen modal * PLT-6237 - Adjusting filter in system console * PLT-6247 - Adjusting spacing on code block tag * PLT-6302 - Margins not equal for paragraphs in post --- webapp/sass/components/_emoticons.scss | 20 ++++++++++++-------- webapp/sass/layout/_markdown.scss | 10 +++++----- webapp/sass/layout/_post.scss | 6 +++--- webapp/sass/layout/_sidebar-right.scss | 6 ++++++ webapp/sass/responsive/_tablet.scss | 28 +++++++++++++--------------- webapp/sass/routes/_admin-console.scss | 6 +++++- 6 files changed, 44 insertions(+), 32 deletions(-) (limited to 'webapp/sass') diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss index cf8815a24..df4bbc158 100644 --- a/webapp/sass/components/_emoticons.scss +++ b/webapp/sass/components/_emoticons.scss @@ -240,6 +240,7 @@ margin: 3px; } } + .emojisprite-wrapper { cursor: pointer; } @@ -247,30 +248,33 @@ .emoji-picker__preview { border-top: 1px solid; display: table-cell; - vertical-align: middle; flex-grow: 0; flex-shrink: 0; - height:45px; - width: 278px; + height: 45px; padding: 3px 10px; + vertical-align: middle; + width: 278px; &.emoji-picker__preview-placeholder { padding: 12px; } - .emoji-picker__preview-image-box { + > div { display: table-cell; vertical-align: middle; + } + + .emoji-picker__preview-image-box { height: 36px; width: 42px; .sprite-preview { + border: none; + display: inline-block; height: 36px; - width: 36px; + padding: 0; vertical-align: middle; - padding: 0px; - border: 0px; - display: inline-block; + width: 36px; } } diff --git a/webapp/sass/layout/_markdown.scss b/webapp/sass/layout/_markdown.scss index 1f8ea041e..0b0fd651a 100644 --- a/webapp/sass/layout/_markdown.scss +++ b/webapp/sass/layout/_markdown.scss @@ -64,19 +64,19 @@ padding: 4px 10px 5px; position: absolute; right: 0; - top: 0; + top: 5; z-index: 5; } .post-code__lineno { + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + -webkit-user-select: none; border-right: 1px solid #aaa; color: #aaa; margin-right: .5em; text-align: right; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; user-select: none; } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 2a2876116..c1f8d1cf6 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -836,7 +836,7 @@ } .post__img { - padding-top: 3px; + padding-top: 1px; width: 16px; img { @@ -911,7 +911,7 @@ left: 36px; margin-left: 7px; position: absolute; - top: 8px; + top: 6px; } .post__img { @@ -1034,6 +1034,7 @@ right: 0; top: -4px; white-space: nowrap; + z-index: 6; } .col__remove { @@ -1156,7 +1157,6 @@ word-wrap: break-word; div { - margin-bottom: .4em; } p + p { diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index 8d801a0c2..bb979357d 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -42,6 +42,12 @@ } .post { + &.post--compact { + .post__pinned-badge { + margin: 0 0 0 5px; + } + } + .post__content { padding: 0 10px 0 0; } diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index e97eb3b59..1a0a27267 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -19,16 +19,18 @@ width: 300px; } } - .post-right__scroll{ - .post-create__container{ + + .post-right__scroll { + .post-create__container { .post-create-body { .icon__emoji_picker { - display:none; + display: none; top: -7px; } } } } + .post-create__container { form { padding: .5em 0 0; @@ -262,8 +264,12 @@ &:not(.post--thread) { padding: 0 .5em 0 77px; + &.other--root { + + } + .post__link { - margin: 4px 0 7px; + margin: 3px 0 7px; vertical-align: bottom; } @@ -278,7 +284,7 @@ .post__header { float: left; height: 21px; - padding-top: 3px; + padding-top: 2px; .col__name { font-weight: bold; @@ -298,14 +304,6 @@ } &.other--root { - .post__body { - > div { - &:first-child { - min-height: 21px; - } - } - } - .post__link + .post__body { clear: both; } @@ -422,11 +420,11 @@ display: inline-block; font-size: 11px; left: -14px; - line-height: 34px; + line-height: 20px; position: absolute; text-align: right; text-rendering: auto; - top: -2px; + top: 4px; width: 51px; &:hover { diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index a39e1c20a..854c84e20 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -498,7 +498,11 @@ .system-users__team-filter { display: inline-block; - width: 200px + width: 200px; + } + + label { + font-weight: normal; } } -- cgit v1.2.3-1-g7c22