From 7d68434e8c4c881b900fd473a8d86647a722b133 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 18 Nov 2016 01:27:39 +0500 Subject: Multiple UI fixes and improvements (#4572) Reverting switch teams code Fixing change css function --- webapp/sass/components/_modal.scss | 2 +- webapp/sass/components/_scrollbar.scss | 16 ++-- webapp/sass/responsive/_mobile.scss | 132 ++++++++++++++++++++++++--------- webapp/sass/routes/_admin-console.scss | 2 +- 4 files changed, 109 insertions(+), 43 deletions(-) (limited to 'webapp/sass') diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index f89fb5c40..beb9ee8a1 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -612,7 +612,7 @@ .more-modal__row { border-bottom: 1px solid $light-gray; display: flex; - min-height: 50px; + min-height: 70px; padding: 8px 15px; } diff --git a/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss index a4df8230d..66b476166 100644 --- a/webapp/sass/components/_scrollbar.scss +++ b/webapp/sass/components/_scrollbar.scss @@ -15,13 +15,15 @@ } body { - scrollbar-3dlight-color: #7D7E94; - scrollbar-arrow-color: #C1C1D1; - scrollbar-darkshadow-color: #2D2C4D; - scrollbar-face-color: rgba(0, 0, 0, .1); - scrollbar-highlight-color: #7D7E94; - scrollbar-shadow-color: #2D2C4D; - scrollbar-track-color: rgba(0, 0, 0, .1); + &.app__body { + scrollbar-3dlight-color: #7D7E94; + scrollbar-arrow-color: #C1C1D1; + scrollbar-darkshadow-color: #2D2C4D; + scrollbar-face-color: rgba(0, 0, 0, .1); + scrollbar-highlight-color: #7D7E94; + scrollbar-shadow-color: #2D2C4D; + scrollbar-track-color: rgba(0, 0, 0, .1); + } } .scrollbar--horizontal, diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 00f89ff15..0f7ac0eb4 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,23 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .modal { + .modal-dialog { + &.new-channel__modal { + position: fixed; + @include translate3d(0, 100%, 0); + } + } + + &.in { + .modal-dialog { + &.new-channel__modal { + @include translate3d(0, 0, 0); + } + } + } + } + .webrtc__notification--rhs { left: auto; right: 0; @@ -17,15 +34,21 @@ } #header-popover { + @include single-transition(all, .35s, ease); + @include translate3d(0, 100%, 0); @include box-shadow(none); background: alpha-color($black, .8); border: none; - height: 100%; + height: calc(100% - 45px); max-width: 100%; position: fixed; top: 47px; width: 100%; + &.in { + @include translate3d(0, 0, 0); + } + .arrow { display: none; } @@ -37,23 +60,23 @@ } .close { - font-family: 'Open Sans', sans-serif; - display: block; - position: fixed; + @include border-radius(50%); + border: 1px solid $white; bottom: 25px; + color: $white; + display: block; + font-family: 'Open Sans', sans-serif; + font-size: 23px; + font-weight: 200; height: 30px; - width: 30px; - margin-left: -15px; left: 50%; - font-size: 23px; line-height: 27px; - border-radius: 50%; - border: 1px solid $white; - text-align: center; + margin-left: -15px; opacity: 1; + position: fixed; + text-align: center; text-shadow: none; - color: white; - font-weight: 200; + width: 30px; } } @@ -743,34 +766,47 @@ white-space: nowrap; } + .dropdown { + &.open { + .dropdown-menu { + @include translate3d(0, 0, 0); + visibility: visible; + } + } + } + .dropdown-menu { + @include single-transition(all, .35s, ease); + @include translate3d(0, 100%, 0); background: alpha-color($black, .9); - height: 100%; + display: block; + height: calc(100% - 45px); left: 0; overflow: auto; - padding: 1.4em 0 140px; + padding: 1.4em 0 0; position: fixed; top: 42px; + visibility: hidden; width: 100%; .close { - font-family: 'Open Sans', sans-serif; - display: block; - position: fixed; + @include border-radius(50%); + border: 1px solid $white; bottom: 25px; + color: $white; + display: block; + font-family: 'Open Sans', sans-serif; + font-size: 23px; + font-weight: 200; height: 30px; - width: 30px; - margin-left: -15px; left: 50%; - font-size: 23px; line-height: 27px; - border-radius: 50%; - border: 1px solid $white; - text-align: center; + margin-left: -15px; opacity: 1; + position: fixed; + text-align: center; text-shadow: none; - color: white; - font-weight: 200; + width: 30px; } > li { @@ -1056,7 +1092,7 @@ } &.move--right { - @include translate3d(290px, 0, 0); + @include translate3d(0, 0, 0); &:before { @include single-transition(all, .35s, ease); @@ -1281,11 +1317,7 @@ } .post__header { - .col__name { - .user-popover { - max-width: 100%; - } - } + padding-right: 50px; } } } @@ -1394,7 +1426,7 @@ .inner-wrap { &.move--right { - @include translate3d(260px, 0, 0); + @include translate3d(0, 0, 0); } } @@ -1415,26 +1447,41 @@ } @media screen and (max-width: 320px) { + .post { + .post__header { + .col__name { + .user-popover { + max-width: 105px; + } + } + } + } + .tutorial-steps__container { .tutorial__content { .tutorial__steps { padding: 0 20px; width: 100%; + h1 { font-size: 35px; margin: -5px 0 20px; } + h3 { margin-bottom: 10px; } + .tutorial__app-icons { margin: 10px 0; } + .tutorial__circles { - margin: 0 0 15px; bottom: 60px; + margin: 0 0 15px; position: absolute; } + .tutorial__footer { bottom: 30px; position: absolute; @@ -1450,13 +1497,30 @@ } } +@media screen and (max-width: 320px) and (max-height: 560px) { + #navbar { + .navbar-default { + .dropdown-menu { + padding-top: 1em; + + > li { + > a { + border: none; + line-height: 28px; + } + } + } + } + } +} + // on iOS, allow clicks within an input's label to actually propagate through to the input itself // http://stackoverflow.com/a/34810294/6325807 label span { pointer-events: none; } -@media screen and (-webkit-min-device-pixel-ratio:0) { +@media screen and (-webkit-min-device-pixel-ratio: 0) { select, textarea, input { diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index aa90a7eaf..5cec54e6b 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -61,7 +61,7 @@ .log__panel { background-color: white; border: 1px solid #ddd; - height: 800px; + height: calc(100vh - 200px); margin-top: 10px; overflow: scroll; padding: 5px; -- cgit v1.2.3-1-g7c22