extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-28 01:28:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP login Ui:

Browse Source 
- Re-arrange registration links
- Fix bg colors
- Fix social icons padding
This commit is contained in:
Hadi Nategh 2021-05-12 12:37:26 +02:00
parent 4ea4bad1ce
commit 3037191ea8
8 changed files with 106 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
api/js/login.js
View File

@ -51,6 +51,7 @@ egw_LAB.wait(function()
} }
do_social([ do_social([
{ "svg": egw_webserverUrl+"/api/templates/default/images/logo164x164.svg", "url": "https://www.egroupware.org/en", "lang": { "de": "https://www.egroupware.org/de/" }},
{ "svg": egw_webserverUrl+"/api/templates/default/images/login_contact.svg", "url": "https://www.egroupware.org/en/contact.html", "lang": { "de": "https://www.egroupware.org/de/kontakt.html" }}, { "svg": egw_webserverUrl+"/api/templates/default/images/login_contact.svg", "url": "https://www.egroupware.org/en/contact.html", "lang": { "de": "https://www.egroupware.org/de/kontakt.html" }},
{ "svg": egw_webserverUrl+"/api/templates/default/images/login_facebook.svg", "url": "https://www.facebook.com/egroupware" }, { "svg": egw_webserverUrl+"/api/templates/default/images/login_facebook.svg", "url": "https://www.facebook.com/egroupware" },
{ "svg": egw_webserverUrl+"/api/templates/default/images/login_twitter.svg", "url": "https://twitter.com/egroupware" }, { "svg": egw_webserverUrl+"/api/templates/default/images/login_twitter.svg", "url": "https://twitter.com/egroupware" },

6
api/src/Framework/Login.php
View File

@ -172,15 +172,15 @@ class Login
$lang = $_GET['lang'] ? $_GET['lang'] : $GLOBALS['egw_info']['user']['preferences']['common']['lang']; $lang = $_GET['lang'] ? $_GET['lang'] : $GLOBALS['egw_info']['user']['preferences']['common']['lang'];
if ($config_reg['register_link']) if ($config_reg['register_link'])
{ {
$reg_link='&nbsp;<a href="'. $this->framework->link('/registration/index.php','lang_code='.$lang). '&cd=no">'.lang('Sign up').'</a>'; $reg_link='<a class="signup" href="'. $this->framework->link('/registration/index.php','lang_code='.$lang). '&cd=no">'.lang('Sign up').'</a>';
} }
if ($config_reg['lostpassword_link']) if ($config_reg['lostpassword_link'])
{ {
$lostpw_link='&nbsp;<a href="'. $this->framework->link('/registration/index.php','menuaction=registration.registration_ui.lost_password&lang_code='.$lang). '&cd=no">'.lang('Lost password').'</a>'; $lostpw_link='<a href="'. $this->framework->link('/registration/index.php','menuaction=registration.registration_ui.lost_password&lang_code='.$lang). '&cd=no">'.lang('Lost password').'</a>';
} }
if ($config_reg['lostid_link']) if ($config_reg['lostid_link'])
{ {
$lostid_link='&nbsp;<a href="'. $this->framework->link('/registration/index.php','menuaction=registration.registration_ui.lost_username&lang_code='.$lang). '&cd=no">'.lang('Lost Login Id').'</a>'; $lostid_link='<a href="'. $this->framework->link('/registration/index.php','menuaction=registration.registration_ui.lost_username&lang_code='.$lang). '&cd=no">'.lang('Lost Login Id').'</a>';
} }
/* if at least one option of "registration" is activated display the registration section */ /* if at least one option of "registration" is activated display the registration section */

28
pixelegg/css/mobile.css
View File

@ -1936,13 +1936,21 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#socialBox { #socialBox {
display: inline-block; display: inline-block;
width: calc(100% - 24px); width: 100%;
margin-top: 8px;
} }
#socialBox #socialMedia { #socialBox #socialMedia {
width: 200px; width: 210px;
margin: 0 auto;
} }
#socialBox #socialMedia a { #socialBox #socialMedia a {
margin-right: 10px; margin: 5px;
}
#socialBox #socialMedia a:first-child img {
filter: none;
}
#socialBox #socialMedia a:last-child {
margin-right: 0;
} }
#socialBox #socialMedia a img { #socialBox #socialMedia a img {
width: 24px; width: 24px;
@ -2022,7 +2030,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
right: 0; right: 0;
width: 100%; width: 100%;
height: 40px; height: 40px;
background: #1865aa; background: #4177A2;
overflow-x: clip; overflow-x: clip;
} }
#loginMainDiv div#login_footer .apps { #loginMainDiv div#login_footer .apps {
@ -2075,8 +2083,8 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity 0.8s; transition: opacity 0.8s;
border: 1px solid #1865aa; border: 1px solid #0d789f;
border-bottom: 6px solid #1865aa; border-bottom: 6px solid #4177A2;
cursor: default; cursor: default;
} }
#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg { #loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
@ -2118,7 +2126,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
height: 9px; height: 9px;
left: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
background-color: #1865aa; background-color: #4177A2;
} }
#loginMainDiv div#centerBox { #loginMainDiv div#centerBox {
margin: 0 auto -20px; margin: 0 auto -20px;
@ -2266,7 +2274,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"], #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"],
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
background-color: #3b7aa4; background-color: #4177A2;
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
padding-left: 0; padding-left: 0;
@ -2284,6 +2292,10 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
padding-right: 5px; padding-right: 5px;
content: '|'; content: '|';
} }
#loginMainDiv div#centerBox form table.divLoginbox a.signup {
margin-top: 8px;
display: block;
}
#wrap div.animation_login { #wrap div.animation_login {
margin: 0.3em; margin: 0.3em;
position: fixed; position: fixed;

