extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-25 16:19:00 +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 {
font-size: 12pt;
position: relative;
}
#loginMainDiv div#centerBox form table.divLoginbox select {
padding-left: 5px;
padding-left: 25px;
width: 100%;
height: 42px;
border: none;
@ -1791,21 +1792,49 @@ body {
border-radius: 0px;
}
#loginMainDiv div#centerBox form table.divLoginbox input {
width: calc(250px - 8px);
width: calc(250px - 22px);
height: 40px;
padding: 0;
margin: 0;
border: none;
border-bottom: 1px solid silver;
padding-left: 5px;
padding-left: 25px;
}
#loginMainDiv div#centerBox form table.divLoginbox input:focus {
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"] {
background-color: #0a5ca5;
color: #ffffff;
font-size: 20px;
padding-left: 0;
width: 250px;
margin-top: 25px;
}

35
pixelegg/css/pixelegg.css
View File

@ -1770,9 +1770,10 @@ body {
}
#loginMainDiv div#centerBox form table.divLoginbox td {
font-size: 12pt;
position: relative;
}
#loginMainDiv div#centerBox form table.divLoginbox select {
padding-left: 5px;
padding-left: 25px;
width: 100%;
height: 42px;
border: none;
@ -1780,21 +1781,49 @@ body {
border-radius: 0px;
}
#loginMainDiv div#centerBox form table.divLoginbox input {
width: calc(250px - 8px);
width: calc(250px - 22px);
height: 40px;
padding: 0;
margin: 0;
border: none;
border-bottom: 1px solid silver;
padding-left: 5px;
padding-left: 25px;
}
#loginMainDiv div#centerBox form table.divLoginbox input:focus {
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"] {
background-color: #0a5ca5;
color: #ffffff;
font-size: 20px;
padding-left: 0;
width: 250px;
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 {
font-size: 12pt;
position: relative;
}
select {
padding-left: 5px;
padding-left: 25px;
width:100%;
height: 42px;
border: none;
@ -141,22 +142,40 @@
}
select:hover {}
input {
width: ~"calc(250px - 8px)";
width: ~"calc(250px - 22px)";
height: 40px;
padding: 0;
margin: 0;
border: none;
border-bottom: 1px solid silver;
padding-left: 5px;
padding-left: 25px;
}
input:hover {}
input:focus {
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"] {
background-color: #0a5ca5;
.color_0_gray;
.fontsize_xxl;
padding-left:0;
width: 250px;
&:hover{}
&:focus {}

35
pixelegg/login.tpl
View File

@ -21,32 +21,53 @@
</td>
</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>
<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>
<!-- BEGIN remember_me_selection -->
<tr>
<td>{select_remember_me}</td>
<td>
<span class="field_icons remember_me"></span>
{select_remember_me}
</td>
</tr>
<!-- END remember_me_selection -->
<!-- BEGIN language_select -->
<tr>
<td>{select_language}</td>
<td>
<span class="field_icons language"></span>
{select_language}
</td>
</tr>
<!-- END language_select -->
<!-- BEGIN domain_selection -->
<tr>
<td>{select_domain}</td>
<td>
<span class="field_icons domain"></span>
{select_domain}
</td>
</tr>
<!-- END domain_selection -->
<!-- BEGIN change_password -->
<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>
<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>
<!-- END change_password -->
<tr>

48
pixelegg/login_mobile.tpl
View File

@ -23,35 +23,55 @@
</td>
</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>
<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>
<!-- BEGIN change_password -->
<!-- BEGIN remember_me_selection -->
<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>
<td><input name="new_passwd2" tabindex="7" type="password" size="30" placeholder="{lang_repeat_password}"/></td>
</tr>
<!-- END change_password -->
<!-- END remember_me_selection -->
<!-- BEGIN language_select -->
<tr>
<td>{select_language}</td>
<td>
<span class="field_icons language"></span>
{select_language}
</td>
</tr>
<!-- END language_select -->
<!-- BEGIN domain_selection -->
<tr>
<td>{select_domain}</td>
<td>
<span class="field_icons domain"></span>
{select_domain}
</td>
</tr>
<!-- END domain_selection -->
<!-- BEGIN remember_me_selection -->
<!-- BEGIN change_password -->
<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>
<!-- 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>
<td>
<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 {
font-size: 12pt;
position: relative;
}
#loginMainDiv div#centerBox form table.divLoginbox select {
padding-left: 5px;
padding-left: 25px;
width: 100%;
height: 42px;
border: none;
@ -1802,21 +1803,49 @@ body {
border-radius: 0px;
}
#loginMainDiv div#centerBox form table.divLoginbox input {
width: calc(250px - 8px);
width: calc(250px - 22px);
height: 40px;
padding: 0;
margin: 0;
border: none;
border-bottom: 1px solid silver;
padding-left: 5px;
padding-left: 25px;
}
#loginMainDiv div#centerBox form table.divLoginbox input:focus {
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"] {
background-color: #0a5ca5;
color: #ffffff;
font-size: 20px;
padding-left: 0;
width: 250px;
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 select {
width: calc(100% - 10px);
width: calc(100% - 27px);
}
body div#loginMainDiv div#centerBox form table.divLoginbox select {
width: 100%;

2
pixelegg/mobile/fw_mobile.less
View File

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