nasty big monolithic commit of a whole bunch of UI/UX improvements:

 - add a simple CSS template across the app for navigation & cosmetics
 - split login into login & register, and totally reskin it
 - restructure room CSS to play nicely with it
 - implement basis 1:1 chat from user pages
 - disable autofocus on iOS to improve UX

2 files changed, 19 insertions, 25 deletions

diff --git a/webclient/home/home-controller.js b/webclient/home/home-controller.js
index 438ffe1b0e..847918d5dc 100644
--- a/webclient/home/home-controller.js
+++ b/webclient/home/home-controller.js
@@ -58,14 +58,14 @@ angular.module('HomeController', ['matrixService', 'eventHandlerService', 'Recen
         );
     };
     
-    $scope.createNewRoom = function(room_id, isPrivate) {
+    $scope.createNewRoom = function(room_alias, isPrivate) {
         
         var visibility = "public";
         if (isPrivate) {
             visibility = "private";
         }
         
-        matrixService.create(room_id, visibility).then(
+        matrixService.create(room_alias, visibility).then(
             function(response) { 
                 // This room has been created. Refresh the rooms list
                 console.log("Created room " + response.data.room_alias + " with id: "+
diff --git a/webclient/home/home.html b/webclient/home/home.html
index 1b1c21d9d2..8d35eb5157 100644
--- a/webclient/home/home.html
+++ b/webclient/home/home.html
@@ -1,29 +1,24 @@
 <div ng-controller="HomeController" data-ng-init="onInit()">
 
-    <div id="page">
     <div id="wrapper">
-        
+    
+    <div id="genericHeading">
+        <img src="img/logo-small.png" width="100" height="43" alt="[matrix]"/>
+    </div>
+    
+    <h1>Welcome to homeserver {{ config.homeserver }}</h1>
+    
     <div>
-        <form>
-            <table>
-                <tr>
-                    <td>
-                        <div class="profile-avatar">
-                            <img ng-src="{{ (null !== profile.avatarUrl) ? profile.avatarUrl : 'img/default-profile.jpg' }}"/>
-                        </div>
-                    </td>
-                    <td>
-                        <div id="user-ids">
-                            <div id="user-displayname">{{ profile.displayName }}</div>
-                            <div>{{ config.user_id }}</div>
-                        </div>
-                    </td>
-                </tr>
-            </table>
-        </form>
+        <div class="profile-avatar">
+            <img ng-src="{{ (null !== profile.avatarUrl) ? profile.avatarUrl : 'img/default-profile.png' }}"/>
+        </div>
+        <div id="user-ids">
+            <div id="user-displayname">{{ profile.displayName }}</div>
+            <div>{{ config.user_id }}</div>
+        </div>
     </div>
     
-    <h3>Recents</h3>
+    <h3>Recent conversations</h3>
         <div ng-include="'recents/recents.html'"></div>
     <br/>
 
@@ -38,9 +33,9 @@
     
     <div>
         <form>
-            <input size="40" ng-model="newRoom.room_id" ng-enter="createNewRoom(newRoom.room_id, newRoom.private)" placeholder="(e.g. foo_channel)"/>
+            <input size="40" ng-model="newRoom.room_alias" ng-enter="createNewRoom(newRoom.room_alias, newRoom.private)" placeholder="(e.g. foo_channel)"/>
             <input type="checkbox" ng-model="newRoom.private">private
-            <button ng-disabled="!newRoom.room_id" ng-click="createNewRoom(newRoom.room_id, newRoom.private)">Create room</button>    
+            <button ng-disabled="!newRoom.room_alias" ng-click="createNewRoom(newRoom.room_alias, newRoom.private)">Create room</button>    
         </form>
     </div>
     <div>
@@ -54,5 +49,4 @@
     {{ feedback }}
 
     </div>    
-    </div>
 </div>