extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-04 21:18:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP of modern login page:

Browse Source 
- Fix logo size
- Implement customizable background image
- Set different logo for login
This commit is contained in:
Hadi Nategh 2017-02-10 15:55:14 +01:00
parent 94e71aa6bf
commit 1d69265b9c
10 changed files with 92 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
api/src/Framework/Login.php
View File

@ -171,7 +171,15 @@ class Login
$tmpl->set_var('website_title', $GLOBALS['egw_info']['server']['site_title']); $tmpl->set_var('website_title', $GLOBALS['egw_info']['server']['site_title']);
$tmpl->set_var('template_set',$this->framework->template); $tmpl->set_var('template_set',$this->framework->template);
if (substr($GLOBALS['egw_info']['server']['login_background_file'], 0, 4) == 'http' ||
$GLOBALS['egw_info']['server']['login_background_file'][0] == '/')
{
$var['background_file'] = $GLOBALS['egw_info']['server']['login_background_file'];
}
else
{
$var['background_file'] = Api\Image::find('api',$GLOBALS['egw_info']['server']['login_background_file']?$GLOBALS['egw_info']['server']['login_background_file']:'login_background', '', null);
}
if (substr($GLOBALS['egw_info']['server']['login_logo_file'], 0, 4) == 'http' || if (substr($GLOBALS['egw_info']['server']['login_logo_file'], 0, 4) == 'http' ||
$GLOBALS['egw_info']['server']['login_logo_file'][0] == '/') $GLOBALS['egw_info']['server']['login_logo_file'][0] == '/')
{ {
@ -179,7 +187,7 @@ class Login
} }
else else
{ {
$var['logo_file'] = Api\Image::find('api',$GLOBALS['egw_info']['server']['login_logo_file']?$GLOBALS['egw_info']['server']['login_logo_file']:'logo', '', null); // null=explicit allow svg $var['logo_file'] = Api\Image::find('api',$GLOBALS['egw_info']['server']['login_logo_file']?$GLOBALS['egw_info']['server']['login_logo_file']:'login_logo', '', null); // null=explicit allow svg
} }
$var['logo_url'] = $GLOBALS['egw_info']['server']['login_logo_url']?$GLOBALS['egw_info']['server']['login_logo_url']:'http://www.egroupware.org'; $var['logo_url'] = $GLOBALS['egw_info']['server']['login_logo_url']?$GLOBALS['egw_info']['server']['login_logo_url']:'http://www.egroupware.org';
if (substr($var['logo_url'],0,4) != 'http') if (substr($var['logo_url'],0,4) != 'http')

0
pixelegg/images/login/fullscreen.jpg → api/templates/default/images/login_background.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 186 KiB

After

Width:  |  Height:  |  Size: 186 KiB

0
pixelegg/images/login/logo.png → api/templates/default/images/login_logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

21
pixelegg/css/mobile.css
View File

@ -1686,21 +1686,28 @@ body {
} }
#loginMainDiv #divAppIconBar #divLogo { #loginMainDiv #divAppIconBar #divLogo {
position: relative; position: relative;
padding-top: 5%; padding-top: 2%;
} }
#loginMainDiv #divAppIconBar #divLogo img.login_logo { #loginMainDiv #divAppIconBar #divLogo .login_logo_container {
width: 250px;
height: 150px;
max-height: 150px;
max-width: 250px;
margin: 0 auto; margin: 0 auto;
max-width: 270px;
} }
#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] { #loginMainDiv #divAppIconBar #divLogo .login_logo_container .login_logo {
max-width: 270px; width: auto;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
} }
#loginMainDiv #loginScreenMessage not([class $= "error"]) { #loginMainDiv #loginScreenMessage:not([class $= "error"]) {
margin: 1em; margin: 1em;
color: #0a5ca5; color: #0a5ca5;
font-size: 12pt; font-size: 12pt;
} }
#loginMainDiv #loginScreenMessage not([class $= "error"]) img { #loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
max-width: 100%; max-width: 100%;
} }
#loginMainDiv div#login_footer { #loginMainDiv div#login_footer {

21
pixelegg/css/pixelegg.css
View File

@ -1675,21 +1675,28 @@ body {
} }
#loginMainDiv #divAppIconBar #divLogo { #loginMainDiv #divAppIconBar #divLogo {
position: relative; position: relative;
padding-top: 5%; padding-top: 2%;
} }
#loginMainDiv #divAppIconBar #divLogo img.login_logo { #loginMainDiv #divAppIconBar #divLogo .login_logo_container {
width: 250px;
height: 150px;
max-height: 150px;
max-width: 250px;
margin: 0 auto; margin: 0 auto;
max-width: 270px;
} }
#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] { #loginMainDiv #divAppIconBar #divLogo .login_logo_container .login_logo {
max-width: 270px; width: auto;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
} }
#loginMainDiv #loginScreenMessage not([class $= "error"]) { #loginMainDiv #loginScreenMessage:not([class $= "error"]) {
margin: 1em; margin: 1em;
color: #0a5ca5; color: #0a5ca5;
font-size: 12pt; font-size: 12pt;
} }
#loginMainDiv #loginScreenMessage not([class $= "error"]) img { #loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
max-width: 100%; max-width: 100%;
} }
#loginMainDiv div#login_footer { #loginMainDiv div#login_footer {

21
pixelegg/less/layout_loginPage.less
View File

