very quick and dirty responsive design for iPhones

author: Matthew Hodgson <matthew@matrix.org> 2014-08-23 20:45:00 +0100
committer: Matthew Hodgson <matthew@matrix.org> 2014-08-23 20:45:00 +0100
commit: d2bb28d2df6ffe58db1a56e7aec85c34d9d1425f (patch)
tree: dfd57963663627b4b2c63ffc699c3d9891abe643
parent: point out the non-quick-start guide (diff)
download: synapse-d2bb28d2df6ffe58db1a56e7aec85c34d9d1425f.tar.xz
6 files changed, 110 insertions, 30 deletions
diff --git a/webclient/app.css b/webclient/app.css
index 207f35f5f3..6f320414b1 100644
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -1,3 +1,71 @@
+/*** Mobile voodoo ***/
+@media all and (max-device-width: 640px) {
+            
+    #messageTableWrapper {
+        margin-right: 0px ! important;
+    }
+    
+    .leftBlock {
+        width: 8em ! important;
+    }
+    
+    #header,
+    #messageTable,
+    #wrapper,
+    #roomName,
+    #controls {
+        max-width: 640px ! important;
+    }    
+    
+    #userIdCell,
+    #usersTableWrapper,
+    #extraControls {
+        display: none;
+    }
+    
+    #buttonsCell {
+        width: 60px ! important;
+        padding-left: 20px ! important;
+    }
+    
+    #roomLogo {
+        display: none;
+    }
+    
+    #roomName {
+        text-align: left ! important;
+        top: -35px ! important;
+    }
+    
+    .bubble {
+        font-size: 12px ! important;
+        height: 20px ! important;
+    }
+    
+    #page {
+        top: 35px ! important;
+        bottom: 70px ! important;
+    }
+    
+    #header,
+    #page {
+        margin: 5px ! important;
+    }
+    
+    #header {
+        padding: 5px ! important;
+    }
+        
+    /* stop zoom on select */
+    select:focus,
+    textarea,
+    input
+    {
+        font-size: 16px ! important;
+    }
+    
+}
+
 body {
     font-family: "Myriad Pro", "Myriad", Helvetica, Arial, sans-serif;
     font-size: 12pt;
@@ -17,7 +85,6 @@ h1 {
     left: 0px;
     right: 0px;
     margin: 20px;
-    margin: 20px;
 }
 
 #wrapper {
@@ -32,8 +99,7 @@ h1 {
     text-align: right;
     top: -40px;
     position: absolute;
-    font-size: 16pt;
-    margin-bottom: 10px;
+    font-size: 16px;
 }
 
 #controlPanel {
@@ -50,6 +116,10 @@ h1 {
     margin: auto;
 }
 
+#buttonsCell {
+    width: 150px;
+}
+
 #inputBarTable {
     width: 100%;
 }
@@ -111,13 +181,13 @@ h1 {
     color: #fff;
     margin: 2px;
     bottom: 0px;
-    font-size: 8pt;
+    font-size: 12px;
     word-break: break-all;
 }
 
 .userPresence {
     text-align: center;
-    font-size: 8pt;
+    font-size: 12px;
     color: #fff;
     background-color: #aaa;
     border-bottom: 1px #ddd solid;
@@ -159,7 +229,7 @@ h1 {
     background-color: #fff;
     color: #888;
     font-weight: medium;
-    font-size: 8pt;
+    font-size: 12px;
     text-align: right;
     border-top: 1px #ddd solid;
 }
@@ -277,7 +347,7 @@ h1 {
 .profile-avatar {
     width: 160px;
     height: 160px;
-    display:table-cell;
+    display: table-cell;
     vertical-align: middle;
     text-align: center;
 }
@@ -293,13 +363,19 @@ h1 {
 }
 
 #user-displayname {
-    font-size: 16pt;
+    font-size: 24px;
 }
 /******************************/
 
-#header {
-    padding-left: 20px;
-    padding-right: 20px;
+#header
+{
+    padding: 20px;
+    max-width: 1280px;
+    margin: auto;
+}
+
+#logo,
+#roomLogo {
     max-width: 1280px;
     margin: auto;
 }
diff --git a/webclient/index.html b/webclient/index.html
index 27d9208193..5b8e27fa6d 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -2,10 +2,12 @@
 <html xmlns:ng="http://angularjs.org" ng-app="matrixWebClient" ng-controller="MatrixWebClientController">
 <head>
     <title>[matrix]</title>
-    
+        
     <link rel="stylesheet" href="app.css">
     <link rel="icon" href="favicon.ico">
    
+    <meta name="viewport" content="width=device-width">
+   
     <script type='text/javascript' src='js/jquery-1.8.3.min.js'></script> 
     <script src="js/angular.min.js"></script>
     <script src="js/angular-route.min.js"></script>
