search

EASOL / easol

EASOL - A New Way to Open Learning with Ed-Tech
http://easol.org
GNU Affero General Public License v3.0
1 stars 4 forks source link

Responsive problem on Table views #292

Closed edgarf closed 8 years ago

edgarf commented 8 years ago

When the number of columns is higher, the table hovers over the left navigation menu. Let's apply some responsiveness rules.

regiscamimura commented 8 years ago

@edgarf I got it done, the tables will allow horizontal scrolling from now on. Be aware that's not the only responsiveness handling option. We can easily make columns that would overflow are collapsed, and an [+] icon is added so when clicking on it, it would expand: https://datatables.net/extensions/responsive/examples/styling/bootstrap.html

We can also make the details to open in a modal window: https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html -- click the [+] icon to see how it works

We can also allow the user to pick which columns will be visible: https://datatables.net/extensions/responsive/examples/column-control/column-visibility.html -- click the column visibility button.

Keep in mind that we can also add a feature so the user can drag/drop columns to change its order, if that would help visualization.

All those options are easy to implement, just let me know if they want more responsiveness features on the tables.

edgarf commented 8 years ago

Hey Regis, So I've been testing this feature and here are the comments 1) If the "Column visibility" wouldn't take more than 1 hours to be integrated - let's add it. 2) Currently "Responsive" mode on table view works well, however on chart related pages the first row jumps away (see screenshot below) URL - http://easol-dev.azurewebsites.net/reports/view/37 image 3) Clicking on Pie/Bar Chart Slice/Bar doesn't filter out the list elements (it was working before this commit).

regiscamimura commented 8 years ago

@edgarf Fixed the issues and added column visibility button

edgarf commented 8 years ago

@regiscamimura - actually, I have noticed one issue with other tables. See below, the tables gets mixed up like that. However, when the "Table" kind of results is selected, after refreshing they get back to a proper place. image

regiscamimura commented 8 years ago

fixed.

edgarf commented 8 years ago

@regiscamimura, thanks. A few small issues

  1. The table header is still "shrinked" on the form (screenshot below). image
  2. On the report table view, it seems like there is always a horizontal scroller, doesn't matter how many columns are visible - https://www.dropbox.com/s/9kveupadsm5skfc/easol_horizontal_scroll_issue.mp4?dl=0 (video screencast)
regiscamimura commented 8 years ago

fixed. Can you please try again?

edgarf commented 8 years ago

Solved! Thank you.