From 14ce471311fee2830be3cbd3a90179015f513719 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Thu, 27 Oct 2016 18:10:05 +0500
Subject: Updating shift UI changes (#4326)

* Updating shift UI changes

* Adding border to last account settings item

* Fixing modals
---
 webapp/components/navbar.jsx                       | 14 ++++-
 webapp/components/searchable_user_list.jsx         |  4 +-
 .../components/suggestion/search_user_provider.jsx |  2 +-
 webapp/root.html                                   |  6 +-
 webapp/sass/components/_modal.scss                 |  6 ++
 webapp/sass/components/_popover.scss               |  4 ++
 webapp/sass/layout/_headers.scss                   |  3 +-
 webapp/sass/layout/_navigation.scss                |  2 +-
 webapp/sass/responsive/_mobile.scss                | 64 +++++++++++++++++++---
 9 files changed, 88 insertions(+), 17 deletions(-)

diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx
index 18ea84376..9a4475cc2 100644
--- a/webapp/components/navbar.jsx
+++ b/webapp/components/navbar.jsx
@@ -485,7 +485,7 @@ export default class Navbar extends React.Component {
                             className='description'
                             rootClose={true}
                         >
-                            <div className='description info-popover'/>
+                            <div className='pull-right description info-popover'/>
                         </OverlayTrigger>
                         <a
                             href='#'
@@ -635,6 +635,12 @@ export default class Navbar extends React.Component {
                         message={channel.header}
                         options={{singleline: true, mentionHighlight: false}}
                     />
+                    <div
+                        className='close__icon visible-xs-block'
+                        onClick={() => this.refs.headerOverlay.hide()}
+                    >
+                        {'×'}
+                    </div>
                 </Popover>
             );
 
@@ -688,6 +694,12 @@ export default class Navbar extends React.Component {
                                 }}
                             />
                         </div>
+                        <div
+                            className='close__icon visible-xs-block'
+                            onClick={() => this.refs.headerOverlay.hide()}
+                        >
+                            {'×'}
+                        </div>
                     </Popover>
                 );
             }
