PLT-4609 - Fixing list modals on mobile (#4536)

* PLT-4609 - Fixing list modals on mobile

* PLT-4609 - Adjust more modal height

webapp/components/channel_invite_modal.jsx

@@ -11,7 +11,6 @@ import TeamStore from 'stores/team_store.jsx';
 
 import {searchUsers} from 'actions/user_actions.jsx';
 
-import * as Utils from 'utils/utils.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 
 import React from 'react';
@@ -133,13 +132,8 @@ export default class ChannelInviteModal extends React.Component {
         if (this.state.loading) {
             content = (<LoadingScreen/>);
         } else {
-            let maxHeight = 1000;
-            if (Utils.windowHeight() <= 1200) {
-                maxHeight = Utils.windowHeight() - 300;
-            }
             content = (
                 <SearchableUserList
-                    style={{maxHeight}}
                     users={this.state.users}
                     usersPerPage={USERS_PER_PAGE}
                     total={this.state.total}

webapp/components/channel_members_modal.jsx

@@ -13,7 +13,6 @@ import {removeUserFromChannel} from 'actions/channel_actions.jsx';
 
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
-import * as Utils from 'utils/utils.jsx';
 
 import React from 'react';
 import {Modal} from 'react-bootstrap';
@@ -144,11 +143,6 @@ export default class ChannelMembersModal extends React.Component {
         if (this.state.loading) {
             content = (<LoadingScreen/>);
         } else {
-            let maxHeight = 1000;
-            if (Utils.windowHeight() <= 1200) {
-                maxHeight = Utils.windowHeight() - 300;
-            }
-
             let removeButton = null;
             if (this.props.isAdmin) {
                 removeButton = [this.createRemoveMemberButton];
@@ -156,7 +150,6 @@ export default class ChannelMembersModal extends React.Component {
 
             content = (
                 <SearchableUserList
-                    style={{maxHeight}}
                     users={this.state.users}
                     usersPerPage={USERS_PER_PAGE}
                     total={this.state.total}

webapp/components/member_list_team.jsx

@@ -125,7 +125,6 @@ export default class MemberListTeam extends React.Component {
 
         return (
             <SearchableUserList
-                style={this.props.style}
                 users={usersToDisplay}
                 usersPerPage={USERS_PER_PAGE}
                 total={this.state.total}
@@ -139,6 +138,5 @@ export default class MemberListTeam extends React.Component {
 }
 
 MemberListTeam.propTypes = {
-    style: React.PropTypes.object,
     isAdmin: React.PropTypes.bool
 };

webapp/components/more_channels.jsx

@@ -96,11 +96,6 @@ export default class MoreChannels extends React.Component {
     }
 
     render() {
-        let maxHeight = 1000;
-        if (Utils.windowHeight() <= 1200) {
-            maxHeight = Utils.windowHeight() - 300;
-        }
-
         let serverError;
         if (this.state.serverError) {
             serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
@@ -204,10 +199,7 @@ export default class MoreChannels extends React.Component {
                                 onModalDismissed={() => this.setState({showNewChannelModal: false})}
                             />
                         </div>
-                        <div
+                        <div className='modal-body'>
-                            className='modal-body'
-                            style={{maxHeight}}
-                        >
                             {moreChannels}
                             {serverError}
                         </div>

webapp/components/more_direct_channels.jsx

@@ -12,7 +12,6 @@ import TeamStore from 'stores/team_store.jsx';
 
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
-import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 
 import React from 'react';
@@ -185,11 +184,6 @@ export default class MoreDirectChannels extends React.Component {
     }
 
     render() {
-        let maxHeight = 1000;
-        if (Utils.windowHeight() <= 1200) {
-            maxHeight = Utils.windowHeight() - 300;
-        }
-
         let teamToggle;
         if (global.window.mm_config.RestrictDirectMessage === 'any') {
             teamToggle = (
@@ -245,7 +239,6 @@ export default class MoreDirectChannels extends React.Component {
                     {teamToggle}
                     <SearchableUserList
                         key={'moreDirectChannelsList_' + this.state.listType}
-                        style={{maxHeight}}
                         users={this.state.users}
                         usersPerPage={USERS_PER_PAGE}
                         nextPage={this.nextPage}

webapp/components/searchable_user_list.jsx

@@ -156,10 +156,7 @@ export default class SearchableUserList extends React.Component {
         }
 
         return (
-            <div
+            <div className='filtered-user-list'>
-                className='filtered-user-list'
-                style={this.props.style}
-            >
                 <div className='filter-row'>
                     <div className='col-xs-9 col-sm-5'>
                         <input
@@ -229,6 +226,5 @@ SearchableUserList.propTypes = {
     actions: React.PropTypes.arrayOf(React.PropTypes.func),
     actionProps: React.PropTypes.object,
     actionUserProps: React.PropTypes.object,
-    style: React.PropTypes.object,
     focusOnMount: React.PropTypes.bool.isRequired
 };

webapp/components/team_members_modal.jsx

@@ -3,7 +3,6 @@
 
 import MemberListTeam from './member_list_team.jsx';
 import TeamStore from 'stores/team_store.jsx';
-import * as Utils from 'utils/utils.jsx';
 
 import {FormattedMessage} from 'react-intl';
 
@@ -46,11 +45,6 @@ export default class TeamMembersModal extends React.Component {
             teamDisplayName = this.state.team.display_name;
         }
 
-        let maxHeight = 1000;
-        if (Utils.windowHeight() <= 1200) {
-            maxHeight = Utils.windowHeight() - 300;
-        }
-
         return (
             <Modal
                 dialogClassName='more-modal'
@@ -71,7 +65,6 @@ export default class TeamMembersModal extends React.Component {
                 </Modal.Header>
                 <Modal.Body>
                     <MemberListTeam
-                        style={{maxHeight}}
                         isAdmin={this.props.isAdmin}
                     />
                 </Modal.Body>

webapp/sass/components/_modal.scss

@@ -125,6 +125,7 @@
         }
 
         .modal-dialog {
+            margin-bottom: 0;
             margin-left: auto;
             margin-right: auto;
             max-width: 95%;
@@ -237,19 +238,6 @@
             top: 0;
         }
 
-        &.more-channel__modal {
-            .modal-body {
-                overflow-x: hidden;
-                padding: 10px 0 15px;
-            }
-
-            .channel-count {
-                @include opacity(.8);
-                float: right;
-                margin-top: 5px;
-            }
-        }
-
         .modal-image {
             height: 100%;
             margin: 0 auto;
@@ -449,9 +437,37 @@
                 }
             }
         }
+
+        &.more-channel__modal {
+            .modal-body {
+                overflow-x: hidden;
+                padding: 10px 0 15px;
+            }
+
+            .channel-count {
+                @include opacity(.8);
+                float: right;
+                margin-top: 5px;
+            }
+
+            .more-modal__list {
+                max-height: calc(100vh - 270px);
+            }
+        }
     }
 
     .more-modal {
+        .more-modal__list {
+            height: 100vh;
+            max-height: calc(100vh - 340px);
+        }
+
+        &.more-direct-channels {
+            .more-modal__list {
+                max-height: calc(100vh - 325px);
+            }
+        }
+
         .user-list {
             margin-top: 10px;
             overflow-x: hidden;

webapp/sass/responsive/_mobile.scss

@@ -9,8 +9,6 @@
     }
 
     .filtered-user-list {
-        max-height: 65vh !important;
-
         .filter-button {
             .btn {
                 width: 100%;
@@ -1314,7 +1312,34 @@
     }
 
     .app__body {
+        .more-modal {
+            .modal-body {
+                padding-bottom: 5px;
+            }
+
+            .more-modal__list {
+                max-height: calc(100vh - 260px);
+            }
+
+            &.more-direct-channels {
+                .more-modal__list {
+                    max-height: calc(100vh - 295px);
+                }
+            }
+        }
+
         .modal {
+            &.more-channel__modal {
+                .more-modal__list {
+                    max-height: calc(100vh - 250px);
+                }
+
+                .modal-body {
+                    padding-bottom: 35px;
+                }
+
+            }
+
             .settings-modal {
                 &.display--content {
                     .modal-body {
@@ -1324,6 +1349,7 @@
 
                 .modal-body {
                     max-height: 70%;
+                    padding-bottom: 0;
                 }
 
                 .settings-table {