Re: [openstreetmap/openstreetmap-website] Mobile layout is triggered not by JS, but by media queries, now some map… (#2547)

Andy Allan notifications at github.com
Wed Feb 26 15:55:43 UTC 2020


I agree with the general approach here. I hadn't realised until now, but the switch to mobile layout (for the whole page) is based on the rendered width of the menus. If you change one of the menu labels to be really long, you can see that we move the sidebars around even on really wide screens.

I think we should decouple this, and switch the layout based only on the width of the screen, and change only the menus based on the rendered width of the menus.

I can't merge this PR yet, because there's two things that we need to address:

* Choice of breakpoint width. This PR uses a width of 640px, but that's not one of [the breakpoints used by bootstrap](https://getbootstrap.com/docs/4.4/layout/overview/). It would be good to align them, for consistency.
* There's a problem where the secondary nav reappears when the window is shrunk. The aim is that there are three stages - all menus fully shown, then 'compact' mode where the 'more' dropdown appears, and then 'small' where all three menus are combined into one hamburger. But with this PR, there's a width of screen (640px-720px) where the small rules are not applied (because the window is greater than 640), but there's not yet enough width for the compact menu, and so the menus are broken:

![Screen Shot 2020-02-26 at 16 37 14](https://user-images.githubusercontent.com/360803/75361500-ab096300-58b7-11ea-802f-1bf6bddeb443.png)

So I would suggest expanding this PR slightly, to fix the menu issue. It's likely fixable just by finding the menu-related style rules that are now inside the `@media` section, and moving them back into a `body.small` section.

It might also be worth moving the javascript-applied classes off of the `<body>` element and onto the `<header>` (in app/views/layouts/_header.html.erb) since they are only going to affect the menu display from now on.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/2547#issuecomment-591499523
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20200226/e78669bd/attachment-0001.htm>


More information about the rails-dev mailing list