Skip to content

Refactor nav header #769

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 31, 2021
Merged

Refactor nav header #769

merged 4 commits into from
May 31, 2021

Conversation

colby-swandale
Copy link
Member

This PR refactors the navigation to allow mobile users to perform the same options as desktop users, ie: Toggle theme & select Ruby Version.

Some things I still want to do:

  • Nice transitions when opening/closing the mobile menu
  • Hide mobile menu when the user taps outside the nav.

Supersedes #389

Closes #291

Screenshots:

Sizzy-iPhone 12 localhost 11May 23 37-1

Sizzy-iPhone 12 localhost 11May 23 37-2

Sizzy-iPhone 12 localhost 11May 23 37

Sizzy-iPhone 12 localhost 11May 23 39-1

Sizzy-iPhone 12 localhost 11May 23 39

Sizzy-iPhone 12 localhost 11May 23 40

Colby Swandale and others added 3 commits April 29, 2021 22:33
@AlexWayfer
Copy link
Contributor

I don't understand what is on 1st and 5th screenshots, there is a bar with cross like menu is expanded but without menu itself.

@natematykiewicz
Copy link
Contributor

I don't understand what is on 1st and 5th screenshots, there is a bar with cross like menu is expanded but without menu itself.

I think the bar doesn't expand. It's just that the "object show" page adds in a list of links that's not present on other pages. I haven't read the code yet though.

So screenshot 3 is when you load a page. 6 is the menu expanded on the objects show page. 1 is the menu expanded on all other pages.

@AlexWayfer
Copy link
Contributor

I don't understand what is on 1st and 5th screenshots, there is a bar with cross like menu is expanded but without menu itself.

I think the bar doesn't expand. It's just that the "object show" page adds in a list of links that's not present on other pages. I haven't read the code yet though.

So screenshot 3 is when you load a page. 6 is the menu expanded on the objects show page. 1 is the menu expanded on all other pages.

Oh, OK, I got it, thanks.

@colby-swandale
Copy link
Member Author

colby-swandale commented May 30, 2021

@AlexWayfer @natematykiewicz Did you have any feedback about the design/UI? I'm keen to merge, but I wanted to check before hitting the button.

@natematykiewicz
Copy link
Contributor

I haven't pulled it up to "feel" it, but the screenshots seem good and intuitive to me. I think the only reason there was confusion in this thread is because the order the screenshots were uploaded in isn't the order you'd actually experience the site in.

Ship it! 🚀

@colby-swandale
Copy link
Member Author

Thanks for the feedback. Next time I'll be sure to make it a lot more clearer.

@colby-swandale colby-swandale merged commit 5fbe5c9 into main May 31, 2021
@colby-swandale colby-swandale deleted the colby/refactor-nav-header branch May 31, 2021 12:45
@natematykiewicz
Copy link
Contributor

I see you deployed it. Feels good to me. Nice work!

@AlexWayfer
Copy link
Contributor

I confused with at least 2 things:

  1. Buttons (logo and menu/close) are in different places: https://drive.google.com/file/d/10xt15W-4RyW0TOkeO_FEYyIwfqlXKsjO/view?usp=sharing
  2. The popup with methods take only around a half of screen height and not closing via a tap outside of it.

Also I'm not sure what to do with #389 now.

@natematykiewicz
Copy link
Contributor

Perhaps the logo and hamburger should be moved so they're directly under where the menu shows them, so they don't shift around?

@natematykiewicz
Copy link
Contributor

I've also noticed the sun/moon is a little low. It's not quite vertically centered.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Listing of Methods Visible on Mobile
3 participants