first step of infield label removal, fix login screen

This commit is contained in:
Jan-Christoph Borchardt 2014-05-06 12:07:53 +02:00 committed by Morris Jobke
parent a5dd8e84f1
commit 7177d3a496
3 changed files with 25 additions and 31 deletions

View file

@ -464,19 +464,19 @@ input[name='password-clone'] {
width: 223px !important;
padding-left: 36px !important;
}
#adminlogin+label+img,
#adminlogin~img,
#adminpass-icon,
#user+label+img,
#user~img,
#password-icon {
position: absolute;
left: 1.25em;
top: 1.65em;
left: 16px;
top: 24px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: .3;
}
#adminpass-icon, #password-icon {
top: 1.1em;
top: 18px;
}
/* General new input field look */
@ -489,6 +489,11 @@ input[name='password-clone'] {
}
/* Nicely grouping input field sets */
.grouptop,
.groupmiddle,
.groupbottom {
position: relative;
}
#body-login .grouptop input {
margin-bottom: 0;
border-bottom: 0;
@ -511,23 +516,11 @@ input[name='password-clone'] {
box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
}
/* In field labels. No, HTML placeholder does not work as well. */
#body-login .groupmiddle label, #body-login .groupbottom label { top:.65em; }
p.infield { position:relative; }
label.infield { cursor:text !important; top:1.05em; left:.85em; }
#body-login form label.infield { /* labels are ellipsized when too long, keep them short */
position: absolute;
width: 82%;
margin-left: 26px;
font-size: 19px;
color: #aaa;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#body-login #databaseField .infield {
margin-left: 0;
/* keep the labels for screen readers but hide them since we use placeholders */
label.infield {
display: none;
}
#body-login form input[type="checkbox"]+label {
position: relative;
margin: 0;

View file

@ -26,19 +26,21 @@
<!-- the following div ensures that the spinner is always inside the #message div -->
<div style="clear: both;"></div>
</p>
<p class="infield grouptop">
<input type="text" name="user" id="user" placeholder=""
value="<?php p($_['username']); ?>"
<?php p($_['user_autofocus'] ? 'autofocus' : ''); ?>
autocomplete="on" autocapitalize="off" autocorrect="off" required />
<p class="grouptop">
<input type="text" name="user" id="user"
placeholder="<?php p($l->t('Username')); ?>"
value="<?php p($_['username']); ?>"
<?php p($_['user_autofocus'] ? 'autofocus' : ''); ?>
autocomplete="on" autocapitalize="off" autocorrect="off" required />
<label for="user" class="infield"><?php p($l->t('Username')); ?></label>
<img class="svg" src="<?php print_unescaped(image_path('', 'actions/user.svg')); ?>" alt=""/>
</p>
<p class="infield groupbottom">
<input type="password" name="password" id="password" value="" placeholder=""
<?php p($_['user_autofocus'] ? '' : 'autofocus'); ?>
autocomplete="on" autocapitalize="off" autocorrect="off" required />
<p class="groupbottom">
<input type="password" name="password" id="password" value=""
placeholder="<?php p($l->t('Password')); ?>"
<?php p($_['user_autofocus'] ? '' : 'autofocus'); ?>
autocomplete="on" autocapitalize="off" autocorrect="off" required />
<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
<img class="svg" id="password-icon" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/>
</p>

View file

@ -320,7 +320,6 @@ class OC {
OC_Util::addScript("jquery-migrate-1.2.1.min");
OC_Util::addScript("jquery-ui-1.10.0.custom");
OC_Util::addScript("jquery-showpassword");
OC_Util::addScript("jquery.infieldlabel");
OC_Util::addScript("jquery.placeholder");
OC_Util::addScript("jquery-tipsy");
OC_Util::addScript("compatibility");