holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP login Ui: Adopt mobile login page

Browse Source
This commit is contained in:
Hadi Nategh 2021-05-11 12:56:21 +02:00
parent dd77ff3f5d
commit 7d724b8c3b
7 changed files with 36 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
pixelegg/css/mobile.css
View File

@ -1981,44 +1981,6 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) { #loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) {
display: none; display: none;
} }
#loginMainDiv .loginMessageBox {
width: 100%;
position: absolute;
z-index: 100;
}
#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) {
display: none;
}
#loginMainDiv .loginMessageBox #loginCdMessage.error {
border: 3px solid #7ab7ec;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
height: auto;
background: white;
opacity: 0.94;
margin-left: 20px;
margin-right: 20px;
padding: 20px;
margin-top: 20px;
}
#loginMainDiv .loginMessageBox .closeBtn {
position: absolute;
right: 30px;
border-radius: 100%;
width: 25px;
height: 25px;
text-align: center;
line-height: 20px;
font-size: 15px;
top: 30px;
color: #b6b7bb;
}
#loginMainDiv .loginMessageBox .closeBtn:hover {
color: #5e6063;
cursor: pointer;
}
#loginMainDiv #divAppIconBar { #loginMainDiv #divAppIconBar {
background: transparent; background: transparent;
width: 100%; width: 100%;

38
pixelegg/css/monochrome.css
View File

@ -1961,44 +1961,6 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) { #loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) {
display: none; display: none;
} }
#loginMainDiv .loginMessageBox {
width: 100%;
position: absolute;
z-index: 100;
}
#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) {
display: none;
}
#loginMainDiv .loginMessageBox #loginCdMessage.error {
border: 3px solid #7ab7ec;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
height: auto;
background: white;
opacity: 0.94;
margin-left: 20px;
margin-right: 20px;
padding: 20px;
margin-top: 20px;
}
#loginMainDiv .loginMessageBox .closeBtn {
position: absolute;
right: 30px;
border-radius: 100%;
width: 25px;
height: 25px;
text-align: center;
line-height: 20px;
font-size: 15px;
top: 30px;
color: #b6b7bb;
}
#loginMainDiv .loginMessageBox .closeBtn:hover {
color: #5e6063;
cursor: pointer;
}
#loginMainDiv #divAppIconBar { #loginMainDiv #divAppIconBar {
background: transparent; background: transparent;
width: 100%; width: 100%;

38
pixelegg/css/pixelegg.css
View File

@ -1971,44 +1971,6 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) { #loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) {
display: none; display: none;
} }
#loginMainDiv .loginMessageBox {
width: 100%;
position: absolute;
z-index: 100;
}
#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) {
display: none;
}
#loginMainDiv .loginMessageBox #loginCdMessage.error {
border: 3px solid #7ab7ec;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
height: auto;
background: white;
opacity: 0.94;
margin-left: 20px;
margin-right: 20px;
padding: 20px;
margin-top: 20px;
}
#loginMainDiv .loginMessageBox .closeBtn {
position: absolute;
right: 30px;
border-radius: 100%;
width: 25px;
height: 25px;
text-align: center;
line-height: 20px;
font-size: 15px;
top: 30px;
color: #b6b7bb;
}
#loginMainDiv .loginMessageBox .closeBtn:hover {
color: #5e6063;
cursor: pointer;
}
#loginMainDiv #divAppIconBar { #loginMainDiv #divAppIconBar {
background: transparent; background: transparent;
width: 100%; width: 100%;

40
pixelegg/less/layout_loginPage.less
View File

@ -105,46 +105,6 @@ div#loginMainDiv.stockLoginBackground {
font-size: 9pt; font-size: 9pt;
} }
} }
.loginMessageBox {
width: 100%;
position: absolute;
z-index: 100;
// Message
#loginCdMessage:not(.error) {
display: none;
}
#loginCdMessage.error {
border: 3px solid #7ab7ec;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
height: auto;
background: white;
opacity: 0.94;
margin-left: 20px;
margin-right: 20px;
padding: 20px;
margin-top: 20px;
}
.closeBtn {
position: absolute;
right: 30px;
border-radius: 100%;
width: 25px;
height: 25px;
text-align: center;
line-height: 20px;
font-size: 15px;
top: 30px;
color: #b6b7bb;
&:hover {
color: #5e6063;
cursor: pointer;
}
}
}
// Logo Leiste // Logo Leiste
#divAppIconBar { #divAppIconBar {
background: transparent; background: transparent;

25
pixelegg/login_mobile.tpl
View File

@ -1,11 +1,10 @@
<script src="./api/js/login.js" type="text/javascript"></script> <script src="./api/js/login.js" type="text/javascript"></script>
<div id="loginMainDiv" style="background-image:url({background_file})"> <div id="loginMainDiv" style="background-image:url({background_file})" class="{stock_background_class}">
<div class="loginMessageBox"> <div class="egw_message_wrapper">
<div id="loginCdMessage" class="{cd_class}">{cd} <div id="egw_message" class="{cd_class}">{cd}
<span class="closeBtn">X</span> <span class="close"></span></div>
</div>
</div> </div>
<div id="divAppIconBar" style="position:relative;"> <div id="divAppIconBar" style="position:relative;">
<div id="divLogo"> <div id="divLogo">
@ -109,13 +108,21 @@
</td> </td>
</tr> </tr>
<!-- END registration --> <!-- END registration -->
<tr>
<td>
<div id="socialBox"></div>
<div class="egw_logo">
<a href="https://www.egroupware.org" class="logo_footer" target="_blank">
<img src="api/templates/default/images/login_logo.png">
</a>
</div>
</td>
</tr>
</table> </table>
</form> </form>
</div> </div>
<div id="login_footer"> <div id="login_footer">
<div id="socialBox"></div>
<a href="http://www.egroupware.org" class="logo_footer">
<img src="api/templates/default/images/login_logo.png">
</a>
</div> </div>
</div> </div>

