diff --git a/webclient/app.css b/webclient/app.css
index 15b6c91300..0111b78e02 100644
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -11,21 +11,33 @@ h1 {
/*** Overall page layout ***/
.page {
- max-width: 1280px;
+ position: absolute;
+ top: 80px;
+ bottom: 100px;
+ left: 0px;
+ right: 0px;
+ margin: 20px;
+ margin: 20px;
+}
+
+.wrapper {
margin: auto;
- margin-bottom: 80px ! important;
- padding-left: 20px;
- padding-right: 20px;
+ max-width: 1280px;
+ height: 100%;
}
.roomName {
+ max-width: 1280px;
+ width: 100%;
text-align: right;
+ top: -40px;
+ position: absolute;
font-size: 16pt;
margin-bottom: 10px;
}
.controlPanel {
- position: fixed;
+ position: absolute;
bottom: 0px;
width: 100%;
background-color: #f8f8f8;
@@ -70,8 +82,9 @@ h1 {
.userAvatar {
width: 80px;
- height: 80px;
+ height: 100px;
position: relative;
+ background-color: #000;
}
.userAvatar .userAvatarImage {
@@ -81,7 +94,7 @@ h1 {
.userAvatar .userAvatarGradient {
position: absolute;
- bottom: 0px;
+ bottom: 20px;
}
.userAvatar .userName {
@@ -91,7 +104,6 @@ h1 {
bottom: 0px;
font-size: 8pt;
word-wrap: break-word;
- word-break: break-all;
}
.userPresence {
@@ -110,27 +122,18 @@ h1 {
background-color: #FFCC00;
}
-/*** Room page ***/
-
-/* Limit the height of the page content to 100% of the viewport height minus the
- height of the header and the footer.
- The two divs containing the messages list and the users list will then scroll-
- overflow separetely.
- */
-.room .page {
- height: calc(100vh - 220px);
-}
-
/*** Message table ***/
.messageTableWrapper {
- width: auto;
height: 100%;
margin-right: 140px;
overflow-y: auto;
+ width: auto;
}
.messageTable {
+ margin: auto;
+ max-width: 1280px;
width: 100%;
border-collapse: collapse;
}
@@ -180,6 +183,8 @@ h1 {
height: 32px;
display: inline-table;
max-width: 90%;
+ word-wrap: break-word;
+ word-break: break-all;
}
.emote {
@@ -217,12 +222,10 @@ h1 {
/******************************/
.header {
- margin-top: 12px ! important;
padding-left: 20px;
padding-right: 20px;
max-width: 1280px;
margin: auto;
- height: 60px;
}
.header-buttons {
diff --git a/webclient/app.js b/webclient/app.js
index 2133a98cbf..651aeeaa77 100644
--- a/webclient/app.js
+++ b/webclient/app.js
@@ -70,4 +70,9 @@ matrixWebClient
$timeout(function() { element[0].focus() }, 0);
}
};
- }]);
+ }])
+ .filter('to_trusted', ['$sce', function($sce){
+ return function(text) {
+ return $sce.trustAsHtml(text);
+ };
+ }]);
\ No newline at end of file
diff --git a/webclient/login/login.html b/webclient/login/login.html
index 0d3e8c57fd..508ff5e4bf 100644
--- a/webclient/login/login.html
+++ b/webclient/login/login.html
@@ -1,5 +1,6 @@
<div ng-controller="LoginController" class="login">
<div class="page">
+ <div class="wrapper">
{{ feedback }}
@@ -48,4 +49,5 @@
</div>
+ </div>
</div>
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index a30f46baf8..470f41521a 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -42,6 +42,8 @@ angular.module('RoomController', [])
console.log("Got response from "+$scope.state.events_from+" to "+response.data.end);
$scope.state.events_from = response.data.end;
+ $scope.feedback = "";
+
for (var i = 0; i < response.data.chunk.length; i++) {
var chunk = response.data.chunk[i];
if (chunk.room_id == $scope.room_id && chunk.type == "m.room.message") {
@@ -68,10 +70,12 @@ angular.module('RoomController', [])
$timeout(shortPoll, 0);
}
}, function(response) {
- $scope.feedback = "Can't stream: " + JSON.stringify(response);
+ $scope.feedback = "Can't stream: " + response.data;
+
if (response.status == 403) {
$scope.stopPoll = true;
}
+
if ($scope.stopPoll) {
console.log("Stopping polling.");
}
diff --git a/webclient/room/room.html b/webclient/room/room.html
index 87d3458af5..51af54e7b2 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -1,6 +1,7 @@
<div ng-controller="RoomController" data-ng-init="onInit()" class="room">
<div class="page">
+ <div class="wrapper">
<div class="roomName">
{{ room_alias || room_id }}
@@ -12,7 +13,8 @@
<td class="userAvatar">
<img class="userAvatarImage" ng-src="{{info.avatar_url || 'img/default-profile.jpg'}}" width="80" height="80"/>
<img class="userAvatarGradient" src="img/gradient.png" width="80" height="24"/>
- <div class="userName">{{ info.displayname || name }}</div>
+ <!-- FIXME: does allowing <wbr/> to be unescaped introduce HTML injections from user IDs and display names? -->
+ <div class="userName" ng-bind-html="info.displayname || (name.substr(0, name.indexOf(':')) + '<wbr/>' + name.substr(name.indexOf(':'))) | to_trusted"></div>
</td>
<td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'unavailable' ? 'unavailable' : '')" />
</table>
@@ -45,6 +47,7 @@
</div>
</div>
+ </div>
<div class="controlPanel">
<div class="controls">
@@ -53,7 +56,7 @@
<td width="1">
{{ state.user_id }}
</td>
- <td width="*">
+ <td width="*" style="min-width: 100px">
<input class="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true"/>
</td>
<td width="1">
@@ -85,7 +88,5 @@
<button ng-click="leaveRoom()">Leave</button>
</div>
</div>
-
-
</div>
diff --git a/webclient/rooms/rooms.html b/webclient/rooms/rooms.html
index f134e5ee8c..d303e143b9 100644
--- a/webclient/rooms/rooms.html
+++ b/webclient/rooms/rooms.html
@@ -1,7 +1,8 @@
<div ng-controller="RoomsController" class="rooms">
<div class="page">
-
+ <div class="wrapper">
+
<div>
<form>
<input size="40" ng-model="newProfileInfo.name" ng-enter="setDisplayName(newProfileInfo.name)" />
@@ -77,4 +78,5 @@
{{ feedback }}
</div>
+ </div>
</div>
|
