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

format sidebar info, style orga member section

Browse source 
create .sidebar-block for generic sidebar blocks
This commit is contained in:
Felix Niklas 2014-11-15 17:05:03 +01:00
parent 00a3536740
commit 177dc4464b
4 changed files with 115 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco
View file

@ -56,7 +56,7 @@
<a href="#">Doreen Kubiak</a> <a href="#">Doreen Kubiak</a>
</div> </div>
<div class="profile-organizationMember"> <div class="profile-organizationMember">
<div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div> <div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
<a href="#">Franz Xaver</a> <a href="#">Franz Xaver</a>
</div> </div>
<div class="profile-organizationMember"> <div class="profile-organizationMember">

70
app/assets/javascripts/app/views/widget/organization.jst.eco
View file

@ -1,31 +1,45 @@
<div class="userInfo"> <div class="sidebar-block">
<div class="userInfo-entry"> <h3 class="u-textTruncate" title="<%- @Ti( 'Name') %>">
<%= @organization.displayName() %> <%= @organization.displayName() %>
</div> </h3>
</div>
<% for row in @organizationData: %> <% for row in @organizationData: %>
<% if @organization[row.name] || row.name is 'note': %> <% if @organization[row.name] || row.name is 'note': %>
<div class="userInfo-entry"> <div class="sidebar-block">
<% if row.tag isnt 'textarea': %> <% if row.tag isnt 'textarea': %>
<div class="userInfo-label"><%- @T( row.display ) %></div> <label><%- @T( row.display ) %></label>
<div class="userInfo-value"><%- @L( @P( @organization[row.name] ) ) %></div> <%- @L( @P( @organization[row.name] ) ) %>
<% else: %> <% else: %>
<div class="userInfo-label"><%- @T( row.display ) %></div> <label><%- @T( row.display ) %></label>
<div class="userInfo-value"> <div contenteditable="true" data-name="<%= row.name %>" data-type="update-org" data-placeholder="<%- @T('Add a Note') %>"><%= @organization[row.name] %></div>
<div contenteditable="true" data-name="<%= row.name %>" data-type="update-org" data-placeholder="<%- @T('Add a Note') %>"><%= @organization[row.name] %></div> <% end %>
</div> </div>
<% end %> <% end %>
</div> <% end %>
<% end %>
<% end %>
<% if @organization.members: %> <% if @organization.members: %>
<h3><%- @T('Member') %></h3> <hr>
<ul> <user class="sidebar-block">
<% for user in @organization.members: %> <label><%- @T('Member') %></label>
<li><a href="<%- user.uiUrl() %>" class="user-popover" data-id="<%- user.id %>"><%= user.displayName() %></a></li> <ul class="userList">
<% end %> <% for user in @organization.members: %>
</ul> <li>
<% end %> <%- user.avatar("40") %>
<a href="<%- user.uiUrl() %>" class="user-popover" data-id="<%- user.id %>">
</div> <%= user.displayName() %>
</a>
<li>
<%- user.avatar("40") %>
<a href="<%- user.uiUrl() %>" class="user-popover" data-id="<%- user.id %>">
<%= user.displayName() %>
</a>
<li>
<%- user.avatar("40") %>
<a href="<%- user.uiUrl() %>" class="user-popover" data-id="<%- user.id %>">
<%= user.displayName() %>
</a>
<% end %>
</ul>
</div>
<% end %>

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

@ -1,57 +1,49 @@
<div class="userInfo"> <div class="userInfo">
<div class="userInfo-entry"> <div class="sidebar-block">
<%- @user.avatar("50") %> <%- @user.avatar("50", "", "userInfo-avatar") %>
<div class="userInfo-name"> <h3 class="u-textTruncate" title="<%- @Ti( 'Name') %>">
<div class="u-textTruncate" title="<%- @Ti( 'Name') %>"> <%= @user.displayName() %>
<%= @user.displayName() %> </h3>
</div>
</div>
</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': %>
<div class="userInfo-entry"> <div class="sidebar-block">
<% if row.tag isnt 'textarea': %> <% if row.tag isnt 'textarea': %>
<div class="userInfo-label"><%- @T( row.display ) %></div> <label><%- @T( row.display ) %></label>
<div class="userInfo-value"><%- @L( @P( @user[row.name] ) ) %></div> <%- @L( @P( @user[row.name] ) ) %>
<% else: %> <% else: %>
<div class="userInfo-label"><%- @T( row.display ) %></div> <label><%- @T( row.display ) %></label>
<div class="userInfo-value"> <div contenteditable="true" data-name="<%= row.name %>" data-type="update" data-placeholder="<%- @T('Add a Note') %>"><%= @user[row.name] %></div>
<div contenteditable="true" data-name="<%= row.name %>" data-type="update" data-placeholder="<%- @T('Add a Note') %>"><%= @user[row.name] %></div>
</div>
<% end %> <% end %>
</div> </div>
<% end %> <% end %>
<% end %> <% end %>
<% if !_.isEmpty(@user['accounts']): %> <% if !_.isEmpty(@user['accounts']): %>
<div class="userInfo-entry"> <div class="sidebar-block">
<div class="userInfo-label"><%- @T( 'Linked Accounts' ) %></div> <label><%- @T( 'Linked Accounts' ) %></label>
<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 %>
</div>
</div> </div>
<% end %> <% end %>
<% if !_.isEmpty(@user['links']): %> <% if !_.isEmpty(@user['links']): %>
<% for link in @user['links']: %> <% for link in @user['links']: %>
<div class="userInfo-entry"> <div class="sidebar-block">
<div class="userInfo-label"><%- @T( link['title'] ) %></div> <label><%- @T( link['title'] ) %></label>
<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 %>> <% else: %>
<% else: %> <span title="<%- @Ti( item['title'] ) %>" style="<%= item['style'] %>" data-type="<%= item['data'] %>" class="<%= item['class'] %>">
<span title="<%- @Ti( item['title'] ) %>" style="<%= item['style'] %>" data-type="<%= item['data'] %>" class="<%= item['class'] %>"> <% end %>
<% end %> <%- @T( item['name'] ) %> <% if item['count'] isnt undefined: %><span class="count">(<%= item['count'] %>)</span><% end %>
<%- @T( item['name'] ) %> <% if item['count'] isnt undefined: %><span class="count">(<%= item['count'] %>)</span><% end %> <% if item['url']: %>
<% if item['url']: %> </a>
</a> <% else: %>
<% else: %> </span>
</span>
<% end %>
</div>
<% end %> <% end %>
</div> </div>
<% end %>
<% end %> <% end %>
<% end %> <% end %>
</div> </div>

