Follow-up to bugfix #12699: Fixed remaining styling issues in the backend login
authorOliver Hader <oliver.hader@typo3.org>
Tue, 24 Nov 2009 11:24:26 +0000 (11:24 +0000)
committerOliver Hader <oliver.hader@typo3.org>
Tue, 24 Nov 2009 11:24:26 +0000 (11:24 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@6505 709f56b5-9817-0410-a4d7-c38de5d9e867

ChangeLog
typo3/index.php
typo3/sysext/lang/locallang_login.xml
typo3/sysext/t3skin/backgrounds/login-border-bottom.png
typo3/sysext/t3skin/icons/login_capslock.gif
typo3/sysext/t3skin/resources/login.js
typo3/sysext/t3skin/stylesheets/typo3-index-php.css
typo3/sysext/t3skin/templates/login.html

index d7a2c72..6770ccc 100755 (executable)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,7 @@
+2009-11-24  Oliver Hader  <oliver@typo3.org>
+
+       * Follow-up to bugfix #12699: Fixed remaining styling issues in the backend login
+
 2009-11-24  Steffen Kamper  <info@sk-typo3.de>
 
        * Fixed bug #12700: pageInfo shows wrong info on root page
index 727a381..7b27e03 100644 (file)
@@ -249,6 +249,8 @@ class SC_index {
                        $content = t3lib_parsehtml::substituteSubpart($content, '###LOGIN_ERROR###', '');
                } else {
                        $markers['ERROR_MESSAGE'] = $GLOBALS['LANG']->getLL('error.login', true);
+                       $markers['ERROR_LOGIN_TITLE'] = $GLOBALS['LANG']->getLL('error.login.title', true);
+                       $markers['ERROR_LOGIN_DESCRIPTION'] = $GLOBALS['LANG']->getLL('error.login.description', true);
                }
 
 
@@ -324,6 +326,7 @@ class SC_index {
                        'ERROR_COOKIES'    => $GLOBALS['LANG']->getLL('error.cookies', true),
                        'ERROR_COOKIES_IGNORE' => $GLOBALS['LANG']->getLL('error.cookies_ignore', true),
                        'ERROR_CAPSLOCK'   => $GLOBALS['LANG']->getLL('error.capslock', true),
+                       'ERROR_FURTHERHELP' => $GLOBALS['LANG']->getLL('error.furtherInformation', true),
                        'LABEL_DONATELINK' => $GLOBALS['LANG']->getLL('labels.donate', true),
                        'LABEL_USERNAME'   => $GLOBALS['LANG']->getLL('labels.username', true),
                        'LABEL_OPENID'     => $GLOBALS['LANG']->getLL('labels.openId', true),
index 851d196..143be6b 100644 (file)
                        <label index="clear">Clear this field!</label>
                        <label index="newsheadline">Important Messages:</label>
                        <label index="error.login">Your login attempt did not succeed. Make sure to spell your username and password correctly, including upper/lowercase characters.</label>
+                       <label index="error.login.title">Your login attempt did not succeed</label>
+                       <label index="error.login.description">Make sure to spell your username and password correctly, including upper/lowercase characters.</label>
                        <label index="error.javascript">Activate JavaScript, please!</label>
                        <label index="error.cookies">Activate Cookies, please!</label>
                        <label index="error.cookies_ignore">Ignore!</label>
                        <label index="error.capslock">Attention: Caps lock enabled!</label>
+                       <label index="error.furtherInformation">For more information or further help click here</label>
                        <label index="warranty.by">Warranty is supplied by %s; %sclick for details.%s</label>
                        <label index="no.warranty">TYPO3 comes with ABSOLUTELY NO WARRANTY; %sclick for details.%s</label>
                        <label index="typo3.logo">TYPO3 logo</label>
index 36df39e..118e010 100644 (file)
Binary files a/typo3/sysext/t3skin/backgrounds/login-border-bottom.png and b/typo3/sysext/t3skin/backgrounds/login-border-bottom.png differ
index a1caa85..01704e2 100644 (file)
Binary files a/typo3/sysext/t3skin/icons/login_capslock.gif and b/typo3/sysext/t3skin/icons/login_capslock.gif differ
index dd012bf..b73f6ec 100644 (file)
@@ -28,6 +28,11 @@ TYPO3BackendLogin = {
                                        ['focus', 'blur', 'keypress'],
                                        function() { TYPO3BackendLogin.setVisibilityOfClearIcon($(value), $(value + '-clearIcon')); }
                        );
+                       Event.observe(
+                               $(value),
+                               'keypress',
+                               function(event) { TYPO3BackendLogin.showCapsLockWarning($(value + '-alert-capslock'), event); }
+                       );
                })
        },
 
