Ecosystem pagination (#55)

Author: Bgreen23

_sass/ecosystem.scss

@@ -459,3 +459,14 @@
   z-index: 1;
   position: absolute;
 }
+
+.ecosystem .pagination {
+  .page {
+    border: 1px solid #dee2e6;
+    padding: 0.5rem 0.75rem;
+  }
+
+  .active .page {
+    background-color: #dee2e6;
+  }
+}

assets/filter-hub-tags.js

@@ -70,7 +70,8 @@ $(".filter-btn").on("click", function() {
 
 //Scroll back to top of hub cards on click of next/previous page button
 
-$(document).on("click", ".page", function() {
+$(document).on("click", ".page", function(e) {
+  e.preventDefault();
   $('html, body').animate(
     {scrollTop: $("#pagination-scroll").position().top},
     'slow'

ecosystem/ecosystem.html

@@ -19,7 +19,7 @@ <h1>
   </div>
 </div>
 
-<div class="main-content-wrapper">
+<div id="pagination-scroll" class="main-content-wrapper">
   <div class="main-content">
     <div class="container">
 
@@ -60,6 +60,7 @@ <h1>
             </div>
           {% endfor %}
         </div>
+        <div class="pagination d-flex justify-content-center"></div>
       </div>
 
       <div class="join-notice">
@@ -122,7 +123,7 @@ <h1>
   });
 </script>
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
-<script ecosystem="true" star-count-call-date="ecosystemStarCountCallDate" star-count-data="ecosystemStarCountData" src="{{ site.baseurl }}/assets/github-stars.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
-<script id="filter-script" list-id="ecosystem-index-cards" display-count="100" pagination="false" src="{{ site.baseurl }}/assets/filter-hub-tags.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
+<script list-id="ecosystem-index-cards" display-count="10" pagination="true" src="{{ site.baseurl }}/assets/filter-hub-tags.js"></script>
+<script ecosystem="true" star-count-call-date="ecosystemStarCountCallDate" star-count-data="ecosystemStarCountData" src="{{ site.baseurl }}/assets/github-stars.js"></script>