Add Problem, Solution, and Impact Sections to Project Pages

[kathrynsilvaconway]

Overview

We need to design an additional section in the project page code that displays the Problem, Solution, and Impact & SDG info on each individual project page so that development can build the content into the site.

Details

Click here to see screenshot of proposed Figma design

View the type of page that new content layout will go on https://www.hackforla.org/projects/100-automations

Action Items

Note that you will only be updating one HTML file: _layouts/project.html). All project pages are generated from this file. There is not a separate file for every project

• Examine the existing project page
• Examine the Figma page for this issue and implement the code changes
• In between the Project Description Card and Project Resources Card sections in _layouts/project.html apply the following logic:
  • Create a new div for Project Value Card
  • Use Liquid to make an if-statement that will render the Project Value Card if the project file being called in /_projects has data listed under problem
    • i.e. If project.problem exists, render the Project Value Card with all the information in project.problem, project.solution and project.impact
    • Otherwise, do not render the Project Value Card
• Submit a pull request.

Resources/Instructions

• Figma - Individual Project Page
• The original design issue: Project Description Page: Add Problem, Solution, and Impact Section #3034

Project page

• see project.html page on our repo
• location of project page in code base: _layouts/project.html
• Example project page: https://www.hackforla.org/projects/100-automations (they are all made automatically from project.html and the project.md file)

[github-actions]

Hi @patrickohh, 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 :)

[patrickohh]

i. Availability: 11/29 - 12/3
ii. ETA: 12/1 Evening

[patrickohh]

1. Progress: Got the problem, solution, and impact fields to render in a value card on the page.
2. Blockers: Trying to use the css components already available in the page's scss file, but finding that they do not render the value card with dimensions represented in the figma diagram. Looking to making my own css components for this card, but will ask if this is something that still pertains to the scope of this issue.
3. Availability: 12/5 - 12/6
4. ETA: 12/5 Evening PST

[ExperimentsInHonesty]

We need an issue to create a DR about leaving the format for this Impact card in the _sass/components/_project-page.scss file instead of moving it to a parent class. If later we need to use the format again, it should be extracted and moved to a higher level.

[jdingeman]

• I believe we can close out this issue with this issue written here: Create a DR for _project-page.scss #3990