diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-07-06 18:07:43 +0500 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-07-06 09:07:43 -0400 |
commit | d64d1f4029505f48bb86035a557e2f4229e55443 (patch) | |
tree | eb71e96007d21f96ecc4957f802cb2302748ad4f /webapp/sass/responsive | |
parent | 97cfe62309d7f94a2ea041bc04a7ff25cb1c91fd (diff) | |
download | chat-d64d1f4029505f48bb86035a557e2f4229e55443.tar.gz chat-d64d1f4029505f48bb86035a557e2f4229e55443.tar.bz2 chat-d64d1f4029505f48bb86035a557e2f4229e55443.zip |
PLT-6905 - Updating channel header design (#6789)
* PLT-6905 - Updating channel header design
* Updating border-radius
* Updating radius for wide icons
* Updating trigger for overlay
* Updating UI for channel header
* Updating channel header sizing
* Updating channel header css
* Updating sidebar css
* Updating status icons
* Adjusting border
* Updating comment
* Removing type from status icon
* Fixing UI issues for the channel header/sidebar
* make "Add a channel description" open the channel header modal
* Updating status and opacity
* Updating stauts icon positioning
* Updating description and heading size
* Updating UI changes
* Updating UI changes
* add a focused class to the parent div .search__form and then remove when hover away
* Fix active state for pinned posts icon
* Updating UI changes
* Update channel header text
Diffstat (limited to 'webapp/sass/responsive')
-rw-r--r-- | webapp/sass/responsive/_desktop.scss | 18 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 92 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 45 |
3 files changed, 107 insertions, 48 deletions
diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss index a96685c87..67ec9e3a7 100644 --- a/webapp/sass/responsive/_desktop.scss +++ b/webapp/sass/responsive/_desktop.scss @@ -80,22 +80,20 @@ } @media (max-width: 1024px) { - .inner-wrap { - &.move--left { - .channel-header { - .heading { - width: 100px; - } - } - } - } - .channel-header { .search-bar__container { .search__form { width: 150px; } } + + .heading { + max-width: calc(100vw - 800px); + + .multi-teams & { + max-width: calc(100vw - 750px); + } + } } .integration-option { diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 24db3821f..862c3a59c 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,12 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .channel-header { + .channel-header__icon { + display: none; + } + } + .member-role .member-menu, .member-drop .member-menu { right: 0; @@ -76,10 +82,10 @@ @include box-shadow(none); background: alpha-color($black, .8); border: none; - height: calc(100% - 40px); + height: calc(100% - 50px); max-width: 100%; position: fixed; - top: 47px; + top: 40px !important; width: 100%; &.in { @@ -865,14 +871,18 @@ white-space: nowrap; .heading { + font-size: 17px; + font-weight: 400; line-height: normal; position: relative; - top: 11px; + top: 14px; vertical-align: top; } .header-dropdown__icon { - top: 18px; + font-size: 12px; + margin-left: 5px; + top: 20px; vertical-align: top; } } @@ -891,12 +901,12 @@ @include translate3d(0, 100%, 0); background: alpha-color($black, .9); display: block; - height: calc(100% - 40px); + height: calc(100% - 48px); left: 0; overflow: auto; padding: 1.4em 0 0; position: fixed; - top: 42px; + top: 48px; visibility: hidden; width: 100%; @@ -981,21 +991,36 @@ } .search-bar__container { - @include flex(0 0 44px); + @include flex(0 0 50px); background: $primary-color; color: $white; padding: 0; + .search-form__container { + padding: 0; + } + .search__form { @include single-transition(all, .2s, linear); @include translateX(0); border: none; - height: 45px; - padding: 7px 20px 0 49px; - position: relative; + margin-top: 9px; width: 100%; - margin-left: 0px; - margin-right: 0px; + + .search-bar { + font-size: 14px; + height: 32px; + padding: 0 40px; + } + + .search__icon { + left: 15px; + top: 7px; + + svg { + width: 17px; + } + } .icon--refresh { @include opacity(.6); @@ -1009,7 +1034,7 @@ background: $white; border: none; color: $dark-gray; - padding: 0 31px 0 31px; + padding: 0 31px; } } @@ -1053,7 +1078,7 @@ } .nav-pills__container { - height: calc(100% - 42px); + height: calc(100% - 60px); } > div { @@ -1110,7 +1135,7 @@ } h4 { - margin: 16px 0 8px; + margin: 2em 0 1.5em; } > a { @@ -1148,10 +1173,10 @@ } .emoji-rhs { - position: relative; display: none; - top: 1px; + position: relative; right: -1px; + top: 1px; } .msg-typing:empty { @@ -1171,27 +1196,32 @@ } } - .sidebar__collapse, - .sidebar__search-icon { - display: block; + .sidebar-collapse__container { + display: table-cell; + vertical-align: top; } .sidebar__search-clear { + @include opacity(1); + color: inherit; display: block; - top: 6px; - height: 30px; - width: 35px; - margin-right: 18px; + height: 32px; + margin-right: 0; + text-align: center; + top: 0; + width: 42px; + &.visible { visibility: visible; } } .sidebar__search-clear-x { - margin-left: 14px; - font-size: 22px; + font-size: 21px; font-weight: 700; - opacity: .7; + line-height: 0; + position: relative; + top: 9px; } .sidebar--right__close { @@ -1199,12 +1229,12 @@ } .sidebar-right__body { - height: calc(100% - 44px); + height: calc(100% - 56px); } } .search-items-container { - height: calc(100% - 44px); + height: calc(100% - 56px); } .inner-wrap { @@ -1261,10 +1291,10 @@ .app__content { margin: 0; - padding-top: 45px; + padding-top: 56px; .channel__wrap & { - padding-top: 45px; + padding-top: 56px; } #channel-header { diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 70b5e9b8f..8b81f30ca 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -1,6 +1,30 @@ @charset 'UTF-8'; @media screen and (max-width: 960px) { + .inner-wrap { + &.move--left { + .channel-header { + .heading { + max-width: calc(100vw - 600px); + + .multi-teams & { + max-width: calc(100vw - 650px); + } + } + } + + .channel-header__info { + .channel-header__description { + max-width: calc(100vw - 600px); + + .multi-teams & { + max-width: calc(100vw - 650px); + } + } + } + } + } + .textarea-wrapper { .textbox-preview-link, .textbox-help-link { @@ -8,15 +32,23 @@ } } - .channel-header { - .heading { - max-width: 90px; + .channel-header__info { + .channel-header__description { + max-width: calc(100vw - 660px); + + .multi-teams & { + max-width: calc(100vw - 710px); + } } } - .search__form { - .sidebar--right & { - width: 300px; + .channel-header { + .heading { + max-width: calc(100vw - 700px); + + .multi-teams & { + max-width: calc(100vw - 750px); + } } } @@ -137,7 +169,6 @@ transform: translateX(0) !important; .search-bar__container { - padding-right: 8px; z-index: 5; } } |