diff options
author | Joram Wilander <jwawilander@gmail.com> | 2017-05-31 16:51:42 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-05-31 16:51:42 -0400 |
commit | 5aaedb9663b987caf1fb11ea6062bcc44e6bafca (patch) | |
tree | bd77c10168f9fb1b0f998b08a3b2a3761512a451 /webapp/sass | |
parent | 8ce72aedc3a5b4f783fb6ebab38aac8bf5f413ae (diff) | |
download | chat-5aaedb9663b987caf1fb11ea6062bcc44e6bafca.tar.gz chat-5aaedb9663b987caf1fb11ea6062bcc44e6bafca.tar.bz2 chat-5aaedb9663b987caf1fb11ea6062bcc44e6bafca.zip |
PLT-5699 Improvements to channel switcher (#6486)
* Refactor channel switcher to not wait on server results
* Change channel switcher to quick switcher and include team switching
* Add sections, update ordering and add discoverability button
* Fix styling error
* Use CMD in text if on mac
* Clean yarn cache on every install
* Various UX updates per feedback
* Add shortcut help text for team switcher
* Couple more updates per feedback
* Some minor fixes for GM and autocomplete race
* Updating UI for channel switcher (#6504)
* Updating channel switcher button (#6506)
* Updating switcher modal on mobile (#6507)
* Removed jQuery usage
* Rename function to toggleQuickSwitchModal
Diffstat (limited to 'webapp/sass')
-rw-r--r-- | webapp/sass/components/_modal.scss | 12 | ||||
-rw-r--r-- | webapp/sass/components/_suggestion-list.scss | 4 | ||||
-rw-r--r-- | webapp/sass/layout/_navigation.scss | 18 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-left.scss | 43 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 21 |
5 files changed, 91 insertions, 7 deletions
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index f5489aa2b..6388fe8de 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -76,6 +76,18 @@ color: alpha-color($black, .9); width: 100%; + .channel-switch-modal { + .modal-header { + background: transparent; + min-height: 0; + padding: 0; + + .close { + top: 10px; + } + } + } + .modal--overflow { .modal-body { overflow: visible; diff --git a/webapp/sass/components/_suggestion-list.scss b/webapp/sass/components/_suggestion-list.scss index 91db7536c..77550e331 100644 --- a/webapp/sass/components/_suggestion-list.scss +++ b/webapp/sass/components/_suggestion-list.scss @@ -52,6 +52,10 @@ position: relative; } +.suggestion-loader { + margin: 6px 11px; +} + .suggestion-list__divider { line-height: 21px; margin: 5px 0 5px 5px; diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss index 8f0977eba..59b348d9e 100644 --- a/webapp/sass/layout/_navigation.scss +++ b/webapp/sass/layout/_navigation.scss @@ -5,6 +5,24 @@ background: transparent; } +.nav-tabs { + margin-bottom: 10px; + + > li { + margin-right: 5px; + + > a { + border-bottom-color: transparent !important; + padding: 7px 15px; + + .small { + @include opacity(.8); + margin-left: 4px; + } + } + } +} + #navbar { input { margin: 0 5px 0 2px; diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index a7a99249b..d08a9ef45 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -39,6 +39,45 @@ } } + .sidebar__switcher { + border-top: 2px solid; + bottom: 0; + display: block; + height: 45px; + line-height: 45px; + position: absolute; + text-align: center; + text-decoration: none; + width: 100%; + + &:after { + @include single-transition(all, .15s, ease-in); + background: alpha-color($black, .1); + content: ''; + display: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + + span { + @include single-transition(all, .15s, ease-in); + @include opacity(.8); + } + + &:hover { + &:after { + display: block; + } + + span { + @include opacity(1); + } + } + } + .dropdown-menu { max-height: 80vh; max-width: 200px; @@ -62,7 +101,7 @@ .nav-pills__container { -webkit-overflow-scrolling: touch; - height: calc(100% - 80px); + height: calc(100% - 110px); overflow: auto; position: relative; } @@ -84,7 +123,7 @@ } .nav-pills__unread-indicator-bottom { - bottom: 20px; + bottom: 60px; } .nav { diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 2372ec966..dd92d6b59 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1059,17 +1059,13 @@ } .nav-pills__container { - height: 100%; + height: calc(100% - 50px); } > div { padding-bottom: 70px; } - .nav-pills__unread-indicator-bottom { - bottom: 10px; - } - .nav-pills__unread-indicator { width: 260px; } @@ -1321,6 +1317,7 @@ } } } + .post { .attachment { .attachment__image { @@ -1545,6 +1542,7 @@ top: 60px; width: calc(100% - 30px); } + .post { .attachment { .attachment__image { @@ -1557,6 +1555,19 @@ } @media screen and (max-width: 480px) { + .nav-tabs { + margin-top: 1em; + + > li { + margin-right: 0; + + a { + font-size: .9em; + padding: 6px 11px; + } + } + } + .sidebar--right { .post { &.post--compact { |