Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: "What We've Done" section - first two cards #220

Merged
merged 17 commits into from
Jul 9, 2024
Merged

Feat: "What We've Done" section - first two cards #220

merged 17 commits into from
Jul 9, 2024

Conversation

angela-tran
Copy link
Member

@angela-tran angela-tran commented Jun 28, 2024 •
edited
Loading

Part of #212

This PR implements the "What We've Done" section with just the first two cards.

Dev analysis of spacing and decisions to round:

Desktop non-image card Mobile non-image card

@angela-tran angela-tran added this to the Work Page milestone Jun 28, 2024
@angela-tran angela-tran self-assigned this Jun 28, 2024
@angela-tran angela-tran changed the base branch from main to feat/our-work June 28, 2024 18:46
@compilerla compilerla deleted a comment from netlify bot Jun 28, 2024
@angela-tran angela-tran force-pushed the feat/what-weve-done branch 6 times, most recently from b41438d to 095b90f Compare June 28, 2024 21:56
@angela-tran angela-tran changed the title Feat: "What We've Done" section Feat: "What We've Done" section - first two cards Jun 28, 2024
@angela-tran angela-tran force-pushed the feat/what-weve-done branch from c44cae0 to f40f584 Compare June 28, 2024 22:25
@angela-tran angela-tran mentioned this pull request Jul 1, 2024
Closed
5 tasks
@angela-tran angela-tran marked this pull request as ready for review July 1, 2024 17:36
@angela-tran angela-tran requested a review from a team as a code owner July 1, 2024 17:36
@angela-tran angela-tran marked this pull request as draft July 1, 2024 17:36
angela-tran added 12 commits July 1, 2024 17:40
@angela-tran
feat: add "What We've Done" section pill and heading
bb8a9ef
@angela-tran
feat: add first two cards as a base to work off
16afe83 
add font styles, saving spacing for a separate commit
@angela-tran
style: no-image cards default to 1 column, go to 2 for larger screens
524d19f
@angela-tran
style: add spacing for card body
0cf43ce 
32px for small screens, 64px for larger screens.

mainly getting the horizontal spacing right, will handle vertical when
adding card tags
@angela-tran
style: add spacing under card title
7cae3bd 
24px for smaller screens, 56px for larger screens
@angela-tran
style: add spacing under card's first paragraph
7eb0b6a 
56px for all screen sizes
@angela-tran
style: add spacing after "Outcome" heading
a9a1e7b 
16px for smaller screens, 8px for larger screens
@angela-tran
style: add spacing after section intro paragraph
9cb9082 
48px for smaller screens, 56px for larger screens
@angela-tran
refactor: extract card contents to data file, handle first two entries
297a4cf
@angela-tran
feat: add tags to non-image cards
34fce83
@angela-tran
feat: add aria-hidden to non-image card tags
d874aed
@angela-tran
fix: section intro paragraph spans 7 columns
5ee3ea7
@angela-tran angela-tran force-pushed the feat/what-weve-done branch from f40f584 to 5272cdf Compare July 1, 2024 17:41
@angela-tran
Copy link
Member Author

Rebased onto latest feat/our-work

@angela-tran angela-tran marked this pull request as ready for review July 1, 2024 17:42
@angela-tran
Copy link
Member Author

Sorry, found one more spacing thing to fix

@angela-tran angela-tran marked this pull request as draft July 1, 2024 17:45
@angela-tran
style: correct the vertical spacing for cards on larger screens
a8c7af6 
96px above tags, 24px under tags, 120px to fill out the bottom of the
card
@angela-tran
style: correct the vertical spacing for cards on smaller screens
5db5c3d 
32px above tags, 32px under tags, 64px to fill out the bottom of the
card
@angela-tran angela-tran force-pushed the feat/what-weve-done branch from 5272cdf to 5db5c3d Compare July 1, 2024 17:56
@angela-tran angela-tran marked this pull request as ready for review July 1, 2024 17:56
lalver1
lalver1 previously approved these changes Jul 1, 2024
View reviewed changes
Copy link
Member

@lalver1 lalver1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@angela-tran angela-tran mentioned this pull request Jul 2, 2024
Merged
@angela-tran
Copy link
Member Author

🙏

thekaveman
thekaveman reviewed Jul 2, 2024
View reviewed changes
Copy link
Member

@thekaveman thekaveman left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is going to be tricky, but I think ideally these Outcome section headers / sections should line up (independent of the size of the description above).

image

src/our-work.html Show resolved Hide resolved
@angela-tran
Copy link
Member Author

angela-tran commented Jul 2, 2024 •
edited
Loading

This is going to be tricky, but I think ideally these Outcome section headers / sections should line up (independent of the size of the description above).

I noticed that too just yesterday while looking at Figma. I agree it'll be tricky... I haven't thought of a way to do it yet. 🤔

edit: maybe we can set a minimum height on things? idk

@thekaveman
Copy link
Member

I wonder if @machikoyasuda has any ideas?

@machikoyasuda
Copy link
Member

This is going to be tricky, but I think ideally these Outcome section headers / sections should line up (independent of the size of the description above).

I noticed that too just yesterday while looking at Figma. I agree it'll be tricky... I haven't thought of a way to do it yet. 🤔

edit: maybe we can set a minimum height on things? idk

Yeah, a min-height with a percentage would work - only when the screen width is wide enough / containers are set to be side by side:

image image

Sidenote: I think there's something funky going on with the responsiveness. At a certain width, the layout goes down to 1 container per row, but if you go further - it goes to 2 containers per row again.

image

@angela-tran angela-tran dismissed lalver1’s stale review July 3, 2024 20:24

Just need to fix alignment of card contents

@angela-tran
Copy link
Member Author

@machikoyasuda is helping with the alignment of card contents

@machikoyasuda
Copy link
Member

image image

machikoyasuda
machikoyasuda reviewed Jul 8, 2024
View reviewed changes
src/styles/base.css
Comment on lines +468 to +474

.mb-lg-6 {
margin-bottom: calc(96rem / 16) !important;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could be removed now I think @angela-tran

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good, I'll do it in one of the next PRs and link it here

@machikoyasuda machikoyasuda force-pushed the feat/what-weve-done branch from fd73ed8 to 57d202c Compare July 9, 2024 17:32
thekaveman
thekaveman approved these changes Jul 9, 2024
View reviewed changes
Copy link
Member

@thekaveman thekaveman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice team effort here y'all 😎

@angela-tran angela-tran merged commit 9fe580e into feat/our-work Jul 9, 2024
1 check passed
@angela-tran angela-tran deleted the feat/what-weve-done branch July 9, 2024 18:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@machikoyasuda machikoyasuda machikoyasuda left review comments

@thekaveman thekaveman thekaveman approved these changes

@lalver1 lalver1 lalver1 left review comments

Assignees

@angela-tran angela-tran

Labels
None yet
Projects
None yet
Milestone
Work Page
Development

Successfully merging this pull request may close these issues.

Implement "What We've Done" section
4 participants
@angela-tran @thekaveman @machikoyasuda @lalver1