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

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

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