Un-vendorize datatables-responsive.

Also import vendor styles before custom styles such that our styles get
higher priority.

package.json

@@ -31,6 +31,7 @@
     "browserify": ">= 10.1.2",
     "d3": "^3.5.3",
     "datatables": "^1.10.7",
+    "drmonty-datatables-responsive": "^1.0.6",
     "eventemitter2": "~0.4.14",
     "gulp": "^3.8.11",
     "gulp-rename": "^1.2.2",

static/js/modules/tables.js

@@ -6,6 +6,7 @@ var $ = require('jquery');
 var _ = require('underscore');
 var URI = require('URIjs');
 require('datatables');
+require('drmonty-datatables-responsive');
 
 function yearRange(first, last) {
   if (first === last) {

static/styles/_base/_tables.scss

@@ -103,7 +103,7 @@ table.dataTable {
 
 .table__cell--heading {
   font-weight: bold;
-}    
+}
 
 .table__row--note {
   @include font-size(1.0);
@@ -205,7 +205,7 @@ table.dataTable {
       line-height: 1.5em;
       padding: 0;
       width: 50%;
-    
+
       &:first-child {
         width: 50%;
       }
@@ -215,11 +215,11 @@ table.dataTable {
         margin-bottom: 0;
       }
     }
-    
+
     .table__row--header {
       padding: .5em 0;
     }
-    
+
     .table__row--nested {
       .table__cell,
       .table__cell:first-child {
@@ -315,18 +315,18 @@ table.dataTable {
   @include media($medium) {
     .table__cell:first-child {
       width: 50%;
-    }    
+    }
   }
 }
 
 // Style overrides to the datatables defaults
 
-table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, 
+table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
 table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
   background-color: $blue;
 }
 
-table.dataTable.dtr-inline.collapsed > tbody > tr.child > td:first-child:before, 
+table.dataTable.dtr-inline.collapsed > tbody > tr.child > td:first-child:before,
 table.dataTable.dtr-inline.collapsed > tbody > tr.child > th:first-child:before {
   display: none;
 }
@@ -353,8 +353,8 @@ table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
 table.dataTable tbody tr.child {
   background-color: $lightest-gray;
   padding: 0 30px;
-  
+
   ul {
     width: 100%;
   }
-}
+}

static/styles/styles.scss

@@ -1,3 +1,8 @@
+// Include vendor styles
+@import "themify-icons";
+@import "datatables/media/css/jquery.dataTables";
+@import "drmonty-datatables-responsive/css/dataTables.responsive";
+
 @import "bourbon";
 @import "neat";
 
@@ -7,8 +12,3 @@
 @import "_base/base";
 @import "_layout/layout";
 @import "_components/components";
-
-// Include vendor styles
-@import "themify-icons";
-@import "responsive-tables";
-@import "datatables/media/css/jquery.dataTables";

templates/layouts/main.html

@@ -12,7 +12,6 @@
 
     <link rel="icon" type="image/png" href="/static/img/favicon-32x32.png" sizes="32x32" />
     <link rel="icon" type="image/png" href="/static/img/favicon-16x16.png" sizes="16x16" />
-    <link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css">
     <link rel="stylesheet" href="/{{ assets['static/styles/styles.css'] }}" />
     {% if api_location %}
     <script>
@@ -125,7 +124,6 @@ <h3>This site is in alpha. Tell us what you think!</h3>
 {% include './partials/glossary.html' %}
 
 <script src="/{{ assets['static/js/app.js'] }}"></script>
-<script src="/static/js/vendor/datatables.responsive.js"></script>
 {% block scripts %}{% endblock %}
 
 {% if config.USE_ANALYTICS %}