userInfo v1

app/assets/javascripts/app/views/widget/user.jst.eco

@@ -1,47 +1,54 @@
-<div class="user-info">
+<table class="userInfo">
-
+  <tr>
-  <%- @user.avatar(true) %>
+    <td>
-
+      <%- @user.avatar(true) %>
-  <div class="customer-info" title="<%- @Ti( 'Name') %>"><%= @user.displayName() %></div>
+    <td class="userInfo-name">
+      <div class="u-textTruncate" title="<%- @Ti( 'Name') %>">
+        <%= @user.displayName() %>
+      </div>
+  </tr>
 <% for row in @userData: %>
   <% if @user[row.name] || row.name is 'note': %>
+    <tr>
     <% if row.tag isnt 'textarea': %>
-      <div class="customer-info" title="<%- @Ti( row.display ) %>"><%- @L( @P( @user[row.name] ) ) %></div>
+      <td class="userInfo-label"><%- @Ti( row.display ) %>
+      <td class="userInfo-value"><%- @L( @P( @user[row.name] ) ) %>
     <% else: %>
-      <div class="customer-info" title="<%- @Ti( row.display ) %>">
+      <td class="userInfo-label"><%- @Ti( row.display ) %>
-        <textarea class="customer-info" rows="3" name="<%= row.name %>" data-type="update" placeholder="<%- @T( row.display ) %>"><%= @user[row.name] %></textarea>
+      <td class="userInfo-value">
-      </div>
+        <textarea rows="1" name="<%= row.name %>" data-type="update" placeholder="<%- @T('Add a Note') %>"><%= @user[row.name] %></textarea>
     <% end %>
+    </tr>
   <% end %>
 <% end %>
 <% if !_.isEmpty(@user['accounts']): %>
-  <div class="customer-info">
+  <tr>
-    <strong><%- @T( 'Linked Accounts' ) %></strong><br/>
+    <td class="userInfo-label"><%- @T( 'Linked Accounts' ) %>
+    <td class="userInfo-value">
   <% for account of @user['accounts']: %>
-    <a href="<%= @user['accounts'][account]['link'] %>" target="_blank"><%= account %></a>
+      <a href="<%= @user['accounts'][account]['link'] %>" target="_blank"><%= account %></a>
   <% end %>
-  </div>
+  </tr>
 <% end %>
 <% if !_.isEmpty(@user['links']): %>
   <% for link in @user['links']: %>
-  <div class="customer-info">
+  <tr>
-    <strong><%- @T( link['title'] ) %></strong><br/>
+    <td class="userInfo-label"><%- @T( link['title'] ) %>
-    <% for item in link['items']: %>
+    <td class="userInfo-value">
-      <% if item['url']: %>
+  <% for item in link['items']: %>
-        <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 %>>
+    <% if item['url']: %>
-      <% else: %>
+      <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 %>>
-        <span title="<%- @Ti( item['title'] ) %>" style="<%= item['style'] %>" data-type="<%= item['data'] %>" class="<%= item['class'] %>">
+    <% else: %>
-      <% end %>
+      <span title="<%- @Ti( item['title'] ) %>" style="<%= item['style'] %>" data-type="<%= item['data'] %>" class="<%= item['class'] %>">
-        <%- @T( item['name'] ) %> <% if item['count'] isnt undefined: %><span class="count">(<%= item['count'] %>)</span><% end %>
-      <% if item['url']: %>
-        </a>
-      <% else: %>
-        </span>
-      <% end %>
     <% end %>
-  </div>
+      <%- @T( item['name'] ) %> <% if item['count'] isnt undefined: %><span class="count">(<%= item['count'] %>)</span><% end %>
+    <% if item['url']: %>
+      </a>
+    <% else: %>
+      </span>
+    <% end %>
+  <% end %>
+  </tr>
   <% end %>
 <% end %>
-</div>
+</table>
-
-</div>

app/assets/stylesheets/zzz.css.erb

@@ -172,10 +172,13 @@ span[data-tooltip]:hover:before {
   transition: transform 300ms 1.5s cubic-bezier(0.34,1.6,0.71,1), opacity 300ms 1.5s;
 }
 
+.textarea::-webkit-input-placeholder,
 .form-control::-webkit-input-placeholder,
 .token-input::-webkit-input-placeholder {    color: hsl(0,0%,80%); }
+.textarea::-moz-placeholder,
 .form-control::-moz-placeholder,
 .token-input::-moz-placeholder { opacity: 1; color: hsl(0,0%,80%); }
+.textarea:-ms-input-placeholder,
 .form-control:-ms-input-placeholder,
 .token-input:-ms-input-placeholder {         color: hsl(0,0%,80%); }
 
@@ -418,13 +421,22 @@ label {
   margin-top: -23px;
 }
 
+input,
+textarea,
 .form-control {
+  display: block;
+  padding: 6px 12px;
+  width: 100%;
   height: 41px;
-  line-height: 22px;
+  font-size: 14px;
   font-weight: normal;
-  box-shadow: none;
+  line-height: 22px;
+  color: #555;
+  background: white;
+  border: 1px solid #ccc;
   border-radius: 3px;
   transition: none;
+  box-shadow: none;
 }
 
   .form-control:focus,
@@ -1340,11 +1352,6 @@ footer {
   color: #bbb;
 }
 
-.customer-info {
-  width: 100%;
-  padding-top: 7px;
-}
-
 .inline-edit {
   padding: 4px;
 }
@@ -1399,8 +1406,13 @@ footer {
   padding: 9px 24px 8px;
 }
 
+.btn:active {
+  box-shadow: none;
+}
+
 .btn--primary,
-.btn--primary:hover {
+.btn--primary:hover,
+.btn--primary:focus {
   color: white;
   background: #419ed7;
   border-color: #419ed7;
@@ -3330,6 +3342,59 @@ footer {
     right: 0;
   }
 
+.userInfo {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+.userInfo .avatar {
+  float: right;
+}
+
+.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-label {
+  color: #bbb;
+  font-weight: normal;
+  text-align: right;
+}
+
+.userInfo-value {
+  word-wrap: break-word;
+}
+
+  .userInfo-value textarea {
+    width: 100%;
+    height: auto;
+    line-height: 20px;
+    border: none;
+    padding: 0;
+    outline: none;
+    resize: none;
+  }
+
 /*
 
   ----------------