extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 06:30:59 +01:00
Code Issues 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) {
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 {
background: transparent;
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) {
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 {
background: transparent;
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) {
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 {
background: transparent;
width: 100%;

40
pixelegg/less/layout_loginPage.less
View File

@ -105,46 +105,6 @@ div#loginMainDiv.stockLoginBackground {
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
#divAppIconBar {
background: transparent;

25
pixelegg/login_mobile.tpl
View File

@ -1,11 +1,10 @@
<script src="./api/js/login.js" type="text/javascript"></script>
<div id="loginMainDiv" style="background-image:url({background_file})">
<div class="loginMessageBox">
<div id="loginCdMessage" class="{cd_class}">{cd}
<span class="closeBtn">X</span>
</div>
<div id="loginMainDiv" style="background-image:url({background_file})" class="{stock_background_class}">
<div class="egw_message_wrapper">
<div id="egw_message" class="{cd_class}">{cd}
<span class="close"></span></div>
</div>
<div id="divAppIconBar" style="position:relative;">
<div id="divLogo">
@ -109,13 +108,21 @@
</td>
</tr>
<!-- 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>
</form>
</div>
<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>

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) {
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 {
background: transparent;
width: 100%;
@ -7928,6 +7890,11 @@ table.egwGridView_grid img.et2_appicon {
background-size: 24px 24px !important;
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) {
#egw_fw_print {
display: none;
@ -7936,50 +7903,9 @@ table.egwGridView_grid img.et2_appicon {
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 #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 {
max-height: 35%;
height: 35%;
height: 20%;
}
div#loginMainDiv #divAppIconBar #divLogo .login_logo_container {
width: 200px;
@ -8047,6 +7973,9 @@ table.egwGridView_grid img.et2_appicon {
font-weight: normal !important;
word-break: break-all;
}
div#loginMainDiv div#login_footer {
background-color: transparent;
}
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body div#loginMainDiv div#centerBox {

56
pixelegg/mobile/fw_mobile.less
View File

@ -46,7 +46,15 @@
background-size: 24px 24px !important;
border:none;
}
@media @tablet-portrait, @tablet-landscape {
body {
div#loginMainDiv {
.egw_message_wrapper {
position: relative;
}
}
}
}
@media @handheld
{
#egw_fw_print {
@ -55,52 +63,9 @@
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 #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 {
max-height:35%;
height:35%;
height:20%;
#divLogo {
.login_logo_container {
width:200px;
@ -166,6 +131,7 @@
word-break: break-all;
}
}
div#login_footer {background-color: transparent}
}
}