mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

rejig css:

Browse source 
* sans-serif font
 * use display: table for the message list so that everything lines up nicely
 * switch to flexbox layout rather than position absolutes to avoid assuming a full screen UI and improve maintainability (and better match atomify)
 * neutralise the colouring and styling of highlighted rooms in the recents list
 * switch from ul + li's to a series of divs in some places where the li's are achieving nothing but adding more complexity to the DOM
 * add mx_MessageTileType as a generic css base class for all message tiles
This commit is contained in:
Matthew Hodgson 2015-07-07 02:10:10 +01:00
parent aaa38d95ba
commit ffac30083e
15 changed files with 139 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

16
skins/base/views/organisms/RoomView.js
View file

@ -39,7 +39,7 @@ module.exports = React.createClass({
getMessageTiles: function() {
return this.state.room.timeline.map(function(mxEv) {
return (
<li key={mxEv.getId()}><MessageTile mxEvent={mxEv} /></li>
<MessageTile key={mxEv.getId()} mxEvent={mxEv} />
);
});
},
@ -71,13 +71,17 @@ module.exports = React.createClass({
return (
<div className="mx_RoomView">
<RoomHeader room={this.state.room} />
<div className="mx_RoomView_HSplit">
<ul className="mx_RoomView_MessageList" ref="messageList">
{this.getMessageTiles()}
</ul>
<div className="mx_RoomView_roomWrapper">
<div className="mx_RoomView_messagePanel">
<div className="mx_RoomView_messageListWrapper">
<div className="mx_RoomView_MessageList" ref="messageList">
{this.getMessageTiles()}
</div>
</div>
<MessageComposer roomId={this.props.roomId} />
</div>
<MemberList roomId={this.props.roomId} key={this.props.roomId} />
</div>
<MessageComposer roomId={this.props.roomId} />
</div>
);
}