28
pixelegg/css/monochrome.css
View File

@ -1916,13 +1916,21 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#socialBox { #socialBox {
display: inline-block; display: inline-block;
width: calc(100% - 24px); width: 100%;
margin-top: 8px;
} }
#socialBox #socialMedia { #socialBox #socialMedia {
width: 200px; width: 210px;
margin: 0 auto;
} }
#socialBox #socialMedia a { #socialBox #socialMedia a {
margin-right: 10px; margin: 5px;
}
#socialBox #socialMedia a:first-child img {
filter: none;
}
#socialBox #socialMedia a:last-child {
margin-right: 0;
} }
#socialBox #socialMedia a img { #socialBox #socialMedia a img {
width: 24px; width: 24px;
@ -2002,7 +2010,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
right: 0; right: 0;
width: 100%; width: 100%;
height: 40px; height: 40px;
background: #1865aa; background: #4177A2;
overflow-x: clip; overflow-x: clip;
} }
#loginMainDiv div#login_footer .apps { #loginMainDiv div#login_footer .apps {
@ -2055,8 +2063,8 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity 0.8s; transition: opacity 0.8s;
border: 1px solid #1865aa; border: 1px solid #0d789f;
border-bottom: 6px solid #1865aa; border-bottom: 6px solid #4177A2;
cursor: default; cursor: default;
} }
#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg { #loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
@ -2098,7 +2106,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
height: 9px; height: 9px;
left: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
background-color: #1865aa; background-color: #4177A2;
} }
#loginMainDiv div#centerBox { #loginMainDiv div#centerBox {
margin: 0 auto -20px; margin: 0 auto -20px;
@ -2246,7 +2254,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"], #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"],
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
background-color: #3b7aa4; background-color: #4177A2;
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
padding-left: 0; padding-left: 0;
@ -2264,6 +2272,10 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
padding-right: 5px; padding-right: 5px;
content: '|'; content: '|';
} }
#loginMainDiv div#centerBox form table.divLoginbox a.signup {
margin-top: 8px;
display: block;
}
#wrap div.animation_login { #wrap div.animation_login {
margin: 0.3em; margin: 0.3em;
position: fixed; position: fixed;

28
pixelegg/css/pixelegg.css
View File

@ -1926,13 +1926,21 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#socialBox { #socialBox {
display: inline-block; display: inline-block;
width: calc(100% - 24px); width: 100%;
margin-top: 8px;
} }
#socialBox #socialMedia { #socialBox #socialMedia {
width: 200px; width: 210px;
margin: 0 auto;
} }
#socialBox #socialMedia a { #socialBox #socialMedia a {
margin-right: 10px; margin: 5px;
}
#socialBox #socialMedia a:first-child img {
filter: none;
}
#socialBox #socialMedia a:last-child {
margin-right: 0;
} }
#socialBox #socialMedia a img { #socialBox #socialMedia a img {
width: 24px; width: 24px;
@ -2012,7 +2020,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
right: 0; right: 0;
width: 100%; width: 100%;
height: 40px; height: 40px;
background: #1865aa; background: #4177A2;
overflow-x: clip; overflow-x: clip;
} }
#loginMainDiv div#login_footer .apps { #loginMainDiv div#login_footer .apps {
@ -2065,8 +2073,8 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity 0.8s; transition: opacity 0.8s;
border: 1px solid #1865aa; border: 1px solid #0d789f;
border-bottom: 6px solid #1865aa; border-bottom: 6px solid #4177A2;
cursor: default; cursor: default;
} }
#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg { #loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
@ -2108,7 +2116,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
height: 9px; height: 9px;
left: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
background-color: #1865aa; background-color: #4177A2;
} }
#loginMainDiv div#centerBox { #loginMainDiv div#centerBox {
margin: 0 auto -20px; margin: 0 auto -20px;
@ -2256,7 +2264,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"], #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"],
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
background-color: #3b7aa4; background-color: #4177A2;
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
padding-left: 0; padding-left: 0;
@ -2274,6 +2282,10 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
padding-right: 5px; padding-right: 5px;
content: '|'; content: '|';
} }
#loginMainDiv div#centerBox form table.divLoginbox a.signup {
margin-top: 8px;
display: block;
}
#wrap div.animation_login { #wrap div.animation_login {
margin: 0.3em; margin: 0.3em;
position: fixed; position: fixed;