@@ -49,6 +54,14 @@ TYPO3BackendLogin = {
                }
        },
 
+       showCapsLockWarning: function(alertIcon, event) {
+               if (isCapslock(event)) {
+                       alertIcon.show();
+               } else {
+                       alertIcon.hide();
+               }
+       },
+
        clearInputField: function(formField) {
                formField.value = '';
                formField.focus();
index 5993512..972b570 100644 (file)
@@ -15,8 +15,8 @@ body#typo3-index-php #t3-login-form-outer {
 }
 
 body#typo3-index-php #t3-login-form {
-       margin: 30px auto 10px;
-       width: 426px;
+       margin: 30px 16% 10px;
+       width: 456px;
        text-align: left;
        font-size: 11px;
 }
@@ -26,12 +26,12 @@ body#typo3-index-php .t3-headline {
        padding-bottom: 2px;
        margin: 0;
        width: auto;
-       height: 24px;
        border-bottom: 1px solid #d6d9df;
+       min-height: 24px;
 }
 
 body#typo3-index-php .t3-headline h2 {
-       background: url('../icons/login-icon-key.gif') no-repeat 10px center;
+       background: url('../icons/login-icon-key.gif') no-repeat 10px 5px;
        background-color: transparent;
        margin: 0;
        padding: 0 0 0 40px;
@@ -71,10 +71,6 @@ body#typo3-index-php .t3-login-username {
        margin-top: 15px;
 }
 
-body#typo3-index-php .t3-login-username input,
-body#typo3-index-php .t3-login-password input {
-}
-
 body#typo3-index-php .t3-login-field {
        height: 21px;
        padding: 0;
@@ -85,26 +81,34 @@ body#typo3-index-php .t3-login-field {
 
 body#typo3-index-php .t3-login-field .t3-login-clearInputField {
        position: absolute;
-       left: 255px;
+       left: 275px;
        top: 5px;
 }
 
+body#typo3-index-php .t3-login-field .t3-login-alert-capslock {
+       position: absolute;
+       left: 297px;
+       top: 2px;
+}
+
 body#typo3-index-php .t3-login-field label {
        color: #7f8083;
        float: left;
        padding-right: 10px;
-       width: 65px;
+       width: 85px;
 }
 
 body#typo3-index-php .t3-login-field input {
        color: #000;
        height: 19px;
        line-height: 19px;
+       font-size: 11px;
        width: 168px;
        margin: 0;
        padding: 2px 23px 0 5px;
        border: 1px solid #7c7c7c;
        background: #ffffff url('../backgrounds/login-field-input.gif') repeat-x;
+       -webkit-appearance: textfield;
 }
 
 body#typo3-index-php #t3-login-form-fields {
@@ -152,7 +156,7 @@ body#typo3-index-php .t3-login-openid-disabled #t3-login-openIdLogo {
 body#typo3-index-php .t3-login-submit {
        font-size: 11px;
        border-color: #7c7c7c;
-       margin: 15px 0 0 75px;
+       margin: 15px 0 0 95px;
        padding: 3px 16px;
        text-align: left;
        background: #d6d6d6 url(../backgrounds/login_submit_bg.gif) repeat-x;
@@ -199,8 +203,8 @@ body#typo3-index-php div#t3-login-image {
 
 body#typo3-index-php #t3-footer {
        border-top: 1px solid #d1d2d3;
-       margin: 40px auto 10px;
-       width: 426px;
+       margin: 40px 16% 10px;
+       width: 456px;
 }
 
 body#typo3-index-php #t3-meta-links {
@@ -213,6 +217,10 @@ body#typo3-index-php #t3-meta-links a {
        text-decoration: underline;
 }
 