@ -54,13 +54,20 @@
overflow-y: auto; overflow-y: auto;
#divLogo { #divLogo {
position: relative; position: relative;
padding-top: 5%; padding-top: 2%;
img.login_logo { .login_logo_container {
width:250px;
height:150px;
max-height: 150px;
max-width:250px;
margin: 0 auto; margin: 0 auto;
max-width: 270px; .login_logo {
width: auto;
height: 100%;
background-size:contain;
background-repeat: no-repeat;
background-position: center;
} }
img.login_logo [src$="svg"]{
max-width: 270px;
} }
} }
} }
@ -69,13 +76,11 @@
} }
// Meldung // Meldung
#loginScreenMessage not([class $= "error"]) { #loginScreenMessage:not([class $= "error"]) {
margin: 1em; margin: 1em;
color: #0a5ca5; color: #0a5ca5;
font-size: 12pt; font-size: 12pt;
img {max-width: 100%;} img {max-width: 100%;}
} }
div#login_footer { div#login_footer {
position: absolute; position: absolute;

8
pixelegg/login.tpl
View File

@ -1,10 +1,14 @@
<script src="./api/js/login.js" type="text/javascript"></script> <script src="./api/js/login.js" type="text/javascript"></script>
<div id="loginMainDiv"> <div id="loginMainDiv" style="background-image:url({background_file})">
<div id="divAppIconBar" style="position:relative;"> <div id="divAppIconBar" style="position:relative;">
<div id="divLogo"> <div id="divLogo">
<a href="{logo_url}" target="_blank"><img src="{logo_file}" class="login_logo" border="0" alt="{logo_title}" title="{logo_title}" /></a> <div class="login_logo_container">
<a href="{logo_url}" target="_blank">
<div style="background-image:url({logo_file})" class="login_logo" border="0" alt="{logo_title}" title="{logo_title}" ></div>
</a>
</div>
<div id="loginScreenMessage">{lang_message}</div> <div id="loginScreenMessage">{lang_message}</div>
</div> </div>
</div> </div>

8
pixelegg/login_mobile.tpl
View File

@ -1,10 +1,14 @@
<script src="./api/js/login.js" type="text/javascript"></script> <script src="./api/js/login.js" type="text/javascript"></script>
<div id="loginMainDiv"> <div id="loginMainDiv" style="background-image:url({background_file})">
<div id="divAppIconBar" style="position:relative;"> <div id="divAppIconBar" style="position:relative;">
<div id="divLogo"> <div id="divLogo">
<a href="{logo_url}" target="_blank"><img src="{logo_file}" border="0" alt="{logo_title}" title="{logo_title}" /></a> <div class="login_logo_container">
<a href="{logo_url}" target="_blank">
<div style="background-image:url({logo_file})" class="login_logo" border="0" alt="{logo_title}" title="{logo_title}" ></div>
</a>
</div>
<div id="loginScreenMessage">{lang_message}</div> <div id="loginScreenMessage">{lang_message}</div>
</div> </div>
</div> </div>

34
pixelegg/mobile/fw_mobile.css
View File

@ -1697,21 +1697,28 @@ body {
} }
#loginMainDiv #divAppIconBar #divLogo { #loginMainDiv #divAppIconBar #divLogo {
position: relative; position: relative;
padding-top: 5%; padding-top: 2%;
} }
#loginMainDiv #divAppIconBar #divLogo img.login_logo { #loginMainDiv #divAppIconBar #divLogo .login_logo_container {
width: 250px;
height: 150px;
max-height: 150px;
max-width: 250px;
margin: 0 auto; margin: 0 auto;
max-width: 270px;
} }
#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] { #loginMainDiv #divAppIconBar #divLogo .login_logo_container .login_logo {
max-width: 270px; width: auto;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
} }
#loginMainDiv #loginScreenMessage not([class $= "error"]) { #loginMainDiv #loginScreenMessage:not([class $= "error"]) {
margin: 1em; margin: 1em;
color: #0a5ca5; color: #0a5ca5;
font-size: 12pt; font-size: 12pt;
} }
#loginMainDiv #loginScreenMessage not([class $= "error"]) img { #loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
max-width: 100%; max-width: 100%;
} }
#loginMainDiv div#login_footer { #loginMainDiv div#login_footer {
@ -6945,10 +6952,12 @@ form[id^="tracker-"] .dialogHeadbar {
max-height: 20%; max-height: 20%;
height: 20%; height: 20%;
} }
div#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { div#loginMainDiv #divAppIconBar #divLogo .login_logo_container {
width: 40%; width: 200px;
margin-top: 5px; height: 100px;
background: white; max-height: 100px;
max-width: 200px;
margin: 0 auto;
} }
div#loginMainDiv div#centerBox { div#loginMainDiv div#centerBox {
padding: 0; padding: 0;
@ -7007,9 +7016,6 @@ form[id^="tracker-"] .dialogHeadbar {
} }
} }
@media only screen and (max-device-width : 1024px) and (orientation : portrait) { @media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body div#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
width: 70%;
}
body div#loginMainDiv div#centerBox form table.divLoginbox { body div#loginMainDiv div#centerBox form table.divLoginbox {
width: 100%; width: 100%;
} }

17
pixelegg/mobile/fw_mobile.less
View File

@ -58,10 +58,14 @@
#divAppIconBar { #divAppIconBar {
max-height:20%; max-height:20%;
height:20%; height:20%;
#divLogo img[src$="svg"] { #divLogo {
width:40%; .login_logo_container {
margin-top: 5px; width:200px;
background:white; height:100px;
max-height: 100px;
max-width:200px;
margin: 0 auto;
}
} }
} }
div#centerBox{ div#centerBox{
@ -124,11 +128,6 @@
{ {
body{ body{
div#loginMainDiv{ div#loginMainDiv{
#divAppIconBar {
#divLogo img[src$="svg"] {
width:70%;
}
}
div#centerBox{ div#centerBox{
form { form {
table.divLoginbox { table.divLoginbox {