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

Homepage - Initiatives tabs #142

Merged
merged 27 commits into from
Jun 6, 2023
Merged

Homepage - Initiatives tabs #142

merged 27 commits into from
Jun 6, 2023

Conversation

machikoyasuda
Copy link
Member

@machikoyasuda machikoyasuda commented May 18, 2023 •
edited
Loading

close #102

What this PR does

  • Mobile-first design of the Initiatives tabs
  • Mobi Mart button
  • Mobi Mart button CSS styles
  • Homepage vertical alignment of all the sections/picture padding
  • Updated copy
  • Recent news / see all
  • Recent Resources / see all
  • Template-ize and use YML data
  • Rhombus CSS to support converting rounded squares to rhombus #96

@netlify
Copy link

netlify bot commented May 18, 2023 •
edited
Loading

✅ Deploy Preview for cal-itp-website ready!

Name Link
🔨 Latest commit f97c3f8
🔍 Latest deploy log https://app.netlify.com/sites/cal-itp-website/deploys/647f6344d313a00008e326fd
😎 Deploy Preview https://deploy-preview-142--cal-itp-website.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@machikoyasuda machikoyasuda force-pushed the feat/index-initiatives-tabs branch 2 times, most recently from d91e59c to ed996c0 Compare May 23, 2023 00:11
@angela-tran angela-tran mentioned this pull request May 30, 2023
Closed
@machikoyasuda machikoyasuda added this to the Calitp.org redesign milestone Jun 1, 2023
@machikoyasuda machikoyasuda self-assigned this Jun 1, 2023
@machikoyasuda machikoyasuda marked this pull request as ready for review June 1, 2023 00:13
@machikoyasuda machikoyasuda requested a review from a team as a code owner June 1, 2023 00:13
@machikoyasuda
Copy link
Member Author

Ready for design review @segacy1 - I left some comments around colors on Figma
Ready for code review @angela-tran

This PR could go before #149 or not - either way should be okay.

@machikoyasuda
Copy link
Member Author

@angela-tran Ready to review now after color/style changes from @segacy1

machikoyasuda
machikoyasuda commented Jun 2, 2023
View reviewed changes
src/stylesheets/main.css
background-color: #5b559c;
}

#details .tab-content .tab-list article:nth-child(n + 3) {
Copy link
Member Author

Choose a reason for hiding this comment

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

Complex CSS that means: "Only show the first 3 articles"

@machikoyasuda
Copy link
Member Author

Fully re-based staging and made some clean up changes. Ready for review @angela-tran

machikoyasuda
machikoyasuda commented Jun 5, 2023
View reviewed changes
src/stylesheets/main.css
@@ -249,8 +228,28 @@ p.important {
background: var(--calitp-purple-4);
}

#reachout {
padding-top: 80px;
.nav-pills {
Copy link
Member Author

Choose a reason for hiding this comment

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

Note: This CSS will have to be refactored when the Filtering styling happens (cos the colors are different). But until then, it will be like this.

@machikoyasuda
Copy link
Member Author

After lots of rebasing, this is finally ready for review @angela-tran

thekaveman
thekaveman requested changes Jun 6, 2023
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.

One tiny copy change, otherwise this looks fantastic! Great implementation of including relevant Press/Resources for each Initiative!

src/_data/initiatives.yml Outdated Show resolved Hide resolved
@machikoyasuda @thekaveman
Update src/_data/initiatives.yml
f97c3f8 
Co-authored-by: Kegan Maher <kegan@compiler.la>
thekaveman
thekaveman approved these changes Jun 6, 2023
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.

LGTM! Let's wait to see if @angela-tran has any review comments before merging, I know she was looking at this last week.

angela-tran
angela-tran approved these changes Jun 6, 2023
View reviewed changes
Copy link
Member

@angela-tran angela-tran left a comment

Choose a reason for hiding this comment

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

LGTM. I'm just wondering what the SVG on index.html is for

src/index.html
<svg
style="visibility: hidden; position: absolute;"
width="0"
height="0"
Copy link
Member

Choose a reason for hiding this comment

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

What is this SVG for?

Copy link
Member Author

Choose a reason for hiding this comment

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

It makes the rhombus have nice rounded corners.
image

If you take the rhombus-parent class out, the rhombus has sharp edge corners:
image

Copy link
Member Author

Choose a reason for hiding this comment

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

In subsequent PRs, I will put the SVG into an includes so we can use it across the app for all pages that have a rhombus.

Copy link
Member

Choose a reason for hiding this comment

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

Seems to be accomplished with the CSS filter property - very cool!

@machikoyasuda machikoyasuda merged commit b8b1d94 into staging Jun 6, 2023
4 checks passed
@machikoyasuda machikoyasuda deleted the feat/index-initiatives-tabs branch June 6, 2023 17:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thekaveman thekaveman thekaveman approved these changes

@angela-tran angela-tran angela-tran approved these changes

Assignees

@machikoyasuda machikoyasuda

Labels
None yet
Projects
None yet
Milestone
Calitp.org redesign
Development

Successfully merging this pull request may close these issues.

Homepage - Implement Initiatives section
3 participants
@machikoyasuda @thekaveman @angela-tran