From a5f1a77fa539763635a669162f81dfbb70ccee5b Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 4 Aug 2017 20:45:59 +0500 Subject: Ui improvements (#7092) * PLT-7121 - Making channel header text dynamic * PLT-7268 - Fixing search results in compact view * PLT-7248 - Adjusting space between post controls * PLT-7303 - Fixing manage members button * Revert "PLT-7303 - Fixing manage members button" This reverts commit 7dcb68a8e333a2c95444d417ed9a244c9c30aa99. --- webapp/components/channel_header.jsx | 194 +++++++++++++++--------------- webapp/components/search_results_item.jsx | 2 +- webapp/sass/components/_search.scss | 4 + webapp/sass/layout/_headers.scss | 80 ++++-------- webapp/sass/layout/_post-right.scss | 2 +- webapp/sass/layout/_sidebar-right.scss | 2 +- webapp/sass/responsive/_desktop.scss | 16 --- webapp/sass/responsive/_mobile.scss | 4 - webapp/sass/responsive/_tablet.scss | 44 ------- 9 files changed, 124 insertions(+), 224 deletions(-) diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx index bee06c700..42e66fd3a 100644 --- a/webapp/components/channel_header.jsx +++ b/webapp/components/channel_header.jsx @@ -841,107 +841,103 @@ export default class ChannelHeader extends React.Component { id='channel-header' className='channel-header alt' > - - - - - - - - - - - - -
-
- {toggleFavorite} -
- - {channelTitle} - - -
    - {dropdownContents} -
-
- {headerTextContainer} -
- 		- {webrtc} - - {popoverListMembers} - - -
-
- - 		- - - +
+
+ {toggleFavorite} +
- {channelTitle} + + +
    -
    - -
    - -
+ {dropdownContents} + + + {headerTextContainer} + + +
+ {webrtc} +
+
+ {popoverListMembers} +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+ {editHeaderModal} {editPurposeModal} {channelMembersModal} diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx index 929dc379e..c120f3cde 100644 --- a/webapp/components/search_results_item.jsx +++ b/webapp/components/search_results_item.jsx @@ -126,7 +126,7 @@ export default class SearchResultsItem extends React.Component { let className = 'post post--thread'; if (this.props.compactDisplay) { - className = ' post--compact'; + className += ' post--compact'; } if (this.state.dropdownOpened) { diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss index 4461b1da1..1c3200a71 100644 --- a/webapp/sass/components/_search.scss +++ b/webapp/sass/components/_search.scss @@ -118,6 +118,10 @@ border: none; } + .post__header { + padding-right: 70px; + } + .search-channel__name { font-weight: 600; margin: 0 0 10px; diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 44b8ab4f0..0a836eafd 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -8,6 +8,24 @@ width: 100%; z-index: 9; + .flex-parent { + display: flex; + } + + .flex-child { + &:first-child { + flex: 1; + min-width: 0; + padding-left: 20px; + } + + .markdown__paragraph-inline { + overflow: hidden; + text-overflow: ellipsis; + width: calc(100% - 50px); + } + } + .channel-header__icon { @include border-radius(50%); border: 1px solid; @@ -89,55 +107,16 @@ } } - th { - text-align: center; - - &:first-child { - border-left: none; - padding: 0 0 0 20px; - text-align: left !important; - width: 100%; - } - - &:last-child { - .channel-header__icon { - margin-right: 17px; - } - } - } - - td { - font-size: 13px; - padding: 5px 25px 5px !important; - text-align: center !important; - - &:first-child { - text-align: left !important; - } - } - .heading { display: inline-block; font-size: 17px; font-weight: 400; margin: 0 4px 0 0; - max-width: calc(100vw - 780px); + max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; - - .move--left & { - max-width: calc(100vw - 850px); - - .multi-teams & { - max-width: calc(100vw - 905px); - } - } - - .multi-teams & { - max-width: calc(100vw - 850px); - } } .caret { @@ -177,6 +156,7 @@ .channel-header__info { margin-top: 12px; + white-space: nowrap; .channel-header__title { .header-dropdown__icon { @@ -186,6 +166,7 @@ > a { display: inline-block; text-decoration: none; + width: calc(100% - 65px); } .modal { @@ -194,27 +175,18 @@ } .channel-header__description { - display: inline-block; height: 35px; - margin-top: -10px; - max-width: calc(100vw - 740px); overflow: hidden; padding: 3px 0 0; position: relative; text-overflow: ellipsis; - top: 10px; - white-space: pre; - word-break: break-word; + width: calc(100% - 18px); .markdown__heading { font-size: 1em; margin: 0; } - .multi-teams & { - max-width: calc(100vw - 810px); - } - &.light { @include opacity(.6); color: inherit; @@ -225,14 +197,6 @@ } } - .move--left & { - max-width: calc(100vw - 810px); - - .multi-teams & { - max-width: calc(100vw - 860px); - } - } - .markdown-inline-img { max-height: 45px; } diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index e6ee33f85..1442a8de8 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -35,7 +35,7 @@ border: none !important; right: 5px; text-align: right; - top: 0; + top: -3px; } } diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index d7a18b587..73654923f 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -47,7 +47,7 @@ &:last-child { .channel-header__icon { - margin-right: 17px; + margin-right: 10px; } } } diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss index 184b57710..fdc318457 100644 --- a/webapp/sass/responsive/_desktop.scss +++ b/webapp/sass/responsive/_desktop.scss @@ -86,22 +86,6 @@ width: 150px; } } - - .heading { - max-width: calc(100vw - 800px); - - .multi-teams & { - max-width: calc(100vw - 775px); - } - } - } - - .channel-header__info { - .channel-header__description { - .multi-teams & { - max-width: calc(100vw - 730px); - } - } } .integration-option { diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index de453f93f..ba830000a 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1624,10 +1624,6 @@ height: auto; } } - - .post__header { - padding-right: 50px; - } } } diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index ef68d5175..55dd59a4c 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -1,30 +1,6 @@ @charset 'UTF-8'; @media screen and (max-width: 960px) { - .inner-wrap { - &.move--left { - .channel-header { - .heading { - max-width: calc(100vw - 620px); - - .multi-teams & { - max-width: calc(100vw - 670px); - } - } - } - - .channel-header__info { - .channel-header__description { - max-width: calc(100vw - 620px); - - .multi-teams & { - max-width: calc(100vw - 670px); - } - } - } - } - } - .textarea-wrapper { .textbox-preview-link, .textbox-help-link { @@ -32,26 +8,6 @@ } } - .channel-header__info { - .channel-header__description { - max-width: calc(100vw - 680px); - - .multi-teams & { - max-width: calc(100vw - 730px); - } - } - } - - .channel-header { - .heading { - max-width: calc(100vw - 720px); - - .multi-teams & { - max-width: calc(100vw - 770px); - } - } - } - .post-right__scroll { .post-create__container { .post-create-body { -- cgit v1.2.3-1-g7c22