mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
alt tags for avatars; improve header spacing; improve roomview margin
This commit is contained in:
parent
5f367f7c75
commit
aa70dd7b67
@ -20,8 +20,8 @@ limitations under the License.
|
||||
.mx_RoomHeader_wrapper {
|
||||
max-width: 720px;
|
||||
margin: auto;
|
||||
height: 86px;
|
||||
margin-top: 18px;
|
||||
height: 88px;
|
||||
border-bottom: 1px solid #a8dbf3;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
@ -32,6 +32,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomHeader_leftRow {
|
||||
height: 48px;
|
||||
margin-top: 18px;
|
||||
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
@ -44,6 +45,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomHeader_rightRow {
|
||||
height: 48px;
|
||||
margin-top: 18px;
|
||||
background-color: #fff;
|
||||
border-radius: 48px;
|
||||
border: 1px solid #e1e1e1;
|
||||
|
@ -36,8 +36,8 @@ limitations under the License.
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
-webkit-flex: 0 0 86px;
|
||||
flex: 0 0 86px;
|
||||
-webkit-flex: 0 0 88px;
|
||||
flex: 0 0 88px;
|
||||
}
|
||||
|
||||
.mx_RoomView_auxPanel {
|
||||
@ -50,7 +50,6 @@ limitations under the License.
|
||||
max-width: 720px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
border-top: 1px solid #a8dbf3;
|
||||
height: 0%;
|
||||
}
|
||||
|
||||
|
@ -38,13 +38,15 @@ limitations under the License.
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_MatrixChat .mx_MatrixChat_MiddleView {
|
||||
.mx_MatrixChat .mx_MatrixChat_middlePanel {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
background-color: #f3f8fa;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -40,7 +40,7 @@ module.exports = React.createClass({
|
||||
return (
|
||||
<div className="mx_MessageTile">
|
||||
<div className="mx_MessageTile_avatar">
|
||||
<img src={ this.props.mxEvent.target ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.target, 40, 40, "crop") : null } width="40" height="40"/>
|
||||
<img src={ this.props.mxEvent.target ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.target, 40, 40, "crop") : null } width="40" height="40" alt=""/>
|
||||
</div>
|
||||
{ timestamp }
|
||||
<span className="mx_SenderProfile"></span>
|
||||
|
@ -27,7 +27,7 @@ module.exports = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_MemberTile">
|
||||
<div className="mx_MemberTile_avatar"><img src={ this.props.member ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.member, 32, 32, "crop") : null } width="32" height="32"/></div>
|
||||
<div className="mx_MemberTile_avatar"><img src={ this.props.member ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.member, 32, 32, "crop") : null } width="32" height="32" alt=""/></div>
|
||||
<div className="mx_MemberTile_name">{this.props.member.name}</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -32,7 +32,7 @@ module.exports = React.createClass({
|
||||
<div className="mx_MessageComposer_wrapper">
|
||||
<div className="mx_MessageComposer_row">
|
||||
<div className="mx_MessageComposer_avatar">
|
||||
<img src={ MatrixClientPeg.get().getAvatarUrlForMember(me, 40, 40, "crop") } width="40" height="40"/>
|
||||
<img src={ MatrixClientPeg.get().getAvatarUrlForMember(me, 40, 40, "crop") } width="40" height="40" alt=""/>
|
||||
</div>
|
||||
<div className="mx_MessageComposer_input">
|
||||
<textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message" />
|
||||
|
@ -60,7 +60,7 @@ module.exports = React.createClass({
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div className="mx_MessageTile_avatar">
|
||||
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
|
||||
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
|
||||
</div>
|
||||
{ timestamp }
|
||||
<SenderProfile mxEvent={this.props.mxEvent} />
|
||||
|
@ -55,7 +55,7 @@ module.exports = React.createClass({
|
||||
<div className="mx_RoomHeader_wrapper">
|
||||
<div className="mx_RoomHeader_leftRow">
|
||||
<div className="mx_RoomHeader_avatar">
|
||||
<img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 48, 48, "crop") } width="48" height="48"/>
|
||||
<img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 48, 48, "crop") } width="48" height="48" alt=""/>
|
||||
</div>
|
||||
<div className="mx_RoomHeader_info">
|
||||
<div className="mx_RoomHeader_name">
|
||||
|
@ -52,7 +52,7 @@ module.exports = React.createClass({
|
||||
}
|
||||
return (
|
||||
<div className={classes} onClick={this.onClick}>
|
||||
<div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40"/></div>
|
||||
<div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40" alt=""/></div>
|
||||
{ nameCell }
|
||||
</div>
|
||||
);
|
||||
|
@ -36,7 +36,7 @@ module.exports = React.createClass({
|
||||
return (
|
||||
<div className="mx_MessageTile">
|
||||
<div className="mx_MessageTile_avatar">
|
||||
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
|
||||
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
|
||||
</div>
|
||||
<MessageTimestamp ts={this.props.mxEvent.getTs()} />
|
||||
<span className="mx_SenderProfile"></span>
|
||||
|
@ -36,7 +36,7 @@ module.exports = React.createClass({
|
||||
return (
|
||||
<div className="mx_MessageTile">
|
||||
<div className="mx_MessageTile_avatar">
|
||||
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
|
||||
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
|
||||
</div>
|
||||
<MessageTimestamp ts={this.props.mxEvent.getTs()} />
|
||||
<span className="mx_SenderProfile"></span>
|
||||
|
@ -42,7 +42,7 @@ module.exports = React.createClass({
|
||||
return (
|
||||
<div className="mx_MessageTile">
|
||||
<div className="mx_MessageTile_avatar">
|
||||
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
|
||||
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
|
||||
</div>
|
||||
<MessageTimestamp ts={this.props.mxEvent.getTs()} />
|
||||
<span className="mx_SenderProfile"></span>
|
||||
|
@ -68,7 +68,7 @@ module.exports = React.createClass({
|
||||
return (
|
||||
<div className="mx_MatrixChat">
|
||||
<LeftPanel selectedRoom={this.state.currentRoom} />
|
||||
<div className="mx_MatrixChat_MiddleView">
|
||||
<div className="mx_MatrixChat_middlePanel">
|
||||
{page_element}
|
||||
</div>
|
||||
{right_panel}
|
||||
|
Loading…
Reference in New Issue
Block a user