diff options
-rw-r--r-- | webapp/components/navbar.jsx | 14 | ||||
-rw-r--r-- | webapp/components/searchable_user_list.jsx | 4 | ||||
-rw-r--r-- | webapp/components/suggestion/search_user_provider.jsx | 2 | ||||
-rw-r--r-- | webapp/root.html | 6 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 6 | ||||
-rw-r--r-- | webapp/sass/components/_popover.scss | 4 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 3 | ||||
-rw-r--r-- | webapp/sass/layout/_navigation.scss | 2 | ||||
-rw-r--r-- | 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 { |