86
app/assets/stylesheets/zammad.css.scss
View file

@ -523,11 +523,11 @@ label,
.checkbox.form-group label { .checkbox.form-group label {
text-transform: uppercase; text-transform: uppercase;
color: #999; color: #999;
display: block;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
letter-spacing: 0.1em; letter-spacing: 0.1em;
padding: 0 2px; margin-bottom: 4px;
margin-bottom: 6px;
} }
fieldset { fieldset {
@ -552,6 +552,11 @@ fieldset > *:not(.form-group) .form-control {
margin-top: 0; margin-top: 0;
} }
.form-group label {
padding: 0 2px;
margin-bottom: 6px;
}
.form-group .controls .richtext { .form-group .controls .richtext {
position: relative; position: relative;
height: auto; height: auto;
@ -669,7 +674,6 @@ textarea,
text-transform: inherit; text-transform: inherit;
vertical-align: baseline; vertical-align: baseline;
letter-spacing: inherit; letter-spacing: inherit;
display: block;
} }
@ -2244,6 +2248,7 @@ footer {
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
text-shadow: 0 1px rgba(0,0,0,.2); text-shadow: 0 1px rgba(0,0,0,.2);
cursor: default;
} }
.unique.avatar.size-50 { .unique.avatar.size-50 {
@ -2269,6 +2274,23 @@ footer {
margin-top: 5px; margin-top: 5px;
} }
.sidebar h3 {
margin: 0;
color: rgba(0,8,14,.73);
font-weight: normal;
font-size: 16px;
text-transform: initial;
letter-spacing: 0;
}
.sidebar-block {
margin: 20px 0;
&:first-child {
margin-top: 0;
}
}
.main + .sidebar { .main + .sidebar {
border-right: none; border-right: none;
border-left: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6;
@ -3352,7 +3374,7 @@ footer {
@extend .vertical; @extend .vertical;
} }
.tabsSidebar hr { .tabsSidebar .sidebar > hr {
margin: 20px; margin: 20px;
} }
@ -3918,12 +3940,12 @@ footer {
right: 0; right: 0;
} }
.userInfo .avatar { .userInfo-avatar {
float: right; float: right;
position: relative; position: relative;
} }
.userInfo .avatar:after { .userInfo-avatar:after {
content: ""; content: "";
background: image_url("sprite.svg"); background: image_url("sprite.svg");
background-position: -236px 0; background-position: -236px 0;
@ -3934,42 +3956,25 @@ footer {
position: absolute; position: absolute;
} }
.userInfo-name { .userList {
color: rgba(0,8,14,.73); list-style: none;
font-size: 16px; padding: 0;
}
li {
.userInfo-entry { @extend .horizontal;
margin: 20px 0; @extend .center;
} margin: 10px 0;
.userInfo-entry:first-child {
margin-top: 0;
}
.userInfo-label {
text-transform: uppercase;
color: #999;
font-size: 12px;
font-weight: normal;
letter-spacing: 0.1em;
margin-bottom: 6px;
}
.userInfo-value {
word-wrap: break-word;
}
.userInfo-value textarea {
width: 100%;
height: auto;
line-height: 20px;
border: none;
padding: 0;
outline: none;
resize: none;
} }
a {
@extend .u-textTruncate;
}
.avatar {
margin-right: 7px;
}
}
.checkbox.form-group .checkbox { .checkbox.form-group .checkbox {
margin-top: 0; margin-top: 0;
margin-bottom: 15px; margin-bottom: 15px;
@ -3985,7 +3990,6 @@ footer {
.checkbox.form-group .controls label { .checkbox.form-group .controls label {
padding: 3px 0 3px 20px; padding: 3px 0 3px 20px;
display: block;
font: inherit; font: inherit;
font-size: 13px; font-size: 13px;
margin-bottom: 0; margin-bottom: 0;