moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-11-23 01:12:19 -05:00
Code Issues Releases Wiki Activity

optimized login views for mobile

Browse Source
This commit is contained in:
Mario Volke 2014-06-16 15:04:06 +02:00
parent 234c0ca485
commit 2a1cb893d0
6 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/controller/login.js
View File

@ -29,7 +29,7 @@ define(function(require) {
// check if account needs to be selected // check if account needs to be selected
if (!emailAddress) { if (!emailAddress) {
goTo('/add-account'); //goTo('/add-account');
return; return;
} }

49
src/sass/views/_login.scss
View File

@ -4,26 +4,34 @@
height: 100%; height: 100%;
background-color: $color-grey-lightest; background-color: $color-grey-lightest;
color: $color-grey-dark; color: $color-grey-dark;
text-align: center;
padding: 20px;
.logo-wrapper { .logo {
max-width: 700px; max-width: 700px;
height: 58px; margin: 135px auto 75px;
margin: 145px auto 75px auto; img {
display: block;
.logo { max-width: 100%;
background-image:url('../img/whiteout_logo.svg');
background-repeat: no-repeat;
background-size: 320px 58px;
width: 320px; width: 320px;
height: 58px; margin-left: auto;
margin-right: auto;
@include respond-to(desktop) {
margin-left: 0;
}
} }
} }
.spinner {
font-size: 150%;
}
.content { .content {
max-width: 400px; max-width: 400px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: left;
b, a { b, a {
color: $color-blue; color: $color-blue;
} }
@ -39,8 +47,14 @@
input { input {
margin-right: 10px; margin-right: 10px;
} }
input[type="text"],
input[type="password"] {
margin-bottom: 10px;
width: 100%;
}
input[type=file] { input[type=file] {
width: 100%;
background-color: white; background-color: white;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
@ -76,6 +90,21 @@
float: left; float: left;
} }
} }
.popover-info {
display: none; // hide on mobile
}
@include respond-to(desktop) {
input[type="text"],
input[type="password"],
input[type="file"] {
width: auto;
}
.popover-info {
display: inline-block;
}
}
} }
} }

4
src/tpl/login-existing.html
View File

@ -1,6 +1,6 @@
<div class="view-login view-login-existing"> <div class="view-login view-login-existing">
<div class="logo-wrapper"> <div class="logo">
<div class="logo"></div> <img src="img/whiteout_logo.svg" alt="whiteout.io">
</div><!--/logo--> </div><!--/logo-->
<div class="content"> <div class="content">

4
src/tpl/login-initial.html
View File

@ -1,6 +1,6 @@
<div class="view-login view-login-initial" ng-class="{'waiting-cursor': state.ui === 2}"> <div class="view-login view-login-initial" ng-class="{'waiting-cursor': state.ui === 2}">
<div class="logo-wrapper"> <div class="logo">
<div class="logo"></div> <img src="img/whiteout_logo.svg" alt="whiteout.io">
</div><!--/logo--> </div><!--/logo-->
<div class="content" ng-switch on="state.ui"> <div class="content" ng-switch on="state.ui">

4
src/tpl/login-new-device.html
View File

@ -1,6 +1,6 @@
<div class="view-login"> <div class="view-login">
<div class="logo-wrapper"> <div class="logo">
<div class="logo"></div> <img src="img/whiteout_logo.svg" alt="whiteout.io">
</div><!--/logo--> </div><!--/logo-->
<div class="content"> <div class="content">

8
src/tpl/login.html
View File

@ -1,11 +1,9 @@
<div class="view-login waiting-cursor"> <div class="view-login waiting-cursor">
<div class="logo-wrapper"> <div class="logo">
<div class="logo"></div> <img src="img/whiteout_logo.svg" alt="whiteout.io">
</div><!--/logo--> </div><!--/logo-->
<div class="content"> <span class="spinner"></span>
<p><b>Login.</b> Authenticating with the mail server...</p>
</div><!--/content-->
</div> </div>