Citizen Engagement page: Display a message if missing program area detailed info

[JessicaLucindaCheng]

Overview

On the Citizen Engagement webpage [1], we want to display a message on a project's program area card if the project is missing program area detailed information so

• we make sure the page doesn't break and
• we maintain a professional-looking website.

Action Items

Developer

• Read Citizen Engagement wiki page [2]
• If a project's Markdown file is missing one of the following program area detailed information fields: problem, solution, impact, sdg, card-image-src, sdg-image-src, then change the code in _includes/citizen-engagement-cards.html [3] so that the card on the Citizen Engagement webpage should show the project's name and dynamically display the message:

  We are currently drafting the Problem, Solution and Impact statements for this project.
  

  • Make sure the message is displayed for any future projects that are added and are missing program area info.
    • Keep in mind missing program area info can mean problem, solution, impact, sdg, card-image-src, or sdg-image-src fields
      • a) are not in a project's Markdown file at all
        OR
      • b) the fields exist but are left blank in a project's Markdown file.
  • To style the message, use existing SCSS classes when possible, such as for Typography. See Design System in Figma [4] for more info
    • If you need to add SCSS code, add it to _sass/components/_citizen_engagement.scss [5]
  • Using developer tools, make sure the message looks good in desktop, tablet, and mobile views
• For testing your code and getting approval from the Stakeholder Rep,
  • In adopt-civic-art.md [6] and curbmap.md [7] in the _projects directory, you can temporarily change visible: false to visible: true in order to see what the card will look like with the message.
  • Show how the message looks on the card to the Stakeholder Rep and get the Stakeholder Rep's approval.
    • See the Website Team's project information page [8] for who the Stakeholder Rep is.
  • Before opening a pull request, please make sure to change visible: true back to visible: false in adopt-civic-art.md and curbmap.md so that the curbmap and ArtWatcher projects are not visible.

Merge Team, Technical Lead, or Product Manager

• Once the pull request associated with this issue is merged, go to issue Rename citizen-engagement-cards.html #3756 and check if all the issues listed under the Dependency section are closed. If they are all closed, move that issue (Rename citizen-engagement-cards.html #3756) into the New Issue Approval column, remove the Dependency label on it, and add a ready for dev lead label to it.

Resources/Instructions

• [1] Citizen Engagement webpage
• [2] Citizen Engagement wiki page
• [3] _includes/citizen-engagement-cards.html: HTML file that provides the layout/format for each card on the Citizen Engagement page
• [4] Design System in Figma
• [5] _sass/components/_citizen_engagement.scss: Current SCSS file for the Citizen Engagement page
• [6] _projects/adopt-civic-art.md
• [7] _projects/curbmap.md
• [8] Website Team's project information page
• Issue Rename citizen-engagement-cards.html #3756 is dependent on this issue being completed

[JessicaLucindaCheng]

Issue writing ETA and availability

• Availability: 6 hours
• ETA: Tue, Jan 3, 2023

Tasks

• Update the Citizen Engagement wiki page with relevant info from issue Create each program area page automatically using a layout #3328
• [ ]
• Write a Medium issue (add to dependency section in 3328) - Change the logic: if it doesn't have the program area info, show the wording
• Developers can temporarily change curbmap and ArtWatcher to visible to see what the card will look like but then turn it back off when done testing so the temporary change doesn't end up in their pr

[JessicaLucindaCheng]

Issue writing ETA and availability

• Availability: 6 hours
• ETA: Tue, Jan 3, 2023

Tasks

• Update the Citizen Engagement wiki page with relevant info from issue Create each program area page automatically using a layout #3328
• Add instructions to include
  • Change the logic: if it doesn't have the program area info, show the wording
  • Developers can temporarily change curbmap and ArtWatcher to visible to see what the card will look like but then turn it back off when done testing so the temporary change doesn't end up in their pr
• Add as to dependency section in Create each program area page automatically using a layout #3328

[JessicaLucindaCheng]

Issue writing ETA and availability

• Availability: Not sure. Prioritizing working on finishing writing other issues.
• ETA: Sun, Jan 14, 2023

Tasks

• Write a Medium issue (add to dependency section in 3328) - Change the logic: if it doesn't have the program area info, show the wording: We are currently drafting the Problem, Solution and Impact statements for this project.
• Developers can temporarily change curbmap and ArtWatcher to visible to see what the card will look like but then turn it back off when done testing so the temporary change doesn't end up in their pr