website
website copied to clipboard
hackforla
Updated resource cards on project page
Fixes #3449
What changes did you make and why did you make them ?
- Added
inline-size: min-contentwhich adjusts text box to grow vertically rather than horizontally with longer strings of text - Adjusted right margin between cards from 42px to 40px (per Figma design proposal)
- Adjusted dimensions of .resource-img to 95px / 95px so each line can hold 6 cards rather than 4 (per Figma design proposal)
Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)
Visuals before changes are applied
Visuals after changes are applied
Without text changes
With text changes (Demo purposes only, changes not committed)
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 jdingeman-update-resource-cards-3449 gh-pages
git pull https://github.com/jdingeman/website.git update-resource-cards-3449
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Review ETA: 10/8/2022 by 8 AM Availability: 10/7/2022 8 - 10 AM; 10/8/2022: 7 - 8 AM
Current status: Haven't had the chance to revisit this yet but no blockers as of right now. Hoping to get it done by Wednesday 10/13 EOD.
@AzaniaBG - could you please clarify what you mean in your second comment? The resource-card element only exists in the scss file as the html that the project pages use is written entirely in Liquid, so the individual cards are generated from that. Thank you! :smile:
Current status: Haven't had the chance to revisit this yet but no blockers as of right now. Hoping to get it done by Wednesday 10/13 EOD.
@AzaniaBG - could you please clarify what you mean in your second comment? The resource-card element only exists in the scss file as the html that the project pages use is written entirely in Liquid, so the individual cards are generated from that. Thank you! 😄
@jdingeman ~ sorry for the confusion. I'm not familiar with Liquid and just assumed that was the reason the styles weren't taking effect across all cards. You can disregard that comment. My understanding is that all cards should be the same height and width per the Figma design, but please let me know if i'm missing something, or if you have additional insights to share :).
Current status: Haven't had the chance to revisit this yet but no blockers as of right now. Hoping to get it done by Wednesday 10/13 EOD. @AzaniaBG - could you please clarify what you mean in your second comment? The resource-card element only exists in the scss file as the html that the project pages use is written entirely in Liquid, so the individual cards are generated from that. Thank you! 😄
@jdingeman ~ sorry for the confusion. I'm not familiar with Liquid and just assumed that was the reason the styles weren't taking effect across all cards. You can disregard that comment. My understanding is that all cards should be the same height and width per the Figma design, but please let me know if i'm missing something, or if you have additional insights to share :).
I'm definitely revamping the cards because I realized what you said about the Figma design. So hopefully this next PR will align with it more! :smiley:
Hello @AzaniaBG and @plang-psm, I have changed quite a few things (thank you Phillip for walking me through!!) and hopefully now it aligns more to the Figma design. See below for example taken from /projects/vrms
Hello @AzaniaBG and @plang-psm, I have changed quite a few things (thank you Phillip for walking me through!!) and hopefully now it aligns more to the Figma design. See below for example taken from /projects/vrms
Awesome @jdingeman ! I should be able to take a look tomorrow.
Hey @jdingeman @AzaniaBG, So I talked to Bonnie about this issue. We need to present the issue to her. We need to have a picture of what cards look like in the dev environment and a picture of what the figma wants, along with an explanation of what we (Justin) did and why. Specifically she wants to know what happens to the pixels when we change the padding (because if the padding isn't working it might need to go back to design). So Justin if you can put that together by tomorrow I'll send you an invite to come to the meeting at 2:00. Otherwise, let's plan on bringing it back to her next Sunday.
Hey @jdingeman @AzaniaBG, So I talked to Bonnie about this issue. We need to present the issue to her. We need to have a picture of what cards look like in the dev environment and a picture of what the figma wants, along with an explanation of what we (Justin) did and why. Specifically she wants to know what happens to the pixels when we change the padding (because if the padding isn't working it might need to go back to design). So Justin if you can put that together by tomorrow I'll send you an invite to come to the meeting at 2:00. Otherwise, let's plan on bringing it back to her next Sunday.
When you say padding, which padding are you referring to? The padding between the cards or the padding of the image inside the top part of the card?
Hi @plang-psm and @AzaniaBG, after consulting with Bonnie last week, I don't think I'll need to strictly follow the figma design pixel by pixel after hearing her feedback. I am going to bring it up to her tomorrow to see what she thinks and hopefully we'll be able to merge. :smile:
Hi @plang-psm and @AzaniaBG, after consulting with Bonnie last week, I don't think I'll need to strictly follow the figma design pixel by pixel after hearing her feedback. I am going to bring it up to her tomorrow to see what she thinks and hopefully we'll be able to merge. 😄
Thanks for the update @jdingeman
Hello @plang-psm and @AzaniaBG (only if available), I have made some adjustments to the code so that it more reflects Bonnie's vision of the pages. I am not entirely sure what the Linter failure is but it seems it may have to do with the fact that I am editing a scss file.
Hello @plang-psm and @AzaniaBG (only if available), I have made some adjustments to the code so that it more reflects Bonnie's vision of the pages. I am not entirely sure what the Linter failure is but it seems it may have to do with the fact that I am editing a scss file.
@jdingeman looks like you have got other commits if you scroll
Hello @plang-psm and @AzaniaBG (only if available), I have made some adjustments to the code so that it more reflects Bonnie's vision of the pages. I am not entirely sure what the Linter failure is but it seems it may have to do with the fact that I am editing a scss file.
@jdingeman looks like you have got other commits if you scroll
@arpitapandya The last clean commit was when we were still using linter v4.8.1, after we updated to v4.9.7, it seems it started to fail. Do you think there may be something in my code that is breaking it?