zbycz
FeaturePanel and SearchBox redesign on desktop
On mobile, the Feature Panel and Searchbox look fantastic! However, I believe there's room for optimization on the desktop version. Below are some personal suggestions I think could improve the design:
Search
Floating Searchbox
The transparent, blurry, and floating searchbox used on mobile is stunning. I think applying this same style to the desktop version could be a great enhancement and would create a more modern look!
Transparent Search Suggestions
While the searchbox on mobile is transparent and blurry, the search suggestions are not. Additionally, they are currently touching the searchbox. In my opinion, adding a small gap between the searchbox and its suggestions would create a cleaner look and align better with the floating design.
Feature Panel
Floating
The Feature Panel doesn’t need to be transparent, but it would look more cohesive with the floating searchbox if it had rounded corners and floated above the map. This would keep the design consistent without looking out of place next to the proposed searchbox changes.
Collapsible
The current Feature Panel takes up a lot of screen space. Making it collapsible-similar to the mobile version-could reduce clutter. In collapsed mode, it could be a small box with only the heading visible, expanding to its needed height (or the page's maximum) when opened.
Images
I've included some images to illustrate these ideas from a prototype I built for an OSM webapp and from Apple Maps:
Here, the search suggestions match the searchbox style with a small gap between them, enhancing the visual flow.
An example of how a floating Feature Panel might look—while not necessarily transparent, it could have rounded corners to maintain consistency with the floating design.
In this example, a collapsible Feature Panel is positioned over Apple’s Look Around, but conceptually, I envision it similar to this over a map.
These are just my personal thoughts and suggestions—feel free to take them or leave them as you see fit.
Even on mobile it's not so nice during loading. There still flashes the orange colour for a few seconds.
Hi, thanks for this issue and also for the praise of mobile version, it is mostly @jvaclavik's work. He also prepared a PR without the red background for Desktop (https://github.com/zbycz/osmapp/pull/430), but my main issue was that OsmAPP would completely lose any branding. It would just look like any other map. I know the red box is not looking good, but at least the branding is there. Currently, he appointed a UX designer, who should come up with other means of communicating brand. 🤞
SearchBox
ad floating) I think this issue and @kudlav's comment (and two attempts in the past: https://github.com/zbycz/osmapp/pull/148, https://github.com/zbycz/osmapp/pull/167) show that there is a demand for better looking SearchBox. In the meantime until we have better version, feel free to take PR #430 and merge it, there are just few conflicts to resolve.
ad transparent search suggestion) Yes, please. Looking forward to it! Also please add the gap. It was there in initial version, but somehow disappeard 😄 I would like to keep the content the same as it was - icon and distance below it works good. What do you think?
FeaturePanel
ad floating) Well, I don't agree that the Panel should be floating. On desktop I expect it to be docked on the side of window. I think it deserves all the space it has, and making it floating just shrinks it and make it more cluttered.
Of course, you probably noticed, that it is quite hard to integrate the floating SearchBox to a panel which is not floating. In #430 it makes the red background appear when FeaturePanel is opened, which is not the best. But it is the only option I can think of with the constraint of leaving the panel docked.
One idea though – if you want, you could prepare a PR with a user setting, which would make the Panel floating? It shouldn't be too much code and also I think we it will be definitely reused in future. When there is enough space i'd like the idea of nested panels like the google maps do, eg for Climbing area and nested relations.
ad collapsible) I can't see the point, why should user be able to collapse the panel when he has enough space? Could you please explain the usecase a little more? It feels like some unnecessary midstep before using the close button.
Searchbox
I might take #430 in the near feature. I agree with you that the content of the searchbox suggestions is already good it just happend to be different on the screenshot.
Featurepanel
I also only thought of a floating Featurepanel to make it good looking with a floating searchbox. If you don't want it to be floating I also can only think of the way #430 does it.
I don't fully get what you mean by nested feature panels and how that might be used on OsmAPP.
Collapsible
On screen sizes that are barely big enough for the docked feature panel it takes up a lot of space:
I would imagine one button to collapse/expand it and one to completely close it That way users could get more space on the map without loosing the clicked feature. But that is more like a small improvement that probably takes a lot of effort.
I don't fully get what you mean by nested feature panels and how that might be used on OsmAPP.
As i linked in the screenshot above, gmaps uses it for the search results panel (docked/full height) and selected feature (floating). Or for climbing we can "dock" the climbing area and show the chosen relation member floating. But we are probably not there yet. The logic around this would be more difficult than the floating CSS itself.
Collapsible
On screen sizes that are barely big enough for the docked feature panel it takes up a lot of space: I would imagine one button to collapse/expand it and one to completely close it That way users could get more space on the map without loosing the clicked feature. But that is more like a small improvement that probably takes a lot of effort.
I think for such a small screen we should probably just show the mobile mode collapsed drawer, don't we? The difference could be that for screenWidth from 500 to 1024(?) we could just let the drawer width be fixed like the searchbox is. What do you think?