SYWEB-12: Format room info dialog better.

webclient/app.css

@@ -418,6 +418,31 @@ textarea, input {
     margin-top: 15px;
 }
 
+/*** Room Info Dialog ***/
+
+.room-info {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.room-info-event {
+    border-bottom: 1pt solid black;
+}
+
+.room-info-event-meta {
+    padding-top: 1em;
+    padding-bottom: 1em;
+}
+
+.room-info-event-content {
+    padding-top: 1em;
+    padding-bottom: 1em;
+}
+
+.monospace {
+    font-family: monospace;
+}
+
 /*** Participant list ***/
 
 #usersTableWrapper {

webclient/room/room.html

@@ -15,20 +15,16 @@
 
     <script type="text/ng-template" id="roomInfoTemplate.html">
         <div class="modal-body">
-            <table id="roomInfoTable">
-                <tr>
-                <th>
-                    Event Type
-                </th>
-                <th>
-                    Content
-                </th>
-                </tr>
-                <tr ng-repeat="(key, event) in events.rooms[room_id] | stateEventsFilter">
-                    <td>
-                        <pre>{{ key }}</pre>
+            <table class="room-info">
+            <tr ng-repeat="(key, event) in events.rooms[room_id] | stateEventsFilter" class="room-info-event">
+                <td class="room-info-event-meta">
+                    <span class="monospace">{{ key }}</span>
+                    <br/>
+                    {{ (event.origin_server_ts) | date:'MMM d HH:mm' }}
+                    <br/>
+                    Set by: <span class="monospace">{{ event.user_id }}</span>
                 </td>
-                    <td>
+                <td class="room-info-event-content">
                     <pre>{{ event.content | json }}</pre>
                 </td>
             </tr>