Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Re-style tabular table to match UX #18

Closed
zomdar opened this issue Sep 15, 2020 · 7 comments
Closed

Re-style tabular table to match UX #18

zomdar opened this issue Sep 15, 2020 · 7 comments
Assignees

Comments

@zomdar
Copy link
Contributor

zomdar commented Sep 15, 2020

Currently the tabular implementation of the tables don't match the UX. We'll need to implement the current CSS in bootstrap tables to reskin the tabular tables.

Tabular:
Screen Shot 2020-09-14 at 11 09 51 PM

Current bootstrap iteration (matching UX):
Screen Shot 2020-09-14 at 11 10 02 PM

@zomdar zomdar self-assigned this Sep 15, 2020
@aih
Copy link
Collaborator

aih commented Sep 15, 2020

Check with Charlotte re. the styling. We probably do want to update styling the table, but not necessarily to match the existing tables, which are static. For example, we will need to handle overflow text (e.g. in the 'Shared cosponsors') column.

Some of the styling in tabulator is functional: the vertical dividers are selectable/dragable. The rows in tabular are also styled to be selectable. While we have not implemented a select function for the rows, we may (e.g. selecting a row populates the Sponsors table, or opens that bill in a new browser tab).

Take a look at the themes provided for Tabulator, to see if we can re-use or extend one of these:
http://tabulator.info/docs/4.1/theme

http://tabulator.info/examples/4.1?#example-table-theme-bootstrap4

@zomdar
Copy link
Contributor Author

zomdar commented Sep 15, 2020

Oh neat, it already has a bootstrap theme that we can implement. In that case, lets just import the bootstrap theme for now and match the style. Once that's finished, ux can guide us on fleshing out features like row selection.

I'll open up issues for the other static tables, which need to be hydrated with relevant data.

@aih
Copy link
Collaborator

aih commented Sep 26, 2020

Also adjust the tabulator settings to make it responsive. See http://tabulator.info/docs/4.1/layout

@aih
Copy link
Collaborator

aih commented Sep 30, 2020

The styling looks good. However, the sponsors table should be in the Sponsors section (not 'Understand the Context') and should use the data in the sponsors_table object in master:
var sponsors_table = JSON.parse(`{{ bill.cosponsors_table|safe|escapejs }}`);

image

@aih
Copy link
Collaborator

aih commented Sep 30, 2020

I tried to merge master into home-page, but it did not create the right merge. @zomdar Can you bring the styling into the current master?

@zomdar
Copy link
Contributor Author

zomdar commented Oct 19, 2020

yea i think we can just merge home-page branch into master. The table styling should be copied over through this branch. The tabes in 'understand the context' was hard coded to test the tabular styling, i've removed it and put a todo to replace it with a hydrated table.

aih added a commit that referenced this issue Oct 20, 2020
* initializing home folder + home template

* #19 adding home routing to header

* Redirect root to home

* Update homepage text

* Add typeahead for bills; need to add data and link to url

* Select and navigation working; back button not set

* Add script to gather bill names

* Add jquery typeahead

* Working with typeahead.js; need to parse data

* Typeahead working with bills

* #18 adding tabular styling and new headers

* adding styling to search bills in home page

* using bill_list in billsData array + adding limit to dropdown

* Provide the sponsors_table data

Co-authored-by: Ari Hershowitz <arihershowitz@gmail.com>
@aih
Copy link
Collaborator

aih commented Oct 20, 2020

Closed witht he merging of #33

@aih aih closed this as completed Oct 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants