feat:show table in mobile with hscroll #1273

rajeshj11 · 2024-08-21T12:10:49Z

/closes #969
showing the table and providing the horizontal scroll if any overflow is there.

Impact: mobile device will able to view the table data.

DonKoko · 2024-08-21T13:19:32Z

@carlosvirreira Rajesh has taken on this issue. He has updated all tables in the platform to make them horizontally scrollable so users can see full data.
I am deploying it to staging: https://github.com/Shelf-nu/shelf.nu/actions/runs/10490727074

Lets do some testing to make sure everything is okey.

DonKoko

Writing some feedback, based on what we discussed:

Some <Td> components have className="table-cell". This does nothing as they are already table cells. Lets remove it
With the new approach the name column(first column) should not grow anymore(only mobile). It should just shrink to the content. Basically default table functionality. This is the case on some pages (assets) but not the case on the bookings index. Should be consistent. Also please check all indecies because in the categories index, for example, the description column grows. Again we dont want that on mobile, just desktop.
The gradient is a bit too thin(change to 35px). Also the gradient at the left point has to be 100% transparent so we have a smooth transition. Now it looks like a cut-off line
The gradient should only be there if the table is overflowing horizontally(both desktop and mobile). For example in the Non-registered members index, there are very few columns so they fit and there is no horizontal scroll, however there is still a gradient covering the right column
team/users index still has the chevrons, even tho it has the new style of table. Needs to be adjusted
Booking/manage-assets modal is basically broken now. I cant scroll it or view it. Same for location/manage-assets modal.

carlosvirreira · 2024-08-21T15:34:08Z

Batch Action is broken on Mobile (Safari) - On Asset Index it works well

Perhaps adjacently related:

On asset dashboard - some widgets seem to assume they are side-scroll-able and therefore show some sort of shadow on the right side.

Same as locations on mobile. Action panel looks broken.

Calendar component also seems to be cracking.

User table on mobile seems to also show the right pointing chevron to show its click-able but also sidescroll.

@DonKoko my comments.

…issues

…11/shelf.nu into feat-969-show-table-with-hscroll

rajeshj11 · 2024-08-21T19:30:33Z

Writing some feedback, based on what we discussed:

Some <Td> components have className="table-cell". This does nothing as they are already table cells. Lets remove it

With the new approach the name column(first column) should not grow anymore(only mobile). It should just shrink to the content. Basically default table functionality. This is the case on some pages (assets) but not the case on the bookings index. Should be consistent. Also please check all indecies because in the categories index, for example, the description column grows. Again we dont want that on mobile, just desktop.

The gradient is a bit too thin(change to 35px). Also the gradient at the left point has to be 100% transparent so we have a smooth transition. Now it looks like a cut-off line

The gradient should only be there if the table is overflowing horizontally(both desktop and mobile). For example in the Non-registered members index, there are very few columns so they fit and there is no horizontal scroll, however there is still a gradient covering the right column

team/users index still has the chevrons, even tho it has the new style of table. Needs to be adjusted

Booking/manage-assets modal is basically broken now. I cant scroll it or view it. Same for location/manage-assets modal.

resolved all the issues. I am not 100% sure about the gradient(CSS background thing. i might need help on that).

rajeshj11 · 2024-08-21T19:32:27Z

Batch Action is broken on Mobile (Safari) - On Asset Index it works well

Perhaps adjacently related:

On asset dashboard - some widgets seem to assume they are side-scroll-able and therefore show some sort of shadow on the right side.

Same as locations on mobile. Action panel looks broken.

Calendar component also seems to be cracking.

User table on mobile seems to also show the right pointing chevron to show its click-able but also sidescroll.

@DonKoko my comments.

I am not sure about the calendar thing. @DonKoko I have checked with main branch it is same. other issues were taken care.

DonKoko

with the new approach, the description column on categories index should not be truncated in 1 row. Can you make it that it takes 3 rows. We have a function alreayd in shelf that counts the rows and truncates the text

For the gradient do the following:

Increase width to 35px
Set the gradient to : linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%)

rajeshj11 · 2024-08-22T08:14:22Z

with the new approach, the description column on categories index should not be truncated in 1 row. Can you make it that it takes 3 rows. We have a function alreayd in shelf that counts the rows and truncates the text

For the gradient do the following:

Increase width to 35px

Set the gradient to : linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%)

ack

carlosvirreira · 2024-08-22T08:26:01Z

What I meant about the calendar.

Besides that, looks good to me (safari, iPhone)

DonKoko · 2024-08-22T10:26:39Z

app/components/table.tsx

+    };
+
+    checkOverflow(); // Initial check
+    window.addEventListener("resize", checkOverflow); // Check on resize


If you want to do this, inside the useEffect you should have a if (window)