diff --git a/webapp/components/searchable_user_list.jsx b/webapp/components/searchable_user_list.jsx
index 8d4f74ab3..eee8288ba 100644
--- a/webapp/components/searchable_user_list.jsx
+++ b/webapp/components/searchable_user_list.jsx
@@ -155,7 +155,7 @@ export default class SearchableUserList extends React.Component {
                 style={this.props.style}
             >
                 <div className='filter-row'>
-                    <div className='col-sm-5'>
+                    <div className='col-xs-9 col-sm-5'>
                         <input
                             ref='filter'
                             className='form-control filter-textbox'
@@ -164,7 +164,7 @@ export default class SearchableUserList extends React.Component {
                             onChange={this.onSearchBoxChange}
                         />
                     </div>
-                    <div className='col-sm-2 filter-button'>
+                    <div className='col-xs-3 col-sm-2 filter-button'>
                         <button
                             type='button'
                             className='btn btn-primary'
diff --git a/webapp/components/suggestion/search_user_provider.jsx b/webapp/components/suggestion/search_user_provider.jsx
index baf91cd94..2aa72aef5 100644
--- a/webapp/components/suggestion/search_user_provider.jsx
+++ b/webapp/components/suggestion/search_user_provider.jsx
@@ -37,11 +37,11 @@ class SearchUserSuggestion extends Suggestion {
                 className={className}
                 onClick={this.handleClick}
             >
+                <i className='fa fa fa-plus-square'/>
                 <img
                     className='profile-img rounded'
                     src={Client.getUsersRoute() + '/' + item.id + '/image?time=' + item.update_at}
                 />
-                <i className='fa fa fa-plus-square'/>
                 <div className='mention--align'>
                     <span>
                         {username}
diff --git a/webapp/root.html b/webapp/root.html
index bca775c8b..3fc9dfa59 100644
--- a/webapp/root.html
+++ b/webapp/root.html
@@ -2,12 +2,12 @@
 <html>
 <head>
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
-    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
+    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'>
     <meta name='robots' content='noindex, nofollow'>
     <meta name='referrer' content='no-referrer'>
-    
+
     <title>Mattermost</title>
-        
+
     <!-- iOS add to homescreen -->
     <meta name='apple-mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-status-bar-style' content='default'>
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 53c52fdf1..96da54275 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -623,6 +623,12 @@
         flex-shrink: 1;
     }
 
+    .filter-button {
+        .btn {
+            height: 34px;
+        }
+    }
+
     .filter-controls {
         @include clearfix;
         flex-grow: 0;
diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss
index 18d70268d..2840c032e 100644
--- a/webapp/sass/components/_popover.scss
+++ b/webapp/sass/components/_popover.scss
@@ -128,6 +128,10 @@
             background: alpha-color($black, .2);
         }
 
+        .mention--align {
+            display: inline-block;
+        }
+
         .fa {
             @include opacity(.5);
             margin-right: 5px;
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 579875b47..a8344b1c5 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -9,9 +9,10 @@
 
     .member-popover__trigger {
         cursor: pointer;
+        min-width: 60px;
         padding-right: 10px;
         text-align: right;
-        width: 60px;
+        white-space: nowrap;
 
         .fa {
             font-size: 16px;
diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss
index 751171412..891ed6259 100644
--- a/webapp/sass/layout/_navigation.scss
+++ b/webapp/sass/layout/_navigation.scss
@@ -101,7 +101,7 @@
                     cursor: pointer;
                     height: 19px;
                     position: relative;
-                    top: -1px;
+                    top: 13px;
                     vertical-align: middle;
                     width: 19px;
                 }
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 87ee837d1..b8d54715a 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -10,6 +10,50 @@
 
     .filtered-user-list {
         max-height: 65vh !important;
+
+        .filter-button {
+            .btn {
+                width: 100%;
+            }
+        }
+    }
+
+    #header-popover {
+        @include box-shadow(none);
+        background: alpha-color($black, .8);
+        border: none;
+        height: 100%;
+        max-width: 100%;
+        position: fixed;
+        top: 47px;
+        width: 100%;
+
+        .arrow {
+            display: none;
+        }
+
+        .popover-content {
+            color: $white;
+            font-size: 15px;
+            padding: 15px 20px 100px;
+        }
+
+        .close__icon {
+            @include border-radius(50%);
+            border: 1px solid $white;
+            bottom: 25px;
+            color: $white;
+            display: block;
+            font-size: 23px;
+            font-weight: 300;
+            height: 30px;
+            left: 50%;
+            line-height: 23px;
+            margin-left: -25px;
+            position: fixed;
+            text-align: center;
+            width: 30px;
+        }
     }
 
     .app__body {
@@ -493,6 +537,10 @@
             }
 
             .settings-modal {
+                .modal-body {
+                    min-height: 100%;
+                }
+
                 &.display--content {
                     .modal-header {
                         display: none;
@@ -598,7 +646,7 @@
                     .nav {
                         > li {
                             > a {
-                                border-top: 1px solid transparent;
+                                border-bottom: 1px solid transparent;
                                 font-size: 1.1em;
                                 line-height: 2.7;
 
@@ -742,20 +790,20 @@
 
                 &:after {
                     @include border-radius(50%);
-                    background: alpha-color($black, .8);
-                    border-bottom: 1px solid alpha-color($white, .3);
+                    border: 1px solid $white;
                     bottom: 25px;
                     color: $white;
-                    content: '×';
+                    content: '\D7';
                     display: block;
-                    font-size: 30px;
-                    height: 50px;
+                    font-size: 23px;
+                    font-weight: 300;
+                    height: 30px;
                     left: 50%;
-                    line-height: 50px;
+                    line-height: 27px;
                     margin-left: -25px;
                     position: fixed;
                     text-align: center;
-                    width: 50px;
+                    width: 30px;
                 }
 
                 > li {
-- 
cgit v1.2.3-1-g7c22