Style activities on dashboard

src/styles/_app_base.sass

@@ -150,6 +150,9 @@ select.input-transparent
 	option
 		background-color: white
 
+input, input.form-control
+	background-color: transparent
+
 .input-transparent
 	border: thin solid transparent
 	border-radius: 3px
@@ -202,6 +205,7 @@ select.input-transparent
 		border-bottom: none
 		cursor: e-resize
 
+
 /* Generic Statuses */
 .processing
 	+stripes(rgba($color-background, .2), rgba($color-background, .5), -45deg, 25px)
@@ -232,6 +236,8 @@ select.input-transparent
 .fg-status
 	@include status-color-property(color, '', 'dark')
 
+
+/* Modal Bootstrap overrides */
 .modal-content
 	border: none
 	border-radius: 3px
@@ -259,7 +265,6 @@ select.input-transparent
 .modal-backdrop
 	background-color: $color-background-nav
 
-
 .modal-help-panel
 	overflow: hidden
 	border-radius: 3px
@@ -272,6 +277,8 @@ select.input-transparent
 		padding: 10px
 		color: $color-text-dark-primary
 
+
+/* Debug styles, such as status color legend on help */
 .status-debug-item
 	width: 100%
 

src/styles/_dashboard.sass

@@ -1,8 +1,4 @@
-
+/* General style for activities in all places */
-#dashboard
-	width: 100%
-	padding: 0 20px
-
 .d-activity
 	font-size: .9em
 
@@ -13,11 +9,10 @@
 		padding: 0 10px
 		color: $color-text-dark-primary
 		list-style: none
-		border-left: thin solid rgba($activity-highlight-color, .2)
+		border-left: thin solid $activity-highlight-color
 
 		li
 			padding: 7px 0
-
 			span.date
 				color: darken($activity-highlight-color, 5%)
 				position: relative
@@ -33,9 +28,23 @@
 					border-radius: 50%
 					background-color: $color-background-light
 					border: thin solid $activity-highlight-color
+					transition: all 250ms ease-in-out
+
+			&:hover span.date:before
+				background-color: $activity-highlight-color
 
 		span.actor
 			padding: 0 5px
 			color: $color-text-dark
 
+/* Dashboard specific styles */
+.dashboard
+	.d-stats
+		padding: 0 20px
+	.d-activity
+		padding: 5px 15px
+		margin: 0 20px
+		+container-box
 
+		a
+			color: $color-text-dark-primary

src/styles/_tasks.sass

@@ -91,13 +91,30 @@
 
 	.type
 		margin-left: auto
-		color: $color-text-dark-primary
+		color: $color-text-dark-secondary
 		+text-overflow-ellipsis
 
-	.name, .shotname
+	.name
-		margin: 10px
+		padding: 10px
 		+text-overflow-ellipsis
 
+	.shotname
+		color: $color-text-dark-secondary
+		margin-left: 10px
+		padding-right: 10px
+		position: relative
+		+text-overflow-ellipsis
+		&:after
+			position: absolute
+			width: 2px
+			height: 2px
+			right: 0
+			border-radius: 50%
+			bottom: 9px
+			display: block
+			content: ''
+			border: thin solid $color-text-dark-hint
+
 	@include status-color-property(background-color, ' .status-indicator', '')
 
 option.invalid_task

src/templates/attract/index.jade

@@ -2,16 +2,17 @@
 | {% block page_title %}Attract{% endblock %}
 
 | {% block body %}
-#dashboard
+#col_main
-	.row
-		.col-md-6
 	| {% if current_user.is_authenticated %}
 	| {% from "attract/tasks/task_list_for_user.html" import task_list_for_user %}
 	| {{ task_list_for_user(tasks['_meta']['total'], tasks['_items']) }}
 	| {% else %}
 	| {% include "attract/index_anon_left_column.html" %}
 	| {% endif %}
-		.col-md-6
+
+#col_right
+	.dashboard
+		.d-stats
 			h3 Shot statistics
 
 			| {% for proj, summary in projs_with_summaries %}
@@ -29,13 +30,14 @@
 			| {% endfor %}
 
 		.d-activity
-				h3 Activity
+			h3 Activity Stream
 
 			ul
 				| {% for act in activities['_items'] %}
 				li
-						span.date {{ act._created | pretty_date_time }}: 
 					a(href="{{ act.link }}")
-							| {{ act['actor_user']['full_name'] }} {{ act.verb }}
+						span.date(title="{{ act._created }}") {{ act._created | pretty_date_time }}
+						span.actor {{ act['actor_user']['full_name'] }}
+						span.verb {{ act.verb }}
 				| {% endfor %}
 | {% endblock %}