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

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
Show stats Download patch file Download diff file Expand all files Collapse all files

27
res/css/structures/_LeftPanel.scss
View file

@ -15,24 +15,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_LeftPanel {
position: relative;
display: flex;
flex-direction: column;
border-right: 1px solid $panel-divider-color;
}
.mx_LeftPanel_container {
display: flex;
/* LeftPanel 260px */
flex: 0 0 260px;
min-width: 260px;
flex: 0 0 auto;
}
.mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 70px + LeftPanel 260px */
flex: 0 0 330px;
flex: 0 0 auto;
}
.mx_LeftPanel_container_collapsed {
@ -42,7 +34,7 @@ limitations under the License.
.mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 70px + Collapsed LeftPanel 70px */
flex: 0 0 140px;
flex: 0 0 auto;
}
.mx_LeftPanel_hideButton {
@ -57,6 +49,17 @@ limitations under the License.
}
.mx_LeftPanel {
background-color: $secondary-accent-color;
flex: 1;
position: relative;
display: flex;
flex-direction: column;
border-right: 1px solid $panel-divider-color;
}
.mx_LeftPanel .mx_AppTile_mini {
height: 132px;
}

14
res/css/structures/_MatrixChat.scss
View file

@ -68,19 +68,7 @@ limitations under the License.
transform: translateX(-50%);
}
.mx_MatrixChat .mx_LeftPanel {
order: 1;
background-color: $secondary-accent-color;
flex: 0 0 260px;
}
.mx_MatrixChat .mx_LeftPanel.collapsed {
flex: 0 0 60px;
}
.mx_MatrixChat .mx_MatrixChat_middlePanel {
order: 2;
background-color: $primary-bg-color;
flex: 1;
@ -102,8 +90,6 @@ limitations under the License.
}
.mx_MatrixChat .mx_RightPanel {
order: 3;
flex: 0 0 235px;
}

2
res/css/structures/_RoomSubList.scss
View file

@ -29,7 +29,6 @@ limitations under the License.
.mx_RoomSubList_labelContainer {
height: 31px; /* mx_RoomSubList_label height including border */
width: 235px; /* LHS Panel width */
position: relative;
}
@ -39,7 +38,6 @@ limitations under the License.
color: $roomsublist-label-fg-color;
font-weight: 700;
font-size: 12px;
width: 203px; /* padding + width = LHS Panel width */
height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */
margin-left: 16px;
padding-left: 16px; /* gutter */

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;