Mobile optimization

index.html

@@ -6,11 +6,15 @@
         <script src="lib/matrix.js"></script>
         <script src="lib/browser-request.js"></script>
         <script src="matrix-blog.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <style type="text/css">
 body {
     background: #888;
     font-family: 'Roboto', sans-serif;
 }
+#chat {
+    max-width: 450px;
+}
 ul {
     padding-left: 0;
     list-style-type: none;
@@ -28,7 +32,6 @@ ul.posts li {
     border-radius: 3px;
     padding: 5px 15px;
     margin: 5px 0;
-    max-width: 450px;
 }
 h4 {
     margin: 0 0 13px 0;
@@ -55,6 +58,14 @@ time {
     color: #888;
 }
 .nick {
+}
+@media  (max-width: 450px) {
+    #chat {
+        max-width: 100%;
+    }
+    img {
+        width: 100%;
+    }
 }
         </style>
     </head>

matrix-blog.js

@@ -82,7 +82,8 @@ MatrixBlog.prototype.processPresence = function(person) {
         }
         else {
             $item = $("<li>");
-            $item.attr("data-user-id", person.user_id);
+            $item.attr("data-user-id", person.content.user_id);
+            $item.attr("data-updated", (new Date).getTime());
             var $img = $("<img>").attr("src", url);
             $item.append($img);
             this.$people.append($item);