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,10 +81,20 @@
 
 #item-view-feed
 	#activities
+
 	| {% if config.DEBUG %}
-	pre.
-		{{ shot.to_dict() | pprint }}
-	| {% endif %}
+	.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 %}
 
 script.
 	new Clipboard('.copy-to-clipboard');

src/templates/attract/tasks/view_task_embed.jade

@@ -120,11 +120,20 @@
 
 #item-view-feed
 	#activities
-	| {% if config.DEBUG %}
-	pre.
-		{{ task.to_dict() | pprint }}
-	| {% endif %}
 
+	| {% 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();