From d609c67d8a8a21a4eb4bf3e983825a9c24602a0d Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Thu, 6 Apr 2017 18:17:47 +0200 Subject: [PATCH] Some adjustment for modern login-page --- api/js/login.js | 4 +- pixelegg/css/mobile.css | 61 +++++++++++----- pixelegg/css/pixelegg.css | 61 +++++++++++----- pixelegg/less/layout_loginPage.less | 65 ++++++++++++----- pixelegg/login.tpl | 9 ++- pixelegg/login_mobile.tpl | 10 +-- pixelegg/mobile/fw_mobile.css | 108 +++++++++++++++++++++++----- pixelegg/mobile/fw_mobile.less | 49 ++++++++++++- 8 files changed, 287 insertions(+), 80 deletions(-) diff --git a/api/js/login.js b/api/js/login.js index b5bf04e0c8..82bc5d7f18 100644 --- a/api/js/login.js +++ b/api/js/login.js @@ -17,7 +17,9 @@ 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); + }); function do_social(_data) { var social = jQuery(document.createElement('div')) diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 64447194ce..fa54c5bbda 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -1675,14 +1675,56 @@ body { background-position: 50% 50%; background-size: cover; } +#loginMainDiv .loginMessageBox { + width: 100%; + position: absolute; + z-index: 100; +} +#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) { + display: none; +} +#loginMainDiv .loginMessageBox #loginCdMessage.error { + border: 3px solid #d2a453; + 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; + border-top-left-radius: 0; + border-top: none; + border-top-right-radius: 0; + padding-bottom: 20px; +} +#loginMainDiv .loginMessageBox .closeBtn { + position: absolute; + right: 30px; + border: 2px solid #d2a453; + border-radius: 100%; + width: 20px; + height: 20px; + text-align: center; + line-height: 20px; + font-size: 13pt; + font-weight: bold; + bottom: 10px; +} +#loginMainDiv .loginMessageBox .closeBtn:hover { + color: white; + background: black; + cursor: pointer; +} #loginMainDiv #divAppIconBar { background: transparent; width: 100%; text-align: center; - height: 35%; + height: 45%; display: block; - max-height: 35%; - overflow-y: auto; + max-height: 45%; } #loginMainDiv #divAppIconBar #divLogo { position: relative; @@ -1704,7 +1746,6 @@ body { } #loginMainDiv #loginScreenMessage:not([class $= "error"]) { margin: 1em; - color: #0a5ca5; font-size: 12pt; } #loginMainDiv #loginScreenMessage:not([class $= "error"]) img { @@ -1733,18 +1774,6 @@ body { padding: 0; width: 280px; } -#loginMainDiv div#centerBox #loginCdMessage:not(.error) { - display: none; -} -#loginMainDiv div#centerBox #loginCdMessage.error { - margin: 1em; - border: none; - background: transparent; - color: red; - text-align: center; - font-size: 12pt; - white-space: pre-wrap; -} #loginMainDiv div#centerBox form { border-radius: 5px; opacity: 0.94; diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index c88b23b3a1..598cd75da5 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -1664,14 +1664,56 @@ body { background-position: 50% 50%; background-size: cover; } +#loginMainDiv .loginMessageBox { + width: 100%; + position: absolute; + z-index: 100; +} +#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) { + display: none; +} +#loginMainDiv .loginMessageBox #loginCdMessage.error { + border: 3px solid #d2a453; + 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; + border-top-left-radius: 0; + border-top: none; + border-top-right-radius: 0; + padding-bottom: 20px; +} +#loginMainDiv .loginMessageBox .closeBtn { + position: absolute; + right: 30px; + border: 2px solid #d2a453; + border-radius: 100%; + width: 20px; + height: 20px; + text-align: center; + line-height: 20px; + font-size: 13pt; + font-weight: bold; + bottom: 10px; +} +#loginMainDiv .loginMessageBox .closeBtn:hover { + color: white; + background: black; + cursor: pointer; +} #loginMainDiv #divAppIconBar { background: transparent; width: 100%; text-align: center; - height: 35%; + height: 45%; display: block; - max-height: 35%; - overflow-y: auto; + max-height: 45%; } #loginMainDiv #divAppIconBar #divLogo { position: relative; @@ -1693,7 +1735,6 @@ body { } #loginMainDiv #loginScreenMessage:not([class $= "error"]) { margin: 1em; - color: #0a5ca5; font-size: 12pt; } #loginMainDiv #loginScreenMessage:not([class $= "error"]) img { @@ -1722,18 +1763,6 @@ body { padding: 0; width: 280px; } -#loginMainDiv div#centerBox #loginCdMessage:not(.error) { - display: none; -} -#loginMainDiv div#centerBox #loginCdMessage.error { - margin: 1em; - border: none; - background: transparent; - color: red; - text-align: center; - font-size: 12pt; - white-space: pre-wrap; -} #loginMainDiv div#centerBox form { border-radius: 5px; opacity: 0.94; diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less index d7eb5839b8..b4b40c7c21 100644 --- a/pixelegg/less/layout_loginPage.less +++ b/pixelegg/less/layout_loginPage.less @@ -43,15 +43,60 @@ background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; + + .loginMessageBox { + width: 100%; + position: absolute; + z-index: 100; + // Message + #loginCdMessage:not(.error) { + display: none; + } + + #loginCdMessage.error { + border: 3px solid #d2a453; + 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; + border-top-left-radius: 0; + border-top: none; + border-top-right-radius: 0; + padding-bottom: 20px; + } + .closeBtn { + position: absolute; + right: 30px; + border: 2px solid #d2a453; + border-radius: 100%; + width: 20px; + height: 20px; + text-align: center; + line-height: 20px; + font-size: 13pt; + font-weight: bold; + bottom: 10px; + &:hover { + color: white; + background:black; + cursor: pointer; + } + } + } // Logo Leiste #divAppIconBar { background: transparent; width: 100%; text-align: center; - height: 35%; + height: 45%; display: block; - max-height: 35%; - overflow-y: auto; + max-height: 45%; #divLogo { position: relative; padding-top: 2%; @@ -78,7 +123,6 @@ // Meldung #loginScreenMessage:not([class $= "error"]) { margin: 1em; - color: #0a5ca5; font-size: 12pt; img {max-width: 100%;} } @@ -106,20 +150,7 @@ padding: 0; width: 280px; - // Message - #loginCdMessage:not(.error) { - display: none; - } - #loginCdMessage.error { - margin: 1em; - border:none; - background: transparent; - color: red; - text-align: center; - font-size: 12pt; - white-space: pre-wrap; - } // Formular form { diff --git a/pixelegg/login.tpl b/pixelegg/login.tpl index ef16e5d352..d16aa2ead8 100644 --- a/pixelegg/login.tpl +++ b/pixelegg/login.tpl @@ -2,6 +2,10 @@
+
+
{cd}
+ X +