OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #4872 from matrix-org/t3chguy/room-list/4 

Fix room list 2's room tile wrapping wrongly
pull/21833/head
Michael Telatynski 2020-07-02 12:52:29 +01:00 committed by GitHub
parent 62314cac06 c259408d71
commit 8a591d5b1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
res/css/views/rooms/_RoomTile2.scss
View File

@ -23,7 +23,6 @@ limitations under the License.
// The tile is also a flexbox row itself // The tile is also a flexbox row itself
display: flex; display: flex;
flex-wrap: wrap;
&.mx_RoomTile2_selected, &:hover, &.mx_RoomTile2_hasMenuOpen { &.mx_RoomTile2_selected, &:hover, &.mx_RoomTile2_hasMenuOpen {
background-color: $roomtile2-selected-bg-color; background-color: $roomtile2-selected-bg-color;
@ -43,7 +42,8 @@ limitations under the License.
.mx_RoomTile2_nameContainer { .mx_RoomTile2_nameContainer {
flex-grow: 1; 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 // Create a new column layout flexbox for the name parts
display: flex; display: flex;
@ -81,23 +81,33 @@ limitations under the License.
} }
} }
.mx_RoomTile2_badgeContainer { .mx_RoomTile2_menuButton {
width: 18px; margin-left: 4px; // spacing between buttons
height: 32px; }
// Create another flexbox row because it's super easy to position the badge at .mx_RoomTile2_badgeContainer {
// the end this way. height: 16px;
display: flex; // don't set width so that it takes no space when there is no badge to show
align-items: center; margin: auto 0; // vertically align
justify-content: center;
.mx_NotificationBadge {
margin-right: 2px; // centering
}
.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 5px;
margin-right: 7px;
}
} }
// The context menu buttons are hidden by default // The context menu buttons are hidden by default
.mx_RoomTile2_menuButton, .mx_RoomTile2_menuButton,
.mx_RoomTile2_notificationsButton { .mx_RoomTile2_notificationsButton {
width: 20px; width: 20px;
min-width: 20px; // yay flex
height: 20px; height: 20px;
margin: auto 0 auto 8px; margin: auto 0;
position: relative; position: relative;
display: none; display: none;
@ -130,7 +140,7 @@ limitations under the License.
.mx_RoomTile2_badgeContainer { .mx_RoomTile2_badgeContainer {
width: 0; width: 0;
height: 0; height: 0;
visibility: hidden; display: none;
} }
.mx_RoomTile2_notificationsButton, .mx_RoomTile2_notificationsButton,