+body#typo3-index-php #t3-meta-links a.t3-login-link-donate {
+       font-weight: bold;
+}
+
 body#typo3-index-php #t3-meta-links a:hover {
        color: #000;
 }
@@ -265,7 +273,7 @@ body#typo3-index-php .t3-login-logout-form div.t3-login-label {
        color: #7f8083;
        float: left;
        padding-right: 10px;
-       width: 65px;
+       width: 85px;
        line-height: 21px;
 }
 
@@ -277,11 +285,23 @@ body#typo3-index-php .t3-login-logout-form div.t3-login-label {
        padding: 15px;
 }
 
-.t3-login-alert p {
-       padding: 0 10px 0 30px;
+.t3-login-alert h2 {
+       margin: 0;
+       background: none;
        font-size: 14px;
        line-height: 18px;
-       font-weight: bold;
+       padding: 0 10px 0 30px;
+}
+
+.t3-login-alert p {
+       margin: 10px 0 0 0;
+       padding: 0 10px 0 30px;
+       font-size: 11px;
+       line-height: 15px;
+}
+
+.t3-login-alert a {
+       text-decoration: underline;
 }
 
 .t3-login-alert-error {
@@ -289,21 +309,31 @@ body#typo3-index-php .t3-login-logout-form div.t3-login-label {
        border: 1px solid #d66c68;
 }
 
-.t3-login-alert-error p {
+.t3-login-alert-error h2 {
        background: url('../icons/login-alert-error.gif') no-repeat left 2px;
        color: #be0027;
 }
 
+.t3-login-alert-error p,
+.t3-login-alert-error a {
+       color: #be0027;
+}
+
 .t3-login-alert-warning {
        background: #fbf6de;
        border: 1px solid #b1905c;
 }
 
-.t3-login-alert-warning p {
+.t3-login-alert-warning h2 {
        background: url('../icons/login-alert-warning.gif') no-repeat left 2px;
        color: #9e7d4a;
 }
 
+.t3-login-alert-warning p,
+.t3-login-alert-warning a {
+       color: #9e7d4a;
+}
+
 /**
  * @section box layout
  */
@@ -314,7 +344,7 @@ body#typo3-index-php .t3-login-logout-form div.t3-login-label {
 }
 
 .t3-login-box-body {
-       background: #e3e5ea url('../backgrounds/login-box-body.gif') repeat-x;
+       background: #e3e5ea url('../backgrounds/login-box-body.png') repeat-x;
        padding: 10px;
 }
 
index 4addccd..302161c 100644 (file)
                        <div class="t3-login-box-body">\r
                                <noscript>\r
                                        <div id="t3-noscript-error" class="t3-login-alert t3-login-alert-error">\r
-                                               <p>\r
-                                                       ###ERROR_JAVASCRIPT###\r
-                                               </p>\r
+                                               <h2>###ERROR_JAVASCRIPT###</h2>\r
                                        </div>\r
                                </noscript>\r
                                <div id="t3-nocookies-error" class="t3-login-alert t3-login-alert-warning" style="display:none">\r
-                                       <p>\r
-                                               ###ERROR_COOKIES###\r
-                                       </p>\r
+                                       <h2>###ERROR_COOKIES###</h2>\r
                                </div>\r
                                ###FORM###\r
                                <div class="t3-login-bottomBorder"></div>\r
@@ -48,9 +44,9 @@
                ###COPYRIGHT###\r
        </div>\r
        <div id="t3-meta-links">\r
-               <a href="http://typo3.org" target="_blank">TYPO3.org</a>\r
+               <a href="http://typo3.org" target="_blank" class="t3-login-link-typo3">TYPO3.org</a>\r
                &#124;\r
-               <a href="http://typo3.org/donate/" target="_blank">###LABEL_DONATELINK###</a>\r
+               <a href="http://typo3.org/donate/" target="_blank" class="t3-login-link-donate">###LABEL_DONATELINK###</a>\r
        </div>\r
 </div>\r
 <!-- ###PAGE### end -->\r
 \r
 <!-- ###LOGIN_ERROR### begin -->\r
 <div id="t3-login-error" class="t3-login-alert t3-login-alert-error">\r
-       <p>###ERROR_MESSAGE###</p>\r
+       <h2>###ERROR_LOGIN_TITLE###</h2>\r
+       <p>###ERROR_LOGIN_DESCRIPTION###</p>\r
 </div>\r
 <!-- ###LOGIN_ERROR### end -->\r
 \r
-<div id="t3-capslock" class="t3-login-alert t3-login-alert-warning" style="display: none">\r
-       <p>###ERROR_CAPSLOCK###</p>\r
-</div>\r
-\r
 <div id="t3-login-form-fields" class="###CSS_OPENIDCLASS###">\r
        <div class="t3-login-username t3-login-field">\r
                <label for="t3-username" class="t3-username" id="t3-login-label-username">\r
                <label for="t3-username" class="t3-username" id="t3-login-label-openId" style="display: none">\r
                        ###LABEL_OPENID###\r
                </label>\r
-               <input type="text" id="t3-username" name="username" value="###VALUE_USERNAME###" class="t3-username" tabindex="1" onkeypress="checkCapslock(event, false)" />\r
+               <input type="text" id="t3-username" name="username" value="###VALUE_USERNAME###" class="t3-username" tabindex="1" />\r
                <div class="t3-login-clearInputField">\r
                        <a id="t3-username-clearIcon" style="display: none;">\r
-                               <img src="sysext/t3skin/icons/common-input-clear.png" alt="clear" title="clear" />\r
+                               <img src="sysext/t3skin/icons/common-input-clear.png" alt="###CLEAR###" title="###CLEAR###" />\r
                        </a>\r
                </div>\r
                <div id="t3-login-openIdLogo" style="display: none">\r
                        <img src="sysext/t3skin/icons/logo-openid.png" alt="OpenID" title="OpenID" />\r
                </div>\r
+               <div class="t3-login-alert-capslock" id="t3-username-alert-capslock" style="display: none">\r
+                       <img src="sysext/t3skin/icons/login_capslock.gif" alt="###ERROR_CAPSLOCK###" title="###ERROR_CAPSLOCK###" />\r
+               </div>\r
        </div>\r
        <div class="t3-login-password t3-login-field" id="t3-login-password-section">\r
                <label for="t3-password" class="t3-password">\r
                        ###LABEL_PASSWORD###\r
                </label>\r
-               <input type="password" id="t3-password" name="p_field" value="###VALUE_PASSWORD###" class="t3-password" tabindex="2" onkeypress="checkCapslock(event, true);" />\r
+               <input type="password" id="t3-password" name="p_field" value="###VALUE_PASSWORD###" class="t3-password" tabindex="2" />\r
                <div class="t3-login-clearInputField">\r
                        <a id="t3-password-clearIcon" style="display: none;">\r
-                               <img src="sysext/t3skin/icons/common-input-clear.png" alt="clear" title="clear" />\r
+                               <img src="sysext/t3skin/icons/common-input-clear.png" alt="###CLEAR###" title="###CLEAR###" />\r
                        </a>\r
                </div>\r
+               <div class="t3-login-alert-capslock" id="t3-password-alert-capslock" style="display: none">\r
+                       <img src="sysext/t3skin/icons/login_capslock.gif" alt="###ERROR_CAPSLOCK###" title="###ERROR_CAPSLOCK###" />\r
+               </div>\r
        </div>\r
        <!-- ###INTERFACE_SELECTOR### begin -->\r
        <div class="t3-login-interface t3-login-field" id="t3-login-interface-section">\r
                        <a id="t3-login-switchToOpenId" class="switchToOpenId">###LABEL_SWITCHOPENID###</a>\r
                </div>\r
                <div id="t3-login-form-footer-openId" style="display: none">\r
-                       <a id="t3-login-whatIsOpenId" class="switchToOpenId">###LABEL_WHATISOPENID###</a>\r
+                       <a href="http://openid.net/" id="t3-login-whatIsOpenId" target="_blank" class="switchToOpenId">###LABEL_WHATISOPENID###</a>\r
                        &#124;\r
                        <a id="t3-login-switchToDefault" class="switchToOpenId">###LABEL_SWITCHDEFAULT###</a>\r
                </div>\r