DonKoko · 2024-08-22T10:27:24Z

app/components/table.tsx

+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+
+  useEffect(() => {


Can you please abstract this into its own hook called useTableIsOverflowing which returns the value?

feat:show table in mobile with hscroll

ebb97eb

rajeshj11 had a problem deploying to external August 21, 2024 12:10 — with GitHub Actions Failure

Merge branch 'main' into feat-969-show-table-with-hscroll

80b5625

rajeshj11 had a problem deploying to external August 21, 2024 12:19 — with GitHub Actions Failure

DonKoko requested changes Aug 21, 2024

View reviewed changes

rajeshj11 added 3 commits August 22, 2024 00:32

fix: handle the broken manage assets and bookings and other feedback …

0f634f3

…issues

chore:formatted

d0232ec

Merge branch 'feat-969-show-table-with-hscroll' of github.com:rajeshj…

47c2ebd

…11/shelf.nu into feat-969-show-table-with-hscroll

rajeshj11 had a problem deploying to external August 21, 2024 19:09 — with GitHub Actions Failure

chore:chnage the fade effect width to 35px

c132c9a

rajeshj11 had a problem deploying to external August 21, 2024 19:14 — with GitHub Actions Failure

fix:fixed the fade z-index issue

974b87c

rajeshj11 had a problem deploying to external August 21, 2024 19:18 — with GitHub Actions Failure

rajeshj11 requested a review from DonKoko August 22, 2024 05:29

DonKoko requested changes Aug 22, 2024

View reviewed changes

fix:gradient issue and add lin breaker to description

b5ddc8f

rajeshj11 had a problem deploying to external August 22, 2024 08:34 — with GitHub Actions Failure

fix: description issue

e95edc3

rajeshj11 had a problem deploying to external August 22, 2024 08:53 — with GitHub Actions Failure

rajeshj11 requested a review from DonKoko August 22, 2024 08:55

fix:added linbreak for kit also and formatted

708b0b1

rajeshj11 had a problem deploying to external August 22, 2024 09:05 — with GitHub Actions Failure

rajeshj11 added 2 commits August 22, 2024 14:47

chore:cleanup the commented code

df28816

chore:formatted

8583a72

rajeshj11 had a problem deploying to external August 22, 2024 09:18 — with GitHub Actions Failure

DonKoko requested changes Aug 22, 2024

View reviewed changes

rajeshj11 added 2 commits August 22, 2024 16:33

refactore:moved the fade effect changes to new hook

b3fcd66

chore:formatted

3575da6

rajeshj11 had a problem deploying to external August 22, 2024 11:04 — with GitHub Actions Failure

chore:renamed the hook

42bfa77

rajeshj11 temporarily deployed to external August 22, 2024 11:07 — with GitHub Actions Inactive

rajeshj11 requested a review from DonKoko August 22, 2024 11:09

DonKoko approved these changes Aug 22, 2024

View reviewed changes

DonKoko merged commit 51231e1 into Shelf-nu:main Aug 22, 2024
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat:show table in mobile with hscroll #1273

feat:show table in mobile with hscroll #1273

rajeshj11 commented Aug 21, 2024 •

edited

Loading

DonKoko commented Aug 21, 2024

DonKoko left a comment •

edited

Loading

carlosvirreira commented Aug 21, 2024 •

edited by DonKoko

Loading

rajeshj11 commented Aug 21, 2024 •

edited

Loading

rajeshj11 commented Aug 21, 2024

DonKoko left a comment •

edited

Loading

rajeshj11 commented Aug 22, 2024

carlosvirreira commented Aug 22, 2024

DonKoko Aug 22, 2024

DonKoko Aug 22, 2024

feat:show table in mobile with hscroll #1273

feat:show table in mobile with hscroll #1273

Conversation

rajeshj11 commented Aug 21, 2024 • edited Loading

DonKoko commented Aug 21, 2024

DonKoko left a comment • edited Loading

Choose a reason for hiding this comment

carlosvirreira commented Aug 21, 2024 • edited by DonKoko Loading

rajeshj11 commented Aug 21, 2024 • edited Loading

rajeshj11 commented Aug 21, 2024

DonKoko left a comment • edited Loading

Choose a reason for hiding this comment

rajeshj11 commented Aug 22, 2024

carlosvirreira commented Aug 22, 2024

DonKoko Aug 22, 2024

Choose a reason for hiding this comment

DonKoko Aug 22, 2024

Choose a reason for hiding this comment

rajeshj11 commented Aug 21, 2024 •

edited

Loading

DonKoko left a comment •

edited

Loading

carlosvirreira commented Aug 21, 2024 •

edited by DonKoko

Loading

rajeshj11 commented Aug 21, 2024 •

edited

Loading

DonKoko left a comment •

edited

Loading