holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests 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('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' ||
$GLOBALS['egw_info']['server']['login_logo_file'][0] == '/')
{
@ -179,7 +187,7 @@ class Login
}
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';
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 {
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;
max-width: 270px;
}
#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] {
max-width: 270px;
#loginMainDiv #divAppIconBar #divLogo .login_logo_container .login_logo {
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;
color: #0a5ca5;
font-size: 12pt;
}
#loginMainDiv #loginScreenMessage not([class $= "error"]) img {
#loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
max-width: 100%;
}
#loginMainDiv div#login_footer {

21
pixelegg/css/pixelegg.css
View File

@ -1675,21 +1675,28 @@ body {
}
#loginMainDiv #divAppIconBar #divLogo {
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;
max-width: 270px;
}
#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] {
max-width: 270px;
#loginMainDiv #divAppIconBar #divLogo .login_logo_container .login_logo {
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;
color: #0a5ca5;
font-size: 12pt;
}
#loginMainDiv #loginScreenMessage not([class $= "error"]) img {
#loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
max-width: 100%;
}
#loginMainDiv div#login_footer {

23
pixelegg/less/layout_loginPage.less
View File

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

8
pixelegg/login.tpl
View File

@ -1,10 +1,14 @@
<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="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>
</div>

8
pixelegg/login_mobile.tpl
View File

@ -1,10 +1,14 @@
<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="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>
</div>

34
pixelegg/mobile/fw_mobile.css
View File

@ -1697,21 +1697,28 @@ body {
}
#loginMainDiv #divAppIconBar #divLogo {
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;
max-width: 270px;
}
#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] {
max-width: 270px;
#loginMainDiv #divAppIconBar #divLogo .login_logo_container .login_logo {
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;
color: #0a5ca5;
font-size: 12pt;
}
#loginMainDiv #loginScreenMessage not([class $= "error"]) img {
#loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
max-width: 100%;
}
#loginMainDiv div#login_footer {
@ -6945,10 +6952,12 @@ form[id^="tracker-"] .dialogHeadbar {
max-height: 20%;
height: 20%;
}
div#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
width: 40%;
margin-top: 5px;
background: white;
div#loginMainDiv #divAppIconBar #divLogo .login_logo_container {
width: 200px;
height: 100px;
max-height: 100px;
max-width: 200px;
margin: 0 auto;
}
div#loginMainDiv div#centerBox {
padding: 0;
@ -7007,9 +7016,6 @@ form[id^="tracker-"] .dialogHeadbar {
}
}
@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 {
width: 100%;
}

17
pixelegg/mobile/fw_mobile.less
View File

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