codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-23 15:48:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX: Better handle width for fields in sign up form.

Browse source
This commit is contained in:
Guo Xiang Tan 2016-07-18 17:26:34 +08:00
parent fa5942f56c
commit 57f1bf1ddd
3 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/discourse/templates/modal/create-account.hbs
View file

@ -37,10 +37,10 @@
{{#if fullnameRequired}}
<tr class="input">
<td style="width:80px" class="label">
<td class="label">
<label for='new-account-name'>{{i18n 'user.name.title'}}</label>
</td>
<td style="width:496px">
<td>
{{text-field value=accountName id="new-account-name"}}&nbsp;{{input-tip validation=nameValidation}}
</td>
</tr>

20
app/assets/stylesheets/common/base/login.scss
View file

@ -12,22 +12,36 @@
display: none;
}
$label-width: 92px;
$input-width: 220px;
.create-account {
table {
td.label {
width: $label-width;
}
td input {
width: $input-width;
}
}
.user-field.confirm {
margin-top: 20px;
}
.user-field {
label {
width: 92px;
width: $label-width;
float: left;
}
input[type=text] {
width: 220px;
width: $input-width;
margin-bottom: 0;
}
.controls {
margin-left: 92px;
margin-left: $label-width;
margin-bottom: 15px;
label {
width: auto;

13
app/assets/stylesheets/mobile/login.scss
View file

@ -33,11 +33,16 @@ a#forgot-password-link {clear: left; float: left; }
.btn-primary {margin-bottom: 10px; font-size: 15; float: left;}
$label-width: 85px;
$input-width: 184px;
.create-account .modal-body {
input[type=text], input[type=email], input[type=password] {
display: inline-block;
margin-bottom: 5px;
margin-top: 10px;
width: $input-width;
}
tr.instructions {
@ -48,7 +53,7 @@ a#forgot-password-link {clear: left; float: left; }
tr.input {
td.label {
padding-right: 5px;
width: $label-width;
}
}
}
@ -61,15 +66,15 @@ a#forgot-password-link {clear: left; float: left; }
.user-field {
margin-top: 10px;
label {
width: 85px;
width: $label-width;
}
input[type=text] {
margin-top: 0;
width: 184px;
width: $input-width;
}
.controls {
margin-left: 85px;
margin-left: $label-width;
}
}
}