From 63246cb323b0d20db8193d40b4953dec95316e49 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Tue, 5 Aug 2014 11:03:38 +0200
Subject: [PATCH] bigger activity click area, .state--read

add read state to activity-entry: the class "state--read" will fade out the activity-entry.
---
 .../views/dashboard/activity_stream.jst.eco   | 22 +++++----
 app/assets/stylesheets/zzz.css.erb            | 45 ++++++++++++++++---
 2 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/app/views/dashboard/activity_stream.jst.eco b/app/assets/javascripts/app/views/dashboard/activity_stream.jst.eco
index 2212c8103..2c0300983 100644
--- a/app/assets/javascripts/app/views/dashboard/activity_stream.jst.eco
+++ b/app/assets/javascripts/app/views/dashboard/activity_stream.jst.eco
@@ -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 %>
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 2da12603b..98a7d650f 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -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;*/
   }
 }
\ No newline at end of file