Project summary table view

bshankar commented 2 months ago

What type of PR is this? (check all applicable)

[x] 🍕 Feature

Related Issue

Example: Fixes #6500

Describe this PR

Adds a new table view for projects to go alongside the existing grid view
Filter projects by by partner ID and time range.
Sort projects by due date, percentage mapped and validated.
Download list of projects as a CSV file.

Screenshots

screenshot_from_2024-08-19_17-22-39_720

emi420 commented 1 month ago

This is a small bug in the UI, the tooltip is cropped on the top of the first result, when you hover over the light grey area:

emi420 commented 1 month ago

Another small UI issue, the table stripped background color is not working well with the 3-color progress bar:

VinayakRugvedi commented 1 month ago

Another small UI issue, the table stripped background color is not working well with the 3-color progress bar:

Hey @emi420, thanks for the comment. Here are the three alternatives that we can consider to handle this.

Plain table with no stripes and no row border
Table with row border but no stripes
Table with slightly darker stripe colour

Please let us know what you think works the best.

Screenshot from 2024-08-20 17-42-08 Screenshot from 2024-08-20 22-46-14

emi420 commented 1 month ago

Hey @emi420, thanks for the comment. Here are the three alternatives that we can consider to handle this.
1. Plain table with no stripes and no row border

2. Table with row border but no stripes

3. Table with slightly darker stripe colour

Hey @VinayakRugvedi ! thank you, let's go with the option 2 (Table with row border but no stripes)

royallsilwallz commented 1 month ago

Some comments -

The padding of the table rows is quite large. Can we change it to 0.75rem in td?
Add a dash (-) in case of no data in Author/Due Date column.
Add a title attribute in case of ellipsis (...) so that full text is shown in the tooltip.
Can we move Download CSV button to the right top of the table? It would save some space and would also improve the layout.
Color for Download CSV and List/View icon is very dark.
Instead of underline in Download CSV button, can we add a faint gray border to make it look like a button?

emi420 commented 1 month ago

Hey @royallsilwallz

* The padding of the table rows is quite large. Can we change it to `0.75rem` in `td`?

I agree with you, also the font size could be smaller. I think changing classes to v2 f6 will do the trick.

* Add a `dash (-)` in case of no data in `Author/Due Date` column.

Nice catch, I would add double dash -- with light gray color

* Add a title attribute in case of ellipsis (...) so that full text is shown in the tooltip.

Yes, and same with other fields like location.

* Can we move `Download CSV` button to the right top of the table? It would save some space and would also improve the layout.
* Color for `Download CSV` and `List/View` icon is very dark.
* Instead of underline in `Download CSV` button, can we add a faint gray border to make it look like a button?

Color is black #000 and must be changed to "b--blue-dark" #2c3038

I'm not sure about the other changes. Using a faint gray border will make the button looks very similar to the filter inputs. The right section have options for visualization, those doesn't have any effect on the CSV export, while the left section has options for filtering data that will result in a different output for the CSV. I would not change the style of position of the "Download CSV" link.

royallsilwallz commented 1 month ago

Can we make Contributors column text align to center ? The numbers would look nice if they're center aligned.