WIP of modern login page:

- Fix login registration links
- Fix error message position
This commit is contained in:
Hadi Nategh 2017-02-07 19:05:13 +01:00
parent 775f8f93fc
commit f114a273ed
7 changed files with 128 additions and 86 deletions

View File

@ -1688,18 +1688,21 @@ body {
position: relative;
padding-top: 5%;
}
#loginMainDiv #divAppIconBar #divLogo img {
#loginMainDiv #divAppIconBar #divLogo img.login_logo {
margin: 0 auto;
max-width: 270px;
}
#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] {
max-width: 270px;
}
#loginMainDiv #loginScreenMessage {
#loginMainDiv #loginScreenMessage not([class $= "error"]) {
margin: 1em;
color: #0a5ca5;
font-size: 12pt;
}
#loginMainDiv #loginScreenMessage not([class $= "error"]) img {
max-width: 100%;
}
#loginMainDiv div#login_footer {
position: absolute;
bottom: 0;
@ -1723,20 +1726,17 @@ body {
padding: 0;
width: 280px;
}
#loginMainDiv div#centerBox #loginCdMessage {
margin: 1em;
-webkit-border-radius: 3px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius: 3px;
-moz-border-radius-topleft: 10px;
border-radius: 3px;
border-top-left-radius: 10px;
color: #0a5ca5;
text-align: center;
white-space: pre-wrap;
#loginMainDiv div#centerBox #loginCdMessage:not(.error) {
display: none;
}
#loginMainDiv div#centerBox #loginCdMessage.error {
font-weight: bold;
margin: 1em;
border: none;
background: transparent;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
}
#loginMainDiv div#centerBox form {
border-radius: 5px;
@ -1853,6 +1853,14 @@ body {
width: 250px;
margin-top: 25px;
}
#loginMainDiv div#centerBox form table.divLoginbox .registration {
font-size: 12px;
}
#loginMainDiv div#centerBox form table.divLoginbox .registration a:not(:first-child):before {
padding-left: 5px;
padding-right: 5px;
content: '|';
}
#wrap div.animation_login {
margin: 0.3em;
position: fixed;

View File

@ -1677,18 +1677,21 @@ body {
position: relative;
padding-top: 5%;
}
#loginMainDiv #divAppIconBar #divLogo img {
#loginMainDiv #divAppIconBar #divLogo img.login_logo {
margin: 0 auto;
max-width: 270px;
}
#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] {
max-width: 270px;
}
#loginMainDiv #loginScreenMessage {
#loginMainDiv #loginScreenMessage not([class $= "error"]) {
margin: 1em;
color: #0a5ca5;
font-size: 12pt;
}
#loginMainDiv #loginScreenMessage not([class $= "error"]) img {
max-width: 100%;
}
#loginMainDiv div#login_footer {
position: absolute;
bottom: 0;
@ -1712,20 +1715,17 @@ body {
padding: 0;
width: 280px;
}
#loginMainDiv div#centerBox #loginCdMessage {
margin: 1em;
-webkit-border-radius: 3px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius: 3px;
-moz-border-radius-topleft: 10px;
border-radius: 3px;
border-top-left-radius: 10px;
color: #0a5ca5;
text-align: center;
white-space: pre-wrap;
#loginMainDiv div#centerBox #loginCdMessage:not(.error) {
display: none;
}
#loginMainDiv div#centerBox #loginCdMessage.error {
font-weight: bold;
margin: 1em;
border: none;
background: transparent;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
}
#loginMainDiv div#centerBox form {
border-radius: 5px;
@ -1842,6 +1842,14 @@ body {
width: 250px;
margin-top: 25px;
}
#loginMainDiv div#centerBox form table.divLoginbox .registration {
font-size: 12px;
}
#loginMainDiv div#centerBox form table.divLoginbox .registration a:not(:first-child):before {
padding-left: 5px;
padding-right: 5px;
content: '|';
}
#wrap div.animation_login {
margin: 0.3em;
position: fixed;

