hackforla / hackforla/311-data

UXD - Service request details bottom sheet (Mobile)

Open
#2,090 1 comment 0 reactions 0 assignees View on GitHub
Complexity: Medium p-feature: data loaded modal P-feature: Mobile ready for prioritization role: UI/UX Design size: 2pt
Dominant language
JavaScript
Stars
73
Forks
74
PR merge metrics
No merged PRs in 30d

Description

### Overview
We need to adapt the Service Request modal design for mobile devices so users can view information about individual service requests.

#### More Details
The Service Request design should appear as a bottom sheet. The included components should not be altered from the desktop design unless strong justification is provided and approved.

### Action Items

- [ ] Adapt the existing elements for mobile (following the general approved outline from [UXD - Low fidelity mockups for mobile-lite](https://github.com/hackforla/311-data/issues/2046#top)
#2046 and listed in the resources section)
- [ ] Service Request Details bottom sheet
- [ ] Update component(s) in design system library
- [ ] Document user interaction in Figma
- [ ] Update the Hand Off section of this ticket with the final iteration of this design
---

### Design Iterations

**Please move ticket between `In Progress` and `In Review` to assist PM team**

Iteration 1

Link to notes: `REPLACE WITH COMMENT URL`

`REPLACE WITH SCREENSHOT UPLOAD`


---

### Hand Off Materials

Figma Section Name: `REPLACE WITH SECTION NAME`

Before Screenshot

`REPLACE WITH SCREENSHOT UPLOAD`


After Screenshot (Finalized)

`REPLACE WITH SCREENSHOT UPLOAD`


### Designer Resources

Mockup ticket: [UXD - Low fidelity mockups for mobile-lite](https://github.com/hackforla/311-data/issues/2046#top)
#2046
See (https://github.com/hackforla/311-data/issues/2046#issuecomment-3383771673) dropdown

Results Service request details bottom sheet

Image
Image


Iteration Dropdown Copy/Paste

```

Iteration X

Link to notes: `REPLACE WITH COMMENT URL`

`REPLACE WITH SCREENSHOT UPLOAD`



```


Instructions for Engineering Hand Off

To Start Engineering Hand Off...
1. Ensure all Hand Off Materials are filled in
3. Add the "ready for dev lead" label
4. Leave a comment saying "This ticket is ready for engineering hand off."

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.