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

Animate status bar max-height and margin-top

Browse source 
When collapsed, the max-height is set to 0px. When expanded, max-height is set to 50px, margin-top is set to 0px. When expanded and when the timeline is not scrolled down to the bottom, margin-top is set to -50px to offset the change in height, keeping it at the same scroll position.

Without the animation, there would be a jump when the user starts scrolling up from the bottom whilst the StatusBar is expanded.
This commit is contained in:
lukebarnard 2017-01-18 16:49:20 +01:00
parent 205676a97d
commit f10bc8eef1
1 changed files with 19 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
View file

@ -202,6 +202,25 @@ hr.mx_RoomView_myReadMarker {
width: 100%;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
max-height: 0px;
background-color: #fff;
z-index: 1000;
overflow: hidden;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
}
.mx_RoomView_statusArea_expanded {
max-height: 50px;
margin-top: 0px;
}
.mx_RoomView_statusArea_expanded.mx_RoomView_statusArea_mid_timeline {
margin-top: -50px;
}
.mx_RoomView_statusAreaBox {