View File

@ -55,20 +55,27 @@
#divLogo {
position: relative;
padding-top: 5%;
img {
img.login_logo {
margin: 0 auto;
max-width: 270px;
}
img[src$="svg"]{
img.login_logo [src$="svg"]{
max-width: 270px;
}
}
}
#loginScreenMessage [class $= "error"] {
}
// Meldung
#loginScreenMessage {
#loginScreenMessage not([class $= "error"]) {
margin: 1em;
color: #0a5ca5;
font-size: 12pt;
img {max-width: 100%;}
}
div#login_footer {
position: absolute;
@ -95,15 +102,18 @@
width: 280px;
// Message
#loginCdMessage {
margin: 1em;
.border_radius_button_lefttop;
color: #0a5ca5;
text-align: center;
white-space: pre-wrap;
#loginCdMessage:not(.error) {
display: none;
}
#loginCdMessage.error {
font-weight: bold;
margin: 1em;
border:none;
background: transparent;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
}
// Formular
@ -189,6 +199,16 @@
&:focus {}
margin-top: 25px;
}
.registration {
font-size: 12px;
a:not(:first-child) {
&:before {
padding-left:5px;
padding-right:5px;
content: '|';
}
}
}
}
} // Formular
} //center box

View File

@ -4,7 +4,7 @@
<div id="loginMainDiv">
<div id="divAppIconBar" style="position:relative;">
<div id="divLogo">
<a href="{logo_url}" target="_blank"><img src="{logo_file}" border="0" alt="{logo_title}" title="{logo_title}" /></a>
<a href="{logo_url}" target="_blank"><img src="{logo_file}" class="login_logo" border="0" alt="{logo_title}" title="{logo_title}" /></a>
<div id="loginScreenMessage">{lang_message}</div>
</div>
</div>
@ -20,6 +20,11 @@
<input type="hidden" name="account_type" value="u" />
</td>
</tr>
<tr>
<td>
<div id="loginCdMessage" class="{cd_class}">{cd}</div>
</td>
</tr>
<tr>
<td>
<span class="field_icons username"></span>
@ -75,17 +80,15 @@
<input tabindex="8" type="submit" value=" {lang_login} " name="submitit" />
</td>
</tr>
<!-- BEGIN registration -->
<tr>
<td colspan="3" height="20" align="center" class="registration">
{lostpassword_link}
{lostid_link}
{register_link}
{lostpassword_link}{lostid_link}{register_link}
</td>
</tr>
<!-- END registration -->
</table>
<div id="loginCdMessage" class="{cd_class}">{cd}</div>
</form>
</div>
<div id="login_footer">

View File

@ -10,7 +10,7 @@
</div>
<div id="centerBox">
<div id="loginAvatar">{login_avatar}</div>
<div id="loginCdMessage" class="{cd_class}">{cd}</div>
<form name="login_form" method="post" action="{login_url}">
<table class="divLoginbox divSideboxEntry" cellspacing="0" cellpadding="2" border="0" align="center">
<tr class="divLoginboxHeader">
@ -23,6 +23,11 @@
</td>
</tr>
<tr>
<td>
<div id="loginCdMessage" class="{cd_class}">{cd}</div>
</td>
</tr>
<tr>
<td>
<span class="field_icons username"></span>
<input name="login" tabindex="4" value="{login}" size="30" placeholder="{lang_username}" {autofocus_login}/>
@ -80,9 +85,7 @@
<!-- BEGIN registration -->
<tr>
<td colspan="3" height="20" align="center" class="registration">
{lostpassword_link}
{lostid_link}
{register_link}
{lostpassword_link}{lostid_link}{register_link}
</td>
</tr>
<!-- END registration -->

View File

