Skip to content

Commit

Permalink
Home page (#33)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@zomdar @aih
zomdar and aih committed Oct 20, 2020
1 parent 1c9dbf8 commit 89dd1f0
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 57 deletions.
88 changes: 32 additions & 56 deletions server_py/flatgov/templates/bills/bill.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,7 @@


<!-- tabulator JS and CSS -->
<link href="https://unpkg.com/tabulator-tables@4.8.0/dist/css/tabulator.min.css" rel="stylesheet">

<!-- Bootstrap style, if desired: current bs style has large font and row height-->
<!--link href = "https://unpkg.com/tabulator-tables@4.8.0/dist/css/bootstrap/tabulator_bootstrap4.min.css" rel="stylesheet"-->
<link href="https://unpkg.com/tabulator-tables@4.8.0/dist/css/bootstrap/tabulator_bootstrap4.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.0/dist/js/tabulator.min.js"></script>

<!-- Bootstrap CSS -->
Expand Down Expand Up @@ -49,16 +46,27 @@
border-radius: 10px;
}

.table {
font-size: small;
/*Theme the Tabulator element*/
#related-bills-table, #committee-jurisdiction-table{
font-size: small;
background-color:none;
border-radius: 10px;
}

.table thead>tr>th {
border: none !important;
#committee-jurisdiction-table {
margin-top: 25px;
}

.table tbody>tr>td {
border-color: #9d2146 !important;
/*Theme the header*/
#committee-jurisdiction-table .tabulator-header,#related-bills-table .tabulator-header {
background-color:none;
border-top: none;
border-color: #9d2146 !important;
}
/*Color the table rows*/
#committee-jurisdiction-table .tabulator-tableHolder .tabulator-table .tabulator-row,#related-bills-table .tabulator-tableHolder .tabulator-table .tabulator-row{
background-color: none;
border-color: #9d2146 !important;
}

.sponsors-buttons {
Expand Down Expand Up @@ -254,42 +262,7 @@ <h4>Committee(s) of Jurisdiction</h4>
<br>
<a href="#">House Oversight</a>
<h4 class="mt-2">Most Relevant Sponsors</h4>
<table class="table mt-3">
<thead>
<tr>
<th scope="col">Co-Sponsor</th>
<th scope="col">Committee Jurisdiction</th>
<th scope="col">Party</th>
<th scope="col">Rank</th>
</tr>
</thead>
<tbody>
<tr>
<td>Raúl Grijalva</td>
<td>No</td>
<td>D</td>
<td>No</td>
</tr>
<tr>
<td>Rodney Davis</td>
<td>House Administration</td>
<td>R</td>
<td>Ranking Member</td>
</tr>
<tr>
<td>Jim Cooper</td>
<td>House Oversight</td>
<td>D</td>
<td>No</td>
</tr>
<tr>
<td>Virginia Foxx</td>
<td>House Oversight</td>
<td>R</td>
<td>No</td>
</tr>
</tbody>
</table>
<div id="committee-jurisdiction-table"></div>
<div class="d-flex sponsors-buttons">
<button type="button" class="btn btn-primary btn-shadow mr-4">
View Full list of sponsors
Expand Down Expand Up @@ -676,6 +649,9 @@ <h6 class="pt-2">
console.log(titlesYearNotEmpty);
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#related-bills-table", {
// rowFormatter:function(row){

// },
height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: related_bills, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
Expand Down Expand Up @@ -715,7 +691,9 @@ <h6 class="pt-2">
}
]
});

var table = new Tabulator("#committee-jurisdiction-table", {
// rowFormatter:function(row){
});
var sponsors_table = JSON.parse(`{{ bill.cosponsors_table|safe|escapejs }}`);
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#cosponsors-table", {
Expand All @@ -733,20 +711,18 @@ <h6 class="pt-2">
field: "bills_str"
},
{
title: "Committee Jurisdiction",
field: "committee",
width: 200
title: "Committees",
field: "committees",
width: 150
},
{
title: "Party",
field: "party",
width: 100
field: "party"
},
{
title: "Rank",
field: "rank",
width: 100
}
title: "Position",
field: "position"
},
]
});
</script>
Expand Down
12 changes: 11 additions & 1 deletion server_py/flatgov/templates/home/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,12 @@
padding: 30px 100px 30px 100px;
}


#bill-search .tt-menu {
max-height: 150px;
overflow-y: auto;
}

.typeahead {
width: 396px;
height: 30px;
Expand All @@ -85,7 +91,7 @@
outline: none;
}

// from https://github.com/bassjobsen/typeahead.js-bootstrap-css/blob/master/typeaheadjs.css
/* // from https://github.com/bassjobsen/typeahead.js-bootstrap-css/blob/master/typeaheadjs.css */
span.twitter-typeahead .tt-menu,
span.twitter-typeahead .tt-dropdown-menu {
cursor: pointer;
Expand Down Expand Up @@ -184,6 +190,9 @@
@media only screen and (min-width: 768px) {

/* For desktop: */
.typeahead {
width: 290px!important;
}

}
</style>
Expand Down Expand Up @@ -221,6 +230,7 @@
<div class="container">
<div class="light-gray-body my-5">
<div class="title">
<h1>BillCheck</h1>
<p class="lead">A resource for advocates and researchers to gain knowledge regarding current and previous bills.</p>
<p class="lead">Navigate through bills' ecosystem by looking at their sponsors, reports, related bills and more.</p>
</div>
Expand Down

0 comments on commit 89dd1f0

Please sign in to comment.