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:(platform): fix spacing issue in the collections panel #101

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

0xatulpatil
Copy link

closes #93

Changes

Fixed the margin-spacing issue with the collections tab.

The icons have the widht of the largest request-token which happens to be "OPTIONS" token.

Before:

image

#After
image

@netlify
Copy link

netlify bot commented Oct 7, 2023

‼️ Deploy request for staging-firecamp-dev rejected.

Name Link
🔨 Latest commit f666e06

@CLAassistant
Copy link

CLAassistant commented Oct 7, 2023

CLA assistant check
All committers have signed the CLA.

@Nishchit14
Copy link
Contributor

It looks great, Congrats on your first PR @0xatulpatil.

I have one thought about the collection UI, How about making it more configurable like a right/left aligned view?

like this image, the methods are right aligned.
image

if it's easy then we can implement it. and add a hardcode comment on how to change the alignment. later we'll create an app configuration UI where the user will be able to select the alignment by themself.

what are your thoughts? @0xatulpatil

@0xatulpatil
Copy link
Author

0xatulpatil commented Oct 7, 2023

That would be great!

like this image, the methods are right aligned.

did you mean left-aligned?

Right now, I have attached a text-align property to each request which makes it right-aligned, if we want to configure it ourselves we can perhaps attach a different className to these tokens. Should I make another PR for this to work or is it okay to include it in this PR itself?

Also as mentioned in the issue, I'll make changes and make the prefix length to the DELETE token.

@Nishchit14
Copy link
Contributor

my bad, yes the image is left-aligned.

it's fine to include it within the same PR. also instead of custom class, i prefer to achieve it with tailwind classes first.

@Nishchit14 Nishchit14 self-requested a review October 7, 2023 09:12
"text-right": !leftAligned,
});
const requestTokenClass = cx({
"pr-5": leftAligned,
Copy link
Author

Choose a reason for hiding this comment

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

these classes not begin generated by tailwind.

Copy link
Contributor

Choose a reason for hiding this comment

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

try pnpm build:tailwind at the platform/firecamp-ui directory

"pr-5": leftAligned,
"pl-5": !leftAligned,
"w-11": true,
"mr-2":true,
Copy link
Author

Choose a reason for hiding this comment

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

mr-2 class is generated tho

@0xatulpatil
Copy link
Author

Hey @Nishchit14, I made the required changes, but I can figure out why some of my tailwind classes are not rendering.

In the latest commit, I have added some comments, please check.

I don't know if this has something to do with the tailwind config or the way cx handles the classes that are not indexed by tailwind.

@Nishchit14
Copy link
Contributor

@0xatulpatil I am preparing the new version currently, and I am thinking of including this PR in the next release, thus I am putting this PR on hold as of now.

also, you can run pnpm build:tailwind at the platform/firecamp-ui directory, It'll regenerate all classes from the whole project. I think it would work. If you think that this should be improved then please share your views.

Copy link
Contributor

@Nishchit14 Nishchit14 left a comment

Choose a reason for hiding this comment

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

LGTM!!

once you confirm that the tailwind classes are being generated and ui is fine with that then I'll approve and merge it.

@0xatulpatil
Copy link
Author

Yep, after running pnpm build:tailwind everything looks to be running fine.

Here is how the layout looks with left/right aligned.

image
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[bug] [UI]: in collection UI, there is issue of spacing and margin
3 participants