Make annotations collapsable in UI

ui/app/css/main.css

@@ -139,6 +139,18 @@ header #logo {
 	padding: .5em .6em;
 }
 
+input.collapse[type=checkbox] {
+	-webkit-appearance: none;
+    width: 1em;
+    height: 1em;
+    border: none;
+}
+input.collapse[type=checkbox]:after {
+content: '▹';
+}
+input.collapse.open[type=checkbox]:after {
+content: '▿';
+}
 
 /**/
 input[type="datetime-local"]  {

ui/app/js/app.js

@@ -164,6 +164,10 @@ angular.module('am.controllers').controller('NavCtrl',
   }
 );
 
+angular.module('am.controllers').controller('AlertCtrl',
+  function() {}
+);
+
 angular.module('am.controllers').controller('AlertsCtrl',
   function($scope, Route) {
     $scope.route = null;

ui/app/partials/alert.html

@@ -1,4 +1,4 @@
-<div class="alert-item list-item">
+<div class="alert-item list-item" ng-controller="AlertCtrl">
 	<div class="container-left">
 		<div class="active-interval">
 			<span class="date">{{ a.startsAt | date:'yyyy-MM-dd' }},</span> <span class="time">{{ a.startsAt | date:'HH:mm' }}</span>
@@ -15,12 +15,15 @@
 		</span>
 	</div>
 	<div class="container-right group">
-		<div class="left">
+		<div>
+			Details: <input class="collapse" ng-class="{open:collapse}" type="checkbox" ng-model="collapse"></input>
+		</div>
+		<div class="left" ng-show="collapse">
 			<table class="table-flat">
 				<tbody>
 					<tr ng-repeat="(name, val) in a.annotations | orderBy:name">
 						<td style="padding-right: 3em"><em>{{ name }}</em></td>
-						<td style="white-space: pre-wrap;">{{ val }}</td>
+						<td style="white-space: pre-line;">{{ val }}</td>
 					</tr>
 				</tbody>
 			</table>