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.

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

[UI] Card margins on Management page #2576

Closed
leecalcote opened this issue Mar 21, 2021 · 12 comments · Fixed by #2615
Closed

[UI] Card margins on Management page #2576

leecalcote opened this issue Mar 21, 2021 · 12 comments · Fixed by #2615
Assignees
Labels
component/ui User Interface framework/react good first issue Good for newcomers help wanted Extra attention is needed kind/enhancement Improvement in current feature
Milestone

Comments

@leecalcote
Copy link
Member

Current Behavior

Left and right margins on the sides of the cards on the /management pages are unequal.

Desired Behavior

These margins should be the same on both sides of the card.

Screenshot

Screen Shot 2021-03-21 at 12 02 43 AM

@leecalcote leecalcote added kind/enhancement Improvement in current feature help wanted Extra attention is needed component/ui User Interface framework/react labels Mar 21, 2021
@leecalcote leecalcote added this to the v0.6.0 milestone Mar 21, 2021
@leecalcote leecalcote added the good first issue Good for newcomers label Mar 21, 2021
@adithyaakrishna
Copy link
Member

@leecalcote I would love to work on this :)

@leecalcote
Copy link
Member Author

Excellent, @adithyaakrishna 👍

@TeezyOg
Copy link

TeezyOg commented Mar 24, 2021

Is there set dimensions for each box specifically within the code ? If yes couldn't you just set the boxes to the same size in accordance with the specific page to precisely position each box with the same dimensions ?

@leecalcote
Copy link
Member Author

@TeezyOg, yes, you could, although in that case, the web app would not be responsive to different sized displays and browser widths.

@TeezyOg
Copy link

TeezyOg commented Mar 24, 2021 via email

@leecalcote
Copy link
Member Author

@adithyaakrishna are you working on this? If not, please remove your assignment.

@adithyaakrishna
Copy link
Member

adithyaakrishna commented Mar 25, 2021

@leecalcote I'm working on this, I had a tough time setting up the Local Dev Environment as this is the first time I'm using make as well as Go Lang, Sorry for the delay but Once I get this up and running I will make a PR immediately 😶

@adithyaakrishna
Copy link
Member

adithyaakrishna commented Mar 30, 2021

Hey @leecalcote, so I was going through this, I found the issue

Problem:
image

The padding of the cards are set to 8px, so as there are two cards next to each other, the total padding is 16px

Solution:
image

The padding of the overall box is set to 16px, by increasing it to 24px, we can fix this across all the pages, Shall I go ahead with this?

@leecalcote
Copy link
Member Author

Thanks. Does this maintain even spacing on the top and bottom of the cards when they are in rows?

@adithyaakrishna
Copy link
Member

Yes, Across all pages

@leecalcote
Copy link
Member Author

@TeezyOg
Copy link

TeezyOg commented Mar 31, 2021 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component/ui User Interface framework/react good first issue Good for newcomers help wanted Extra attention is needed kind/enhancement Improvement in current feature
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants