fix spacing of the layout to match latest designs
This commit is contained in:
parent
bbbe074d92
commit
b15def84bc
|
@ -18,13 +18,13 @@ limitations under the License.
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
clear: both;
|
clear: both;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
margin-left: 56px;
|
margin-left: 65px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_EventTile_avatar {
|
.mx_EventTile_avatar {
|
||||||
padding-left: 18px;
|
padding-left: 18px;
|
||||||
padding-right: 12px;
|
padding-right: 12px;
|
||||||
margin-left: -64px;
|
margin-left: -73px;
|
||||||
margin-top: -4px;
|
margin-top: -4px;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,7 +32,7 @@ limitations under the License.
|
||||||
.mx_MessageComposer .mx_MessageComposer_avatar {
|
.mx_MessageComposer .mx_MessageComposer_avatar {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 20px;
|
padding-right: 29px;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -33,6 +33,7 @@ limitations under the License.
|
||||||
.mx_RoomHeader_leftRow {
|
.mx_RoomHeader_leftRow {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
|
margin-left: -2px;
|
||||||
|
|
||||||
-webkit-box-ordinal-group: 1;
|
-webkit-box-ordinal-group: 1;
|
||||||
-moz-box-ordinal-group: 1;
|
-moz-box-ordinal-group: 1;
|
||||||
|
@ -103,7 +104,7 @@ limitations under the License.
|
||||||
color: #454545;
|
color: #454545;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
padding-left: 8px;
|
padding-left: 19px;
|
||||||
padding-right: 16px;
|
padding-right: 16px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
@ -153,7 +154,7 @@ limitations under the License.
|
||||||
max-height: 38px;
|
max-height: 38px;
|
||||||
color: #454545;
|
color: #454545;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
padding-left: 8px;
|
padding-left: 19px;
|
||||||
padding-right: 16px;
|
padding-right: 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
|
@ -129,7 +129,7 @@ limitations under the License.
|
||||||
clear: both;
|
clear: both;
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
margin-left: 54px;
|
margin-left: 63px;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
@ -169,7 +169,7 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_RoomView_statusAreaBox_line {
|
.mx_RoomView_statusAreaBox_line {
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #eee;
|
||||||
margin-left: 54px;
|
margin-left: 63px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -187,14 +187,14 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_RoomView_typingBar {
|
.mx_RoomView_typingBar {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-left: 54px;
|
margin-left: 63px;
|
||||||
color: #4a4a4a;
|
color: #4a4a4a;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomView_typingImage {
|
.mx_RoomView_typingImage {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin-left: -38px;
|
margin-left: -47px;
|
||||||
margin-top: -4px;
|
margin-top: -4px;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
@ -214,7 +214,7 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_RoomView_uploadProgressOuter {
|
.mx_RoomView_uploadProgressOuter {
|
||||||
height: 4px;
|
height: 4px;
|
||||||
margin-left: 54px;
|
margin-left: 63px;
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -225,7 +225,7 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_RoomView_uploadFilename {
|
.mx_RoomView_uploadFilename {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
margin-left: 56px;
|
margin-left: 65px;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
color: #4a4a4a;
|
color: #4a4a4a;
|
||||||
}
|
}
|
||||||
|
|
|
@ -87,8 +87,8 @@ limitations under the License.
|
||||||
-webkit-order: 2;
|
-webkit-order: 2;
|
||||||
order: 2;
|
order: 2;
|
||||||
|
|
||||||
padding-left: 12px;
|
padding-left: 25px;
|
||||||
padding-right: 12px;
|
padding-right: 22px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
-webkit-flex: 1;
|
-webkit-flex: 1;
|
||||||
|
|
|
@ -43,8 +43,8 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
var style = {
|
var style = {
|
||||||
maxWidth: this.props.width,
|
width: this.props.width,
|
||||||
maxHeight: this.props.height,
|
weight: this.props.height,
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<img className="mx_RoomAvatar" src={this.state.imageUrl} onError={this.onError}
|
<img className="mx_RoomAvatar" src={this.state.imageUrl} onError={this.onError}
|
||||||
|
|
|
@ -196,6 +196,7 @@ module.exports = React.createClass({
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
var typingString = this.getWhoIsTypingString();
|
var typingString = this.getWhoIsTypingString();
|
||||||
|
//typingString = "Testing typing...";
|
||||||
var unreadMsgs = this.getUnreadMessagesString();
|
var unreadMsgs = this.getUnreadMessagesString();
|
||||||
// unread count trumps who is typing since the unread count is only
|
// unread count trumps who is typing since the unread count is only
|
||||||
// set when you've scrolled up
|
// set when you've scrolled up
|
||||||
|
|
Loading…
Reference in New Issue