From 3037191ea827e4661f25fe35aacb2d07fe259eaa Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Wed, 12 May 2021 12:37:26 +0200 Subject: [PATCH] WIP login Ui: - Re-arrange registration links - Fix bg colors - Fix social icons padding --- api/js/login.js | 1 + api/src/Framework/Login.php | 6 +++--- pixelegg/css/mobile.css | 28 ++++++++++++++++++++-------- pixelegg/css/monochrome.css | 28 ++++++++++++++++++++-------- pixelegg/css/pixelegg.css | 28 ++++++++++++++++++++-------- pixelegg/less/layout_loginPage.less | 27 +++++++++++++++++++-------- pixelegg/login.tpl | 10 +++------- pixelegg/mobile/fw_mobile.css | 28 ++++++++++++++++++++-------- 8 files changed, 106 insertions(+), 50 deletions(-) diff --git a/api/js/login.js b/api/js/login.js index e91cb8c308..e7f77755f2 100644 --- a/api/js/login.js +++ b/api/js/login.js @@ -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" }, diff --git a/api/src/Framework/Login.php b/api/src/Framework/Login.php index b4200ed522..bc77f491a9 100644 --- a/api/src/Framework/Login.php +++ b/api/src/Framework/Login.php @@ -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=' '.lang('Sign up').''; + $reg_link=''.lang('Sign up').''; } if ($config_reg['lostpassword_link']) { - $lostpw_link=' '.lang('Lost password').''; + $lostpw_link=''.lang('Lost password').''; } if ($config_reg['lostid_link']) { - $lostid_link=' '.lang('Lost Login Id').''; + $lostid_link=''.lang('Lost Login Id').''; } /* if at least one option of "registration" is activated display the registration section */ diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 9d2b06040d..09e75d3da8 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -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; diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css index 3df6d2606e..e1a32b4ce9 100644 --- a/pixelegg/css/monochrome.css +++ b/pixelegg/css/monochrome.css @@ -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; diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 10de0550e4..42149cea63 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -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; diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less index 9b6ff9c60b..a5df2b8eac 100644 --- a/pixelegg/less/layout_loginPage.less +++ b/pixelegg/less/layout_loginPage.less @@ -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 diff --git a/pixelegg/login.tpl b/pixelegg/login.tpl index 12e1c0df1d..a2dc8c9ee3 100644 --- a/pixelegg/login.tpl +++ b/pixelegg/login.tpl @@ -102,18 +102,14 @@ - {lostpassword_link}{lostid_link}{register_link} + {lostpassword_link}{lostid_link} - +
- + {register_link} diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index ef13f10198..0920caf009 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -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;