From 03e1e54152fdc0fbadcd99ba508d7deac57af818 Mon Sep 17 00:00:00 2001
From: opi <opi@no-log.org>
Date: Wed, 14 May 2014 13:21:38 +0200
Subject: [PATCH] [enh] Refactor user info header.

---
 portal/assets/css/ynh-style.css | 70 ++++++++++++++++++++-------------
 portal/edit.html                | 12 +++---
 portal/info.html                | 13 +++---
 portal/password.html            | 12 +++---
 4 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/portal/assets/css/ynh-style.css b/portal/assets/css/ynh-style.css
index 9bb8408..bdf20f9 100644
--- a/portal/assets/css/ynh-style.css
+++ b/portal/assets/css/ynh-style.css
@@ -144,6 +144,8 @@ textarea {
 .icon-user:before { content: '\e801'; }
 .icon-lock:before { content: '\e800'; }
 .icon-connexion:before { content: '\e802'; }
+.icon-pencil:before { content: '\e804'; }
+.icon-trash:before { content: '\e80c'; }
 
 
 /* ==========================================================================
@@ -239,35 +241,16 @@ textarea {
    3 = User
    ========================================================================== */
 
-.user-container { padding: 0.4em 1em; }
-
-.user-container a { color: #fff; }
-
-.user-container h2 {
-  font-size: 1.5em;
-  margin-bottom: 0;
+.user-container {
+  display:block;
+  padding: 0.4em 1em;
+  color: #fff;
 }
-  .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-mail {
-  color: #999;
-  font-size: 0.9em;
+.user-container:before {
   display: block;
-  margin-top: -0.2em;
-}
-
-.user-img {
-  margin-right: 1em;
-  margin: 0.2em auto;
-}
-.user-img:before {
+  float: left;
+  margin-right: 10px;
   content: '\e801';
   display: block;
   font-family: 'ynh_ssowat';
@@ -281,10 +264,43 @@ textarea {
   color: #dedede;
   overflow: hidden;
 }
-.user-img:hover:before {
+.user-container:hover:before {
   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 {
   float: right;
 }
diff --git a/portal/edit.html b/portal/edit.html
index 6b1f372..7cec21f 100644
--- a/portal/edit.html
+++ b/portal/edit.html
@@ -3,13 +3,11 @@
     <li><a class="icon icon-connexion" href="?action=logout">{{t_logout}}</a></li>
   </ul>
 
-  <div class="user-container col colNomarge">
-    <a class="user-img" href="info.html"></a>
-    <div class="user-info">
-      <h2><a href="info.html">{{{uid}}}<small>{{givenName}} {{sn}}</small></a></h2>
-      <span class="user-mail">{{mail}}</span>
-    </div>
-  </div>
+  <a class="user-container user-container-edit" href="info.html">
+    <h2 class="user-username">{{{uid}}}</h2>
+    <small class="user-fullname">{{givenName}} {{sn}}</small>
+    <span class="user-mail">{{mail}}</span>
+  </a>
 </div>
 
 <div class="wrapper edit">
diff --git a/portal/info.html b/portal/info.html
index 5d9f752..d0b8ae0 100644
--- a/portal/info.html
+++ b/portal/info.html
@@ -3,13 +3,12 @@
     <li><a class="icon icon-connexion" href="?action=logout">{{t_logout}}</a></li>
   </ul>
 
-  <div class="user-container col colNomarge">
-    <a class="user-img" href="edit.html"></a>
-    <div class="user-info">
-      <h2><a href="edit.html">{{{uid}}}<small>{{givenName}} {{sn}}</small></a></h2>
-      <span class="user-mail">{{mail}}</span>
-    </div>
-  </div>
+  <a class="user-container user-container-info" href="edit.html">
+    <h2 class="user-username">{{{uid}}}</h2>
+    <small class="user-fullname">{{givenName}} {{sn}}</small>
+    <span class="user-mail">{{mail}}</span>
+  </a>
+
 </div>
 
 <div id="apps" class="wrapper apps">
diff --git a/portal/password.html b/portal/password.html
index 28101a4..59f6f8c 100644
--- a/portal/password.html
+++ b/portal/password.html
@@ -2,13 +2,11 @@
   <ul class="ul-reset user-menu">
     <li><a class="icon icon-connexion" href="?action=logout">{{t_logout}}</a></li>
   </ul>
-  <div class="user-container col colNomarge">
-    <a class="user-img" href="info.html"></a>
-    <div class="user-info">
-      <h2><a href="info.html">{{{uid}}}<small>{{givenName}} {{sn}}</small></a></h2>
-      <span class="user-mail">{{mail}}</span>
-    </div>
-  </div>
+  <a class="user-container user-container-password" href="info.html">
+    <h2 class="user-username">{{{uid}}}</h2>
+    <small class="user-fullname">{{givenName}} {{sn}}</small>
+    <span class="user-mail">{{mail}}</span>
+  </a>
 </div>
 
 <div class="wrapper password">