Skip to content

Equal Opensource Card Sizes - #516

Closed
saiteja13427 wants to merge 3 commits into
saadpasta:masterfrom
saiteja13427:opensource-card-size
Closed

saiteja13427 wants to merge 3 commits into
saadpasta:masterfrom
saiteja13427:opensource-card-size

Conversation

@saiteja13427

@saiteja13427 saiteja13427 commented Aug 28, 2022 •

Copy link
Copy Markdown
Contributor

Makes all the opensource project card sizes equal.

Changes

  1. Changed the open-source project cards from the grid layout to flex.
  2. Made the heights to be equal.
  3. Also we will cut the name of the project if it is too long.

Addresses Issue #490

@kartikcho Do have a look!

Note: Seems like the vercel auto deployment is not configured to show up the opensource cards, so you will have to test it locally i guess.

@vercel

vercel Bot commented Aug 28, 2022 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
developer-folio ✅ Ready (Inspect) Visit Preview Sep 18, 2022 at 9:14AM (UTC)


.repo-name {
white-space: nowrap;
text-overflow: ellipsis;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Is there a reason to remove the ellipsis here?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yeah, because of changing to flex, ellipsis will not work. If we want ellipsis, then we need to make some more changes.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I tried it and it breaks the layout into a long single card (which is probably how it was before your changes too).
We can change the layout container to use grid or add a max width to the card so it doesn't extend into a single long card. This would also solve the ellipsis problem as the container would now have a specified width so the p tag can just be width: 100% now

image

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Sure I will do that and push!

<div className="repo-left-stat">
{repo.node.primaryLanguage !== null && (
<div className={isDark ? "dark-card-mode repo-card-div" : "repo-card-div"}>
<Fade bottom duration={1000} distance="20px">

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Why is 'Fade' not the parent anymore?
If there's no particular reason for the reorder, can we revert? I'd like to keep the same pattern across components for consistency

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Ya in that case I think we can revert this, shall I make it the parent again and push a commit?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Yeah that'd be great for consistency

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Alright!

@kartikcho

Copy link
Copy Markdown
Collaborator

Are you still working on this @saiteja13427 ?

@saiteja13427

Copy link
Copy Markdown
Contributor Author

@kartikcho Yes, I was stuck with some other work. Will push the changes today or tomorrow for sure

@kartikcho

Copy link
Copy Markdown
Collaborator

Sure np, thanks for the heads up!

@saadpasta

Copy link
Copy Markdown
Owner

@saiteja13427 Are you still working on it or should I close it.

@saiteja13427

Copy link
Copy Markdown
Contributor Author

@saadpasta I think we can close this PR for now. I will raise a new PR with the changes in the suggested way!

@saadpasta saadpasta closed this Jan 8, 2023

This branch was successfully deployed

1 active deployment
Preview — 46e4bc78 Deployed Sep 18, 2022 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants