Update card format 2339

[Carlos-A-P]

Fixes #2339

What changes did you make and why did you make them?

• Cards within desktop view of the Wins page match Option A within the The Wins Page Figma design (within the dark blue border)
• Cards within mobile view of the Wins page match Option B within the The Wins Page Figma design (within the dark blue border)
• Positioned the "See More" button relative to the card itself rather than the card text

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Desktop View

Mobile View

Visuals after changes are applied

Desktop View

Mobile View

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b Carlos-A-P-update-card-format-2339 gh-pages
git pull https://github.com/Carlos-A-P/website.git update-card-format-2339

[JessicaLucindaCheng]

@Carlos-A-P I converted your pr to a draft. Once you have pushed your recent changes to your topic branch and completed working on your issue after your blocker is addressed, you can click "Ready for review":

[blulady]

Review ETA: 11 AM 3.27.22
Availability: 4-6 PM Sunday 3.27.22

[tamara-snyder]

Availability: 3 hours
Review ETA: Friday, March 25, 2022

[tamara-snyder]

Hi Carlos, really great work on this issue. I can tell you've put a lot of time and thought into this.

The changes match the Figma design for desktop and mobile devices really well, with one exception: Galaxy Fold. Since it has a much smaller width than most devices (280px), text is spilling off the cards and the LinkedIn and GitHub icons in the top right of the cards have inconsistent sizing. Additionally, when there is too much text in a card, the arrow button used to expand the card doesn't work (see Bonnie's win card, for example).

Spilling off the card on Galaxy Fold:

Various Sizes of LinkedIn/GitHub icons on Galaxy Fold:

I'm not too sure what could fix this at the moment, but it may just be that we need a new media query for extremely small screens like the Galaxy Fold. I'm going to look into it more.

Other than that, I've left some small comments, mostly regarding formatting. Again, well done on a challenging issue! Hopefully this fix won't be too complex.

[Carlos-A-P]

@tamara-snyder, thanks for reviewing my PR! I'll finish making those changes. I also noticed the problem with the text spilling at 280px, and it was like that in the original code. I wondered if we should create another issue to fix that since it wasn't part of the original issue, or should I try and fix that up as well?

[tamara-snyder]

@Carlos-A-P I think creating a new issue to resolve that would be a good idea since it was already a problem before. Could you please still investigate why the cards with more text (like Bonnie's) can't expand? Thank you!

[Carlos-A-P]

@tamara-snyder The content to the right of the profile pic is grouped under the "div.wins-card-top-right" element. We can probably add a breakpoint and make the ".wins-card-top" elements wrap, then space some of the elements out a bit

[tamara-snyder]

@Carlos-A-P I really like the look of that and it seems like a sensible solution! We may want to clear that with the design team before implementing it, though. Perhaps drop a message in the Slack site channel so that they can see it before our next all-team meeting.

[Carlos-A-P]

@Carlos-A-P I really like the look of that and it seems like a sensible solution! We may want to clear that with the design team before implementing it, though. Perhaps drop a message in the Slack site channel so that they can see it before our next all-team meeting.

@tamara-snyder Awesome! I will send over a message and bring it up next meeting. Other than that, let me know if there's anything in my code that needs more clarification or anything else.

[tamara-snyder]

@Carlos-A-P @phuonguvan Have we come to a decision about the Galaxy Fold fix yet? If not, we can make sure it's on the agenda for the next Sunday meeting.

Also, I'm curious if it will resolve the not being able to easily expand certain cards due to there being overlapping elements, as shown in this gif:

I'm a bit hesitant to approve this until we know there's another issue out there that will fix this. Thanks!

[Carlos-A-P]

@Carlos-A-P @phuonguvan Have we come to a decision about the Galaxy Fold fix yet? If not, we can make sure it's on the agenda for the next Sunday meeting.

@tamara-snyder I haven't heard back yet, but I'll reach out on slack later today to see if there's an update. If the icons overlap the button, I can also add a media query and add space as a part of this ticket.

[tamara-snyder]

@Carlos-A-P Yes, adding some extra space would be fantastic. Thanks so much!

[kathrynsilvaconway]

Availabilty: 1 hour
ETA: End of the day on 4/10

[ExperimentsInHonesty]

@Carlos-A-P @JessicaLucindaCheng @tamara-snyder Re the design problem with the Galaxy fold: It sounds like we have a few outstanding issues. We don't want to hold up fixes for one thing, while trying to solve something else that could be moved to another issue. It's unclear from the notes that we read if we need to make a decision about the Galaxy display on this issue, or it can wait for another. Please advise.

[tamara-snyder]

@ExperimentsInHonesty I wanted to get an idea of what the design fix could be since the site is broken on Galaxy Fold, but I think it makes sense to create a new issue for this given that it was already somewhat broken before and it will be at least the size of a small issue. My biggest concern before merging here was that certain elements were overlapping and couldn't be interacted with easily, but I think that can be resolved in the new issue as well.

Otherwise, everything @Carlos-A-P has done looks great! We probably just need a special media query in order for the wins cards to work on Galaxy Fold.

I can approve the changes for this and leave the rest for another issue.

[kathrynsilvaconway]

@Carlos-A-P REally nice work updating the wins cards. I can see that you have implemented the design changes from Figma, and everything is displaying correctly.

I notice there is still some spill over when viewing on Galaxy Fold (I see it on Boonie's card), but I understand that to be a larger problem that is outside the scope of this issue, So I am approving these changes as they are.

I can see you putl some real effort into this, and it is much appreaciated.

[tamara-snyder]

@Carlos-A-P great work on this and thank you again for making the requested changes! All looks good to me. Galaxy Fold to be continued...

[JessicaLucindaCheng]

@tamara-snyder @Carlos-A-P Can you please follow up with Design with this problem at Sunday All Team meeting? If Design gives the okay to proceed, please make an issue for the Galaxy Fold problem.

[ExperimentsInHonesty]

@tamara-snyder or @Carlos-A-P Product has decided that we need to investigate if the Galaxy fold problem needs to be handled by design. We will make that decision by looking into how many people have used that device when visiting our site. Can you make an issue for product to review necessity?

[JessicaLucindaCheng]

@tamara-snyder @Carlos-A-P
Some notes below and also please create an issue for it. (I think Carlos said he will be writing the issue.)
The issue is we need to figure out if it makes sense to accommodate the Galaxy Fold device. This is a feasibility review. Action Items to include, but not limited to:

• Check in with product how many people are using this device.
• Check with design how many pages they would need to design for the Galaxy Fold.