Update Resource Cards On Projects Pages

[kathrynsilvaconway]

trafficstars

Overview

As a developer, I need our site to align with our current design standards to give our users a more consistent experience. For this issue, we will update the resource cards on the individual projects pages to accommodate multiple lines of text.

Action Items

• [x] Implement OPTION 3 in this updated Figma design to create the new resource cards
  • [x] Note there is an example of what it is supposed to look like when there are longer and shorter lines and there are details for dev off to the left side of the Figma design.
  • [x] Locate the html tag that impacts resource-card list item in each project page
  • [x] Find the scss file and add the inline-size and overflow wrap to implement the wanted effect
  • [x] Note: implement inline-size: min-content; and not a particular pixel size

Resources/Instructions

Current styling

Option 3

• Mozilla CSS Resource
• Design System
• Material Design-cards
• This issue solves issue #2606

[github-actions[bot]]

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

[ExperimentsInHonesty]

@JohnJBarrett22 Please provide update

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 or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

[ExperimentsInHonesty]

BTW. After this issue is done, please choose issues that match your criteria (size, and role) from the prioritized backlog, instead of the new issue approval column. I noticed that this issue and #3355 both came from new issue approval.

[github-actions[bot]]

@JohnJBarrett22

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 Tuesday, September 13, 2022 at 12:32 AM PST.}

[kathrynsilvaconway]

@JohnJBarrett22 Hi, this issue has not been updated in over 2 weeks. If you are still interested in working with HfLA, please let us know by updating your ETA and Availability. If we don't hear back within 7 days, we will unassign you from this issue and put it back in the queue. Thanks!

[github-actions[bot]]

@JohnJBarrett22

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 Tuesday, September 20, 2022 at 12:39 AM PST.}

[github-actions[bot]]

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

[jdingeman]

ETA: Wednesday 10/5/22 EOD Availability: after 3pm each day

[jdingeman]

Blocker: Branch does not pass linter for some reason. Unsure of best solution to this. I think it may have to do with updating stylelint as some rules were deprecated in new version.