diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2016-10-12 18:58:09 +0500 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2016-10-12 09:58:09 -0400 |
commit | 39eee5e4ec5274186cdcb0cbff0155b63dde4e5a (patch) | |
tree | e4377f9926aa5404c3506f3015fb7ee2c96bc808 /webapp/sass | |
parent | d4268cf0d86cee4d51fa1877ccf47b2a69b65cd4 (diff) | |
download | chat-39eee5e4ec5274186cdcb0cbff0155b63dde4e5a.tar.gz chat-39eee5e4ec5274186cdcb0cbff0155b63dde4e5a.tar.bz2 chat-39eee5e4ec5274186cdcb0cbff0155b63dde4e5a.zip |
Multiple UI Improvements (#4200)
* Multiple UI Improvements
* Adjusting return to call position on mobile
Diffstat (limited to 'webapp/sass')
-rw-r--r-- | webapp/sass/components/_modal.scss | 6 | ||||
-rw-r--r-- | webapp/sass/components/_suggestion-list.scss | 1 | ||||
-rw-r--r-- | webapp/sass/components/_webrtc.scss | 42 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 7 |
4 files changed, 51 insertions, 5 deletions
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index e4d2b9da7..00fd838f0 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -124,10 +124,14 @@ margin-left: auto; margin-right: auto; max-width: 95%; + + &.modal-xl { + width: 800px; + } } .modal-push-down { - margin-top: 5%; + margin-top: 60px; } .modal-next-bar { diff --git a/webapp/sass/components/_suggestion-list.scss b/webapp/sass/components/_suggestion-list.scss index 3fdff10d5..51f4d2b02 100644 --- a/webapp/sass/components/_suggestion-list.scss +++ b/webapp/sass/components/_suggestion-list.scss @@ -56,7 +56,6 @@ } > span { - @include opacity(.7); display: inline-block; font-size: .9em; padding: 0 10px 0 5px; diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss index 37da97b32..42d491341 100644 --- a/webapp/sass/components/_webrtc.scss +++ b/webapp/sass/components/_webrtc.scss @@ -20,12 +20,18 @@ .webrtc__notification--rhs { background: $button--ready; border-radius: 3px 0 0 3px; - bottom: -5px; color: $white; cursor: pointer; + left: 50%; + margin-left: -150px; + overflow: hidden; padding: 10px 15px; position: absolute; - right: 0; + text-align: center; + text-overflow: ellipsis; + top: 0; + white-space: nowrap; + width: 300px; z-index: 9999; &:empty { @@ -41,6 +47,14 @@ padding: 0 20px; text-align: center; + .sidebar--right--expanded & { + bottom: 80px; + padding: 0 20px; + position: absolute; + text-align: center; + width: 100%; + } + .form-group { padding: 0 20px; position: relative; @@ -55,7 +69,6 @@ font-weight: normal; margin: 1em 0 -1em; padding: .7em 1em; - width: 100%; } .has-error { @@ -63,6 +76,14 @@ color: #a94442; font-size: .95em; + &.warning { + color: #444; + + &:before { + display: none; + } + } + &:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -81,6 +102,7 @@ #videos { background: $black; font-size: 0; + height: 300px; left: 0; pointer-events: none; position: relative; @@ -89,6 +111,10 @@ width: 100%; #main-video video { + height: 100%; + left: 0; + position: absolute; + top: 0; width: 100%; } @@ -102,6 +128,16 @@ transition: opacity 1s; z-index: 2; + &.full { + background: $black; + border: none; + height: 80%; + max-width: 100% !important; + right: 0; + top: 0; + width: 100%; + } + video { -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index b9b62c020..e0915178a 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,13 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .webrtc__notification--rhs { + left: auto; + right: 0; + top: 47px; + width: 205px; + } + .filtered-user-list { max-height: 65vh !important; } |