Some adjustment for modern login-page

This commit is contained in:
Hadi Nategh 2017-04-06 18:17:47 +02:00
parent 8d5d178869
commit d609c67d8a
8 changed files with 287 additions and 80 deletions

View File

@ -17,7 +17,9 @@ egw_LAB.wait(function()
{
// lock the device orientation in portrait view
if (screen.orientation && typeof screen.orientation.lock == 'function') screen.orientation.lock('portrait');
jQuery('.closeBtn').click(function (){
setTimeout(function(){jQuery('.loginMessageBox').slideUp("slow")},100);
});
function do_social(_data)
{
var social = jQuery(document.createElement('div'))

View File

@ -1675,14 +1675,56 @@ body {
background-position: 50% 50%;
background-size: cover;
}
#loginMainDiv .loginMessageBox {
width: 100%;
position: absolute;
z-index: 100;
}
#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) {
display: none;
}
#loginMainDiv .loginMessageBox #loginCdMessage.error {
border: 3px solid #d2a453;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
height: auto;
background: white;
opacity: 0.94;
margin-left: 20px;
border-radius: 5px;
margin-right: 20px;
border-top-left-radius: 0;
border-top: none;
border-top-right-radius: 0;
padding-bottom: 20px;
}
#loginMainDiv .loginMessageBox .closeBtn {
position: absolute;
right: 30px;
border: 2px solid #d2a453;
border-radius: 100%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 13pt;
font-weight: bold;
bottom: 10px;
}
#loginMainDiv .loginMessageBox .closeBtn:hover {
color: white;
background: black;
cursor: pointer;
}
#loginMainDiv #divAppIconBar {
background: transparent;
width: 100%;
text-align: center;
height: 35%;
height: 45%;
display: block;
max-height: 35%;
overflow-y: auto;
max-height: 45%;
}
#loginMainDiv #divAppIconBar #divLogo {
position: relative;
@ -1704,7 +1746,6 @@ body {
}
#loginMainDiv #loginScreenMessage:not([class $= "error"]) {
margin: 1em;
color: #0a5ca5;
font-size: 12pt;
}
#loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
@ -1733,18 +1774,6 @@ body {
padding: 0;
width: 280px;
}
#loginMainDiv div#centerBox #loginCdMessage:not(.error) {
display: none;
}
#loginMainDiv div#centerBox #loginCdMessage.error {
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;
opacity: 0.94;

View File

@ -1664,14 +1664,56 @@ body {
background-position: 50% 50%;
background-size: cover;
}
#loginMainDiv .loginMessageBox {
width: 100%;
position: absolute;
z-index: 100;
}
#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) {
display: none;
}
#loginMainDiv .loginMessageBox #loginCdMessage.error {
border: 3px solid #d2a453;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
height: auto;
background: white;
opacity: 0.94;
margin-left: 20px;
border-radius: 5px;
margin-right: 20px;
border-top-left-radius: 0;
border-top: none;
border-top-right-radius: 0;
padding-bottom: 20px;
}
#loginMainDiv .loginMessageBox .closeBtn {
position: absolute;
right: 30px;
border: 2px solid #d2a453;
border-radius: 100%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 13pt;
font-weight: bold;
bottom: 10px;
}
#loginMainDiv .loginMessageBox .closeBtn:hover {
color: white;
background: black;
cursor: pointer;
}
#loginMainDiv #divAppIconBar {
background: transparent;
width: 100%;
text-align: center;
height: 35%;
height: 45%;
display: block;
max-height: 35%;
overflow-y: auto;
max-height: 45%;
}
#loginMainDiv #divAppIconBar #divLogo {
position: relative;
@ -1693,7 +1735,6 @@ body {
}
#loginMainDiv #loginScreenMessage:not([class $= "error"]) {
margin: 1em;
color: #0a5ca5;
font-size: 12pt;
}
#loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
@ -1722,18 +1763,6 @@ body {
padding: 0;
width: 280px;
}
#loginMainDiv div#centerBox #loginCdMessage:not(.error) {
display: none;
}
#loginMainDiv div#centerBox #loginCdMessage.error {
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;
opacity: 0.94;

View File

