Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

userInfo v1

Browse source
This commit is contained in:
Felix Niklas 2014-09-25 13:29:06 +02:00
parent a878011d67
commit ea43cd651d
2 changed files with 111 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
app/assets/javascripts/app/views/widget/user.jst.eco
View file

@ -1,31 +1,40 @@
<div class="user-info"> <table class="userInfo">
<tr>
<td>
<%- @user.avatar(true) %> <%- @user.avatar(true) %>
<td class="userInfo-name">
<div class="customer-info" title="<%- @Ti( 'Name') %>"><%= @user.displayName() %></div> <div class="u-textTruncate" title="<%- @Ti( 'Name') %>">
<%= @user.displayName() %>
</div>
</tr>
<% for row in @userData: %> <% for row in @userData: %>
<% if @user[row.name] || row.name is 'note': %> <% if @user[row.name] || row.name is 'note': %>
<tr>
<% if row.tag isnt 'textarea': %> <% 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: %> <% 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 %> <% end %>
</tr>
<% end %> <% end %>
<% end %> <% end %>
<% if !_.isEmpty(@user['accounts']): %> <% 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']: %> <% 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 %> <% end %>
</div> </tr>
<% end %> <% end %>
<% if !_.isEmpty(@user['links']): %> <% if !_.isEmpty(@user['links']): %>
<% for link in @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'] ) %>
<td class="userInfo-value">
<% for item in link['items']: %> <% for item in link['items']: %>
<% if item['url']: %> <% 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 %>> <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 %>>
@ -39,9 +48,7 @@
</span> </span>
<% end %> <% end %>
<% end %> <% end %>
</div> </tr>
<% end %> <% end %>
<% end %> <% end %>
</div> </table>
</div>

81
app/assets/stylesheets/zzz.css.erb
View file

@ -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; 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, .form-control::-webkit-input-placeholder,
.token-input::-webkit-input-placeholder { color: hsl(0,0%,80%); } .token-input::-webkit-input-placeholder { color: hsl(0,0%,80%); }
.textarea::-moz-placeholder,
.form-control::-moz-placeholder, .form-control::-moz-placeholder,
.token-input::-moz-placeholder { opacity: 1; color: hsl(0,0%,80%); } .token-input::-moz-placeholder { opacity: 1; color: hsl(0,0%,80%); }
.textarea:-ms-input-placeholder,
.form-control:-ms-input-placeholder, .form-control:-ms-input-placeholder,
.token-input:-ms-input-placeholder { color: hsl(0,0%,80%); } .token-input:-ms-input-placeholder { color: hsl(0,0%,80%); }
@ -418,13 +421,22 @@ label {
margin-top: -23px; margin-top: -23px;
} }
input,
textarea,
.form-control { .form-control {
display: block;
padding: 6px 12px;
width: 100%;
height: 41px; height: 41px;
line-height: 22px; font-size: 14px;
font-weight: normal; font-weight: normal;
box-shadow: none; line-height: 22px;
color: #555;
background: white;
border: 1px solid #ccc;
border-radius: 3px; border-radius: 3px;
transition: none; transition: none;
box-shadow: none;
} }
.form-control:focus, .form-control:focus,
@ -1340,11 +1352,6 @@ footer {
color: #bbb; color: #bbb;
} }
.customer-info {
width: 100%;
padding-top: 7px;
}
.inline-edit { .inline-edit {
padding: 4px; padding: 4px;
} }
@ -1399,8 +1406,13 @@ footer {
padding: 9px 24px 8px; padding: 9px 24px 8px;
} }
.btn:active {
box-shadow: none;
}
.btn--primary, .btn--primary,
.btn--primary:hover { .btn--primary:hover,
.btn--primary:focus {
color: white; color: white;
background: #419ed7; background: #419ed7;
border-color: #419ed7; border-color: #419ed7;
@ -3330,6 +3342,59 @@ footer {
right: 0; 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;
}
/* /*
---------------- ----------------