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">
|
