Style task read-only details

src/styles/_app_base.sass

@@ -195,12 +195,10 @@ input, input.form-control
 	display: table
 	width: 100%
 	position: relative
+	margin-bottom: initial // overrides BS
 
 	.table-row
 		display: table-row
-		&:hover
-			background-color: $color-background-light
-
 	.table-head
 		display: table-header-group
 
@@ -227,6 +225,9 @@ input, input.form-control
 		border-bottom: none
 		cursor: e-resize
 
+.table.table-hover
+	.table-row:hover
+		background-color: $color-background-light
 
 /* Generic Statuses */
 .processing

src/styles/_shots.sass

@@ -1,6 +1,8 @@
-.table
-	&#shot-list
+.table#shot-list
 	background-color: white
+	.table-row:hover
+		background-color: $color-background-light
+
 	.table-cell
 		&.shot-status
 			width: 5px

src/styles/_tasks.sass

@@ -9,6 +9,12 @@
 
 	.item-name
 		font-size: 1.6em
+	h2.item-name
+		padding-left: 5px
+
+	.item-description
+		padding: 10px 5px
+		color: $color-text-dark-primary
 
 	.dropdown button
 		height: 38px
@@ -46,8 +52,31 @@
 					left: -4px
 					font-size: .9em
 
-	.item-properties
-		padding: 1em
+	.table.item-properties
+		.table-body
+			text-shadow: 1px 1px 0 white
+			// background-color: darken(white, 2%)
+
+			.table-row
+				.table-cell
+					padding: 7px 10px
+					vertical-align: top
+					border: none
+					@include status-color-property(color, '', 'dark')
+
+					&:first-child
+						width: 100px
+						text-align: right
+						font-weight: bold
+						padding-right: 10px
+						border-right: thin solid $color-background-dark
+						color: $color-text-dark-primary
+						// background-color: darken(white, 3%)
+
+				&.properties-assignees
+					.table-cell span
+						display: block
+
 
 #task-add
 	margin-left: auto

src/templates/attract/tasks/view_task_embed.jade

@@ -11,7 +11,7 @@
 				placeholder='Name',
 				value="{{ task.name | hide_none }}")
 			| {% else %}
-			h2 {{ task.name | hide_none }}
+			h2.item-name {{ task.name | hide_none }}
 			| {% endif %}
 
 			.dropdown(style='margin-left: auto')
@@ -87,18 +87,33 @@
 				|  Save Task
 		| {% else %}
 		//- NOTE: read-only versions of the fields above.
-		p {{ task.description | hide_none }}
-		dl.dl-horizontal.item-properties
-			dt Type:
-			dd {{ task.properties.task_type | undertitle }}
-			dt Status:
-			dd {{ task.properties.status | undertitle }}
-			dt Assignees:
+		| {% if task.description %}
+		p.item-description {{ task.description | hide_none }}
+		| {% endif %}
+		.table.item-properties
+			.table-body
+				.table-row
+					.table-cell Task Type
+					.table-cell {{ task.properties.task_type | undertitle }}
+				.table-row
+					.table-cell Status
+					.table-cell(class="status-{{ task.properties.status }}")
+						| {{ task.properties.status | undertitle }}
+				| {% if attract_context != 'shot' and task.parent %}
+				.table-row
+					.table-cell Shot
+					.table-cell
+						a(href="{{ url_for('attract.shots.perproject.with_task', project_url=project['url'], task_id=task['_id']) }}") {{ task._parent_info.name }}
+				| {% endif %}
+				.table-row.properties-assignees
+					.table-cell Assignees
+					.table-cell
 						| {% for u in task.properties.assigned_to['users'] %}
-			dd {{ u.full_name }}
+						span(title="{{ u.username }}") {{ u.full_name }}
 						| {% else %}
-			dd not assigned
+						span Not assigned yet
 						| {% endfor %}
+
 		| {% endif %}
 
 #item-view-feed