89
pixelegg/mobile/fw_mobile.css
View File

@ -1992,44 +1992,6 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) { #loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) {
display: none; display: none;
} }
#loginMainDiv .loginMessageBox {
width: 100%;
position: absolute;
z-index: 100;
}
#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) {
display: none;
}
#loginMainDiv .loginMessageBox #loginCdMessage.error {
border: 3px solid #7ab7ec;
color: red;
text-align: center;
font-size: 12pt;
white-space: pre-wrap;
height: auto;
background: white;
opacity: 0.94;
margin-left: 20px;
margin-right: 20px;
padding: 20px;
margin-top: 20px;
}
#loginMainDiv .loginMessageBox .closeBtn {
position: absolute;
right: 30px;
border-radius: 100%;
width: 25px;
height: 25px;
text-align: center;
line-height: 20px;
font-size: 15px;
top: 30px;
color: #b6b7bb;
}
#loginMainDiv .loginMessageBox .closeBtn:hover {
color: #5e6063;
cursor: pointer;
}
#loginMainDiv #divAppIconBar { #loginMainDiv #divAppIconBar {
background: transparent; background: transparent;
width: 100%; width: 100%;
@ -7928,6 +7890,11 @@ table.egwGridView_grid img.et2_appicon {
background-size: 24px 24px !important; background-size: 24px 24px !important;
border: none; border: none;
} }
@media only screen and (max-device-width : 1024px) and (min-width: 736px) and (orientation : portrait), only screen and (max-device-width : 1024px) and (min-width: 736px) and (orientation : landscape) {
body div#loginMainDiv .egw_message_wrapper {
position: relative;
}
}
@media only screen and (max-device-width : 1024px) { @media only screen and (max-device-width : 1024px) {
#egw_fw_print { #egw_fw_print {
display: none; display: none;
@ -7936,50 +7903,9 @@ table.egwGridView_grid img.et2_appicon {
background-color: #486F93; background-color: #486F93;
overflow: auto; 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 #7ab7ec;
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;
padding: 20px;
margin-top: 20px;
}
div#loginMainDiv .loginMessageBox .closeBtn {
position: absolute;
right: 30px;
border: 2px solid #7ab7ec;
border-radius: 100%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 13pt;
font-weight: bold;
top: 30px;
}
div#loginMainDiv .loginMessageBox .closeBtn:hover {
color: white;
background: black;
cursor: pointer;
}
div#loginMainDiv #divAppIconBar { div#loginMainDiv #divAppIconBar {
max-height: 35%; max-height: 35%;
height: 35%; height: 20%;
} }
div#loginMainDiv #divAppIconBar #divLogo .login_logo_container { div#loginMainDiv #divAppIconBar #divLogo .login_logo_container {
width: 200px; width: 200px;
@ -8047,6 +7973,9 @@ table.egwGridView_grid img.et2_appicon {
font-weight: normal !important; font-weight: normal !important;
word-break: break-all; word-break: break-all;
} }
div#loginMainDiv div#login_footer {
background-color: transparent;
}
} }
@media only screen and (max-device-width : 1024px) and (orientation : portrait) { @media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body div#loginMainDiv div#centerBox { body div#loginMainDiv div#centerBox {

56
pixelegg/mobile/fw_mobile.less
View File

@ -46,7 +46,15 @@
background-size: 24px 24px !important; background-size: 24px 24px !important;
border:none; border:none;
} }
@media @tablet-portrait, @tablet-landscape {
body {
div#loginMainDiv {
.egw_message_wrapper {
position: relative;
}
}
}
}
@media @handheld @media @handheld
{ {
#egw_fw_print { #egw_fw_print {
@ -55,52 +63,9 @@
div#loginMainDiv{ div#loginMainDiv{
.mob-bg-login; .mob-bg-login;
overflow:auto; overflow:auto;
.loginMessageBox {
width: 100%;
position: absolute;
z-index: 100;
// Message
#loginCdMessage:not(.error) {
display: none;
}
#loginCdMessage.error {
border: 3px solid #7ab7ec;
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;
padding: 20px;
margin-top: 20px;
}
.closeBtn {
position: absolute;
right: 30px;
border: 2px solid #7ab7ec;
border-radius: 100%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 13pt;
font-weight: bold;
top: 30px;
&:hover {
color: white;
background:black;
cursor: pointer;
}
}
}
#divAppIconBar { #divAppIconBar {
max-height:35%; max-height:35%;
height:35%; height:20%;
#divLogo { #divLogo {
.login_logo_container { .login_logo_container {
width:200px; width:200px;
@ -166,6 +131,7 @@
word-break: break-all; word-break: break-all;
} }
} }
div#login_footer {background-color: transparent}
} }
} }