From f10bc8eef17a56b50ba4901184ad325fa181e04c Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Wed, 18 Jan 2017 16:49:20 +0100 Subject: [PATCH] Animate status bar max-height and margin-top 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. --- .../matrix-react-sdk/structures/RoomView.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index c3f7ceed..3b3c396f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -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 {