[enh] Refactor user info header.

This commit is contained in:
opi 2014-05-14 13:21:38 +02:00
parent dc771ab196
commit 03e1e54152
4 changed files with 59 additions and 48 deletions

View file

@ -144,6 +144,8 @@ textarea {
.icon-user:before { content: '\e801'; } .icon-user:before { content: '\e801'; }
.icon-lock:before { content: '\e800'; } .icon-lock:before { content: '\e800'; }
.icon-connexion:before { content: '\e802'; } .icon-connexion:before { content: '\e802'; }
.icon-pencil:before { content: '\e804'; }
.icon-trash:before { content: '\e80c'; }
/* ========================================================================== /* ==========================================================================
@ -239,35 +241,16 @@ textarea {
3 = User 3 = User
========================================================================== */ ========================================================================== */
.user-container { padding: 0.4em 1em; } .user-container {
display:block;
.user-container a { color: #fff; } padding: 0.4em 1em;
color: #fff;
.user-container h2 {
font-size: 1.5em;
margin-bottom: 0;
} }
.user-container h2 small {
font-size: 0.75em;
font-family: 'source_sans_proregular';
display: block;
margin-top: -0.6em;
}
.user-info { margin-left: 0.5em;} .user-container:before {
.user-mail {
color: #999;
font-size: 0.9em;
display: block; display: block;
margin-top: -0.2em; float: left;
} margin-right: 10px;
.user-img {
margin-right: 1em;
margin: 0.2em auto;
}
.user-img:before {
content: '\e801'; content: '\e801';
display: block; display: block;
font-family: 'ynh_ssowat'; font-family: 'ynh_ssowat';
@ -281,10 +264,43 @@ textarea {
color: #dedede; color: #dedede;
overflow: hidden; overflow: hidden;
} }
.user-img:hover:before { .user-container:hover:before {
color: #fff; color: #fff;
} }
.user-container .user-username {
font-size: 1.5em;
margin: 0;
}
.user-container .user-fullname {
font-size: 1em;
font-family: 'source_sans_proregular';
display: block;
margin-top: -0.6em;
}
.user-container-info .user-username:after {
content: '\e804';
font-family: 'ynh_ssowat';
color: #b4b4b4;
display: none;
font-size: 0.8em;
width: 1em;
height: 1em;
margin-left: .5em;
}
.user-container-info:hover .user-username:after {display: inline-block;vertical-align: text-top;}
.user-container .user-mail {
color: #999;
font-size: 0.9em;
display: block;
margin-top: -0.2em;
}
.user-menu { .user-menu {
float: right; float: right;
} }

View file

@ -3,13 +3,11 @@
<li><a class="icon icon-connexion" href="?action=logout">{{t_logout}}</a></li> <li><a class="icon icon-connexion" href="?action=logout">{{t_logout}}</a></li>
</ul> </ul>
<div class="user-container col colNomarge"> <a class="user-container user-container-edit" href="info.html">
<a class="user-img" href="info.html"></a> <h2 class="user-username">{{{uid}}}</h2>
<div class="user-info"> <small class="user-fullname">{{givenName}} {{sn}}</small>
<h2><a href="info.html">{{{uid}}}<small>{{givenName}} {{sn}}</small></a></h2> <span class="user-mail">{{mail}}</span>
<span class="user-mail">{{mail}}</span> </a>
</div>
</div>
</div> </div>
<div class="wrapper edit"> <div class="wrapper edit">

View file

@ -3,13 +3,12 @@
<li><a class="icon icon-connexion" href="?action=logout">{{t_logout}}</a></li> <li><a class="icon icon-connexion" href="?action=logout">{{t_logout}}</a></li>
</ul> </ul>
<div class="user-container col colNomarge"> <a class="user-container user-container-info" href="edit.html">
<a class="user-img" href="edit.html"></a> <h2 class="user-username">{{{uid}}}</h2>
<div class="user-info"> <small class="user-fullname">{{givenName}} {{sn}}</small>
<h2><a href="edit.html">{{{uid}}}<small>{{givenName}} {{sn}}</small></a></h2> <span class="user-mail">{{mail}}</span>
<span class="user-mail">{{mail}}</span> </a>
</div>
</div>
</div> </div>
<div id="apps" class="wrapper apps"> <div id="apps" class="wrapper apps">

View file

@ -2,13 +2,11 @@
<ul class="ul-reset user-menu"> <ul class="ul-reset user-menu">
<li><a class="icon icon-connexion" href="?action=logout">{{t_logout}}</a></li> <li><a class="icon icon-connexion" href="?action=logout">{{t_logout}}</a></li>
</ul> </ul>
<div class="user-container col colNomarge"> <a class="user-container user-container-password" href="info.html">
<a class="user-img" href="info.html"></a> <h2 class="user-username">{{{uid}}}</h2>
<div class="user-info"> <small class="user-fullname">{{givenName}} {{sn}}</small>
<h2><a href="info.html">{{{uid}}}<small>{{givenName}} {{sn}}</small></a></h2> <span class="user-mail">{{mail}}</span>
<span class="user-mail">{{mail}}</span> </a>
</div>
</div>
</div> </div>
<div class="wrapper password"> <div class="wrapper password">