New mobile menu and sync Hypha media-query breakpoints with tailwind

HyphaApp / hypha

Submission management software for open calls

https://www.hypha.app

BSD 3-Clause "New" or "Revised" License

68 stars 38 forks source link

New mobile menu and sync Hypha media-query breakpoints with tailwind #3994

Closed frjo closed 3 months ago

frjo commented 3 months ago

Fixes #3993

Test Steps

[ ] Confirm that the primary menu and header region works well on all screen sizes.

wes-otf commented 3 months ago

A few notes after testing:

May be more personal preference but this feels a bit more cluttered to me than the previous mobile menu look, as staff the menu looks to take ~1/3rd the screen real estate. The applicant menu is less but still pretty significant. With the previous menu I liked that it was a bit more out of the way, as I don't think the user would necessarily need those options in every view.
When not logged in, it looks like the nav bar is squeezed upwards a bit, might just need a little padding on the bottom.

frjo commented 3 months ago

@wes-otf The narrow header when no menu is a bug I introduced, will fix that.

The mobile version of the menu/header needs some work.

One option is to add a toggle to open/close the menu. When open we might show it fully expanded.

Other better ideas?

wes-otf commented 3 months ago

I like the concept of a menu toggle! seems like that could be a pretty intuitive option for the user

frjo commented 3 months ago

@theskumar Could you take a look at the mobile menu I created?

My idea is to have the menu as a plain list that you can toggle. I think that is going to work well. But my current implementation looks a bit … crude. Ideas for making it look and work better/nicer?

I'm rendering the menu twice, first the existing desktop version with alpine etc and then a mush more plain mobile version. Would prefer to only render it once but how to get a plain list version of it then?

theskumar commented 3 months ago

@frjo Yes. I can take a stab at it.

theskumar commented 3 months ago

@frjo @wes-otf I've something working for it and but need some polish. I'm sharing some initial screenshots and let me know if they look good. Both mobile and desktop use the same html code.

https://github.com/HyphaApp/hypha/assets/236356/408a0f50-8d38-48f6-95c4-1930ca7810ca

frjo commented 3 months ago

@theskumar This looks excellent!

theskumar commented 3 months ago

Pushed a working copy, will do some minor tweaking to it before finalizing it.

wes-otf commented 3 months ago

@theskumar this is really great, looks so clean!

wes-otf commented 2 months ago

@frjo @theskumar the gray area mentioned above is still present, should I open another issue for this?

theskumar commented 2 months ago

@frjo @theskumar the gray area mentioned above is still present, should I open another issue for this?

I'll get it done in another PR, another issue would be great.