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

make left panel adapt to width

Browse source 
includes using flexbox in the room tile to avoid hardcoded width
This commit is contained in:
Bruno Windels 2018-09-24 16:06:57 +01:00
parent 73ba837c26
commit 313956dd99
4 changed files with 23 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

39
res/css/views/rooms/_RoomTile.scss
View file

@ -15,9 +15,10 @@ limitations under the License.
*/
.mx_RoomTile {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
display: block;
height: 40px;
margin: 0px 9px 0px 9px;
@ -31,26 +32,14 @@ limitations under the License.
left: -12px;
}
.mx_RoomTile_nameContainer {
display: inline-block;
width: 180px;
height: 24px;
}
.mx_RoomTile_avatar_container {
position: relative;
}
.mx_RoomTile_avatar {
display: inline-block;
flex: 0;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 14px;
padding-right: 12px;
width: 32px;
height: 32px;
vertical-align: middle;
}
.mx_RoomTile_dm {
@ -62,19 +51,13 @@ limitations under the License.
}
.mx_RoomTile_name {
display: inline-block;
flex: 1 5 auto;
font-size: 14px;
font-weight: 600;
position: relative;
width: 165px;
vertical-align: middle;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 3px;
padding: 6px;
color: $roomtile-name-color;
white-space: nowrap;
overflow: hidden;
overflow-x: hidden;
text-overflow: ellipsis;
}
@ -82,16 +65,11 @@ limitations under the License.
/* color: rgba(69, 69, 69, 0.5); */
}
.collapsed .mx_RoomTile_nameContainer {
width: 60px; /* colapsed panel width */
}
.collapsed .mx_RoomTile_name {
display: none;
}
.collapsed .mx_RoomTile_badge {
top: 0px;
min-width: 12px;
border-radius: 16px;
padding: 0px 4px 0px 4px;
@ -116,10 +94,9 @@ limitations under the License.
}
.mx_RoomTile_badge {
display: inline-block;
flex: 0 1 content;
min-width: 15px;
height: 15px;
position: absolute;
right: 8px; /*gutter */
top: 9px;
border-radius: 8px;