Multiple UI fixes and improvements (#4572)

Reverting switch teams code

Fixing change css function

4 files changed, 109 insertions, 43 deletions

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;