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; width: 223px !important;
padding-left: 36px !important; padding-left: 36px !important;
} }
#adminlogin+label+img, #adminlogin~img,
#adminpass-icon, #adminpass-icon,
#user+label+img, #user~img,
#password-icon { #password-icon {
position: absolute; position: absolute;
left: 1.25em; left: 16px;
top: 1.65em; top: 24px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30); filter: alpha(opacity=30);
opacity: .3; opacity: .3;
} }
#adminpass-icon, #password-icon { #adminpass-icon, #password-icon {
top: 1.1em; top: 18px;
} }
/* General new input field look */ /* General new input field look */
@ -489,6 +489,11 @@ input[name='password-clone'] {
} }
/* Nicely grouping input field sets */ /* Nicely grouping input field sets */
.grouptop,
.groupmiddle,
.groupbottom {
position: relative;
}
#body-login .grouptop input { #body-login .grouptop input {
margin-bottom: 0; margin-bottom: 0;
border-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; box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
} }
/* In field labels. No, HTML placeholder does not work as well. */ /* keep the labels for screen readers but hide them since we use placeholders */
#body-login .groupmiddle label, #body-login .groupbottom label { top:.65em; } label.infield {
p.infield { position:relative; } display: none;
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;
} }
#body-login form input[type="checkbox"]+label { #body-login form input[type="checkbox"]+label {
position: relative; position: relative;
margin: 0; margin: 0;

View File

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

View File

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