[openstreetmap/openstreetmap-website] Arrange base layers menu in a grid (PR #3620)

[Anton Khorev]

> I'm wondering why this change didn't go into small.scss, if it's mainly targeting small screens/mobile devices.

Because there's nothing that is screen size-specific in this code.

> However the implementation is based on additional custom css rules, 

> including a custom grid

See below for reasons.

> and specific pixel widths for gaps etc. I can't support that approach.

There are two pixel values:

- gap width that you already have in `margin-bottom: 8px;` which I replaced with `gap`
- minimal width for layer buttons. I tried different widths and picked the one that I think works better for various screen sizes.

> We're using Bootstrap for all of our layouts now, and this PR should do the same. 

If you want more complicated code where you alter the html to declare rows and use screen-size based breakpoints, you'll do that. You'll have to declare a container, then rows, then put probably two columns in each row for buttons. Then you'll have to make sure that rows are disabled on small screens because they are narrow, and on large screens because the layers menu becomes narrow again ([with a *specific pixel value* of 250 for width](https://github.com/openstreetmap/openstreetmap-website/blob/2cbf6062fc1d9a1f169c36f98d5ff383575cef0a/app/assets/stylesheets/common.scss#L449)). Note that number of declared columns is kind of arbitrary because what you actually want is for buttons not to be too small. So the number of columns per row is going to be an indirect way to set the minimum button width. And screen-size breakpoints are going to be an indirect way to have a condition on the layers menu width.

> See e.g. [Bootstrap Grids](https://getbootstrap.com/docs/5.1/layout/grid/)

And you'll see there that Bootstrap grids are not [css grids](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout), they are based on [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). I use css grid here in order *not do declare rows and columns manually* because there's no intrinsic meaning behind putting this button in this row&column and that button in that row&column. That's what "custom grid" is for in this case. If you actually going to argue that let's say *Cycle map* layer button should be in the right column for some reason, you'll create that column manually and put the button there. But I see no such reason.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/3620#issuecomment-1195459348
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/3620/c1195459348 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20220726/92e13a39/attachment.htm>