search

leanprover / reference-manual

Apache License 2.0
26 stars 3 forks source link

Menu button hard to hit on mobile #140

Closed david-christiansen closed 1 week ago

david-christiansen commented 3 weeks ago

The menu button to open/close the table of contents is very small on my phone, and hard to target with my thumb. It should be bigger for mobile devices.

Screenshot_20241104-113055-menu-annot

jakobvase commented 2 weeks ago

First problem is you're missing a header for the page to become mobile friendly. Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the headers. This tells mobile phones that this is a responsive website, and it should not try to be smart.

jakobvase commented 2 weeks ago

Then it's a matter of increasing the padding on the button when it's shown on mobile, and changing the background color to white - potentially for a full-width, fixed header, because a floating white square looks weird. You could also move the Preview Release banner into the fixed header on mobile in that case. It takes up a lot of space otherwise.

david-christiansen commented 2 weeks ago

What would you do for a full-width fixed header when it goes into mobile mode? I worry about taking up valuable real estate from the text. Is there some other nice way than a square? What about a white border around the dark lines that make up the burger/X, together with making them larger with a touchscreen media query?

The "Preview Release" banner has only a few more days to live, so I won't worry about it.

david-christiansen commented 1 week ago

Fixed in #148 - thanks for the help, @jakobvase!