imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make existing fields full width

Browse source
This commit is contained in:
J. Ryan Stinnett 2019-01-28 15:29:36 -06:00
parent 398ded4a91
commit 8e9fc8a8e7
2 changed files with 7 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

45
res/css/structures/auth/_Login.scss
View file

@ -23,7 +23,8 @@ limitations under the License.
} }
.mx_Login_field { .mx_Login_field {
width: 280px; width: 100%;
box-sizing: border-box;
border-radius: 3px; border-radius: 3px;
border: 1px solid $strong-input-border-color; border: 1px solid $strong-input-border-color;
font-weight: 300; font-weight: 300;
@ -123,9 +124,9 @@ limitations under the License.
} }
.mx_Login_field_prefix { .mx_Login_field_prefix {
height: 34px; height: 38px;
padding: 0px 5px; padding: 0px 5px;
line-height: 33px; line-height: 38px;
background-color: #eee; background-color: #eee;
border: 1px solid #c7c7c7; border: 1px solid #c7c7c7;
@ -135,40 +136,11 @@ limitations under the License.
text-align: center; text-align: center;
} }
.mx_Login_field_suffix {
height: 34px;
padding: 0px 5px;
line-height: 33px;
background-color: #eee;
border: 1px solid #c7c7c7;
border-left: 0px;
border-radius: 0px 3px 3px 0px;
text-align: center;
flex-grow: 1;
}
.mx_Login_username {
height: 16px;
flex-shrink: 1;
min-width: 0px;
}
.mx_Login_phoneNumberField {
height: 16px;
}
.mx_Login_field_has_prefix { .mx_Login_field_has_prefix {
border-top-left-radius: 0px; border-top-left-radius: 0px;
border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;
} }
.mx_Login_field_has_suffix {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.mx_Login_phoneSection { .mx_Login_phoneSection {
display:flex; display:flex;
} }
@ -189,12 +161,9 @@ limitations under the License.
} }
.mx_Login_phoneCountry .mx_Dropdown_option { .mx_Login_phoneCountry .mx_Dropdown_option {
/* /* To match height of mx_Login_field */
To match height of mx_Login_field height: 38px;
33px + 2px border from mx_Dropdown_option = 35px line-height: 38px;
*/
height: 33px;
line-height: 33px;
} }
.mx_Login_phoneCountry .mx_Dropdown_option img { .mx_Login_phoneCountry .mx_Dropdown_option img {

3
src/components/views/auth/PasswordLogin.js
View file

@ -165,7 +165,6 @@ class PasswordLogin extends React.Component {
switch (loginType) { switch (loginType) {
case PasswordLogin.LOGIN_FIELD_EMAIL: case PasswordLogin.LOGIN_FIELD_EMAIL:
classes.mx_Login_email = true;
classes.error = this.props.loginIncorrect && !this.state.username; classes.error = this.props.loginIncorrect && !this.state.username;
return <input return <input
className="mx_Login_field" className="mx_Login_field"
@ -180,7 +179,6 @@ class PasswordLogin extends React.Component {
autoFocus autoFocus
/>; />;
case PasswordLogin.LOGIN_FIELD_MXID: case PasswordLogin.LOGIN_FIELD_MXID:
classes.mx_Login_username = true;
classes.error = this.props.loginIncorrect && !this.state.username; classes.error = this.props.loginIncorrect && !this.state.username;
return <input return <input
className={classNames(classes)} className={classNames(classes)}
@ -199,7 +197,6 @@ class PasswordLogin extends React.Component {
/>; />;
case PasswordLogin.LOGIN_FIELD_PHONE: { case PasswordLogin.LOGIN_FIELD_PHONE: {
const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown'); const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
classes.mx_Login_phoneNumberField = true;
classes.mx_Login_field_has_prefix = true; classes.mx_Login_field_has_prefix = true;
classes.error = this.props.loginIncorrect && !this.state.phoneNumber; classes.error = this.props.loginIncorrect && !this.state.phoneNumber;
return <div className="mx_Login_phoneSection"> return <div className="mx_Login_phoneSection">