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

restyle userInfo to be inline

Browse source
This commit is contained in:
Felix Niklas 2014-09-26 16:51:37 +02:00
parent c34d0d2ad8
commit b208807c33
2 changed files with 41 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,40 +1,43 @@
<table class="userInfo"> <div class="userInfo">
<tr> <div class="userInfo-entry">
<td> <td>
<%- @user.avatar(true) %> <%- @user.avatar(true) %>
<td class="userInfo-name"> <div class="userInfo-name">
<div class="u-textTruncate" title="<%- @Ti( 'Name') %>"> <div class="u-textTruncate" title="<%- @Ti( 'Name') %>">
<%= @user.displayName() %> <%= @user.displayName() %>
</div> </div>
</tr> </div>
</div>
<% 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> <div class="userInfo-entry">
<% if row.tag isnt 'textarea': %> <% if row.tag isnt 'textarea': %>
<td class="userInfo-label"><%- @Ti( row.display ) %> <div class="userInfo-label"><%- @Ti( row.display ) %></div>
<td class="userInfo-value"><%- @L( @P( @user[row.name] ) ) %> <div class="userInfo-value"><%- @L( @P( @user[row.name] ) ) %></div>
<% else: %> <% else: %>
<td class="userInfo-label"><%- @Ti( row.display ) %> <div class="userInfo-label"><%- @Ti( row.display ) %></div>
<td class="userInfo-value"> <div class="userInfo-value">
<textarea rows="1" name="<%= row.name %>" data-type="update" placeholder="<%- @T('Add a Note') %>"><%= @user[row.name] %></textarea> <textarea rows="1" name="<%= row.name %>" data-type="update" placeholder="<%- @T('Add a Note') %>"><%= @user[row.name] %></textarea>
</div>
<% end %> <% end %>
</tr> </div>
<% end %> <% end %>
<% end %> <% end %>
<% if !_.isEmpty(@user['accounts']): %> <% if !_.isEmpty(@user['accounts']): %>
<tr> <div class="userInfo-entry">
<td class="userInfo-label"><%- @T( 'Linked Accounts' ) %> <div class="userInfo-label"><%- @T( 'Linked Accounts' ) %></div>
<td class="userInfo-value"> <div 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 %>
</tr> </div>
</div>
<% end %> <% end %>
<% if !_.isEmpty(@user['links']): %> <% if !_.isEmpty(@user['links']): %>
<% for link in @user['links']: %> <% for link in @user['links']: %>
<tr> <div class="userInfo-entry">
<td class="userInfo-label"><%- @T( link['title'] ) %> <div class="userInfo-label"><%- @T( link['title'] ) %></div>
<td class="userInfo-value"> <div 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 %>>
@ -47,8 +50,9 @@
<% else: %> <% else: %>
</span> </span>
<% end %> <% end %>
</div>
<% end %> <% end %>
</tr> </div>
<% end %> <% end %>
<% end %> <% end %>
</table> </div>

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

@ -3365,42 +3365,39 @@ footer {
} }
.userInfo { .userInfo {
width: 100%;
border-collapse: collapse;
table-layout: auto;
} }
.userInfo .avatar { .userInfo .avatar {
float: right; 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 { .userInfo-name {
color: rgba(0,8,14,.73); color: rgba(0,8,14,.73);
font-size: 16px; font-size: 16px;
position: relative;
} }
.userInfo-name div { .userInfo-entry {
position: absolute; margin: 20px 0;
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 { .userInfo-label {
color: #bbb; text-transform: uppercase;
color: #999;
font-size: 12px;
font-weight: normal; font-weight: normal;
text-align: right; letter-spacing: 0.1em;
margin-bottom: 6px;
} }
.userInfo-value { .userInfo-value {