Merge pull request #18609 from owncloud/login-layout
log in screen improvement & simplification
This commit is contained in:
commit
a93d4d5bf6
|
@ -70,8 +70,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#header .logo {
|
#header .logo {
|
||||||
background-image: url(../img/logo.svg);
|
background-image: url(../img/logo-icon.svg);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
background-size: 175px;
|
||||||
|
background-position: center 30px;
|
||||||
width: 252px;
|
width: 252px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
|
@ -456,11 +456,30 @@ input[type="submit"].enabled {
|
||||||
padding: 13px;
|
padding: 13px;
|
||||||
margin: -13px;
|
margin: -13px;
|
||||||
}
|
}
|
||||||
/* quick fix for log in button not being aligned with input fields, should be properly fixed by input field width later */
|
|
||||||
|
/* position log in button as confirm icon in right of password field */
|
||||||
#body-login #submit.login {
|
#body-login #submit.login {
|
||||||
margin-right: 7px;
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 49px;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
||||||
|
opacity: .3;
|
||||||
}
|
}
|
||||||
|
#body-login #submit.login:hover,
|
||||||
|
#body-login #submit.login:focus {
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
#body-login input[type="password"] {
|
||||||
|
padding-right: 40px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-width: 269px;
|
||||||
|
}
|
||||||
|
|
||||||
#body-login form {
|
#body-login form {
|
||||||
|
position: relative;
|
||||||
width: 22em;
|
width: 22em;
|
||||||
margin: 2em auto 2em;
|
margin: 2em auto 2em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -539,10 +558,8 @@ input[name='password-clone'] {
|
||||||
/* General new input field look */
|
/* General new input field look */
|
||||||
#body-login input[type="text"],
|
#body-login input[type="text"],
|
||||||
#body-login input[type="password"],
|
#body-login input[type="password"],
|
||||||
#body-login input[type="email"],
|
#body-login input[type="email"] {
|
||||||
#body-login input[type="submit"] {
|
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Nicely grouping input field sets */
|
/* Nicely grouping input field sets */
|
||||||
|
@ -741,7 +758,7 @@ label.infield {
|
||||||
margin: 35px auto;
|
margin: 35px auto;
|
||||||
}
|
}
|
||||||
#body-login .warning {
|
#body-login .warning {
|
||||||
margin: 0 7px 5px;
|
margin: 0 7px 5px 4px;
|
||||||
}
|
}
|
||||||
#body-login .warning legend {
|
#body-login .warning legend {
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||||
|
@ -780,8 +797,13 @@ label.infield {
|
||||||
padding: 10px 20px; /* larger log in and installation buttons */
|
padding: 10px 20px; /* larger log in and installation buttons */
|
||||||
}
|
}
|
||||||
#remember_login {
|
#remember_login {
|
||||||
margin: 24px 5px 0 16px !important;
|
margin: 18px 5px 0 16px !important;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
#body-login .remember-login-container {
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sticky footer */
|
/* Sticky footer */
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) 2015
|
||||||
|
* Vincent Petry <pvince81@owncloud.com>
|
||||||
|
* Jan-Christoph Borchardt, http://jancborchardt.net
|
||||||
|
* This file is licensed under the Affero General Public License version 3 or later.
|
||||||
|
* See the COPYING-README file.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @namespace
|
||||||
|
* @memberOf OC
|
||||||
|
*/
|
||||||
|
OC.Login = _.extend(OC.Login || {}, {
|
||||||
|
onLogin: function () {
|
||||||
|
$('#submit')
|
||||||
|
.removeClass('icon-confirm')
|
||||||
|
.addClass('icon-loading-small')
|
||||||
|
.css('opacity', '1');
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('form[name=login]').submit(OC.Login.onLogin);
|
||||||
|
});
|
|
@ -3,7 +3,8 @@
|
||||||
vendor_script('jsTimezoneDetect/jstz');
|
vendor_script('jsTimezoneDetect/jstz');
|
||||||
script('core', [
|
script('core', [
|
||||||
'visitortimezone',
|
'visitortimezone',
|
||||||
'lostpassword'
|
'lostpassword',
|
||||||
|
'login'
|
||||||
]);
|
]);
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
@ -56,19 +57,22 @@ script('core', [
|
||||||
<img class="svg" id="password-icon" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/>
|
<img class="svg" id="password-icon" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<input type="submit" id="submit" class="login primary icon-confirm" value="" disabled="disabled"/>
|
||||||
|
|
||||||
<?php if (isset($_['invalidpassword']) && ($_['invalidpassword'])): ?>
|
<?php if (isset($_['invalidpassword']) && ($_['invalidpassword'])): ?>
|
||||||
<a id="lost-password" class="warning" href="">
|
<a id="lost-password" class="warning" href="">
|
||||||
<?php p($l->t('Wrong password. Reset it?')); ?>
|
<?php p($l->t('Wrong password. Reset it?')); ?>
|
||||||
</a>
|
</a>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php if ($_['rememberLoginAllowed'] === true) : ?>
|
<?php if ($_['rememberLoginAllowed'] === true) : ?>
|
||||||
<input type="checkbox" name="remember_login" value="1" id="remember_login">
|
<div class="remember-login-container">
|
||||||
<label for="remember_login"><?php p($l->t('remember')); ?></label>
|
<input type="checkbox" name="remember_login" value="1" id="remember_login">
|
||||||
|
<label for="remember_login"><?php p($l->t('remember')); ?></label>
|
||||||
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<input type="hidden" name="timezone-offset" id="timezone-offset"/>
|
<input type="hidden" name="timezone-offset" id="timezone-offset"/>
|
||||||
<input type="hidden" name="timezone" id="timezone"/>
|
<input type="hidden" name="timezone" id="timezone"/>
|
||||||
<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>">
|
<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>">
|
||||||
<input type="submit" id="submit" class="login primary" value="<?php p($l->t('Log in')); ?>" disabled="disabled"/>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
<?php if (!empty($_['alt_login'])) { ?>
|
<?php if (!empty($_['alt_login'])) { ?>
|
||||||
|
|
Loading…
Reference in New Issue