Review mobile designs for reporter

[skrishn]

No description provided.

[skrishn]

Designs are updated and tracked in the issue. Closing this issue.
#590

[skrishn]

We got some feedback, and I'm reopening this issue

"I think we need some work on our mobile design. I find it hard to view and submit reports when the map takes up 50% of the screen. I think we need to get closer to the mobile design put together below:

https://www.figma.com/design/5LYgCbB11FUDS7rq7DkOvu/Crowdsource-Reporter-%7C-23.R3?node-id=2123-559

For example, when submitting a report I like the design where the form takes up the full screen. I like when you get to the page to set the location we show and embedded web map in that screen to assist with it. In addition, when viewing a report and commenting, I like the panel taking the full screen.

Related to the above, per the design it has an up arrow on the panel to expand it full screen and collapse the map, however, we have implemented the opposite where you can collapse the panel and view the map full screen. I prefer the collapse the map design"

[skrishn]

@sumitzarkar, will update you after getting designs.

[sumitzarkar]

@skrishn @chris-fox

As discussed on the call, for this relase we will only focus on the Create Report workflow:
https://www.figma.com/design/5LYgCbB11FUDS7rq7DkOvu/Crowdsource-Reporter-%7C-23.R3

[sumitzarkar]

@skrishn

Solution

• Update the UI structure to incorporate mobile designs
• In the case of mobile create a new map view in the side panel after the editor widget
• Bind the editor widget and Search widget to work with the new Mapview
• Update the code to emit the panel to be shown full/half based on workflow. E.g. once enterd in the Create workflow, always show full panel in mobile

---

Dev Checklist

Items	Is required	Status	Comments
Required NLS changes?	No
Required Backward compatibility	No
Required 508	No
Need Sanitize?	No

---

Impact Analysis Report

Impacted Areas	Comments
Have Configuration changes?	No
Have Runtime changes?	Yes
Impact on RTL	Yes
Impact on Runtime (In mobile mode)	On clicking the 'Report an Incident' button:-
	The layer selection page and Template picker page should always shown in full height
	After selecting the layer/template Map should shown in the panel for adding geometry
	Searching using the in-panel search should navigate user to the selected location in the panel map
	While creating the feature if switched to desktop mode then the user should redirected to the previous page (to maintain the active map)
	On submitting the report the user should redirected to the home page with the default split panel

[skrishn]

@sumitzarkar I notice that "Click on the map to add a point" message takes up half of the space and the map takes the rest. The map needs to take up most of the space.

[chris-fox]

@sumitzarkar, @skrishn, I am guessing the area would be filled with the feature templates if the layer had more than 1 available feature template. I was thinking about this and was wondering if we might want to provide the option to select the feature template prior to this screen? This way the map could have the full space like Suba describes.

So in the design below we would have an additional screen between screenshot #3 and #4. If the layer only has one feature template it skips this page.

Related, do we need some kind of back experience? As you progress through the different pages an ability to go back an change the selection. I know there is a back button at the top, but believe this exists the create report mode completely.

[skrishn]

@chris-fox we get the feature template screen in full page

[chris-fox]

ok looks good, I would agree with you that then on the map page it should take up more of the screen. I don't think we need the 'Click on the map to add a point' text. We should update the info messages at the top of each section to be more applicable to each page.

[skrishn]

Depending on the geometry we get "Click on the map to start drawing." or "Click on the map to add a point' text. Since there's search bar too on the page, "Please provide the details." lightbulb text can be replaced with "Enter an address or click on the map to create a feature".

"

[sumitzarkar]

@skrishn @chris-fox

• Click on the map to start drawing This message is shown from Editor widget
• We are rendering the map below the editor widget.
  If we would like to show the full map, we may have to overlap the editor widget with the map and show the editor widget's message in the calcite notice, as mentioned above.
• In the case of point feature creation
  
• Please let us know what should be the message in case of line and polygon

Also, please let us know if any changes required in this

[skrishn]

@sumitzarkar Will discuss and get back on the message. I like the map appearance.

[skrishn]

@sumitzarkar Implement hiding the text with full map view. I've created another issue for replacing the texts #854

[sumitzarkar]

@skrishn

Please provide the mesages to be shown in case of polygon and polyline
#547 (comment)

[skrishn]

@sumitzarkar It's the same, I used the 'feature' for all geometry types.

[chris-fox]

Could we just say "Enter an address or click on the map"? Feature is a specific term to GIS that I don't think will be intuitive to non-gis users.

[skrishn]

I thought so too, but I felt click on the map is a bit vague.

@sumitzarkar Let's use "Enter an address or click on the map" for all geometry types. Also, Aziza mentioned she was seeing this text in manager too, you're probably handling this separately for manager. Just wanted to say that this text is only for reporter app.

[chris-fox]

@skrishn, @sumitzarkar, will the "Click on the map to add a point." still show in the Desktop mode? It would seem to be a little redundant with the tip at the top. My understanding is this is coming from the editor widget:

I also noticed in the Editor widget the text is "Click on the map to start drawing." for line and polygon layers.

What if we did something more like the original design. Where the tip at the top says something like "Please specify the location.". Then below the search bar we have the Edit widget text "Click on the map to add a point." or "Click on the map to start drawing."

[sumitzarkar]

@chris-fox @skrishn

Here are the screenshots as per the above changes, please let us know if any changes are required in this:

Template Picker​​	Drawing​	Form
​

[chris-fox]

@sumitzarkar, that looks great. Thanks.

[skrishn]

@sumitzarkar I still see the same behavior as mentioned here #547 (comment)

[sumitzarkar]

@skrishn

I still see the same behavior as mentioned here #547 (comment)

• We can reproduce this in the Instant app only
• The Map nodes position which we are overriding is not getting applied
• We will update the CSS and deliver it in the next code drop