From b208807c33084880d9fdf7c4286bf76e63f4db7e Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Fri, 26 Sep 2014 16:51:37 +0200
Subject: [PATCH] restyle userInfo to be inline

---
 .../javascripts/app/views/widget/user.jst.eco | 42 ++++++++++---------
 app/assets/stylesheets/zzz.css.erb            | 39 ++++++++---------
 2 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/app/assets/javascripts/app/views/widget/user.jst.eco b/app/assets/javascripts/app/views/widget/user.jst.eco
index 2345a8d37..ed33fdf98 100644
--- a/app/assets/javascripts/app/views/widget/user.jst.eco
+++ b/app/assets/javascripts/app/views/widget/user.jst.eco
@@ -1,40 +1,43 @@
-<table class="userInfo">
-  <tr>
+<div class="userInfo">
+  <div class="userInfo-entry">
     <td>
       <%- @user.avatar(true) %>
-    <td class="userInfo-name">
+    <div class="userInfo-name">
       <div class="u-textTruncate" title="<%- @Ti( 'Name') %>">
         <%= @user.displayName() %>
       </div>
-  </tr>
+    </div>
+  </div>
 <% for row in @userData: %>
   <% if @user[row.name] || row.name is 'note': %>
-    <tr>
+    <div class="userInfo-entry">
     <% if row.tag isnt 'textarea': %>
-      <td class="userInfo-label"><%- @Ti( row.display ) %>
-      <td class="userInfo-value"><%- @L( @P( @user[row.name] ) ) %>
+      <div class="userInfo-label"><%- @Ti( row.display ) %></div>
+      <div class="userInfo-value"><%- @L( @P( @user[row.name] ) ) %></div>
     <% else: %>
-      <td class="userInfo-label"><%- @Ti( row.display ) %>
-      <td class="userInfo-value">
+      <div class="userInfo-label"><%- @Ti( row.display ) %></div>
+      <div class="userInfo-value">
         <textarea rows="1" name="<%= row.name %>" data-type="update" placeholder="<%- @T('Add a Note') %>"><%= @user[row.name] %></textarea>
+      </div>
     <% end %>
-    </tr>
+    </div>
   <% end %>
 <% end %>
 <% if !_.isEmpty(@user['accounts']): %>
-  <tr>
-    <td class="userInfo-label"><%- @T( 'Linked Accounts' ) %>
-    <td class="userInfo-value">
+  <div class="userInfo-entry">
+    <div class="userInfo-label"><%- @T( 'Linked Accounts' ) %></div>
+    <div class="userInfo-value">
   <% for account of @user['accounts']: %>
       <a href="<%= @user['accounts'][account]['link'] %>" target="_blank"><%= account %></a>
   <% end %>
-  </tr>
+    </div>
+  </div>
 <% end %>
 <% if !_.isEmpty(@user['links']): %>
   <% for link in @user['links']: %>
-  <tr>
-    <td class="userInfo-label"><%- @T( link['title'] ) %>
-    <td class="userInfo-value">
+  <div class="userInfo-entry">
+    <div class="userInfo-label"><%- @T( link['title'] ) %></div>
+    <div class="userInfo-value">
   <% for item in link['items']: %>
     <% if item['url']: %>
       <a href="<%= item['url'] %>" title="<%- @Ti( item['title'] ) %>" style="<%= item['style'] %>" data-type="<%= item['data'] %>" class="<%= item['class'] %>" <% if link.new_window: %>target="_blank"<% end %>>
@@ -47,8 +50,9 @@
     <% else: %>
       </span>
     <% end %>
+    </div>
   <% end %>
-  </tr>
+  </div>
   <% end %>
 <% end %>
-</table>
+</div>
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 80c6c5e36..3dcdb7cbf 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -3365,42 +3365,39 @@ footer {
   }
 
 .userInfo {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: auto;
 }
 
 .userInfo .avatar {
   float: right;
+  position: relative;
+}
+.userInfo .avatar:after {
+  content: "";
+  background: url(<%= asset_path "sprite.svg" %>);
+  background-position: -226px 0;
+  right: 0;
+  top: 0;
+  width: 97px;
+  height: 96px;
+  position: absolute;
 }
 
 .userInfo-name {
   color: rgba(0,8,14,.73);
   font-size: 16px;
-  position: relative;
 }
 
-  .userInfo-name div {
-    position: absolute;
-    width: 100%;
-    top: 50%;
-    margin-top: -10px;
-    line-height: 20px;
-  }
-
-.userInfo td {
-  padding: 5px 0;
-}
-
-.userInfo td:first-child {
-  padding-right: 10px;
-  vertical-align: top;
+.userInfo-entry {
+  margin: 20px 0;
 }
 
 .userInfo-label {
-  color: #bbb;
+  text-transform: uppercase;
+  color: #999;
+  font-size: 12px;
   font-weight: normal;
-  text-align: right;
+  letter-spacing: 0.1em;
+  margin-bottom: 6px;
 }
 
 .userInfo-value {