diff options
Diffstat (limited to 'webclient')
| -rw-r--r-- | webclient/app.css | 98 | ||||
| -rw-r--r-- | webclient/index.html | 6 | ||||
| -rw-r--r-- | webclient/login/login.html | 4 | ||||
| -rw-r--r-- | webclient/room/room.html | 30 | ||||
| -rw-r--r-- | webclient/rooms/rooms.html | 1 | ||||
| -rw-r--r-- | webclient/user/user.html | 1 |
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"> |