SYWEB-12: Format room info dialog better.

2 files changed, 38 insertions, 17 deletions

diff --git a/webclient/app.css b/webclient/app.css

index 20a13aad81..2dc6e8caed 100755
--- a/webclient/app.css
+++ b/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 {
diff --git a/webclient/room/room.html b/webclient/room/room.html

index 3458e97039..65b959fe94 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -15,23 +15,19 @@
 
     <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>
-                    </td>
-                    <td>
-                        <pre>{{ event.content | json }}</pre>
-                    </td>
-                </tr>
+            <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 class="room-info-event-content">
+                    <pre>{{ event.content | json }}</pre>
+                </td>
+            </tr>
             </table>
         </div>
         <div class="modal-footer">