make EntityTile responsive

pull/21833/head
Bruno Windels 2018-10-24 18:22:57 +02:00
parent 8c62dddb32
commit 873ff7fc29
2 changed files with 11 additions and 18 deletions

View File

@ -15,12 +15,19 @@ limitations under the License.
*/
.mx_EntityTile {
display: table-row;
position: relative;
display: flex;
align-items: center;
color: $primary-fg-color;
cursor: pointer;
}
.mx_EntityTile:hover {
background-image: url('../../img/member_chevron.png');
background-position: center right 10px;
background-repeat: no-repeat;
padding-right: 30px;
}
.mx_EntityTile_invite {
display: table-cell;
vertical-align: middle;
@ -30,12 +37,10 @@ limitations under the License.
.mx_EntityTile_avatar,
.mx_GroupRoomTile_avatar {
display: table-cell;
padding-left: 3px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
vertical-align: middle;
width: 36px;
height: 36px;
position: relative;
@ -51,32 +56,21 @@ limitations under the License.
.mx_EntityTile_name,
.mx_GroupRoomTile_name {
display: table-cell;
vertical-align: middle;
flex: 1 1 0;
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 155px;
}
.mx_EntityTile_details {
display: table-cell;
padding-right: 14px;
vertical-align: middle;
overflow: hidden;
}
.mx_EntityTile_name_hover {
font-size: 13px;
}
.mx_EntityTile_chevron {
margin-top: 8px;
margin-right: -4px;
margin-left: 6px;
float: right;
}
.mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic;
color: $primary-fg-color;

View File

@ -131,7 +131,6 @@ const EntityTile = React.createClass({
}
nameEl = (
<div className="mx_EntityTile_details">
<img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12" />
<EmojiText element="div" className={nameClasses} dir="auto">
{ name }
</EmojiText>