From 20c464a1618d97ae63f6f3c30a48f65627393268 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Mon, 10 May 2021 16:35:05 +0200 Subject: [PATCH] WIP login Ui: - Get login messages the same style as egw messages - Arrange logo and social icons --- api/js/login.js | 4 ++-- api/src/Framework/Login.php | 6 +++--- pixelegg/css/mobile.css | 29 +++++++++++++++++++--------- pixelegg/css/monochrome.css | 29 +++++++++++++++++++--------- pixelegg/css/pixelegg.css | 29 +++++++++++++++++++--------- pixelegg/less/layout_loginPage.less | 30 +++++++++++++++++++---------- pixelegg/login.tpl | 16 +++++++-------- pixelegg/mobile/fw_mobile.css | 29 +++++++++++++++++++--------- 8 files changed, 113 insertions(+), 59 deletions(-) diff --git a/api/js/login.js b/api/js/login.js index b2f530fd90..e91cb8c308 100644 --- a/api/js/login.js +++ b/api/js/login.js @@ -24,8 +24,8 @@ egw_LAB.wait(function() // lock the device orientation in portrait view if (screen.orientation && typeof screen.orientation.lock == 'function') screen.orientation.lock('portrait'); - jQuery('.closeBtn').click(function (){ - setTimeout(function(){jQuery('.loginMessageBox').slideUp("slow");},100); + jQuery('.close').click(function (){ + setTimeout(function(){jQuery('.egw_message_wrapper').slideUp("slow");},100); }); function do_social(_data) { diff --git a/api/src/Framework/Login.php b/api/src/Framework/Login.php index 96ad3e3a49..b4200ed522 100644 --- a/api/src/Framework/Login.php +++ b/api/src/Framework/Login.php @@ -115,7 +115,7 @@ class Login } $tmpl->set_var('cd', $cd_msg); $tmpl->set_var('cd_class', isset($_GET['cd']) && $_GET['cd'] != 1 || - !empty($GLOBALS['egw_info']['server']['login_message']) ? 'error' : ''); + !empty($GLOBALS['egw_info']['server']['login_message']) ? 'error_message' : ''); $last_loginid = $_COOKIE['last_loginid']; $last_domain = $_COOKIE['last_domain']; @@ -128,7 +128,7 @@ class Login $tmpl->set_var('lang_new_password',lang('New password')); $tmpl->set_var('lang_repeat_password',lang('Repeat password')); $tmpl->set_var('cd', $change_passwd); - $tmpl->set_var('cd_class', 'error'); + $tmpl->set_var('cd_class', 'error_message'); $last_loginid = $_POST['login']; $last_domain = $_POST['domain']; $tmpl->set_var('passwd', $_POST['passwd']); @@ -284,7 +284,7 @@ class Login if (Api\Header\UserAgent::type() == 'msie' && Api\Header\UserAgent::version() < 12) { $tmpl->set_var('cd', lang('Browser %1 %2 is not recommended. You may experience issues and not working features. Please use the latest version of Chrome, Firefox or Edge. Thank You!',Api\Header\UserAgent::type(), Api\Header\UserAgent::version())); - $tmpl->set_var('cd_class', 'error'); + $tmpl->set_var('cd_class', 'warning_message'); } // load jquery for login screen too Api\Framework::includeJS('jquery', 'jquery'); diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index c52603f7f3..7717b25a47 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -1936,18 +1936,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { } #socialBox { display: inline-block; - width: 100%; + width: calc(100% - 24px); } #socialBox #socialMedia { - margin: 0 auto; width: 200px; } #socialBox #socialMedia a { - margin-left: 10px; + margin-right: 10px; } #socialBox #socialMedia a img { width: 24px; - filter: contrast(0.6); + filter: contrast(0.3); } /* ################################################################################## * login page @@ -1964,6 +1963,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { background-position: 50% 50%; background-size: cover; } +#loginMainDiv .egw_message_wrapper { + box-shadow: 2px 1px 6px #bbbbbb; + -moz-box-shadow: 2px 1px 6px #bbbbbb; + -webkit-box-shadow: 2px 1px 6px #bbbbbb; + -khtml-box-shadow: 2px 1px 6px #bbbbbb; +} +#loginMainDiv .egw_message_wrapper #egw_message { + font-size: 9pt; +} +#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) { + display: none; +} #loginMainDiv .loginMessageBox { width: 100%; position: absolute; @@ -2006,7 +2017,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { background: transparent; width: 100%; text-align: center; - height: 40%; + height: 30%; display: block; max-height: 40%; } @@ -2150,9 +2161,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { width: 280px; } #loginMainDiv div#centerBox .egw_logo { - width: 100%; + width: 24px; height: 24px; - margin: 15px auto; + float: right; } #loginMainDiv div#centerBox .egw_logo a.logo_footer { margin: auto; @@ -2287,12 +2298,12 @@ 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: #0a5ca5; + background-color: #3b7aa4; color: #ffffff; font-size: 20px; padding-left: 0; width: 250px; - margin-top: 25px; + margin-top: 15px; } #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { padding-left: 25px; diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css index c8016edc61..9b20aca6c8 100644 --- a/pixelegg/css/monochrome.css +++ b/pixelegg/css/monochrome.css @@ -1916,18 +1916,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { } #socialBox { display: inline-block; - width: 100%; + width: calc(100% - 24px); } #socialBox #socialMedia { - margin: 0 auto; width: 200px; } #socialBox #socialMedia a { - margin-left: 10px; + margin-right: 10px; } #socialBox #socialMedia a img { width: 24px; - filter: contrast(0.6); + filter: contrast(0.3); } /* ################################################################################## * login page @@ -1944,6 +1943,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { background-position: 50% 50%; background-size: cover; } +#loginMainDiv .egw_message_wrapper { + box-shadow: 2px 1px 6px #bbbbbb; + -moz-box-shadow: 2px 1px 6px #bbbbbb; + -webkit-box-shadow: 2px 1px 6px #bbbbbb; + -khtml-box-shadow: 2px 1px 6px #bbbbbb; +} +#loginMainDiv .egw_message_wrapper #egw_message { + font-size: 9pt; +} +#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) { + display: none; +} #loginMainDiv .loginMessageBox { width: 100%; position: absolute; @@ -1986,7 +1997,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { background: transparent; width: 100%; text-align: center; - height: 40%; + height: 30%; display: block; max-height: 40%; } @@ -2130,9 +2141,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { width: 280px; } #loginMainDiv div#centerBox .egw_logo { - width: 100%; + width: 24px; height: 24px; - margin: 15px auto; + float: right; } #loginMainDiv div#centerBox .egw_logo a.logo_footer { margin: auto; @@ -2267,12 +2278,12 @@ 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: #0a5ca5; + background-color: #3b7aa4; color: #ffffff; font-size: 20px; padding-left: 0; width: 250px; - margin-top: 25px; + margin-top: 15px; } #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { padding-left: 25px; diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index c4343eefb5..2680c39075 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -1926,18 +1926,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { } #socialBox { display: inline-block; - width: 100%; + width: calc(100% - 24px); } #socialBox #socialMedia { - margin: 0 auto; width: 200px; } #socialBox #socialMedia a { - margin-left: 10px; + margin-right: 10px; } #socialBox #socialMedia a img { width: 24px; - filter: contrast(0.6); + filter: contrast(0.3); } /* ################################################################################## * login page @@ -1954,6 +1953,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { background-position: 50% 50%; background-size: cover; } +#loginMainDiv .egw_message_wrapper { + box-shadow: 2px 1px 6px #bbbbbb; + -moz-box-shadow: 2px 1px 6px #bbbbbb; + -webkit-box-shadow: 2px 1px 6px #bbbbbb; + -khtml-box-shadow: 2px 1px 6px #bbbbbb; +} +#loginMainDiv .egw_message_wrapper #egw_message { + font-size: 9pt; +} +#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) { + display: none; +} #loginMainDiv .loginMessageBox { width: 100%; position: absolute; @@ -1996,7 +2007,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { background: transparent; width: 100%; text-align: center; - height: 40%; + height: 30%; display: block; max-height: 40%; } @@ -2140,9 +2151,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form { width: 280px; } #loginMainDiv div#centerBox .egw_logo { - width: 100%; + width: 24px; height: 24px; - margin: 15px auto; + float: right; } #loginMainDiv div#centerBox .egw_logo a.logo_footer { margin: auto; @@ -2277,12 +2288,12 @@ 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: #0a5ca5; + background-color: #3b7aa4; color: #ffffff; font-size: 20px; padding-left: 0; width: 250px; - margin-top: 25px; + margin-top: 15px; } #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit { padding-left: 25px; diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less index cdfc102309..cd8cb01b31 100644 --- a/pixelegg/less/layout_loginPage.less +++ b/pixelegg/less/layout_loginPage.less @@ -58,15 +58,14 @@ div#loginMainDiv.stockLoginBackground { #socialBox { display: inline-block; - width: 100%; + width: ~"calc(100% - 24px)"; #socialMedia { - margin: 0 auto; width: 200px; a { - margin-left: 10px; + margin-right: 10px; img { width: 24px; - filter:contrast(0.6); + filter:contrast(0.3); } } } @@ -88,7 +87,18 @@ div#loginMainDiv.stockLoginBackground { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; - + .egw_message_wrapper { + box-shadow: 2px 1px 6px #bbbbbb; + -moz-box-shadow: 2px 1px 6px #bbbbbb; + -webkit-box-shadow: 2px 1px 6px #bbbbbb; + -khtml-box-shadow: 2px 1px 6px #bbbbbb; + #egw_message{ + &:not(.error_message):not(.warning_message) { + display: none; + } + font-size: 9pt; + } + } .loginMessageBox { width: 100%; position: absolute; @@ -134,7 +144,7 @@ div#loginMainDiv.stockLoginBackground { background: transparent; width: 100%; text-align: center; - height: 40%; + height: 30%; display: block; max-height: 40%; #divLogo { @@ -276,9 +286,9 @@ div#loginMainDiv.stockLoginBackground { width: 280px; .egw_logo { - width: 100%; + width: 24px; height: 24px; - margin: 15px auto; + float: right; a.logo_footer { margin: auto; width: 24px; @@ -377,14 +387,14 @@ div#loginMainDiv.stockLoginBackground { width: auto; } input[type="submit"], select.onChangeSubmit { - background-color: #0a5ca5; + background-color: #3b7aa4; .color_0_gray; .fontsize_xxl; padding-left:0; width: 250px; &:hover{} &:focus {} - margin-top: 25px; + margin-top: 15px; } select.onChangeSubmit { padding-left: 25px; diff --git a/pixelegg/login.tpl b/pixelegg/login.tpl index c970f4e441..12e1c0df1d 100644 --- a/pixelegg/login.tpl +++ b/pixelegg/login.tpl @@ -2,9 +2,9 @@
-
-
{cd} - X
+
+
{cd} +