Design Enhancement Scope in Shifting Board

[nihal467]

Describe the bug

Currently, the shifting board has three scroll bars and it doesn't feel good, when we use it

To Reproduce
Steps to reproduce the behavior:

1. Go to shifting board
2. See error

Expected behavior

An effective way to utilize the board and make the user experience better

Note: Whoever wishes to work on this issue, get the mock-up design approved in the EOD call, then only, the issue will be assigned to the respective author.

Screenshots

[Arzzam]

I would like to work on this issue. Can you assign it to me?
Kindly give and explain the mock up design.
Thank you

[Pranshu1902]

• Adjust the height of the shifting component so that the main page scrollbar on the right isn't needed. (Basically when we scroll the filters and heading on top should not go out of screen)
• Add arrows on the left and right side of the component (vertically in the center) for scrolling left and right since the horizontal scrollbar isn't easily visible (Something like this as shown below)
  

[Pranshu1902]

@Arzzam you can start working on it

[Arzzam]

Ok Thank you.
I will reach you, If I need any clarifications.

[Pranshu1902]

Hey @Arzzam any updates on this?

[Arzzam]

Hi @Pranshu1902
As I see, the board it implemented in different flow, As I

If we wonna set this on top header to be in fixed position, we have to change the rendering methods or we can change by having separate scroll for every columns.

We can do it like this and prevent the overflow down to the page and need to change the app router overflow y scroll to max height to the screen and have to change all children pages to have scroll behaviour to prevent whole body scrolling while overflow. so that we won't have the extra scroll when there is no elements are overflow in the main page.

If we have separate scroll for each column, we can have table headers on the top, it will only scroll only the below content.

Provide your suggestion to continue my progress.

Thank you. Give me your suggestions and feedback.

[Pranshu1902]

@Arzzam a quick way would be to restrict the height of the component so that the whole page doesn't scroll as you showed in the last screenshot. Also, the arrows need to be placed inside the component and not on the sides, keep it like a floating button.

I don't think you need to modify it in the app router coz it will affect all pages
cc @rithviknishad

[Arzzam]

Yes it will affect, so that have to change the overflow behaviour for the main page and need to apply it to all the specific pages.

[Pranshu1902]

@Arzzam Try to do it without modifying the app router. Set a maximum height limit for the component so that it doesn't go out of the screen size probably using tailwind classes like h-3/4

[Pranshu1902]

@Arzzam any updates? Try to raise a draft PR so that we can also keep track of the progress

[Arzzam]

Sorry for the delay, I will finish it and raise PR in this week.
Thank you

[Arzzam]

Screen.Recording.2023-12-29.at.7.47.35.PM.mov

As I told you the extra scroll will be there as the router has to be fixed. I guess the arrows are not required now. If it is required we can proceed with that.
Currently fixed the extra scroll of the component but it still can affect in some cases I guess.

[Pranshu1902]

@Arzzam I checked the code, so you would have to remove p-3 from the class from here to remove the extra scroll.
https://github.com/coronasafe/care_fe/blob/8aea0cc9139c507b83784986d9d2c4eec7a7baf6/src/Routers/AppRouter.tsx#L139

See if you can get a work around this otherwise, go ahead and modify the AppRouter.tsx. Besides that, do add the arrows, it's a required feature.

[Arzzam]

Hi @Pranshu1902,
I have a doubt that when I dynamically add the top and left in the tailwind classNames, It is not working.

Here I have attached a video that will shows about it, Is there any reason it is not working, I have added class like these in other projects but it worked. I guess it is not worked in oru project thats why I am curious about it.
I have finished everything. I just want to position these buttons dynamically when the screen size changes that why I added like this but it won't work.
Thanks for your help.

Screen.Recording.2023-12-31.at.7.56.51.PM.mov

Is there any changes required here

[rithviknishad]

Could you share the JSX code used to achieve that?

[Arzzam]

HI @rithviknishad

Here, I have attach the screenshot of the code.

[rithviknishad]

Dynamic class names won't work. Refer https://tailwindcss.com/docs/content-configuration#dynamic-class-names

You could use CSS styles to achieve this instead. But why does the arrow need to have dynamic absolute positioning in the first place?

[Arzzam]

Oh Thanks.
The arrow needs to be in the reference.
It needs to be inside these components. so, I thouht setting the icons absolute and positioning will be great and when we give static values, that can cause different positions for different size of screens. I will update it.
Thanks for your help @rithviknishad

[Arzzam]

Hi @rithviknishad @Pranshu1902,
Please take a moment to review my pull request at #6956.

Thanks for your time and feedback!