diff options
author | Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com> | 2016-04-25 20:52:32 +0500 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2016-04-25 11:52:32 -0400 |
commit | 88cbfe7f1df5a0ef89d8b2ccf1261cb897c19366 (patch) | |
tree | f7e0f90f817845494d421262a6397d14f1a32dc7 | |
parent | bfc6e4e6b6171b601decfa00a8a729f843a1a758 (diff) | |
download | chat-88cbfe7f1df5a0ef89d8b2ccf1261cb897c19366.tar.gz chat-88cbfe7f1df5a0ef89d8b2ccf1261cb897c19366.tar.bz2 chat-88cbfe7f1df5a0ef89d8b2ccf1261cb897c19366.zip |
UI Improvements to center channel (#2790)
Removing time from the center channel on sp (mobile)
Liking mention color to search highlight color aswell
Adjusting vertical spacing on mobile
Removing profile pic from mobile LHS header
Updating styles for the RHS
Fixing btn-danger
-rw-r--r-- | webapp/components/post_info.jsx | 2 | ||||
-rw-r--r-- | webapp/sass/components/_buttons.scss | 6 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 5 | ||||
-rw-r--r-- | webapp/sass/layout/_post-right.scss | 3 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 18 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-right.scss | 10 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 69 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 29 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 2 |
9 files changed, 104 insertions, 40 deletions
diff --git a/webapp/components/post_info.jsx b/webapp/components/post_info.jsx index 2d41b0e54..3f81672e1 100644 --- a/webapp/components/post_info.jsx +++ b/webapp/components/post_info.jsx @@ -212,7 +212,7 @@ export default class PostInfo extends React.Component { var dropdown = this.createDropdown(); return ( - <ul className='post__header post__header--info'> + <ul className='post__header--info'> <li className='col'> <TimeSince eventTime={post.create_at} diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss index 326640148..ffe82c524 100644 --- a/webapp/sass/components/_buttons.scss +++ b/webapp/sass/components/_buttons.scss @@ -20,6 +20,12 @@ .app__body & { color: $white; + + &:hover, + &:focus, + &:active { + color: $white; + } } &:hover, diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index ae114a805..950588df5 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -67,9 +67,8 @@ .channel-intro { border-bottom: 1px solid $light-gray; - margin: 0 auto 35px; - max-width: 1000px; - padding: 0 1em 5px; + margin: 0 30px 35px; + padding: 0 0 5px; .intro-links { display: inline-block; diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index 529f73995..93ad7af54 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -53,7 +53,6 @@ } .post-create__container { - margin-top: 10px; width: 100%; .textarea-wrapper { @@ -115,7 +114,7 @@ .post-right-channel__name { font-weight: 600; - margin: 0 0 10px 0; + margin: 0 0 15px; } .post-right-root-container li { diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 592d486aa..374fa7324 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -520,6 +520,10 @@ body.ios { } } + .post__header--info { + padding: 0; + } + span { p:last-child { margin-bottom: .5em; @@ -554,16 +558,6 @@ body.ios { top: 6px; } } - - .post__time { - @include opacity(0); - font-size: 11px; - left: -7px; - line-height: 37px; - position: absolute; - text-rendering: auto; - top: -2px; - } } &.post--comment { @@ -610,10 +604,10 @@ body.ios { .post__content { display: table; margin: 0 auto; + padding: 0 15px; position: relative; table-layout: fixed; width: 100%; - padding: 0 15px; > div { display: table-cell; @@ -649,7 +643,7 @@ body.ios { .col__reply { position: absolute; - right: 0; + right: 10px; top: 30px; white-space: nowrap; width: 65px; diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index 062c3bde1..923e53d12 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -16,6 +16,10 @@ } .post { + .post__content { + padding: 0; + } + .post__header { .col__name { .user-popover { @@ -25,6 +29,12 @@ } } + .post-create__container { + form { + padding: .5em 15px 0; + } + } + .help__format-text { display: none; } diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 3d30f6d96..6a9a134f2 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -15,6 +15,11 @@ font-size: 1em; } + .sidebar--left .team__header .user__picture, + .sidebar--menu .team__header .user__picture { + display: none; + } + .date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, @@ -22,6 +27,10 @@ background: none !important; } + .channel-intro { + margin: 0 15px 35px; + } + .post { .post__dropdown { display: inline-block; @@ -38,6 +47,27 @@ } } + .post__content { + padding: 0 10px 0 0; + } + + .post__header { + margin-bottom: 0; + + .col__reply { + top: 0; + width: 65px; + } + + .col__name { + pointer-events: none; + + .user-popover { + max-width: 130px; + } + } + } + .comment-icon__container { display: none; visibility: visible; @@ -63,7 +93,7 @@ } .post__body { - width: calc(100% - 75px); + width: 100%; } .post__reply { @@ -75,22 +105,18 @@ } } - &.other--root .post__reply { - &.post__reply--hide { - visibility: hidden; - } - } - - .post__header { - .col__reply { - width: 65px; + &.other--root { + &.post--comment { + .post__header { + .col__reply { + top: 0; + } + } } - .col__name { - pointer-events: none; - - .user-popover { - max-width: 130px; + .post__reply { + &.post__reply--hide { + visibility: hidden; } } } @@ -100,6 +126,15 @@ .post__time { display: none; } + + .post__header { + height: auto; + margin-top: 5px; + + .col__name { + display: inline-block; + } + } } } @@ -714,10 +749,6 @@ width: 100%; z-index: 5; - &.move--left { - @include translate3d(0, 0, 0); - } - .sidebar__collapse, .sidebar__search-icon { display: block; diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index cb5216dea..659100263 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -12,13 +12,18 @@ } } } + .sidebar--right { @include single-transition(all, .5s, ease); @include translateX(100%); z-index: 5; &.move--left { - @include translateX(0); + -webkit-transform: translateX(0) !important; + -moz-transform: translateX(0) !important; + -ms-transform: translateX(0) !important; + -o-transform: translateX(0) !important; + transform: translateX(0) !important; .search-bar__container { padding-right: 8px; @@ -44,8 +49,12 @@ } .inner-wrap { + &:not(.move--left) { + margin-right: 0 !important; + } + &.move--left { - margin-right: 0; + margin-right: 0 !important; .channel-header__links { position: relative; @@ -60,4 +69,20 @@ .second-bar { display: none; } + + .post { + &.same--root { + &.same--user { + .post__time { + @include opacity(0); + font-size: 11px; + left: 8px; + line-height: 37px; + position: absolute; + text-rendering: auto; + top: -2px; + } + } + } + } } diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index a1e16928b..8255b10f3 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -761,7 +761,7 @@ export function applyTheme(theme) { } if (theme.mentionHighlightLink) { - changeCss('.app__body .mention--highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1); + changeCss('.app__body .mention--highlight .mention-link, .app__body .mention--highlight, .app__body .search-highlight', 'color:' + theme.mentionHighlightLink, 1); } if (!theme.codeTheme) { |