mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 09:46:09 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix room list 2's room tile wrapping wrongly

Browse source
This commit is contained in:
Michael Telatynski 2020-07-02 12:18:48 +01:00
parent 62314cac06
commit 992349944a
1 changed files with 20 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
res/css/views/rooms/_RoomTile2.scss
View file

@ -23,7 +23,6 @@ limitations under the License.
// The tile is also a flexbox row itself
display: flex;
flex-wrap: wrap;
&.mx_RoomTile2_selected, &:hover, &.mx_RoomTile2_hasMenuOpen {
background-color: $roomtile2-selected-bg-color;
@ -43,7 +42,8 @@ limitations under the License.
.mx_RoomTile2_nameContainer {
flex-grow: 1;
max-width: calc(100% - 58px); // 32px avatar, 18px badge area, 8px margin on avatar
min-width: 0; // allow flex to shrink it
margin-right: 8px; // spacing to buttons/badges
// Create a new column layout flexbox for the name parts
display: flex;
@ -81,8 +81,20 @@ limitations under the License.
}
}
//.mx_RoomTile2_badgeContainer,
.mx_RoomTile2_menuButton,
.mx_RoomTile2_notificationsButton {
width: 20px;
min-width: 20px; // yay flex
height: 20px;
margin: auto 0;
}
.mx_RoomTile2_menuButton {
margin-left: 4px; // spacing between buttons
}
.mx_RoomTile2_badgeContainer {
width: 18px;
height: 32px;
// Create another flexbox row because it's super easy to position the badge at
@ -90,14 +102,15 @@ limitations under the License.
display: flex;
align-items: center;
justify-content: center;
.mx_NotificationBadge {
margin-right: 2px;
}
}
// The context menu buttons are hidden by default
.mx_RoomTile2_menuButton,
.mx_RoomTile2_notificationsButton {
width: 20px;
height: 20px;
margin: auto 0 auto 8px;
position: relative;
display: none;
@ -130,7 +143,7 @@ limitations under the License.
.mx_RoomTile2_badgeContainer {
width: 0;
height: 0;
visibility: hidden;
display: none;
}
.mx_RoomTile2_notificationsButton,