Make debug info collapsable

src/styles/_app_base.sass

@@ -305,6 +305,17 @@ input, input.form-control
 
 
 /* Debug styles, such as status color legend on help */
+.debug-info
+	padding-top: 10px
+	display: flex
+	flex-direction: column
+
+	.debug-info-toggle
+		width: 100%
+		color: $color-text-dark-hint
+		font-size: .9em
+		text-align: right
+
 .status-debug-item
 	width: 100%
 

src/styles/_tasks.sass

@@ -79,6 +79,8 @@
 				&.properties-status
 					cursor: help
 
+.attract-box+.attract-box
+	margin-top: 0
 
 #task-add
 	margin-left: auto

src/templates/attract/shots/view_shot_embed.jade

@@ -81,7 +81,17 @@
 
 #item-view-feed
 	#activities
+
 	| {% if config.DEBUG %}
+	.debug-info
+		a.debug-info-toggle(role='button',
+			data-toggle='collapse',
+			href='#debug-content',
+			aria-expanded='false',
+			aria-controls='debug-content')
+			i.pi-info
+			| Debug Information
+		#debug-content.collapse
 			pre.
 				{{ shot.to_dict() | pprint }}
 		| {% endif %}

src/templates/attract/tasks/view_task_embed.jade

@@ -120,12 +120,21 @@
 
 #item-view-feed
 	#activities
+
 	| {% if config.DEBUG %}
+	.debug-info
+		a.debug-info-toggle(role='button',
+			data-toggle='collapse',
+			href='#debug-content',
+			aria-expanded='false',
+			aria-controls='debug-content')
+			i.pi-info
+			| Debug Information
+		#debug-content.collapse
 			pre.
 				{{ task.to_dict() | pprint }}
 		| {% endif %}
 
-
 script.
 	$("#assignees").select2();