ER: Update Citizen Engagement's Figma mobile design for SDG mini-card to match live webpage

JessicaLucindaCheng commented 1 year ago

Emergent Requirement - Problem

The Citizen Engagement page's mobile Figma design for the SDG mini-card doesn't match the live webpage.

Issue you discovered this emergent requirement in

https://github.com/hackforla/website/issues/3117#issuecomment-1333380481: From 2023-01-16 Dev/PM meeting, Bonnie said the mobile view on the live site is okay as is, so the design needs to be updated for the Citizen Engagement page.

Date discovered

2023-01-16

Did you have to do something temporarily

[x] YES - I added a note to the Figma design marked "Newest Version" in here
[ ] NO

Who was involved

@ExperimentsInHonesty
@JessicaLucindaCheng

What happens if this is not addressed

The mobile Figma design for the Citizen Engagement match won't match the live website, which can cause confusion for designers changing the design of the page in the future and confusion for developers referencing the design in an issue they are working on.

Resources

See the Citizen Engagement page Figma design in the red frame labeled Newest Version

Recommended Action Items

[ ] Write an issue for a designer to update the Citizen Engagement page's mobile Figma design to match the live website

Potential solutions [draft]

JessicaLucindaCheng commented 1 year ago

Issue Writing Progress Report

Blocker: See https://github.com/hackforla/website/issues/3117#issuecomment-1333380481
Availability: 6 hours
ETA: Dependent on blocker being answered

Tasks

[ ] Edit the words I copied and pasted from another issue
[ ] Add a release dependency line to #3738 to release this issue

JessicaLucindaCheng commented 1 year ago

No longer doing this. See this comment for why: https://github.com/hackforla/website/issues/3766#issuecomment-1385683536 ~~Issue Writing Progress Report~~

Blocker: See https://github.com/hackforla/website/issues/3117#issuecomment-1333380481

Availability: 6 hours

ETA: Dependent on blocker being answered

Tasks

~~[ ] Edit the words I copied and pasted from another issue~~

~~[ ] Add a release dependency line to #3738 to release this issue~~

JessicaLucindaCheng commented 1 year ago

Under Newest Version in Figma, for the mobile design, how do you inspect the relative position of something with something else? (See images below.)

For example, I see this when inspecting the desktop design:

Click here to see image of inspecting the desktop design

However, I don't see that when inspecting the mobile designs. I see this:

Click here to see image of inspecting a mobile design

Should I just use the designs on the All Pages Overview for reference?

JessicaLucindaCheng commented 1 year ago

Under Newest Version in Figma, for the mobile design, how do you inspect the relative position of something with something else? (See images below.)

For example, I see this when inspecting the desktop design:

Click here to see image of inspecting the desktop design

However, I don't see that when inspecting the mobile designs. I see this:

Click here to see image of inspecting a mobile design

Should I just use the designs on the All Pages Overview for reference?

From 2023-01-16 Dev/PM meeting: JC: https://github.com/hackforla/website/issues/3766#issuecomment-1384557615

[x] Bonnie said the mobile view on the live site is okay as is, so the design needs to be updated. In the meantime, in the Newest Version in Figma, Jessica needs to add a comment in the design stating the design is not up to date and screenshot what it currently looks like
[x] Change this into a ER for design to update the mobile Figma design for Citizen Engagement

hackforla / website