imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix various layout concerns with the new room list

Browse source 
It had ~32px of overflow causing a horizontal scrollbar. Turns out the layout engine gets confused when hidden elements are at the end of a flexbox, so we just move them higher in the DOM (where they logically still make sense).

The remaining changes are all alignment and misc changes in that respect, and probably not obvious.
This commit is contained in:
Travis Ralston 2020-06-10 15:05:17 -06:00
parent b63d73e3b6
commit be366bdd7f
5 changed files with 18 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

19
res/css/views/rooms/_RoomSublist2.scss
View file

@ -21,7 +21,7 @@ limitations under the License.
display: flex;
flex-direction: column;
padding-left: 8px;
margin-left: 8px;
margin-top: 12px;
margin-bottom: 12px;
width: 100%;
@ -30,16 +30,18 @@ limitations under the License.
// Create a flexbox to make ordering easy
display: flex;
align-items: center;
padding-bottom: 8px;
height: 24px;
.mx_RoomSublist2_badgeContainer {
opacity: 0.8;
padding-right: 7px;
width: 16px;
margin-right: 5px; // aligns with the room tile's badge
// Create another flexbox row because it's super easy to position the badge at
// the end this way.
// Create another flexbox row because it's super easy to position the badge this way.
display: flex;
align-items: center;
justify-content: flex-end;
justify-content: center;
}
// Both of these buttons are hidden by default until the list is hovered
@ -77,10 +79,9 @@ limitations under the License.
opacity: 0.5;
line-height: $font-16px;
font-size: $font-12px;
padding-bottom: 8px;
width: 100%;
flex: 1;
max-width: calc(100% - 16px); // 16px is the badge width
// Ellipsize any text overflow
text-overflow: ellipsis;
@ -184,7 +185,7 @@ limitations under the License.
&:not(.mx_RoomSublist2_headerContainer_withAux) {
// The menu button will be the rightmost button, so make it correctly aligned.
.mx_RoomSublist2_menuButton {
margin-right: 16px;
margin-right: 1px; // line it up with the badges on the room tiles
}
}
@ -218,7 +219,7 @@ limitations under the License.
// Show the aux button, but not the list button
width: 24px;
height: 24px;
margin-right: 16px;
margin-right: 1px; // line it up with the badges on the room tiles
visibility: visible;
}
}