@ -1699,18 +1699,21 @@ body {
position: relative;
padding-top: 5%;
}
#loginMainDiv #divAppIconBar #divLogo img {
#loginMainDiv #divAppIconBar #divLogo img.login_logo {
margin: 0 auto;
max-width: 270px;
}
#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] {
max-width: 270px;
}
#loginMainDiv #loginScreenMessage {
#loginMainDiv #loginScreenMessage not([class $= "error"]) {
margin: 1em;
color: #0a5ca5;
font-size: 12pt;
}
#loginMainDiv #loginScreenMessage not([class $= "error"]) img {
max-width: 100%;
}
#loginMainDiv div#login_footer {
position: absolute;
bottom: 0;
@ -1734,20 +1737,17 @@ body {
padding: 0;
width: 280px;
}
#loginMainDiv div#centerBox #loginCdMessage {
margin: 1em;
-webkit-border-radius: 3px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius: 3px;
-moz-border-radius-topleft: 10px;
border-radius: 3px;
border-top-left-radius: 10px;
color: #0a5ca5;
text-align: center;
white-space: pre-wrap;
#loginMainDiv div#centerBox #loginCdMessage:not(.error) {
display: none;
}
#loginMainDiv div#centerBox #loginCdMessage.error {
font-weight: bold;
margin: 1em;
border: none;
background: transparent;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
}
#loginMainDiv div#centerBox form {
border-radius: 5px;
@ -1864,6 +1864,14 @@ body {
width: 250px;
margin-top: 25px;
}
#loginMainDiv div#centerBox form table.divLoginbox .registration {
font-size: 12px;
}
#loginMainDiv div#centerBox form table.divLoginbox .registration a:not(:first-child):before {
padding-left: 5px;
padding-right: 5px;
content: '|';
}
#wrap div.animation_login {
margin: 0.3em;
position: fixed;
@ -6934,8 +6942,8 @@ form[id^="tracker-"] .dialogHeadbar {
overflow: auto;
}
div#loginMainDiv #divAppIconBar {
max-height: 25%;
height: 25%;
max-height: 20%;
height: 20%;
}
div#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
width: 40%;
@ -6988,15 +6996,14 @@ form[id^="tracker-"] .dialogHeadbar {
font-size: large;
padding: 0.8%;
}
div#loginMainDiv div#centerBox form table.divLoginbox td.registration {
font-size: 180%;
}
div#loginMainDiv div#centerBox #loginCdMessage {
font-size: 10pt !important;
color: white;
margin: 8px;
font-size: 12pt !important;
padding: 0;
border: 0;
background: none;
font-weight: normal !important;
word-break: break-all;
}
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
@ -7021,11 +7028,8 @@ form[id^="tracker-"] .dialogHeadbar {
font-size: large;
padding: 0.8%;
}
body div#loginMainDiv div#centerBox form table.divLoginbox td.registration {
font-size: 250%;
}
body div#loginMainDiv div#centerBox #loginCdMessage {
font-size: large;
font-size: 12pt !important;
padding: 0;
}
}

View File

@ -56,8 +56,8 @@
.mob-bg-login;
overflow:auto;
#divAppIconBar {
max-height:25%;
height:25%;
max-height:20%;
height:20%;
#divLogo img[src$="svg"] {
width:40%;
margin-top: 5px;
@ -104,18 +104,17 @@
td {
font-size: large;
padding:0.8%;
&.registration{
font-size: 180%;
}
}
}
}
#loginCdMessage {
.mob-fontsize-n !important;
.mob-color-login-message;
margin: 8px;
.mob-fontsize-l !important;
padding:0;
border:0;
background: none;
font-weight: normal !important;
word-break: break-all;
}
}
}
@ -147,14 +146,11 @@
td {
font-size: large;
padding:0.8%;
&.registration {
font-size: 250%;
}
}
}
}
#loginCdMessage {
font-size:large;
.mob-fontsize-l !important;
padding:0;
}
}