Add sort to Ecosystem (#37)

This commit adds sort to Ecosystem

Author: Bgreen23

_includes/ecosystem_sort.html

@@ -0,0 +1,17 @@
+<a id="dropdownSortLeft" data-toggle="dropdown" data-target="#dropdownSortMenuLeft" >
+  Sort <img src="{{ site.baseurl }}/assets/images/filter-arrow.svg">
+</a>
+
+<div class="dropdown-menu sort-menu" id="#dropdownSortMenuLeft">
+  <div class="ecosystem-filter-menu">
+    <ul>
+      <li>
+        <a class="ecosystem-filter" id="sortLowLeft">GitHub Stars - Lowest</a>
+      </li>
+
+      <li>
+        <a class="ecosystem-filter" id="sortHighLeft">GitHub Stars - Highest</a>
+      </li>
+    </ul>
+  </div>
+</div>

_sass/ecosystem.scss

@@ -404,3 +404,48 @@
     }
   }
 }
+
+.ecosystem-divider {
+  position: relative;
+  margin-bottom: 4rem;
+  margin-top: 1.5rem;
+  top: 3rem;
+}
+
+.ecosystem{
+  #dropdownSort, #dropdownSortLeft {
+    margin-left: 0;
+  }
+}
+
+.ecosystem-filter-menu {
+  ul {
+    list-style-type: none;
+    padding-left: rem(20px);
+    li {
+      padding-right: rem(20px);
+      word-break: break-all;
+
+      a {
+      color: $mid_gray;
+      &:hover {
+        color: $orange;
+        }
+      }
+    }
+  }
+}
+
+.ecosystem .ecosystem-filter {
+  cursor: pointer;
+  ul {
+    list-style-type: none;
+  }
+}
+
+.ecosystem #dropdownFilter, #dropdownSort, #dropdownSortLeft {
+  color: $mid_gray;
+  cursor: pointer;
+  z-index: 1;
+  position: absolute;
+}

ecosystem/ecosystem.html

@@ -62,34 +62,40 @@ <h1>
 
       <!-- START CONTENT -->
 
-      <div class="row ecosystem-cards-wrapper">
-        {% assign ecosystem = site.ecosystem  | sort_natural: "title" %}
-
-        {% for item in ecosystem %}
-          <div class="col-md-6 ecosystem-card-wrapper" data-categories="{{ item.category | join: "," }}">
-            <div class="card ecosystem-card">
-              <a href="{{ item.link }}" target="_blank">
-                <div class="card-body {{ item.logo-class }} {% if item.experimental %}experimental{% endif %}">
-                  <div class="ecosystem-card-title-container">
-                    <ul class="star-list">
-                      <li class="card-title">{{ item.title }}</li>
-                        <div class="icon-count-container">
-                          <li><img class="github-logo" src="/assets/images/logo-github.svg"></li>
-                          <li class="github-stars-count">27</li>
-                        </div>
-                    </ul>
-                      {% if item.experimental %}
-                        <div class="experimental-badge">
-                          Experimental
-                        </div>
-                      {% endif %}
+      {% include ecosystem_sort.html %}
+
+      <hr class="ecosystem-divider">
+
+      <div id="ecosystem-index-cards">
+        <div class="list row ecosystem-cards-wrapper cards-right">
+          {% assign ecosystem = site.ecosystem  | sort_natural: "title" %}
+
+          {% for item in ecosystem %}
+            <div class="col-md-6 ecosystem-card-wrapper" id="ecosystemCards" data-categories="{{ item.category | join: "," }}">
+              <div class="card ecosystem-card">
+                <a href="{{ item.link }}" target="_blank">
+                  <div class="card-body {{ item.logo-class }} {% if item.experimental %}experimental{% endif %}">
+                    <div class="ecosystem-card-title-container">
+                      <ul class="star-list">
+                        <li class="card-title">{{ item.title }}</li>
+                          <div class="icon-count-container">
+                            <li><img class="github-logo" src="/assets/images/logo-github.svg"></li>
+                            <li class="github-stars-count">27</li>
+                          </div>
+                      </ul>
+                        {% if item.experimental %}
+                          <div class="experimental-badge">
+                            Experimental
+                          </div>
+                        {% endif %}
+                    </div>
+                    <p class="card-summary">{{ item.summary }}</p>
                   </div>
-                  <p class="card-summary">{{ item.summary }}</p>
-                </div>
-              </a>
+                </a>
+              </div>
             </div>
-          </div>
-        {% endfor %}
+          {% endfor %}
+        </div>
       </div>
 
       <div class="join-notice">
@@ -146,4 +152,7 @@ <h1>
     $(".nav-link[data-category=" + category + "]").addClass('selected');
   }
 </script>
+
 <script 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 list-id="ecosystem-index-cards" display-count="100" pagination="false" src="{{ site.baseurl }}/assets/filter-hub-tags.js"></script>