[openstreetmap/openstreetmap-website] Search forms redesign (#3123)

[mjourdan]

Checking again, the difference of width is due to the scrollbar when the results are displayed. So it also happens between empty search and search with results.

What do you mean by realistic?

On the technical side, most of the stuff should be pretty straightforward:
- as the bootstrap icon set were missing way of locomotions, I got car, bicyle, and pedestrian [icons from GNOME](https://gitlab.gnome.org/Teams/Design/icon-development-kit)
- those 3 icons would be put in a group of 3 [radio toggle buttons](https://getbootstrap.com/docs/5.0/forms/checks-radios/#radio-toggle-buttons) or [button groups](https://getbootstrap.com/docs/4.6/components/button-group/)
- other widgets are basic buttons and dropdown

The heaviest work I see is with the input fields:
- having a location [icon at the start](https://getbootstrap.com/docs/5.0/forms/input-group/) should not be a problem, but not sure how hard it would be to make it draggable
- styling of the search results may also need some attention

If by realistic you mean something which integrates well with the rest of the site, one thing to consider is we don't really have guidelines nor a cohesive set of patterns and styles to rely 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/issues/3123#issuecomment-803141517
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20210319/946c7f33/attachment.htm>