Add Problem, Solution, and Impact Sections to Project Pages

[kathrynsilvaconway]

Overview

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

Action Items

• [ ] Note that you will only be udating one HTML file: project page. All project pages are generatd from this file. There is not a separate file for every project
• [ ] Feature Branch: You will be pushing your code to a feature branch, not gh-pages. Reach out to tech lead and ask them to create the branch for you.
• [ ] Please read and follow the steps in the How to work off of a feature branch wiki article.
• [ ] Examine the existing [link to project page]
• [ ] Examine the Figma page for this issue and implement the code changes
• [ ] Submit a pull request. Remember that your changes will be merged into the newly created faeture branch, not gh-pages.

For Tech Leads:

Please create a feature branch that this code can be merged into. We do not want to merge these changes directly to gh-pages.

Resources/Instructions

• Figma - Individual Project Page
• The original design issue: #3034

[kathrynsilvaconway]

@JessicaLucindaCheng This one is almost ready to go. How do I create a feature branch for it?

[JessicaLucindaCheng]

1. @JessicaLucindaCheng This one is almost ready to go. How do I create a feature branch for it?

It should be the same as creating a branch in your forked repo (but I could be remembering wrong because it has been a long time since I have create a new branch in the HfLA repo). Here is the GitHub documentation for how to do it. https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-and-deleting-branches-within-your-repository However, if you create the branch now, someone will have to continually update that branch with changes from gh-pages every week ideally. The updating may involve dealing with merge conflicts too. Here is an almost done wiki that has most of the steps involved in that but is still a work in progress: https://github.com/hackforla/website/wiki/How-to-update-a-feature-branch-with-changes-from-gh-pages . (I plan on finish writing the wiki by October 10, 2022)

2. I noticed you wrote the action item: "Push your changes to [Feature Branch To Be Created] and sumbit at pull request". So did you want the feature branch to be something the developer directly works on? If yes and assuming you are creating the feature branch so it exists, the developer won't be able to push any changes directly into an existing branch in the HfLA website repo. I would suggest the developer just create a topic branch in their own forked repo, push the changes to that topic branch, and then create a pr that has the "into" as the feature branch in the HfLA website repo.

Let me know if you have any additional questions.

[bishrfaisal]

@kathrynsilvaconway It looks like you still have one more part in the action items that need customizing

Examine the existing [link to project page]

[blulady]

Looks like @kathrynsilvaconway addressed Jessica's concern 2(since concern number one was Jessica answering Kathryn's question) when she changed the action item to Submit a pull request. Remember that your changes will be merged into the newly created faeture branch, not gh-pages.

[JessicaLucindaCheng]

@blulady thanks for taking a look at this issue!

• [x] I'm going to add the ready for dev lead label back on and remove the Ready for milestone label because you still need to address Bishr's comment:

@kathrynsilvaconway It looks like you still have one more part in the action items that need customizing

Examine the existing [link to project page]

• [x] Once you address Bishr's comment above and think this issue is clear enough for a developer to work on,
  • [x] Add a new comment below saying you addressed Bishr's comment. (You may want to quote their comment in your reply.)
  • [ ] Add the Ready for Milestone label
  • [ ] Remove Ready for dev lead

[blulady]

@blulady thanks for taking a look at this issue!

* [ ]  I'm going to add the `ready for dev lead` label back on and remove the `Ready for milestone` label because you still need to address [Bishr's comment](https://github.com/hackforla/website/issues/3547#issuecomment-1281117570):

@kathrynsilvaconway It looks like you still have one more part in the action items that need customizing

Examine the existing [link to project page]

* [ ]  Once you address Bishr's comment above and think this issue is clear enough for a developer to work on,
  
  * [ ]  Add a new comment below saying you addressed Bishr's comment. (You may want to quote their comment in your reply.)
  * [ ]  Add the `Ready for Milestone` label
  * [ ]  Remove `Ready for dev lead`

I reached out to @kathrynsilvaconway and she explained to me Oh, the 'link to project page' is just supposed to a be link to the HTML that is to be worked on. This was a very rough draft when I wrote it, I just didn't have the link handy. Bonnie asked me to make it extremely clear that there is only one file to update. She didn't want a dev to think they had to update a separate file for every project. So I have added the link to the current project page.

[7kram]

Product thinks that the reason for the feature branch was that it would show up for all project pages even if there isn't any information for the Problem, Solution, and Impact in the projects .md file and that we were going to wait to launch the feature until all information for each project was collected.

If this is an accurate assessment on why we needed a feature branch, let's solve this instead by adding logic that doesn't display the card if there isn't information on the .md file

@blulady @kathrynsilvaconway

[ExperimentsInHonesty]

Jessica and I reviewed this at Sunday's lead meeting and decide a feature branch is not necessary. Instead, the developer who will code this needs to add logic that [prevents the card from displaying if there isn't problem information (project.problem) in the .md file for that project

Please rewrite the issue to remove the branch details and add in the new info about the logic

[JessicaLucindaCheng]

@jdingeman

Instead, the developer who will code this needs to add logic that [prevents the card from displaying if there isn't problem information... in the .md file for that project... and add in the new info about the logic

I'm putting ready for dev lead back on because we didn't apply the logic info in the issue itself. Sorry for not catching that when we were working on this together on Thursday. Please add information about the logic in the issue.

Let me know if you have questions.

[JessicaLucindaCheng]

@jdingeman Thanks for making the requested changes! However, in the future, please write a comment saying that you addressed what was asked/requested so we know it has been done.

[github-actions[bot]]

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: https://github.com/hackforla/website/issues/3990