[UI Discussions] Changeset Details about osmcha-frontend HOT 9 CLOSED

Things to discuss:

• How should the layout work responsively?
• How should the changeset map layout change to accomodate the responsive layout? This conversation can help push osmlab/changeset-map#133 forward.
• How should changeset map open full-screen (Like full-screen video? In a new tab? Draggable layout?)

Thoughts @planemad @maning @manoharuss & others?

from osmcha-frontend.

@rasagy , The changeset detail page looks good. Also curious to check out ideas on how changeset map and discussion module could be fit in the current layout design.

How should changeset map open full-screen (Like full-screen video? In a new tab? Draggable layout?)

Would suggest for changeset map to just expand in shape to about 75% (or a bit more than that) of the screen (as in a photo viewer experience) and when clicked outside the map, the page should return back to the original state which displays changeset details and the normal changeset map. I wouldn't recommend opening in a new tab as it would be again tedious to open - close and switching tabs.

from osmcha-frontend.

Since a common usecase with OSMCHA is to have a split-screen layout (OSMCHA + JOSM/iD), we need to make sure the layout is responsive here’s how the layout could look like on a 800x600 screen:

We could push the 2, 3, 4 sections in a single layout (scrollable) and keep the changeset map pinned to the bottom. But with the list showing, the horizontal space will be pretty limited for the map.

To use the horizontal space better, this collapsed view where the sidebar can be shown on top of the details page when you click on the hamburger icon.

This still requires a lot more iterations to nail down, will work on this once we have clarity on how the details screen looks.

from osmcha-frontend.

Good ideas, @rasagy !

I think it's not necessary too much space for "Flagged features" in the first image, so I would adjust its section height to the same of the changeset details

from osmcha-frontend.

@willemarcel Good point! @kepta also worked on a quick prototype to test this on multiple screens, and I think the overall feedback is to not do a 50%-50% split but roughly 30%-70% split so changeset map uses more space. Will iterate on this and see what works best!

from osmcha-frontend.

Would suggest for changeset map to just expand in shape to about 75%…

@bsrinivasa Interesting feedback! Like @willemarcel mentioned, I think we can give changeset map more space by default. Let’s see if that removes the need to have a full-screen view for most cases.

from osmcha-frontend.

@kepta helped make a quick prototype to get feedback on the layout. The main feedback was that 50-50 split doesn’t work well, especially on slightly smaller screen sizes, and the changeset map should be toggle-able/expandable in some way.

Based on those inputs, @kepta, @ajithranka & I went ahead with rethinking the layout by focusing on the changeset map and adding details around it.

First iteration: Collapsable panels

This combines the left panel in changeset map with other details in OSMCHA to create a set of toggle-able panels. These could open/close like accordions (at most one section open at one time).

Second iteration: Panels as map controls

Taking the above idea forward, this collapses the panels into a smaller control/icon/button, thus taking minimal space in the interface when someone wants to dive deep into the changeset map.

This approach avoids the jarring movement of clickable areas in an accordion that we saw in Concept D, and also makes each section flexible in size (for ex the Flagged features could be wider to accommodate the table, while the Toggle layers could be smaller).

Let’s take this approach forward and start working on a high-fidelity design.

PS: This would require us to also update the design of the changeset map, tracking that on this ticket.

from osmcha-frontend.

Excelent!! Both are very good, but I prefer the Panels as map controls.

from osmcha-frontend.

Closing this ticket as it has gone out of date.

from osmcha-frontend.