Lbry-desktop: Fixed Header

[ElectronEsq]

As on websites, having a fixed header is always nice. With a fixed header, which compliments the side navigation, you could also put more options in this prime real-estate, such as notifications of pending rewards or whatever amazing ideas you can come up with :)

Click image to see video.

[tzarebczan]

We had one, and then Sean removed it. Will revisit.

[ElectronEsq]

Aww. Poor fixed header. He's having a tough time! We should show him some more love ❤️

[seanyesmunt]

Part of the issue was just trying to improve how content went "below" the header when you scrolled. There were a few bugs that were more pressing so we just got rid of it (for now).

I really like how the header in your video looks. Would you be interested in making a PR with that change?

[ElectronEsq]

@seanyesmunt Yes, I'm out viewing houses, but will put one together when back.

The fixes were extra padding to the top of the content area and a z-index fix for the description input box.

[ElectronEsq]

@seanyesmunt @tzarebczan There was some responsive issues with the header in the above fixed header preview.

When the position: fixed; is set, it is no longer part of the Flexible Box Layout. As a result, the width wasn't calculating correctly, which meant when the app was resized to a smaller size, parts of the header became chopped off.

As a fix and in my opinion a better option, is having the header above the other content and not within the Flexible Box Model, which isn't needed when at the top. It's also a good place to put the other navigation buttons which is currently being discussed. It also leaves even more room for other components that might want to be added in future releases, such as notifications.

The below image is how it would look with these changes.

At min-width

Note:

The left nav panel could do with better spacing at the top. However, this was not my focus in this preview.

[seanyesmunt]

Away from my computer so I'll give this a better review tonight but I love it.

[seanyesmunt]

This will be added in https://github.com/lbryio/lbry-app/pull/1661. Based of @Invariant-Change's design

[ElectronEsq]

There are large (hard to see) shadows on the search bar and other elements that require adjusting.

The new header is now floating with its own shadow. This means for a more natural look the shadows are best being shallower or none at all.

The search bars/input tend to have inset shadows giving inwards depth for the best look or none at all.

[seanyesmunt]

@Invariant-Change Could you open a PR with your suggested fixes? I wasn't sure what box-shadow styles you used.

[ElectronEsq]

@tzarebczan @seanyesmunt This can be closed now :)