make EntityTile responsive

This commit is contained in:
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 { .mx_EntityTile {
display: table-row; display: flex;
position: relative; align-items: center;
color: $primary-fg-color; color: $primary-fg-color;
cursor: pointer; 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 { .mx_EntityTile_invite {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
@ -30,12 +37,10 @@ limitations under the License.
.mx_EntityTile_avatar, .mx_EntityTile_avatar,
.mx_GroupRoomTile_avatar { .mx_GroupRoomTile_avatar {
display: table-cell;
padding-left: 3px; padding-left: 3px;
padding-right: 12px; padding-right: 12px;
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
vertical-align: middle;
width: 36px; width: 36px;
height: 36px; height: 36px;
position: relative; position: relative;
@ -51,32 +56,21 @@ limitations under the License.
.mx_EntityTile_name, .mx_EntityTile_name,
.mx_GroupRoomTile_name { .mx_GroupRoomTile_name {
display: table-cell; flex: 1 1 0;
vertical-align: middle;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 14px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: 155px;
} }
.mx_EntityTile_details { .mx_EntityTile_details {
display: table-cell; overflow: hidden;
padding-right: 14px;
vertical-align: middle;
} }
.mx_EntityTile_name_hover { .mx_EntityTile_name_hover {
font-size: 13px; font-size: 13px;
} }
.mx_EntityTile_chevron {
margin-top: 8px;
margin-right: -4px;
margin-left: 6px;
float: right;
}
.mx_EntityTile_ellipsis .mx_EntityTile_name { .mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic; font-style: italic;
color: $primary-fg-color; color: $primary-fg-color;

View file

@ -131,7 +131,6 @@ const EntityTile = React.createClass({
} }
nameEl = ( nameEl = (
<div className="mx_EntityTile_details"> <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"> <EmojiText element="div" className={nameClasses} dir="auto">
{ name } { name }
</EmojiText> </EmojiText>