From f114a273ed367198611c4b49c0b832a66845ee9a Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Tue, 7 Feb 2017 19:05:13 +0100 Subject: [PATCH] WIP of modern login page: - Fix login registration links - Fix error message position --- pixelegg/css/mobile.css | 38 ++++++++++++-------- pixelegg/css/pixelegg.css | 38 ++++++++++++-------- pixelegg/less/layout_loginPage.less | 40 +++++++++++++++------ pixelegg/login.tpl | 13 ++++--- pixelegg/login_mobile.tpl | 11 +++--- pixelegg/mobile/fw_mobile.css | 56 +++++++++++++++-------------- pixelegg/mobile/fw_mobile.less | 18 ++++------ 7 files changed, 128 insertions(+), 86 deletions(-) diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 10f51f14ed..c183922072 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -1688,18 +1688,21 @@ body { position: relative; padding-top: 5%; } -#loginMainDiv #divAppIconBar #divLogo img { +#loginMainDiv #divAppIconBar #divLogo img.login_logo { margin: 0 auto; max-width: 270px; } -#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { +#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] { max-width: 270px; } -#loginMainDiv #loginScreenMessage { +#loginMainDiv #loginScreenMessage not([class $= "error"]) { margin: 1em; color: #0a5ca5; font-size: 12pt; } +#loginMainDiv #loginScreenMessage not([class $= "error"]) img { + max-width: 100%; +} #loginMainDiv div#login_footer { position: absolute; bottom: 0; @@ -1723,20 +1726,17 @@ body { padding: 0; width: 280px; } -#loginMainDiv div#centerBox #loginCdMessage { - margin: 1em; - -webkit-border-radius: 3px; - -webkit-border-top-left-radius: 10px; - -moz-border-radius: 3px; - -moz-border-radius-topleft: 10px; - border-radius: 3px; - border-top-left-radius: 10px; - color: #0a5ca5; - text-align: center; - white-space: pre-wrap; +#loginMainDiv div#centerBox #loginCdMessage:not(.error) { + display: none; } #loginMainDiv div#centerBox #loginCdMessage.error { - font-weight: bold; + 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; @@ -1853,6 +1853,14 @@ body { width: 250px; margin-top: 25px; } +#loginMainDiv div#centerBox form table.divLoginbox .registration { + font-size: 12px; +} +#loginMainDiv div#centerBox form table.divLoginbox .registration a:not(:first-child):before { + padding-left: 5px; + padding-right: 5px; + content: '|'; +} #wrap div.animation_login { margin: 0.3em; position: fixed; diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 6696129db6..337993d988 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -1677,18 +1677,21 @@ body { position: relative; padding-top: 5%; } -#loginMainDiv #divAppIconBar #divLogo img { +#loginMainDiv #divAppIconBar #divLogo img.login_logo { margin: 0 auto; max-width: 270px; } -#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { +#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] { max-width: 270px; } -#loginMainDiv #loginScreenMessage { +#loginMainDiv #loginScreenMessage not([class $= "error"]) { margin: 1em; color: #0a5ca5; font-size: 12pt; } +#loginMainDiv #loginScreenMessage not([class $= "error"]) img { + max-width: 100%; +} #loginMainDiv div#login_footer { position: absolute; bottom: 0; @@ -1712,20 +1715,17 @@ body { padding: 0; width: 280px; } -#loginMainDiv div#centerBox #loginCdMessage { - margin: 1em; - -webkit-border-radius: 3px; - -webkit-border-top-left-radius: 10px; - -moz-border-radius: 3px; - -moz-border-radius-topleft: 10px; - border-radius: 3px; - border-top-left-radius: 10px; - color: #0a5ca5; - text-align: center; - white-space: pre-wrap; +#loginMainDiv div#centerBox #loginCdMessage:not(.error) { + display: none; } #loginMainDiv div#centerBox #loginCdMessage.error { - font-weight: bold; + 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; @@ -1842,6 +1842,14 @@ body { width: 250px; margin-top: 25px; } +#loginMainDiv div#centerBox form table.divLoginbox .registration { + font-size: 12px; +} +#loginMainDiv div#centerBox form table.divLoginbox .registration a:not(:first-child):before { + padding-left: 5px; + padding-right: 5px; + content: '|'; +} #wrap div.animation_login { margin: 0.3em; position: fixed; diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less index ea80b2cec3..1d6f0faf1a 100644 --- a/pixelegg/less/layout_loginPage.less +++ b/pixelegg/less/layout_loginPage.less @@ -55,20 +55,27 @@ #divLogo { position: relative; padding-top: 5%; - img { + img.login_logo { margin: 0 auto; max-width: 270px; } - img[src$="svg"]{ + img.login_logo [src$="svg"]{ max-width: 270px; } } } + + #loginScreenMessage [class $= "error"] { + + } // Meldung - #loginScreenMessage { + #loginScreenMessage not([class $= "error"]) { margin: 1em; color: #0a5ca5; font-size: 12pt; + img {max-width: 100%;} + + } div#login_footer { position: absolute; @@ -95,15 +102,18 @@ width: 280px; // Message - #loginCdMessage { - margin: 1em; - .border_radius_button_lefttop; - color: #0a5ca5; - text-align: center; - white-space: pre-wrap; + #loginCdMessage:not(.error) { + display: none; } + #loginCdMessage.error { - font-weight: bold; + margin: 1em; + border:none; + background: transparent; + color: red; + text-align: center; + font-size: 12pt; + white-space: pre-wrap; } // Formular @@ -189,6 +199,16 @@ &:focus {} margin-top: 25px; } + .registration { + font-size: 12px; + a:not(:first-child) { + &:before { + padding-left:5px; + padding-right:5px; + content: '|'; + } + } + } } } // Formular } //center box diff --git a/pixelegg/login.tpl b/pixelegg/login.tpl index fed24ba8d4..e15e986bd6 100644 --- a/pixelegg/login.tpl +++ b/pixelegg/login.tpl @@ -4,7 +4,7 @@
@@ -20,6 +20,11 @@ + + +
{cd}
+ + @@ -75,17 +80,15 @@ + - {lostpassword_link} - {lostid_link} - {register_link} + {lostpassword_link}{lostid_link}{register_link} -
{cd}
{login_avatar}
-
{cd}
+
@@ -23,6 +23,11 @@ + + + diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 9246c15c6e..1d18e46492 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -1699,18 +1699,21 @@ body { position: relative; padding-top: 5%; } -#loginMainDiv #divAppIconBar #divLogo img { +#loginMainDiv #divAppIconBar #divLogo img.login_logo { margin: 0 auto; max-width: 270px; } -#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { +#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] { max-width: 270px; } -#loginMainDiv #loginScreenMessage { +#loginMainDiv #loginScreenMessage not([class $= "error"]) { margin: 1em; color: #0a5ca5; font-size: 12pt; } +#loginMainDiv #loginScreenMessage not([class $= "error"]) img { + max-width: 100%; +} #loginMainDiv div#login_footer { position: absolute; bottom: 0; @@ -1734,20 +1737,17 @@ body { padding: 0; width: 280px; } -#loginMainDiv div#centerBox #loginCdMessage { - margin: 1em; - -webkit-border-radius: 3px; - -webkit-border-top-left-radius: 10px; - -moz-border-radius: 3px; - -moz-border-radius-topleft: 10px; - border-radius: 3px; - border-top-left-radius: 10px; - color: #0a5ca5; - text-align: center; - white-space: pre-wrap; +#loginMainDiv div#centerBox #loginCdMessage:not(.error) { + display: none; } #loginMainDiv div#centerBox #loginCdMessage.error { - font-weight: bold; + 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; @@ -1864,6 +1864,14 @@ body { width: 250px; margin-top: 25px; } +#loginMainDiv div#centerBox form table.divLoginbox .registration { + font-size: 12px; +} +#loginMainDiv div#centerBox form table.divLoginbox .registration a:not(:first-child):before { + padding-left: 5px; + padding-right: 5px; + content: '|'; +} #wrap div.animation_login { margin: 0.3em; position: fixed; @@ -6934,8 +6942,8 @@ form[id^="tracker-"] .dialogHeadbar { overflow: auto; } div#loginMainDiv #divAppIconBar { - max-height: 25%; - height: 25%; + max-height: 20%; + height: 20%; } div#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { width: 40%; @@ -6988,15 +6996,14 @@ form[id^="tracker-"] .dialogHeadbar { font-size: large; padding: 0.8%; } - div#loginMainDiv div#centerBox form table.divLoginbox td.registration { - font-size: 180%; - } div#loginMainDiv div#centerBox #loginCdMessage { - font-size: 10pt !important; - color: white; + margin: 8px; + font-size: 12pt !important; padding: 0; border: 0; background: none; + font-weight: normal !important; + word-break: break-all; } } @media only screen and (max-device-width : 1024px) and (orientation : portrait) { @@ -7021,11 +7028,8 @@ form[id^="tracker-"] .dialogHeadbar { font-size: large; padding: 0.8%; } - body div#loginMainDiv div#centerBox form table.divLoginbox td.registration { - font-size: 250%; - } body div#loginMainDiv div#centerBox #loginCdMessage { - font-size: large; + font-size: 12pt !important; padding: 0; } } diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less index 9c77b5c4a9..85952d23b8 100644 --- a/pixelegg/mobile/fw_mobile.less +++ b/pixelegg/mobile/fw_mobile.less @@ -56,8 +56,8 @@ .mob-bg-login; overflow:auto; #divAppIconBar { - max-height:25%; - height:25%; + max-height:20%; + height:20%; #divLogo img[src$="svg"] { width:40%; margin-top: 5px; @@ -104,18 +104,17 @@ td { font-size: large; padding:0.8%; - &.registration{ - font-size: 180%; - } } } } #loginCdMessage { - .mob-fontsize-n !important; - .mob-color-login-message; + margin: 8px; + .mob-fontsize-l !important; padding:0; border:0; background: none; + font-weight: normal !important; + word-break: break-all; } } } @@ -147,14 +146,11 @@ td { font-size: large; padding:0.8%; - &.registration { - font-size: 250%; - } } } } #loginCdMessage { - font-size:large; + .mob-fontsize-l !important; padding:0; } }
+
{cd}
+
@@ -80,9 +85,7 @@
- {lostpassword_link} - {lostid_link} - {register_link} + {lostpassword_link}{lostid_link}{register_link}