27
pixelegg/less/layout_loginPage.less
View File

@ -58,11 +58,18 @@ div#loginMainDiv.stockLoginBackground {
#socialBox { #socialBox {
display: inline-block; display: inline-block;
width: ~"calc(100% - 24px)"; width: 100%;
margin-top: 8px;
#socialMedia { #socialMedia {
width: 200px; width: 210px;
margin: 0 auto;
a { a {
margin-right: 10px; &:first-child img {
filter:none;
}
&:last-child {margin-right:0}
margin: 5px;
img { img {
width: 24px; width: 24px;
filter:contrast(0.3); filter:contrast(0.3);
@ -150,7 +157,7 @@ div#loginMainDiv.stockLoginBackground {
right: 0; right: 0;
width: 100%; width: 100%;
height: 40px; height: 40px;
background: #1865aa; background: #4177A2;
overflow-x: clip; overflow-x: clip;
.apps { .apps {
width: 812px; width: 812px;
@ -197,8 +204,8 @@ div#loginMainDiv.stockLoginBackground {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity 0.8s; transition: opacity 0.8s;
border: 1px solid #1865aa; border: 1px solid #0d789f;
border-bottom: 6px solid #1865aa; border-bottom: 6px solid #4177A2;
cursor: default; cursor: default;
img.icon-bg { img.icon-bg {
width: 35px; width: 35px;
@ -236,7 +243,7 @@ div#loginMainDiv.stockLoginBackground {
height: 9px; height: 9px;
left: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
background-color: #1865aa; background-color: #4177A2;
} }
} }
} }
@ -353,7 +360,7 @@ div#loginMainDiv.stockLoginBackground {
width: auto; width: auto;
} }
input[type="submit"], select.onChangeSubmit { input[type="submit"], select.onChangeSubmit {
background-color: #3b7aa4; background-color: #4177A2;
.color_0_gray; .color_0_gray;
.fontsize_xxl; .fontsize_xxl;
padding-left:0; padding-left:0;
@ -375,6 +382,10 @@ div#loginMainDiv.stockLoginBackground {
} }
} }
} }
a.signup {
margin-top: 8px;
display: block;
}
} }
} // Formular } // Formular
} //center box } //center box

10
pixelegg/login.tpl
View File

@ -102,18 +102,14 @@
<!-- 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}{lostid_link}{register_link} {lostpassword_link}{lostid_link}
</td> </td>
</tr> </tr>
<!-- END registration --> <!-- END registration -->
<tr> <tr>
<td> <td align="center">
<div id="socialBox"></div> <div id="socialBox"></div>
<div class="egw_logo"> {register_link}
<a href="https://www.egroupware.org" class="logo_footer" target="_blank">
<img src="api/templates/default/images/login_logo.png">
</a>
</div>
</td> </td>
</tr> </tr>
</table> </table>

28
pixelegg/mobile/fw_mobile.css
View File

@ -1947,13 +1947,21 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#socialBox { #socialBox {
display: inline-block; display: inline-block;
width: calc(100% - 24px); width: 100%;
margin-top: 8px;
} }
#socialBox #socialMedia { #socialBox #socialMedia {
width: 200px; width: 210px;
margin: 0 auto;
} }
#socialBox #socialMedia a { #socialBox #socialMedia a {
margin-right: 10px; margin: 5px;
}
#socialBox #socialMedia a:first-child img {
filter: none;
}
#socialBox #socialMedia a:last-child {
margin-right: 0;
} }
#socialBox #socialMedia a img { #socialBox #socialMedia a img {
width: 24px; width: 24px;
@ -2033,7 +2041,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
right: 0; right: 0;
width: 100%; width: 100%;
height: 40px; height: 40px;
background: #1865aa; background: #4177A2;
overflow-x: clip; overflow-x: clip;
} }
#loginMainDiv div#login_footer .apps { #loginMainDiv div#login_footer .apps {
@ -2086,8 +2094,8 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity 0.8s; transition: opacity 0.8s;
border: 1px solid #1865aa; border: 1px solid #0d789f;
border-bottom: 6px solid #1865aa; border-bottom: 6px solid #4177A2;
cursor: default; cursor: default;
} }
#loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg { #loginMainDiv div#login_footer .apps .tooltip .content img.icon-bg {
@ -2129,7 +2137,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
height: 9px; height: 9px;
left: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
background-color: #1865aa; background-color: #4177A2;
} }
#loginMainDiv div#centerBox { #loginMainDiv div#centerBox {
margin: 0 auto -20px; margin: 0 auto -20px;
@ -2277,7 +2285,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
} }
#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"], #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"],
#loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
background-color: #3b7aa4; background-color: #4177A2;
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
padding-left: 0; padding-left: 0;
@ -2295,6 +2303,10 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
padding-right: 5px; padding-right: 5px;
content: '|'; content: '|';
} }
#loginMainDiv div#centerBox form table.divLoginbox a.signup {
margin-top: 8px;
display: block;
}
#wrap div.animation_login { #wrap div.animation_login {
margin: 0.3em; margin: 0.3em;
position: fixed; position: fixed;