extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-25 17:33:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP of modern login page:

Browse Source 
- 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
pixelegg/css/mobile.css
View File

@ -1688,18 +1688,21 @@ body {
position: relative; position: relative;
padding-top: 5%; padding-top: 5%;
} }
#loginMainDiv #divAppIconBar #divLogo img { #loginMainDiv #divAppIconBar #divLogo img.login_logo {
margin: 0 auto; margin: 0 auto;
max-width: 270px; max-width: 270px;
} }
#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { #loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] {
max-width: 270px; max-width: 270px;
} }
#loginMainDiv #loginScreenMessage { #loginMainDiv #loginScreenMessage not([class $= "error"]) {
margin: 1em; margin: 1em;
color: #0a5ca5; color: #0a5ca5;
font-size: 12pt; font-size: 12pt;
} }
#loginMainDiv #loginScreenMessage not([class $= "error"]) img {
max-width: 100%;
}
#loginMainDiv div#login_footer { #loginMainDiv div#login_footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -1723,20 +1726,17 @@ body {
padding: 0; padding: 0;
width: 280px; width: 280px;
} }
#loginMainDiv div#centerBox #loginCdMessage { #loginMainDiv div#centerBox #loginCdMessage:not(.error) {
margin: 1em; display: none;
-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.error { #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 { #loginMainDiv div#centerBox form {
border-radius: 5px; border-radius: 5px;
@ -1853,6 +1853,14 @@ body {
width: 250px; width: 250px;
margin-top: 25px; 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 { #wrap div.animation_login {
margin: 0.3em; margin: 0.3em;
position: fixed; position: fixed;

38
pixelegg/css/pixelegg.css
View File

@ -1677,18 +1677,21 @@ body {
position: relative; position: relative;
padding-top: 5%; padding-top: 5%;
} }
#loginMainDiv #divAppIconBar #divLogo img { #loginMainDiv #divAppIconBar #divLogo img.login_logo {
margin: 0 auto; margin: 0 auto;
max-width: 270px; max-width: 270px;
} }
#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { #loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] {
max-width: 270px; max-width: 270px;
} }
#loginMainDiv #loginScreenMessage { #loginMainDiv #loginScreenMessage not([class $= "error"]) {
margin: 1em; margin: 1em;
color: #0a5ca5; color: #0a5ca5;
font-size: 12pt; font-size: 12pt;
} }
#loginMainDiv #loginScreenMessage not([class $= "error"]) img {
max-width: 100%;
}
#loginMainDiv div#login_footer { #loginMainDiv div#login_footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -1712,20 +1715,17 @@ body {
padding: 0; padding: 0;
width: 280px; width: 280px;
} }
#loginMainDiv div#centerBox #loginCdMessage { #loginMainDiv div#centerBox #loginCdMessage:not(.error) {
margin: 1em; display: none;
-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.error { #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 { #loginMainDiv div#centerBox form {
border-radius: 5px; border-radius: 5px;
@ -1842,6 +1842,14 @@ body {
width: 250px; width: 250px;
margin-top: 25px; 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 { #wrap div.animation_login {
margin: 0.3em; margin: 0.3em;
position: fixed; position: fixed;

40
pixelegg/less/layout_loginPage.less
View File

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

13
pixelegg/login.tpl
View File

@ -4,7 +4,7 @@
<div id="loginMainDiv"> <div id="loginMainDiv">
<div id="divAppIconBar" style="position:relative;"> <div id="divAppIconBar" style="position:relative;">
<div id="divLogo"> <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 id="loginScreenMessage">{lang_message}</div>
</div> </div>
</div> </div>
@ -20,6 +20,11 @@
<input type="hidden" name="account_type" value="u" /> <input type="hidden" name="account_type" value="u" />
</td> </td>
</tr> </tr>
<tr>
<td>
<div id="loginCdMessage" class="{cd_class}">{cd}</div>
</td>
</tr>
<tr> <tr>
<td> <td>
<span class="field_icons username"></span> <span class="field_icons username"></span>
@ -75,17 +80,15 @@
<input tabindex="8" type="submit" value=" {lang_login} " name="submitit" /> <input tabindex="8" type="submit" value=" {lang_login} " name="submitit" />
</td> </td>
</tr> </tr>
<!-- BEGIN registration --> <!-- BEGIN registration -->
<tr> <tr>
<td colspan="3" height="20" align="center" class="registration"> <td colspan="3" height="20" align="center" class="registration">
{lostpassword_link} {lostpassword_link}{lostid_link}{register_link}
{lostid_link}
{register_link}
</td> </td>
</tr> </tr>
<!-- END registration --> <!-- END registration -->
</table> </table>
<div id="loginCdMessage" class="{cd_class}">{cd}</div>
</form> </form>
</div> </div>
<div id="login_footer"> <div id="login_footer">

11
pixelegg/login_mobile.tpl
View File

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

56
pixelegg/mobile/fw_mobile.css
View File

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

18
pixelegg/mobile/fw_mobile.less
View File

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