Skip to content

Commit

Permalink
Add ability to handle custom CSV files [refs #5]
Browse files Browse the repository at this point in the history
  • Loading branch information
chadokruse committed Oct 4, 2016
1 parent 6846032 commit 4e7f0db
Show file tree
Hide file tree
Showing 6 changed files with 174 additions and 111 deletions.
24 changes: 19 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,21 +63,35 @@ For those familiar with Jekyll and Github Pages, the template is fully compatibl

The template contains a built-in grants database inspired by those found on large foundation websites. Just upload your annual lists of grants and the template will handle the rest.

1. **Upload Location**: `_data/grants/`
#### Option A: Default CSV *(Recommended)*

1. **File Naming**: Each file must represent a single year and be named for that year (e.g. `2016.csv`)
1. **Upload Location:** [`_data/grants/`](https://github.com/smartergiving/foundation-website-template/tree/gh-pages/_data/grants)

1. **Format**: CSV format using [this template](https://github.com/smartergiving/foundation-website-template/blob/gh-pages/_data/templates/csv_template_for_grants_database.csv)
1. **File Naming:** Each file must represent a single year and be named for that year (e.g. `2016.csv`)

***Experimental:*** *Use your IRS Form 990PF*
1. **Format:** CSV format using [this template](https://github.com/smartergiving/foundation-website-template/blob/gh-pages/_data/templates/csv_template_for_grants_database.csv)

#### Option B: Form 990PF

1. Find your XML-based Form 990PF [here](http://data.philly.com/datasets/irs990/)

1. Convert to JSON format [here](http://codebeautify.org/xmltojson)

1. Name the file for that tax year (e.g. `2014.json`)

1. Upload to `_data/grants/`
1. Upload to [`_data/grants/`](https://github.com/smartergiving/foundation-website-template/tree/gh-pages/_data/grants)

#### Option C: Custom CSV

1. Use your existing grants list in CSV format. We recommend validating your CSV file using [this free tool](http://csvlint.io/). The first row should contain the header names.

1. **Change Setting:** Change the default `db_table_source_type` setting from `template` to `custom`. The setting can be found in [`pages/grantees.html`](https://github.com/smartergiving/foundation-website-template/blob/gh-pages/pages/grantees.html#L5).

1. **Upload Location:** [`_data/grants/`](https://github.com/smartergiving/foundation-website-template/tree/gh-pages/_data/grants)

1. **File Naming:** Each file must represent a single year and be named for that year (e.g. `2016.csv`)

1. **Note:** The search function is not yet compatible with custom CSVs

## License & Credits

Expand Down
29 changes: 29 additions & 0 deletions _includes/db-table-custom.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<table class="table-custom" border="0px">

<thead>
<tr>
{% for keyvaluepair in year[1] %}
{% if forloop.first == true %}
{% for key in keyvaluepair %}
{% if key[1] %}
<th class="sort" data-sort="db-{{ key[0] | replace: ' ', '-'}}">{{ key[0] }}</th>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</tr>
</thead>

<tbody class="list">
{% for keyvaluepair in year[1] %}
<tr>
{% for key in keyvaluepair %}
{% if key[1] %}
<td class="db-{{key[0] | replace: ' ', '-'}}">{{ key[1] }}</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>

</table>
File renamed without changes.
93 changes: 45 additions & 48 deletions assets/css/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -390,67 +390,64 @@ $wide-layout-margin: 20%;
min-height: 500px;
}

@media only screen and (min-width: $screen-xs) {
/* Tables */
@media only screen and (max-width: $screen-xs) {

table {
table-layout: fixed;
width: 100%;
}

th, td {
&:nth-child(1) {
width: 30%;
table, thead, tbody, tfoot, th, td, tr {
display: block;
}
&:nth-child(2) {
width: 15%;
}
&:nth-child(3) {
width: 15%;

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
&:nth-child(4) {
width: 40%

tr { border: 1px solid #ccc; }

td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
}

}

tfoot tr {
border: solid 2px #efefef;
}

@media only screen and (max-width: $screen-xs) {
tfoot tr td {
display: block;
text-align: center;
&.db-grantee-location,
&.db-grant-purpose {
display: none;
}
}

table, thead, tbody, tfoot, th, td, tr {
display: block;
}

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}

tfoot tr {
border: solid 2px #efefef;
}
@media only screen and (min-width: $screen-xs) {

tfoot tr td {
display: block;
text-align: center;
&.db-grantee-location,
&.db-grant-purpose {
display: none;
table .table-template {
th, td {
&:nth-child(1) {
width: 30%;
}
&:nth-child(2) {
width: 15%;
}
&:nth-child(3) {
width: 15%;
}
&:nth-child(4) {
width: 40%
}
}
}

}

}

a.grantee-thumb {
border: none;
}
Expand Down
1 change: 1 addition & 0 deletions assets/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@
// List.js

//Define lists and sort names
//TODO: Add ability to search/filter custom CSV
var listOptions = {
valueNames: [
'db-grantee-name',
Expand Down
138 changes: 80 additions & 58 deletions pages/grantees.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,93 +2,115 @@
layout: default
permalink: /:basename/
intro_text: Lorem ipsum dolor sit amet, dui nam sed, donec amet sit sapien aliquam turpis. Risus mauris numquam vestibulum egestas sodales, eget faucibus mollis sapien, metus eu id risus ultricies, a dolor quam.
db_table_source_type: custom
---
<!-- Intro -->
<section id="grant-intro">

<header class="major">
<h2>Grantees</h2>
</header>

{% if page.intro_text %}
<p>{{ page.intro_text }}</p>
{% endif %}

{% assign all_years = site.data.grants | sort %}
<ul class="actions actions-grants-nav">
<div class="row uniform 50%">
<div class="6u 12u$(xsmall)">
<form class="search-wrapper">
<input class="search-box" id="db-search" type="text" placeholder="Search" autocomplete="off" required />
<button class="search-clear fa fa-times-circle" type="reset"></button>
<label class="search-box-label" for="db-search">Matches Found: <a href="#" class="search-count scrolly"></a></label>
</form>

{% if page.db_table_source_type == 'template' %}
<ul class="actions actions-grants-nav">
<div class="row uniform 50%">
<div class="6u 12u$(xsmall)">
<form class="search-wrapper">
<input class="search-box" id="db-search" type="text" placeholder="Search" autocomplete="off" required />
<button class="search-clear fa fa-times-circle" type="reset"></button>
<label class="search-box-label" for="db-search">Matches Found: <a href="#" class="search-count scrolly"></a></label>
</form>
</div>
</div>
</div>
</ul>
</ul>
{% endif %}

<!--ul class="actions actions-grants-nav">
{% assign all_years = site.data.grants | sort %}
{% for year in all_years reversed %}
<li><a href="#{{year[0]}}" class="button small button-fit scrolly">{{year[0]}}</a></li>
{% endfor %}
</ul-->

</section>

<section id="grant-wrapper">

<!-- Grants -->
{% for year in all_years reversed %}
<div id="{{ year[0] | slugify }}" class="js-listjs">
<h3 class="db-table-header">{{ year[0] }}</h3>
<table border="0px">
<thead>
<tr>
<th class="sort" data-sort="db-grantee-name">Grantee Name</th>
<th class="sort" data-sort="db-grantee-location">Location</th>
<th class="sort" data-sort="db-grant-amount">Amount</th>
<th class="db-grant-purpose">Purpose</th>
</tr>
</thead>
<tbody class="list">

<!-- Check if IRS Data File -->
{% if year[1].Return %}

<!-- Pull from IRS Data File -->
{% include irs.html %}

{% else %}

<!-- Pull from CSV Template -->
{% for grant in year[1] %}
<tr id="{{ year[0] }}-{{ grant.grantee_name | slugify }}">
<td class="db-grantee-name">
{% if grant.grantee_url %}
<a target="_blank" href="{{ grant.grantee_url }}">{{ grant.grantee_name }}</a>
{% else %}
{{ grant.grantee_name }}
{% endif %}
</td>
<td class="db-grantee-location">{{ grant.grantee_location }}</td>
<td class="db-grant-amount" data-grant-group-name="{{ year[0] }}" data-grant-amount="{{ grant.grant_amount | remove: ',' }}">{{ grant.grant_amount }}</td>
<td class="db-grant-purpose">{{ grant.grant_purpose }}</td>
</tr>
{% capture total_grant_count %}{{ forloop.length }}{% endcapture %}
{% endfor %}

{% endif %}
</tbody>
<tfoot>
<tr>
<td>{{ total_grant_count }} Grants</td>
<td class="db-grantee-location"></td>
<td data-grant-group-total="{{ year[0] }}"></td>
<td class="db-grant-purpose"></td>
</tr>
</tfoot>
</table>

<!-- Check if using db source other than default template -->
{% if page.db_table_source_type == 'custom' %}

{% include db-table-custom.html %}

{% else %}

<table class="table-template" border="0px">
<thead>
<tr>
<th class="sort" data-sort="db-grantee-name">Grantee Name</th>
<th class="sort" data-sort="db-grantee-location">Location</th>
<th class="sort" data-sort="db-grant-amount">Amount</th>
<th class="db-grant-purpose">Purpose</th>
</tr>
</thead>
<tbody class="list">

<!-- Check if IRS Data File -->
{% if year[1].Return %}

<!-- Pull from IRS Data File -->
{% include db-table-irs.html %}

{% else %}

<!-- Pull from CSV Template -->
{% for grant in year[1] %}
<tr id="{{ year[0] }}-{{ grant.grantee_name | slugify }}">
<td class="db-grantee-name">
{% if grant.grantee_url %}
<a target="_blank" href="{{ grant.grantee_url }}">{{ grant.grantee_name }}</a>
{% else %}
{{ grant.grantee_name }}
{% endif %}
</td>
<td class="db-grantee-location">{{ grant.grantee_location }}</td>
<td class="db-grant-amount" data-grant-group-name="{{ year[0] }}" data-grant-amount="{{ grant.grant_amount | remove: ',' }}">{{ grant.grant_amount }}</td>
<td class="db-grant-purpose">{{ grant.grant_purpose }}</td>
</tr>
{% capture total_grant_count %}{{ forloop.length }}{% endcapture %}
{% endfor %}

{% endif %}

</tbody>
<tfoot>
<tr>
<td>{{ total_grant_count }} Grants</td>
<td class="db-grantee-location"></td>
<td data-grant-group-total="{{ year[0] }}"></td>
<td class="db-grant-purpose"></td>
</tr>
</tfoot>
</table>
{% endif %}
</div>
{% endfor %}

<section id="search-no-items-found">
<h3>No grants found</h3>
<!--p><a href="#db-search" class="scrolly">Try new search</a></p-->
<!-- <p><a href="#db-search" class="scrolly">Try new search</a></p> -->
</section>

</section>

<script src="{{ site.baseurl }}/assets/js/list.min.js"></script>

0 comments on commit 4e7f0db

Please sign in to comment.