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 the left panel collapse by only adding collapse class on container

Browse source 
as the resize handle is a sibling of the mxLeftPanel_container, that
class is the one that has to collapse if we don't want to complicate
the logic. So change style rules to check
.mxLeftPanel_container.collapsed, and make left panel not break
out of the container when it gets narrow by hiding the overflow
This commit is contained in:
Bruno Windels 2018-10-11 15:37:42 +02:00
parent e5d1b3328c
commit d6774fd8ee
1 changed files with 9 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -22,19 +22,15 @@ limitations under the License.
flex: 0 0 auto;
}
.mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 70px + LeftPanel 260px */
flex: 0 0 auto;
}
.mx_LeftPanel_container_collapsed {
.mx_LeftPanel_container.collapsed {
min-width: unset;
/* Collapsed LeftPanel 70px */
flex: 0 0 70px;
}
.mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 70px + Collapsed LeftPanel 70px */
flex: 0 0 auto;
flex: 0 0 140px;
}
.mx_LeftPanel_hideButton {
@ -53,7 +49,7 @@ limitations under the License.
background-color: $secondary-accent-color;
flex: 1;
position: relative;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
@ -71,7 +67,7 @@ limitations under the License.
z-index: 6;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
flex: 0 0 160px;
margin-bottom: 9px;
}
@ -94,7 +90,7 @@ limitations under the License.
pointer-events: none;
}
.collapsed .mx_RoleButton {
.mx_LeftPanel_container.collapsed .mx_RoleButton {
margin-right: 0px ! important;
padding-top: 3px ! important;
padding-bottom: 3px ! important;
@ -118,7 +114,7 @@ limitations under the License.
margin-right: 0px;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu_settings {
float: none;
}
@ -127,7 +123,7 @@ limitations under the License.
flex: 0 0 50px;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
flex: 0 0 160px;
}