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

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 */