@ -43,15 +43,60 @@
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
.loginMessageBox {
width: 100%;
position: absolute;
z-index: 100;
// Message
#loginCdMessage:not(.error) {
display: none;
}
#loginCdMessage.error {
border: 3px solid #d2a453;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
height: auto;
background: white;
opacity: 0.94;
margin-left: 20px;
border-radius: 5px;
margin-right: 20px;
border-top-left-radius: 0;
border-top: none;
border-top-right-radius: 0;
padding-bottom: 20px;
}
.closeBtn {
position: absolute;
right: 30px;
border: 2px solid #d2a453;
border-radius: 100%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 13pt;
font-weight: bold;
bottom: 10px;
&:hover {
color: white;
background:black;
cursor: pointer;
}
}
}
// Logo Leiste
#divAppIconBar {
background: transparent;
width: 100%;
text-align: center;
height: 35%;
height: 45%;
display: block;
max-height: 35%;
overflow-y: auto;
max-height: 45%;
#divLogo {
position: relative;
padding-top: 2%;
@ -78,7 +123,6 @@
// Meldung
#loginScreenMessage:not([class $= "error"]) {
margin: 1em;
color: #0a5ca5;
font-size: 12pt;
img {max-width: 100%;}
}
@ -106,20 +150,7 @@
padding: 0;
width: 280px;
// Message
#loginCdMessage:not(.error) {
display: none;
}
#loginCdMessage.error {
margin: 1em;
border:none;
background: transparent;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
}
// Formular
form {

View File

@ -2,6 +2,10 @@
<div id="loginMainDiv" style="background-image:url({background_file})">
<div class="loginMessageBox">
<div id="loginCdMessage" class="{cd_class}">{cd}</div>
<span class="closeBtn">X</span>
</div>
<div id="divAppIconBar" style="position:relative;">
<div id="divLogo">
<div class="login_logo_container">
@ -24,11 +28,6 @@
<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>

View File

@ -2,6 +2,10 @@
<div id="loginMainDiv" style="background-image:url({background_file})">
<div class="loginMessageBox">
<div id="loginCdMessage" class="{cd_class}">{cd}</div>
<span class="closeBtn">X</span>
</div>
<div id="divAppIconBar" style="position:relative;">
<div id="divLogo">
<div class="login_logo_container">
@ -28,11 +32,6 @@
</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}/>
</td>
@ -86,6 +85,7 @@
<input tabindex="8" type="submit" value=" {lang_login} " name="submitit" />
</td>
</tr>
<!-- BEGIN registration -->
<tr>
<td colspan="3" height="20" align="center" class="registration">

View File

@ -1686,14 +1686,56 @@ body {
background-position: 50% 50%;
background-size: cover;
}
#loginMainDiv .loginMessageBox {
width: 100%;
position: absolute;
z-index: 100;
}
#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) {
display: none;
}
#loginMainDiv .loginMessageBox #loginCdMessage.error {
border: 3px solid #d2a453;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
height: auto;
background: white;
opacity: 0.94;
margin-left: 20px;
border-radius: 5px;
margin-right: 20px;
border-top-left-radius: 0;
border-top: none;
border-top-right-radius: 0;
padding-bottom: 20px;
}
#loginMainDiv .loginMessageBox .closeBtn {
position: absolute;
right: 30px;
border: 2px solid #d2a453;
border-radius: 100%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 13pt;
font-weight: bold;
bottom: 10px;
}
#loginMainDiv .loginMessageBox .closeBtn:hover {
color: white;
background: black;
cursor: pointer;
}
#loginMainDiv #divAppIconBar {
background: transparent;
width: 100%;
text-align: center;
height: 35%;
height: 45%;
display: block;
max-height: 35%;
overflow-y: auto;
max-height: 45%;
}
#loginMainDiv #divAppIconBar #divLogo {
position: relative;
@ -1715,7 +1757,6 @@ body {
}
#loginMainDiv #loginScreenMessage:not([class $= "error"]) {
margin: 1em;
color: #0a5ca5;
font-size: 12pt;
}
#loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
@ -1744,18 +1785,6 @@ body {
padding: 0;
width: 280px;
}
#loginMainDiv div#centerBox #loginCdMessage:not(.error) {
display: none;
}
#loginMainDiv div#centerBox #loginCdMessage.error {
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;
opacity: 0.94;
@ -6948,9 +6977,52 @@ form[id^="tracker-"] .dialogHeadbar {
background-color: #486F93;
overflow: auto;
}
div#loginMainDiv .loginMessageBox {
width: 100%;
position: absolute;
z-index: 100;
}
div#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) {
display: none;
}
div#loginMainDiv .loginMessageBox #loginCdMessage.error {
border: 3px solid #d2a453;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
height: auto;
background: white;
opacity: 0.94;
margin-left: 20px;
border-radius: 5px;
margin-right: 20px;
border-top-left-radius: 0;
border-top: none;
border-top-right-radius: 0;
padding-bottom: 20px;
}
div#loginMainDiv .loginMessageBox .closeBtn {
position: absolute;
right: 30px;
border: 2px solid #d2a453;
border-radius: 100%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 13pt;
font-weight: bold;
bottom: 10px;
}
div#loginMainDiv .loginMessageBox .closeBtn:hover {
color: white;
background: black;
cursor: pointer;
}
div#loginMainDiv #divAppIconBar {
max-height: 20%;
height: 20%;
max-height: 35%;
height: 35%;
}
div#loginMainDiv #divAppIconBar #divLogo .login_logo_container {
width: 200px;

View File

@ -55,9 +55,54 @@
div#loginMainDiv{
.mob-bg-login;
overflow:auto;
.loginMessageBox {
width: 100%;
position: absolute;
z-index: 100;
// Message
#loginCdMessage:not(.error) {
display: none;
}
#loginCdMessage.error {
border: 3px solid #d2a453;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
height: auto;
background: white;
opacity: 0.94;
margin-left: 20px;
border-radius: 5px;
margin-right: 20px;
border-top-left-radius: 0;
border-top: none;
border-top-right-radius: 0;
padding-bottom: 20px;
}
.closeBtn {
position: absolute;
right: 30px;
border: 2px solid #d2a453;
border-radius: 100%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 13pt;
font-weight: bold;
bottom: 10px;
&:hover {
color: white;
background:black;
cursor: pointer;
}
}
}
#divAppIconBar {
max-height:20%;
height:20%;
max-height:35%;
height:35%;
#divLogo {
.login_logo_container {
width:200px;