Adjust "...See More" placement on Wins Cards

[kristine-eudey]

Overview

We need to move the "...see more" link on the Wins cards from the end of the text to the bottom right of the card in order to standardize card design, making the design and functionality the same regardless of whether the cards do or do not have expandable text.

Action Items

Design:

• Duplicate current Wins card in Figma
• Move "See more" to bottom right of card. Keep the "..." in its current position at the end of the text to indicate text continues. This expanded text will be viewable when user clicks the "See more" on bottom of card
• Denote the new updated version in Figma

Development:

• Implement above design change in Wins card. Moved to Update the card format for the Wins page for Desktop/Mobile #2339

Resources/Instructions

Wins Page
Figma - Wins Page
#2135 for further context on this issue

[github-actions]

Hi @kristine-eudey.

Good job adding the required labels to this issue.

Just a friendly reminder to also move the issue into the "New Issue Approval" column under the Project Board. For more info on that, check Github's documentation here.
Thanks!

Additional Resources:
Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done)
Wiki: How to create issues (WIP. Link will be updated when the wiki is done)

[ktlevesque19]

Progress: Just assigned, not started
Blockers: None at this time
Availability: I'll be tackling this early next week in the evenings
ETA: I expect to be done by this upcoming Thursday 9/16

[github-actions]

@ktlevesque19

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: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) 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 14, 2021 at 12:02 AM PST.}

[ktlevesque19]

Progress: Not started
Blockers: None at this time
Availability: This week got crazy at work, planning to tackle this early this week
ETA: Expect to be done by this upcoming Thursday 9/23

[github-actions]

@ktlevesque19

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: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) 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 21, 2021 at 12:02 AM PST.}

[ktlevesque19]

@kristine-eudey I've completed three options in the blue box to the right, ready for review!

This may be a separate issue for once this page goes to development, but I did want to note that the card rows probably won't line up perfectly as they do in the initial page design unless we decide to standardize the card size and leave room for 2 rows of icons always, or limit to one row before expanding. Unless we're okay with the rows not perfectly aligning (which shows in my adjusted version. I don't think it's bad, just definitely a different look than the initial page where two icon row cards never fall next to a single icon row card).

[kristine-eudey]

As decided at 9/26 team meeting, we'll move forward with Option A for the desktop version and Option B for mobile version and is ready for development.

• Context on decision: We decided on this option, just the "See More" to bring up the modal since the behavior of this is different from behavior (accordion expansion) that the down arrow currently relates to on the site. The down arrow will be used for mobile since in mobile the card will expand downward as suggested by the arrow

[abuna1985]

Created #2339 to complete dev portion of this issue.