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,29 +9,42 @@
 		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
 
-		span.date
+				&:before
-			color: darken($activity-highlight-color, 5%)
+					content: ''
-			position: relative
+					display: block
+					position: absolute
+					bottom: 5px
+					left: -13px
+					width: 5px
+					height: 5px
+					border-radius: 50%
+					background-color: $color-background-light
+					border: thin solid $activity-highlight-color
+					transition: all 250ms ease-in-out
 
-			&:before
+			&:hover span.date:before
-				content: ''
+				background-color: $activity-highlight-color
-				display: block
-				position: absolute
-				bottom: 5px
-				left: -13px
-				width: 5px
-				height: 5px
-				border-radius: 50%
-				background-color: $color-background-light
-				border: thin solid $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
+	| {% if current_user.is_authenticated %}
-		.col-md-6
+	| {% from "attract/tasks/task_list_for_user.html" import task_list_for_user %}
-			| {% if current_user.is_authenticated %}
+	| {{ task_list_for_user(tasks['_meta']['total'], tasks['_items']) }}
-			| {% from "attract/tasks/task_list_for_user.html" import task_list_for_user %}
+	| {% else %}
-			| {{ task_list_for_user(tasks['_meta']['total'], tasks['_items']) }}
+	| {% include "attract/index_anon_left_column.html" %}
-			| {% else %}
+	| {% endif %}
-			| {% include "attract/index_anon_left_column.html" %}
+
-			| {% endif %}
+#col_right
-		.col-md-6
+	.dashboard
+		.d-stats
 			h3 Shot statistics
 
 			| {% for proj, summary in projs_with_summaries %}
@@ -28,14 +29,15 @@
 				| {% endfor %}
 			| {% endfor %}
 
-			.d-activity
+		.d-activity
-				h3 Activity
+			h3 Activity Stream
 
-				ul
+			ul
-					| {% for act in activities['_items'] %}
+				| {% for act in activities['_items'] %}
-					li
+				li
-						span.date {{ act._created | pretty_date_time }}: 
+					a(href="{{ act.link }}")
-						a(href="{{ act.link }}")
+						span.date(title="{{ act._created }}") {{ act._created | pretty_date_time }}
-							| {{ act['actor_user']['full_name'] }} {{ act.verb }}
+						span.actor {{ act['actor_user']['full_name'] }}
-					| {% endfor %}
+						span.verb {{ act.verb }}
+				| {% endfor %}
 | {% endblock %}