holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests 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([
{ "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_facebook.svg", "url": "https://www.facebook.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'];
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'])
{
$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'])
{
$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 */

28
pixelegg/css/mobile.css
View File

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

28
pixelegg/css/monochrome.css
View File

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

28
pixelegg/css/pixelegg.css
View File

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

27
pixelegg/less/layout_loginPage.less
View File

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

10
pixelegg/login.tpl
View File

@ -102,18 +102,14 @@
<!-- BEGIN registration -->
<tr>
<td colspan="3" height="20" align="center" class="registration">
{lostpassword_link}{lostid_link}{register_link}
{lostpassword_link}{lostid_link}
</td>
</tr>
<!-- END registration -->
<tr>
<td>
<td align="center">
<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>
{register_link}
</td>
</tr>
</table>

28
pixelegg/mobile/fw_mobile.css
View File

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