@@ -36,8 +38,6 @@
             <button ng-click="showConfig()">Config</button>
             <button ng-click="logout()">Log out</button>
         </div>
-
-        <h1>[matrix]</h1>
     </header>
 
     <div id="config" ng-hide="!config">
diff --git a/webclient/login/login.html b/webclient/login/login.html
index b1488b37f0..4b2ea60928 100644
--- a/webclient/login/login.html
+++ b/webclient/login/login.html
@@ -1,4 +1,6 @@
-<div ng-controller="LoginController" class="login">
+<div ng-controller="LoginController" class="login">    
+    <h1 id="logo">[matrix]</h1>
+
     <div id="page">
     <div id="wrapper">
 
diff --git a/webclient/room/room.html b/webclient/room/room.html
index 95da067714..06ca63d2ea 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -1,4 +1,5 @@
 <div ng-controller="RoomController" data-ng-init="onInit()" class="room">
+    <h1 id="roomLogo">[matrix]</h1>
 
     <div id="page">
     <div id="wrapper">
@@ -32,7 +33,7 @@
                 ng-class="(events.rooms[room_id].messages[$index + 1].user_id !== msg.user_id ? 'differentUser' : '') + (msg.user_id === state.user_id ? ' mine' : '')" scroll-item>
                 <td class="leftBlock">
                     <div class="sender" ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id">{{ members[msg.user_id].displayname || msg.user_id }}</div>
-                    <div class="timestamp">{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm:ss' }}</div>
+                    <div class="timestamp">{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm' }}</div>
                 </td>
                 <td class="avatar">
                     <img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
@@ -73,29 +74,28 @@
         <div id="controls">
             <table id="inputBarTable">
                 <tr>
-                    <td width="1">
+                    <td id="userIdCell" width="1px">
                         {{ state.user_id }} 
                     </td>
-                    <td width="*" style="min-width: 100px">
+                    <td width="*">
                         <input id="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true" autocomplete="off" tab-complete/>
                     </td>
-                    <td width="150px">
+                    <td id="buttonsCell">
                         <button ng-click="send()">Send</button>
-                        <button m-file-input="imageFileToSend">Send Image</button>
-                    </td>
-                    <td width="1">
-                        
+                        <button m-file-input="imageFileToSend">Image</button>
                     </td>
                 </tr>
             </table>
 
-            <span>
-               Invite a user: 
-                    <input ng-model="userIDToInvite" size="32" type="text" placeholder="User ID (ex:@user:homeserver)"/>     
-                    <button ng-click="inviteUser(userIDToInvite)">Invite</button>
-            </span>
-            <button ng-click="leaveRoom()">Leave</button>
-            <button ng-click="loadMoreHistory()" ng-disabled="!state.can_paginate">Load more history</button>
+            <div id="extraControls">
+                <span>
+                   Invite a user: 
+                        <input ng-model="userIDToInvite" size="32" type="text" placeholder="User ID (ex:@user:homeserver)"/>     
+                        <button ng-click="inviteUser(userIDToInvite)">Invite</button>
+                </span>
+                <button ng-click="leaveRoom()">Leave</button>
+            </div>
+        
             {{ feedback }}
             <div ng-hide="!state.stream_failure">
                 {{ state.stream_failure.data.error || "Connection failure" }}
diff --git a/webclient/rooms/rooms.html b/webclient/rooms/rooms.html
index 5e422bf83b..2a12cbc8ae 100644
--- a/webclient/rooms/rooms.html
+++ b/webclient/rooms/rooms.html
@@ -1,4 +1,5 @@
 <div ng-controller="RoomsController" class="rooms">
+    <h1 id="logo">[matrix]</h1>
 
     <div id="page">
     <div id="wrapper">
diff --git a/webclient/user/user.html b/webclient/user/user.html
index 47db09d1ee..4c91c8a48a 100644
--- a/webclient/user/user.html
+++ b/webclient/user/user.html
@@ -1,4 +1,5 @@
 <div ng-controller="UserController" class="user">
+    <h1 id="logo">[matrix]</h1>
 
     <div id="page">
     <div id="wrapper">
author	Matthew Hodgson <matthew@matrix.org>	2014-08-23 20:45:00 +0100
committer	Matthew Hodgson <matthew@matrix.org>	2014-08-23 20:45:00 +0100
commit	d2bb28d2df6ffe58db1a56e7aec85c34d9d1425f (patch)
tree	dfd57963663627b4b2c63ffc699c3d9891abe643
parent	point out the non-quick-start guide (diff)
download	synapse-d2bb28d2df6ffe58db1a56e7aec85c34d9d1425f.tar.xz