Edit Accomplishments in About Page to show different years

[jdingeman]

Overview

We want to highlight the accomplishments across HackforLA for the projects across multiple years. Currently, the About page only shows accomplishments for the year 2022. We need to implement a new format so that a user can see highlights from previous years.

Action Items

• We need to add three fields to _data/internal/accomplishments.yml
  • year
  • project-file (example: project-file: food-oasis.md)
  • program-area (example: program-area: Social Safety Net)
• If a project file exists, the program area should be retrieved from the project file, by using Liquid to run through the _projects collection and find the program area that matches with the name of the project. Therefore, program-area should be specified only if no project file exists.
• See most recent Figma design (in resources below) and zoom into the Accomplishments section
• Navigate to _includes/about-page/about-card-accomplishments.html
• Implement the design so that when a user clicks on any of the years, the section shows accomplishments from that year
• Note: The final layout for the Accomplishments section will slightly differ from the Figma design
  • Rather than list accomplishments by project with the program area above as seen in current design (see below),
    we want to list the accomplishments by program area. So the program area (e.g. Citizen Engagement) would be like the black header, and the accomplishments for each project in that program area will be listed. This is so the program areas do not get repeated for each project in that program area.

Resources/Instructions

• about.html
• about.js

Current design

• About page, accomplishment section: https://www.hackforla.org/about/#accomplishments

• image from current state of website figma

  

Future State of website after this issue is completed

• Figma, accomplishment section

image from future state of website figma

Web View

Mobile View

[github-actions]

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

[Thinking-Panda]

Availability: Weekdays
ETA: 10/31/23

[Thinking-Panda]

Questions

1. The issue says the current highlights are for year 2022. The published website says the highlights are for the yea 2020. And, the Figma design shows 2019 as the earliest year. Please let me know how far back in years should I include ?
2. The current code is designed to have 4 accomplishments in each column. Should I continue with that layout or plan for situations when there could be more than 8 accomplishments per year. For example, when there are 9 accomplishments, should the left column have 5 or 4 accomplishments?

Thank you !

[Thinking-Panda]

1. Progress: Added more years to display accomplishments, added code to display the program areas as mentioned for all accomplishments. Working on filtering accomplishments by year and displaying the program area accordingly without repeating code.
2. Blockers: none at the moment
3. Availability: Weekdays
4. ETA:11/10

[ExperimentsInHonesty]

@Thinking-Panda I removed the To Update ! and ready for product labels, now that you have done your update. Thanks for working on this. I am looking forward to seeing it when its done.

[Thinking-Panda]

1. The Figma design has "All" included in the dropdown in mobile viewport. But the desktop viewport does not include it. Should I add "All" to show all accomplishments?
2. The list of years to be displayed is added dynamically. But I notice that it is displayed twice and I'm unable to fix the problem. I am also attaching the console message I get when I tried to track it.
   

[LRenDO]

Hi @Thinking-Panda!

Great observation on the difference between the desktop and mobile options. I would think that question would be good for the design team, but it looks like there is no one on the website design team currently from what I can see on GitHub. I would lean towards sticking with the Figma design since we can always create a new issue to add an "All" section, but tagging in @roslynwythe for guidance on whether or not to go ahead and add it now.

I am happy to take a look at what you have for the second issue that you are running into and/or get on Slack to work it out with you. If you push your feature to your forked repo, sometime early next week I can take a look at what you've got.

[LRenDO]

Hi @Thinking-Panda! I was able to take a look at your branch and overall it's looking good so far!

As far as the blocker, It looks like about.js is included in both \pages\about.html and \_includes\about-page\about-card-accomplishments.html. This is likely why there is duplication in the accomplishments section. Only including the script once should resolve the issue. If not, this SO article might be helpful and includes a couple other potential causes/solutions.

Aside from the blocker, I thought I would also mention that the for loops in loadAccomplishmentYears() are missing let in front of i=year.

Again, looks like you're off to a solid start here! Please feel free to ping me here or on Slack if you need any additional help resolving the issue!