extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-26 00:29:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP of modern login page:

Browse Source 
- Implement icon representation for input fields
- Add new icon for language
This commit is contained in:
Hadi Nategh 2017-02-06 16:13:24 +01:00
parent e9c092f55e
commit 99e0daa5ff
8 changed files with 182 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
pixelegg/css/mobile.css
View File

@ -1781,9 +1781,10 @@ body {
} }
#loginMainDiv div#centerBox form table.divLoginbox td { #loginMainDiv div#centerBox form table.divLoginbox td {
font-size: 12pt; font-size: 12pt;
position: relative;
} }
#loginMainDiv div#centerBox form table.divLoginbox select { #loginMainDiv div#centerBox form table.divLoginbox select {
padding-left: 5px; padding-left: 25px;
width: 100%; width: 100%;
height: 42px; height: 42px;
border: none; border: none;
@ -1791,21 +1792,49 @@ body {
border-radius: 0px; border-radius: 0px;
} }
#loginMainDiv div#centerBox form table.divLoginbox input { #loginMainDiv div#centerBox form table.divLoginbox input {
width: calc(250px - 8px); width: calc(250px - 22px);
height: 40px; height: 40px;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none; border: none;
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
padding-left: 5px; padding-left: 25px;
} }
#loginMainDiv div#centerBox form table.divLoginbox input:focus { #loginMainDiv div#centerBox form table.divLoginbox input:focus {
outline: none; outline: none;
} }
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons {
position: absolute;
left: 0px;
width: 20px;
height: 20px;
background-size: 16px;
background-position: left center;
background-repeat: no-repeat;
top: 12px;
z-index: 100;
opacity: 0.5;
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.username {
background-image: url(../images/personal.png);
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.password {
background-image: url(../images/password.png);
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.remember_me {
background-image: url(../images/task.png);
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.domain {
background-image: url(../images/internet.png);
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.language {
background-image: url(../images/language.png);
}
#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] { #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] {
background-color: #0a5ca5; background-color: #0a5ca5;
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
padding-left: 0;
width: 250px; width: 250px;
margin-top: 25px; margin-top: 25px;
} }

35
pixelegg/css/pixelegg.css
View File

@ -1770,9 +1770,10 @@ body {
} }
#loginMainDiv div#centerBox form table.divLoginbox td { #loginMainDiv div#centerBox form table.divLoginbox td {
font-size: 12pt; font-size: 12pt;
position: relative;
} }
#loginMainDiv div#centerBox form table.divLoginbox select { #loginMainDiv div#centerBox form table.divLoginbox select {
padding-left: 5px; padding-left: 25px;
width: 100%; width: 100%;
height: 42px; height: 42px;
border: none; border: none;
@ -1780,21 +1781,49 @@ body {
border-radius: 0px; border-radius: 0px;
} }
#loginMainDiv div#centerBox form table.divLoginbox input { #loginMainDiv div#centerBox form table.divLoginbox input {
width: calc(250px - 8px); width: calc(250px - 22px);
height: 40px; height: 40px;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none; border: none;
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
padding-left: 5px; padding-left: 25px;
} }
#loginMainDiv div#centerBox form table.divLoginbox input:focus { #loginMainDiv div#centerBox form table.divLoginbox input:focus {
outline: none; outline: none;
} }
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons {
position: absolute;
left: 0px;
width: 20px;
height: 20px;
background-size: 16px;
background-position: left center;
background-repeat: no-repeat;
top: 12px;
z-index: 100;
opacity: 0.5;
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.username {
background-image: url(../images/personal.png);
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.password {
background-image: url(../images/password.png);
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.remember_me {
background-image: url(../images/task.png);
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.domain {
background-image: url(../images/internet.png);
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.language {
background-image: url(../images/language.png);
}
#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] { #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] {
background-color: #0a5ca5; background-color: #0a5ca5;
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
padding-left: 0;
width: 250px; width: 250px;
margin-top: 25px; margin-top: 25px;
} }

BIN
pixelegg/images/language.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 589 B

25
pixelegg/less/layout_loginPage.less
View File

@ -130,9 +130,10 @@
} }
td { td {
font-size: 12pt; font-size: 12pt;
position: relative;
} }
select { select {
padding-left: 5px; padding-left: 25px;
width:100%; width:100%;
height: 42px; height: 42px;
border: none; border: none;
@ -141,22 +142,40 @@
} }
select:hover {} select:hover {}
input { input {
width: ~"calc(250px - 8px)"; width: ~"calc(250px - 22px)";
height: 40px; height: 40px;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none; border: none;
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
padding-left: 5px; padding-left: 25px;
} }
input:hover {} input:hover {}
input:focus { input:focus {
outline: none; outline: none;
} }
span.field_icons {
position: absolute;
left: 0px;
width: 20px;
height: 20px;
background-size: 16px;
background-position: left center;
background-repeat: no-repeat;
top: 12px;
z-index: 100;
opacity:0.5;
}
span.field_icons.username {background-image: url(../images/personal.png);}
span.field_icons.password {background-image: url(../images/password.png);}
span.field_icons.remember_me {background-image: url(../images/task.png);}
span.field_icons.domain {background-image: url(../images/internet.png);}
span.field_icons.language {background-image: url(../images/language.png);}
input[type="submit"] { input[type="submit"] {
background-color: #0a5ca5; background-color: #0a5ca5;
.color_0_gray; .color_0_gray;
.fontsize_xxl; .fontsize_xxl;
padding-left:0;
width: 250px; width: 250px;
&:hover{} &:hover{}
&:focus {} &:focus {}

35
pixelegg/login.tpl
View File

@ -21,32 +21,53 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td><input name="login" tabindex="4" value="{login}" size="30" placeholder="{lang_username}" {autofocus_login}/></td> <td>
<span class="field_icons username"></span>
<input name="login" tabindex="4" value="{login}" size="30" placeholder="{lang_username}" {autofocus_login}/>
</td>
</tr> </tr>
<tr> <tr>
<td><input name="passwd" tabindex="5" value="{passwd}" type="password" size="30" placeholder="{lang_password}"/></td> <td>
<span class="field_icons password"></span>
<input name="passwd" tabindex="5" value="{passwd}" type="password" size="30" placeholder="{lang_password}"/>
</td>
</tr> </tr>
<!-- BEGIN remember_me_selection --> <!-- BEGIN remember_me_selection -->
<tr> <tr>
<td>{select_remember_me}</td> <td>
<span class="field_icons remember_me"></span>
{select_remember_me}
</td>
</tr> </tr>
<!-- END remember_me_selection --> <!-- END remember_me_selection -->
<!-- BEGIN language_select --> <!-- BEGIN language_select -->
<tr> <tr>
<td>{select_language}</td> <td>
<span class="field_icons language"></span>
{select_language}
</td>
</tr> </tr>
<!-- END language_select --> <!-- END language_select -->
<!-- BEGIN domain_selection --> <!-- BEGIN domain_selection -->
<tr> <tr>
<td>{select_domain}</td> <td>
<span class="field_icons domain"></span>
{select_domain}
</td>
</tr> </tr>
<!-- END domain_selection --> <!-- END domain_selection -->
<!-- BEGIN change_password --> <!-- BEGIN change_password -->
<tr> <tr>
<td><input name="new_passwd" tabindex="6" type="password" size="30" placeholder="{lang_new_password}" {autofocus_new_passwd}/></td> <td>
<span class="field_icons password"></span>
<input name="new_passwd" tabindex="6" type="password" size="30" placeholder="{lang_new_password}" {autofocus_new_passwd}/>
</td>
</tr> </tr>
<tr> <tr>
<td><input name="new_passwd2" tabindex="7" type="password" plcaseholder="{lang_repeat_password}" size="30" /></td> <td>
<span class="field_icons password"></span>
<input name="new_passwd2" tabindex="7" type="password" plcaseholder="{lang_repeat_password}" size="30" />
</td>
</tr> </tr>
<!-- END change_password --> <!-- END change_password -->
<tr> <tr>

48
pixelegg/login_mobile.tpl
View File

@ -23,35 +23,55 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td><input name="login" tabindex="4" value="{login}" size="30" {autofocus_login} placeholder="{lang_username}"/></td> <td>
<span class="field_icons username"></span>
<input name="login" tabindex="4" value="{login}" size="30" placeholder="{lang_username}" {autofocus_login}/>
</td>
</tr> </tr>
<tr> <tr>
<td><input name="passwd" tabindex="5" value="{passwd}" type="password" size="30" placeholder="{lang_password}" /></td> <td>
<span class="field_icons password"></span>
<input name="passwd" tabindex="5" value="{passwd}" type="password" size="30" placeholder="{lang_password}"/>
</td>
</tr> </tr>
<!-- BEGIN change_password --> <!-- BEGIN remember_me_selection -->
<tr> <tr>
<td><input name="new_passwd" tabindex="6" type="password" size="30" {autofocus_new_passwd} placeholder="{lang_new_password}"/></td> <td>
<span class="field_icons remember_me"></span>
{select_remember_me}
</td>
</tr> </tr>
<tr> <!-- END remember_me_selection -->
<td><input name="new_passwd2" tabindex="7" type="password" size="30" placeholder="{lang_repeat_password}"/></td>
</tr>
<!-- END change_password -->
<!-- BEGIN language_select --> <!-- BEGIN language_select -->
<tr> <tr>
<td>{select_language}</td> <td>
<span class="field_icons language"></span>
{select_language}
</td>
</tr> </tr>
<!-- END language_select --> <!-- END language_select -->
<!-- BEGIN domain_selection --> <!-- BEGIN domain_selection -->
<tr> <tr>
<td>{select_domain}</td> <td>
<span class="field_icons domain"></span>
{select_domain}
</td>
</tr> </tr>
<!-- END domain_selection --> <!-- END domain_selection -->
<!-- BEGIN remember_me_selection --> <!-- BEGIN change_password -->
<tr> <tr>
<td>{select_remember_me}</td> <td>
<span class="field_icons password"></span>
<input name="new_passwd" tabindex="6" type="password" size="30" placeholder="{lang_new_password}" {autofocus_new_passwd}/>
</td>
</tr> </tr>
<!-- END remember_me_selection --> <tr>
<td>
<span class="field_icons password"></span>
<input name="new_passwd2" tabindex="7" type="password" plcaseholder="{lang_repeat_password}" size="30" />
</td>
</tr>
<!-- END change_password -->
<tr> <tr>
<td> <td>
<input tabindex="8" type="submit" value=" {lang_login} " name="submitit" /> <input tabindex="8" type="submit" value=" {lang_login} " name="submitit" />

37
pixelegg/mobile/fw_mobile.css
View File

@ -1792,9 +1792,10 @@ body {
} }
#loginMainDiv div#centerBox form table.divLoginbox td { #loginMainDiv div#centerBox form table.divLoginbox td {
font-size: 12pt; font-size: 12pt;
position: relative;
} }
#loginMainDiv div#centerBox form table.divLoginbox select { #loginMainDiv div#centerBox form table.divLoginbox select {
padding-left: 5px; padding-left: 25px;
width: 100%; width: 100%;
height: 42px; height: 42px;
border: none; border: none;
@ -1802,21 +1803,49 @@ body {
border-radius: 0px; border-radius: 0px;
} }
#loginMainDiv div#centerBox form table.divLoginbox input { #loginMainDiv div#centerBox form table.divLoginbox input {
width: calc(250px - 8px); width: calc(250px - 22px);
height: 40px; height: 40px;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none; border: none;
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
padding-left: 5px; padding-left: 25px;
} }
#loginMainDiv div#centerBox form table.divLoginbox input:focus { #loginMainDiv div#centerBox form table.divLoginbox input:focus {
outline: none; outline: none;
} }
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons {
position: absolute;
left: 0px;
width: 20px;
height: 20px;
background-size: 16px;
background-position: left center;
background-repeat: no-repeat;
top: 12px;
z-index: 100;
opacity: 0.5;
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.username {
background-image: url(../images/personal.png);
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.password {
background-image: url(../images/password.png);
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.remember_me {
background-image: url(../images/task.png);
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.domain {
background-image: url(../images/internet.png);
}
#loginMainDiv div#centerBox form table.divLoginbox span.field_icons.language {
background-image: url(../images/language.png);
}
#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] { #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] {
background-color: #0a5ca5; background-color: #0a5ca5;
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
padding-left: 0;
width: 250px; width: 250px;
margin-top: 25px; margin-top: 25px;
} }
@ -6968,7 +6997,7 @@ form[id^="tracker-"] .dialogHeadbar {
} }
body div#loginMainDiv div#centerBox form table.divLoginbox input, body div#loginMainDiv div#centerBox form table.divLoginbox input,
body div#loginMainDiv div#centerBox form table.divLoginbox select { body div#loginMainDiv div#centerBox form table.divLoginbox select {
width: calc(100% - 10px); width: calc(100% - 27px);
} }
body div#loginMainDiv div#centerBox form table.divLoginbox select { body div#loginMainDiv div#centerBox form table.divLoginbox select {
width: 100%; width: 100%;

2
pixelegg/mobile/fw_mobile.less
View File

@ -139,7 +139,7 @@
width:100%; width:100%;
} }
input, select { input, select {
width:~"calc(100% - 10px)"; width:~"calc(100% - 27px)";
} }
select { select {
width:100%; width:100%;