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

[github-actions]

Hi @Jaretzbalba, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[Jaretzbalba]

Review availability: Weekdays 10-12pm
ETA: 01/24 5pm

[github-actions]

@Jaretzbalba

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, January 23, 2023 at 11:16 PM PST.}

[github-actions]

@Jaretzbalba

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, January 30, 2023 at 11:17 PM PST.}

[Jaretzbalba]

Progress: "I have the code dynamically showing for all of the criteria except for when the alt field exists but is empty. "
Blockers: "Can't seem to figure out how to use the empty or blank tag in liquid to work."
Availability: "4 hours. I am prepping for a job interview so my time is limited right now."
ETA: "2/10"

[Jaretzbalba]

@ExperimentsInHonesty Here are screenshots of how the new message looks in mobile, tablet, and desktop views. Please let me know if there are any changes you'd like. Thank you!

Mobile

Tablet

Desktop

[github-actions]

@Jaretzbalba

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, February 20, 2023 at 11:17 PM PST.}

[ExperimentsInHonesty]

@Jaretzbalba Please make sure that you use the same code that the projects page uses to keep project cards that we don't want displayed from showing. You will notice that the project cards artwatcher and curbmap both have
visible: false
in the md file.

See

website/assets/js/current-projects.js

Line 63 in 09ca8fe

{% assign visible_projects = site.projects | where: "visible", "true" %}

FYI @hackforla/website-merge

[Jaretzbalba]

@ExperimentsInHonesty Of course! My screenshots above were just used as an example to show what the page would look like if those cards had visible: true as requested in the action items for this issue. Before submitting a PR I will change it back to visible: false.

[ExperimentsInHonesty]

@Jaretzbalba ok, cool! it looks good to me!

[ExperimentsInHonesty]

@hackforla/website-merge We need to test this with Access the data, because they said their info was out of date. Please make another issue to remove their PSI from their project.md card.

• Actually, there is already another issue. Update Project Profile: Access the Data #3885