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

bigger activity click area, .state--read

Browse source 
add read state to activity-entry: the class "state--read" will fade out the activity-entry.
This commit is contained in:
Felix Niklas 2014-08-05 11:03:38 +02:00
parent 4e637fbfcd
commit 63246cb323
2 changed files with 51 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/javascripts/app/views/dashboard/activity_stream.jst.eco
View file

@ -1,15 +1,19 @@
<h2 class="can-move"><%- @T( @head ) %></h2>
<% for item in @items: %>
<div class="activity-entry horizontal">
<a href="<%- item.created_by.uiUrl() %>"><div class="avatar" style="background-image: url(<%- item.created_by.image %>)"></div></a>
<div class="activity-body flex horizontal">
<div class="activity-message flex">
<a href="<%- item.link %>"><%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %></a>
<div class="activity-time humanTimeFromNow" data-time="<%- item.created_at %>">?</div>
</div>
<div class="activity-icon">
<a class="activity-avatar" href="<%- item.created_by.uiUrl() %>">
<span class="avatar" style="background-image: url(<%- item.created_by.image %>)"></span>
</a>
<a href="<%- item.link %>" class="activity-body flex horizontal">
<span class="activity-message flex">
<span class="activity-text">
<%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %>
</span>
<span class="activity-time humanTimeFromNow" data-time="<%- item.created_at %>">?</span>
</span>
<span class="activity-icon">
<span class="<%- item.cssIcon %> icon"></span>
</div>
</div>
</span>
</a>
</div>
<% end %>

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

@ -2199,24 +2199,54 @@ footer {
.activity.sidebar {
width: 370px;
padding: 0 26px 0 14px;
padding: 0;
border-left: 1px solid #e8e8e8;
}
.activity h2 {
margin-left: 5px;
margin-left: 19px;
margin-bottom: 15px;
margin-right: 26px;
}
.activity-entry {
padding-top: 16px;
.activity-entry.state--read {
opacity: 0.5;
}
.activity-avatar {
padding-top: 16px;
padding-left: 14px;
padding-right: 2px;
margin-right: 10px;
}
.activity-avatar:hover .avatar {
}
.activity-body {
padding: 0 0 12px 14px;
border-bottom: 1px solid #f2f2f3;
color: #444a4f;
padding: 16px 26px 16px 2px;
position: relative;
}
.activity-body:after {
content: "";
position: absolute;
bottom: 0;
right: 30px;
left: 8px;
border-bottom: 1px solid #f2f2f3;
}
.activity-body:hover {
color: #444a4f;
text-decoration: none;
}
.activity-body:hover .activity-text {
text-decoration: underline;
}
.activity-message {
padding-right: 20px;
}
@ -2224,6 +2254,7 @@ footer {
.activity-time {
margin-top: 2px;
color: #a1a4a7;
display: block;
}
.activity .priority.icon:after {
@ -2240,6 +2271,6 @@ footer {
@media only screen and (max-width: 1280px) {
.activity.sidebar {
display: none;
/*display: none;*/
}
}