first step of infield label removal, fix login screen

diff --git a/core/css/styles.css b/core/css/styles.css
index a9ffd83629b85abe0a6e815d22327591265df578..2fd2ad36ab3a5f7a42010afbcabfb54884bd0ddf 100644 (file)
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -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;

diff --git a/core/templates/login.php b/core/templates/login.php
index 0f25f853b029517b633d7126285bfc9ab19ea811..6af3d76969009c87312fe91819a5e0bb85acbc8f 100644 (file)
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -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>

diff --git a/lib/base.php b/lib/base.php
index 5f2131f388f4b790619e21ca79da39c20a72e829..160d346a01a6b36efc5aefd69d8f0ab310c0e67f 100644 (file)
--- a/lib/base.php
+++ b/lib/base.php
@@ -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");