summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAsaad Mahmood <asaadmahmood@users.noreply.github.com>2016-10-27 18:10:05 +0500
committerJoram Wilander <jwawilander@gmail.com>2016-10-27 09:10:05 -0400
commit14ce471311fee2830be3cbd3a90179015f513719 (patch)
tree26db51b68ca27b6ba471cbd2b9286d0c70b5b6d5
parent4dca84c8b4e38dd13522ddaea5843b276dd77946 (diff)
downloadchat-14ce471311fee2830be3cbd3a90179015f513719.tar.gz
chat-14ce471311fee2830be3cbd3a90179015f513719.tar.bz2
chat-14ce471311fee2830be3cbd3a90179015f513719.zip
Updating shift UI changes (#4326)
* Updating shift UI changes * Adding border to last account settings item * Fixing modals
Diffstat
-rw-r--r--webapp/components/navbar.jsx14
-rw-r--r--webapp/components/searchable_user_list.jsx4
-rw-r--r--webapp/components/suggestion/search_user_provider.jsx2
-rw-r--r--webapp/root.html6
-rw-r--r--webapp/sass/components/_modal.scss6
-rw-r--r--webapp/sass/components/_popover.scss4
-rw-r--r--webapp/sass/layout/_headers.scss3
-rw-r--r--webapp/sass/layout/_navigation.scss2
-rw-r--r--webapp/sass/responsive/_mobile.scss64
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 {
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-17 00:41:56 +0000