-
Notifications
You must be signed in to change notification settings - Fork 43
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
Swathi Fix resources dot centering on Tasks pages #2789
base: development
Are you sure you want to change the base?
Swathi Fix resources dot centering on Tasks pages #2789
Conversation
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have tested the PR and everything works as expected.
PR.vid.64.mp4
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested in both modes. Aligned and working well. PR.2789.mp4 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Verified initials centering, resource display, and tested in dark mode. Works as expected.
swathi-PR.webm
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The changes in this PR work well, and the initials in the resource dots are correctly centered. However, I noticed that the UI makes a noticeable jump when expanding and collapsing the resource section. It would improve the user experience if this transition could be made smoother, possibly by adding a CSS transition effect. Other than that, the fix looks great!
Screen.Recording.2024-10-23.at.5.41.35.PM.mov
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have tested the PR. Everything works as expected. The resources icons with initials were aligned properly inside the column horizontally. I have tested it in different screen sizes.
HGN.APP.-.Google.Chrome.2024-10-25.22-47-37.mp4
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
} | ||
.table th { | ||
text-align: center; /* Centers the text horizontally */ | ||
vertical-align: middle; /* Centers the text vertically */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Comments for CSS classes are not required. they are self explanatory
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I reviewed PR #2789 by pulling the latest version from Swathi. The fixed CSS styling works as expected, with the resources dot positioned at the center.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This code is working as expected, when creating task with adding resources, the resources are aligned on center as expected
PR.2789.mov
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
2efd00b
Description
This PR addresses the issue of misaligned initials inside resource dots and improves the layout when there are multiple resources in the task table. The initials inside the resource circles are now correctly centered both vertically and horizontally.
Related PRS (if any):
This frontend PR is related to the development backend PR.
Main changes explained:
How to test:
npm install
and...
to run this PR locallyScreenshots or videos of changes:
Before :
After :