diff options
| -rw-r--r-- | webapp/components/login/login_controller.jsx | 42 | ||||
| -rw-r--r-- | webapp/components/signup/signup_controller.jsx | 57 | ||||
| -rw-r--r-- | webapp/sass/layout/_navigation.scss | 13 | ||||
| -rw-r--r-- | webapp/sass/layout/_post.scss | 6 | ||||
| -rw-r--r-- | webapp/sass/layout/_sidebar-right.scss | 2 | ||||
| -rw-r--r-- | webapp/sass/responsive/_mobile.scss | 44 | ||||
| -rw-r--r-- | webapp/sass/routes/_signup.scss | 38 | ||||
| -rw-r--r-- | webapp/utils/utils.jsx | 4 |
8 files changed, 126 insertions, 80 deletions
diff --git a/webapp/components/login/login_controller.jsx b/webapp/components/login/login_controller.jsx index 04ba46896..4b6757294 100644 --- a/webapp/components/login/login_controller.jsx +++ b/webapp/components/login/login_controller.jsx @@ -493,12 +493,14 @@ export default class LoginController extends React.Component { key='gitlab' href={Client.getOAuthRoute() + '/gitlab/login' + this.props.location.search} > - <span className='icon'/> <span> - <FormattedMessage - id='login.gitlab' - defaultMessage='GitLab' - /> + <span className='icon'/> + <span> + <FormattedMessage + id='login.gitlab' + defaultMessage='GitLab' + /> + </span> </span> </a> ); @@ -511,12 +513,14 @@ export default class LoginController extends React.Component { key='google' href={Client.getOAuthRoute() + '/google/login' + this.props.location.search} > - <span className='icon'/> <span> - <FormattedMessage - id='login.google' - defaultMessage='Google Apps' - /> + <span className='icon'/> + <span> + <FormattedMessage + id='login.google' + defaultMessage='Google Apps' + /> + </span> </span> </a> ); @@ -529,12 +533,14 @@ export default class LoginController extends React.Component { key='office365' href={Client.getOAuthRoute() + '/office365/login' + this.props.location.search} > - <span className='icon'/> <span> - <FormattedMessage - id='login.office365' - defaultMessage='Office 365' - /> + <span className='icon'/> + <span> + <FormattedMessage + id='login.office365' + defaultMessage='Office 365' + /> + </span> </span> </a> ); @@ -547,9 +553,11 @@ export default class LoginController extends React.Component { key='saml' href={'/login/sso/saml' + this.props.location.search} > - <span className='icon fa fa-lock fa--margin-top'/> <span> - {global.window.mm_config.SamlLoginButtonText} + <span className='icon fa fa-lock fa--margin-top'/> + <span> + {global.window.mm_config.SamlLoginButtonText} + </span> </span> </a> ); diff --git a/webapp/components/signup/signup_controller.jsx b/webapp/components/signup/signup_controller.jsx index 0c969e5ed..9a6ed0ada 100644 --- a/webapp/components/signup/signup_controller.jsx +++ b/webapp/components/signup/signup_controller.jsx @@ -144,9 +144,8 @@ export default class SignupController extends React.Component { key='email' to={'/signup_email' + window.location.search} > - - <span className='icon fa fa-envelope'/> <span> + <span className='icon fa fa-envelope'/> <FormattedMessage id='signup.email' defaultMessage='Email and Password' @@ -163,12 +162,14 @@ export default class SignupController extends React.Component { key='gitlab' href={Client.getOAuthRoute() + '/gitlab/signup' + window.location.search} > - <span className='icon'/> <span> - <FormattedMessage - id='signup.gitlab' - defaultMessage='GitLab Single-Sign-On' - /> + <span className='icon'/> + <span> + <FormattedMessage + id='signup.gitlab' + defaultMessage='GitLab Single-Sign-On' + /> + </span> </span> </a> ); @@ -181,12 +182,14 @@ export default class SignupController extends React.Component { key='google' href={Client.getOAuthRoute() + '/google/signup' + window.location.search} > - <span className='icon'/> <span> - <FormattedMessage - id='signup.google' - defaultMessage='Google Account' - /> + <span className='icon'/> + <span> + <FormattedMessage + id='signup.google' + defaultMessage='Google Account' + /> + </span> </span> </a> ); @@ -199,12 +202,14 @@ export default class SignupController extends React.Component { key='office365' href={Client.getOAuthRoute() + '/office365/signup' + window.location.search} > - <span className='icon'/> <span> - <FormattedMessage - id='signup.office365' - defaultMessage='Office 365' - /> + <span className='icon'/> + <span> + <FormattedMessage + id='signup.office365' + defaultMessage='Office 365' + /> + </span> </span> </a> ); @@ -217,12 +222,14 @@ export default class SignupController extends React.Component { key='ldap' to={'/signup_ldap' + window.location.search} > - <span className='icon fa fa-folder-open fa--margin-top'/> <span> - <FormattedMessage - id='signup.ldap' - defaultMessage='AD/LDAP Credentials' - /> + <span className='icon fa fa-folder-open fa--margin-top'/> + <span> + <FormattedMessage + id='signup.ldap' + defaultMessage='AD/LDAP Credentials' + /> + </span> </span> </Link> ); @@ -242,9 +249,11 @@ export default class SignupController extends React.Component { key='saml' href={'/login/sso/saml' + window.location.search + query} > - <span className='icon fa fa-lock fa--margin-top'/> <span> - {global.window.mm_config.SamlLoginButtonText} + <span className='icon fa fa-lock fa--margin-top'/> + <span> + {global.window.mm_config.SamlLoginButtonText} + </span> </span> </a> ); diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss index 891ed6259..30d5264af 100644 --- a/webapp/sass/layout/_navigation.scss +++ b/webapp/sass/layout/_navigation.scss @@ -41,6 +41,14 @@ width: 43px; z-index: 5; + > span { + > svg { + position: relative; + top: 13px; + vertical-align: top; + } + } + .icon-bar { background: $white; width: 21px; @@ -49,7 +57,8 @@ .icon-search { font-size: 17px; position: relative; - top: -2px; + top: 11px; + vertical-align: top; } .icon--white { @@ -93,7 +102,7 @@ .description { color: $white; display: inline-block; - margin-right: .5em; + margin-right: 1em; &.info-popover { @include background-size(100% 100%); diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 4985e3cba..2b84d01f9 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -651,6 +651,12 @@ visibility: visible; } + .post__header { + .col__reply { + z-index: 7; + } + } + .post__body { background: transparent !important; } diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index 7065871e3..9a6f2be41 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -8,7 +8,7 @@ position: fixed; right: 0; width: 400px; - z-index: 6; + z-index: 8; &.webrtc { z-index: 5; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 45707913c..5a0494dac 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,12 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .member-role .member-menu, + .member-drop .member-menu { + right: 0; + top: 30px; + } + .post-code { word-wrap: normal; } @@ -109,9 +115,10 @@ font-weight: 200; height: 30px; left: 50%; - line-height: 27px; + line-height: 0; margin-left: -15px; opacity: 1; + padding-top: 13px; position: fixed; text-align: center; text-shadow: none; @@ -856,6 +863,18 @@ .navbar-brand { white-space: nowrap; + + .heading { + line-height: normal; + position: relative; + top: 11px; + vertical-align: top; + } + + .header-dropdown__icon { + top: 18px; + vertical-align: top; + } } .dropdown { @@ -892,9 +911,10 @@ font-weight: 200; height: 30px; left: 50%; - line-height: 27px; + line-height: 0; margin-left: -15px; opacity: 1; + padding-top: 13px; position: fixed; text-align: center; text-shadow: none; @@ -1734,7 +1754,7 @@ } } -@media screen and (max-width: 320px) and (max-height: 560px) { +@media screen and (max-width: 380px) and (max-height: 580px) { #navbar { .navbar-default { .dropdown-menu { @@ -1743,7 +1763,8 @@ > li { > a { border: none; - line-height: 28px; + font-size: 13px; + line-height: 27px; } } } @@ -1751,16 +1772,19 @@ } } + + // on iOS, allow clicks within an input's label to actually propagate through to the input itself, // but still allow clicks to a elements to go trough // http://stackoverflow.com/a/34810294/6325807 label { - span { - pointer-events: none; - } - span a { - pointer-events: all; - } + span { + pointer-events: none; + } + + span a { + pointer-events: all; + } } @media screen and (-webkit-min-device-pixel-ratio: 0) { diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss index 13ee95e76..9aa179349 100644 --- a/webapp/sass/routes/_signup.scss +++ b/webapp/sass/routes/_signup.scss @@ -215,7 +215,9 @@ display: inline-block; height: 18px; margin-right: 8px; + position: relative; text-align: center; + top: -1px; width: 18px; } @@ -231,6 +233,18 @@ text-align: left; width: 200px; + > span { + position: relative; + top: 11px; + vertical-align: top; + + > span { + display: inline-block; + line-height: normal; + vertical-align: top; + } + } + &.gitlab { background: #554488; @@ -238,10 +252,6 @@ background: darken(#554488, 10%); } - span { - vertical-align: middle; - } - .icon { background-image: url('../images/gitlabLogo.png'); } @@ -254,10 +264,6 @@ background: darken(#dd4b39, 10%); } - span { - vertical-align: middle; - } - .icon { background-image: url('../images/googleLogo.png'); } @@ -270,10 +276,6 @@ background: darken(#0079d6, 10%); } - span { - vertical-align: middle; - } - .icon { background-image: url('../images/office365Logo.png'); } @@ -285,10 +287,6 @@ &:hover { background: darken(#3AA1CF, 10%); } - - span { - vertical-align: middle; - } } &.email { @@ -297,10 +295,6 @@ &:hover { background: $primary-color--hover; } - - span { - vertical-align: middle; - } } &.saml { @@ -309,10 +303,6 @@ &:hover { background: darken(#34a28b, 10%); } - - span { - vertical-align: middle; - } } &.btn--full { diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 9e5d23252..3404a0b82 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -558,13 +558,13 @@ export function applyTheme(theme) { if (theme.mentionBj) { changeCss('.sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'background:' + theme.mentionBj); - changeCss('.sidebar--left .badge', 'background:' + theme.mentionBj + ' !important'); + changeCss('.app__body .sidebar--left .badge', 'background:' + theme.mentionBj); changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'background:' + theme.mentionBj + ' !important'); } if (theme.mentionColor) { changeCss('.app__body .sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'color:' + theme.mentionColor); - changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor + ' !important'); + changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor); changeCss('.app__body .multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'color:' + theme.mentionColor + ' !important'); } |