Make dropdown menus actually dropdown #5381

Merged

DispatchCommit merged 3 commits from ui/animation-tweaks into master

2021-01-27 16:05:03 +01:00

DispatchCommit commented

2021-01-26 02:14:27 +01:00

(Migrated from github.com)

I was annoyed that our dropdown menus didn't actually... dropdown.

So I fixed them:

The CSS change uses a translation instead of a scalar operation to translate the popover menu down 80px rather than expanding by scaling about the center of Y.

Translated 80px because that is the height of the top bar, and for some reason the popover component will affect the scroll position if it renders offscreen. That is, if we were to translate by 100px, it being partially offpage when it is first created will cause the page scroll up by 20px.

I looked into why it is that way, and it's because the popover menu is rendered as position:absolute and the position depends on the scroll location. Seems like this really should just be a position:fixed, but I don't want to open that Pandora's box potentially.

tldr: better dropdown animation.

I was annoyed that our dropdown menus didn't actually... dropdown. ![odysee-dropdown-animation](https://user-images.githubusercontent.com/45262335/105785412-aae26f00-5f2f-11eb-87bf-903366274eaf.gif) So I fixed them: ![lbry-dropdown-animation](https://user-images.githubusercontent.com/45262335/105785437-b766c780-5f2f-11eb-80e0-64a0b34c3765.gif) The CSS change uses a translation instead of a scalar operation to translate the popover menu down 80px rather than expanding by scaling about the center of Y. Translated 80px because that is the height of the top bar, and for some reason the popover component will affect the scroll position if it renders offscreen. That is, if we were to translate by 100px, it being partially offpage when it is first created will cause the page scroll up by 20px. I looked into why it is that way, and it's because the popover menu is rendered as `position:absolute` and the position depends on the scroll location. Seems like this really should just be a `position:fixed`, but I don't want to open that Pandora's box potentially. tldr: better dropdown animation.

Rows
Columns