PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

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