IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-20 11:48:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

Improve login modal on mobile

Browse Source
This commit is contained in:
Neil Lalonde 2013-10-09 10:16:08 -04:00
parent 939a452293
commit 24598c80af
4 changed files with 82 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app/assets/javascripts/discourse/templates/mobile/modal/login.js.handlebars Normal file
View File

@ -0,0 +1,64 @@
<div class="modal-body">
{{#if hasAtLeastOneLoginButton}}
<div id="login-buttons">
{{#each Discourse.LoginMethod.all}}
<button class="btn btn-social {{unbound name}}" {{action externalLogin this}}>{{unbound title}}</button>
{{/each}}
</div>
<div class="clearfix"></div>
{{/if}}
{{#if Discourse.SiteSettings.enable_local_logins}}
{{#if hasAtLeastOneLoginButton}}
<h3 style="text-align:center; margin-bottom:10px;">{{i18n login.or}}</h3>
{{/if}}
<form id='login-form' method='post'>
<div>
<table>
<tr>
<td>
<label for='login-account-name'>{{i18n login.username}}&nbsp;</label>
</td>
<td>
{{textField value=loginName placeholderKey="login.email_placeholder" id="login-account-name" autocorrect="off" autocapitalize="off"}}
</td>
</tr>
<tr>
<td>
<label for='login-account-password'>{{i18n login.password}}&nbsp;</label>
</td>
<td>
{{textField value=loginPassword type="password" id="login-account-password"}} &nbsp;
</td>
</tr>
<tr>
<td></td>
<td>
<a id="forgot-password-link" {{action showForgotPassword}}>{{i18n forgot_password.action}}</a>
</td>
</tr>
</table>
</div>
</form>
{{/if}}
{{authMessage}}
<div id='login-alert' {{bindAttr class="alertClass"}}>{{alert}}</div>
</div>
<div class="modal-footer">
{{#if authenticate}}
{{i18n login.authenticating}}
{{/if}}
{{#if Discourse.SiteSettings.enable_local_logins}}
<button class='btn btn-large btn-primary'
{{bindAttr disabled="loginDisabled"}}
{{action login}}>
<i class="icon-unlock"></i>&nbsp;{{loginButtonText}}
</button>
{{#unless Discourse.SiteSettings.invite_only}}
&nbsp; {{i18n create_account.invite}}
<a id="new-account-link" {{action showCreateAccount}}>
{{i18n create_account.action}}
</a>
{{/unless}}
{{/if}}
</div>

2
app/assets/javascripts/discourse/templates/modal/login.js.handlebars
View File

@ -2,7 +2,7 @@
{{#if hasAtLeastOneLoginButton}}
<div id="login-buttons">
{{#each Discourse.LoginMethod.all}}
<button class="btn btn-social {{unbound name}}" {{action externalLogin this}}>{{title}}</button>
<button class="btn btn-social {{unbound name}}" {{action externalLogin this}}>{{unbound title}}</button>
{{/each}}
</div>
{{/if}}

10
app/assets/javascripts/discourse/views/modal/modal_body_view.js
View File

@ -19,10 +19,12 @@ Discourse.ModalBodyView = Discourse.View.extend({
$('#modal-alert').hide();
var modalBodyView = this;
Em.run.schedule('afterRender', function() {
modalBodyView.$('input:first').focus();
});
if (!Discourse.Mobile.mobileView) {
var modalBodyView = this;
Em.run.schedule('afterRender', function() {
modalBodyView.$('input:first').focus();
});
}
var title = this.get('title');
if (title) {

29
app/assets/stylesheets/mobile/login.scss
View File

@ -2,14 +2,16 @@
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
.btn-social {width: 48%; float: left;
font-size: 13px;
.btn-social {
width: 95%;
font-size: 16px;
}
#login-buttons {
text-align: center;
button {
margin: 0 5px 5px 0;
margin: 0 0 5px 0;
}
margin-top: 10px;
margin-bottom: 20px;
@ -20,16 +22,8 @@ font-size: 13px;
color: $dark_gray;
cursor: pointer;
}
label {float: left; display: block;}
textarea, input, select {font-size: 16px; clear: left;}
label {float: left; display: block;}
textarea, input, select {font-size: 16px; clear: left;}
}
// Create account
@ -38,9 +32,8 @@ textarea, input, select {font-size: 16px; clear: left;}
cursor: pointer;
}
a#forgot-password-link {clear: left; float: left; }
.btn-primary {margin-bottom: 10px; font-size: 15; clear: left; float: left;
a#forgot-password-link {clear: left; float: left; }
}
.btn-primary {margin-bottom: 10px; font-size: 15; clear: left; float: left;}
a#new-account-link {float: left; margin-left: 7px;}
a#new-account-link {margin-left: 7px;}