Open-event-server: Tables with scroll bars in small resolutions

[mariobehling]

We are using some tables in a number of pages, e.g. /events/. In smaller resolutions these tables result in scrollbars within pages.

Please implement a solution without -internal- scroll bars.

This issue is also related to: https://github.com/fossasia/open-event-orga-server/issues/3059

[SaptakS]

@mariobehling this was the solution we unanimously decided for tables in smaller resolution. Moreover I don't think this is a bug. This is a well discussed and decided plan that we implemented. There is no other way to make tables responsive. We discussed things like showing accordion and stuff but they all create lots of problem with dependencies. So I feel scroll in smaller resolution is the best solution as of now. @niranjan94 your views?

[SaptakS]

@niranjan94 @magdalenesuo check the comment here and tell your views... Do you think we should move to accordion for smaller screens?? Because I don't see any way of showing an entire table without scroll in smaller screens??? @mariobehling any suggestions???

[mariobehling]

@SaptakS To go for tables allowed us to get started and focus on the features itself. Genetella is an admin theme originally. So, it is not always the best solution. However, in this issue it would be out of scope to decide on the next steps of the design, but I hope we can get a more evolutionary solution here for the moment.

1. It would be good to go through the tables and improve the distribution of columns. This would already help to avoid internal scroll bars.

2. Rather than having scroll bars within the page, the scroll bars should appear for the whole page. Right now one issue is, as a user the last columns suddenly disappear and I do not even see that there is a scroll bar on the lower end of the page. So, please implement this not as a table with a scroll bar inside the page, but rather as a page that gets a scroll bar if the resolution is too small.

Does this make sense?

[SaptakS]

page that gets a scroll bar if the resolution is too small.

The problem with this is the top navbars looks weird then since the entire page will have a horizontal scroll but the width of the top navbar and other parts will remain same. So it might look weird. We need to find out something so that it doesn't break other designs as well.

[mariobehling]

We need to find out something so that it doesn't break other designs as well.

Sure. Maybe there is no perfect solution for the moment, but as long as there are no internal scroll bars, it would be a step in a good direction.

[poush]

I would like to give it a shot. I think I can provide a simple solution that will not break the design

[poush]

A scroll bar at this place can be placed easily on overflow.

[mariobehling]

@poush Thank you, but the goal is to have no internal scroll bars. Cheers.

[poush]

Well, in that case, we can provide a breakpoint where one column can be removed. Let's say "status" column can be removed and status can be showed somewhere close to the order number and this way we can significantly remove the need of space of one column.

[mariobehling]

we can provide a breakpoint where one column can be removed

Very nice idea. This could work out, as we still have the filters. Excellent!

[mariobehling]

Actually, in fact we could get rid of the column "Order Status" completely and integrate it in the "Order Column" that you show.

[poush]

Great then, I will make a PR for this.

[SaptakS]

The PR fixes this problem for only orders table... But I believe this problem is there in all tables..

[poush]

I will make these changes on all other table too.

[mariobehling]

Please reduce the width of "#" and "Qty" in all ticket order/attendee tables as well. Thank you.

[poush]

Attendee and Orders page have been fixed.

@mariobehling @SaptakS @niranjan94 Can you suggest something for Manage Events page? Can we hide one or two column on reducing screen size?

First look tells me that width can be reduced through "Public Url" column.

[mariobehling]

Last column can probably also be reduced.

[niranjan94]

To be handled in frontend. Issue will be re-created on the frontend repo. No progress here anyway.