Skip to content

Commit 2770799

Browse files
author
Brandon Green
committed
Add sort to ecosystem
This commit adds sort to ecosystem
1 parent d8ac565 commit 2770799

File tree

4 files changed

+96
-27
lines changed

4 files changed

+96
-27
lines changed

‎_includes/ecosystem_sort.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<a id="dropdownSortLeft" data-toggle="dropdown" data-target="#dropdownSortMenuLeft" >
2+
Sort <img src="{{ site.baseurl }}/assets/images/filter-arrow.svg">
3+
</a>
4+
5+
<div class="dropdown-menu sort-menu" id="#dropdownSortMenuLeft">
6+
<div class="ecosystem-filter-menu">
7+
<ul>
8+
<li>
9+
<a class="ecosystem-filter" id="sortLowLeft">GitHub Stars - Lowest</a>
10+
</li>
11+
12+
<li>
13+
<a class="ecosystem-filter" id="sortHighLeft">GitHub Stars - Highest</a>
14+
</li>
15+
</ul>
16+
</div>
17+
</div>

‎_sass/ecosystem.scss

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -404,3 +404,45 @@
404404
}
405405
}
406406
}
407+
408+
.ecosystem-divider {
409+
position: relative;
410+
margin-bottom: 4rem;
411+
margin-top: 1.5rem;
412+
top: 3rem;
413+
}
414+
415+
.ecosystem #dropdownSort, #dropdownSortLeft {
416+
margin-left: 0;
417+
}
418+
.ecosystem-filter-menu {
419+
ul {
420+
list-style-type: none;
421+
padding-left: rem(20px);
422+
li {
423+
padding-right: rem(20px);
424+
word-break: break-all;
425+
426+
a {
427+
color: $mid_gray;
428+
&:hover {
429+
color: $orange;
430+
}
431+
}
432+
}
433+
}
434+
}
435+
436+
.ecosystem .ecosystem-filter {
437+
cursor: pointer;
438+
ul {
439+
list-style-type: none;
440+
}
441+
}
442+
443+
.ecosystem #dropdownFilter, #dropdownSort, #dropdownSortLeft {
444+
color: $mid_gray;
445+
cursor: pointer;
446+
z-index: 1;
447+
position: absolute;
448+
}

‎assets/main.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ $baseurl:"{{ site.baseurl }}";
1919
@import "main-content";
2020
@import "article";
2121
@import "get-started";
22-
@import "ecosystem";
2322
@import "features";
2423
@import "resources";
2524
@import "quick-start-module";
@@ -29,6 +28,7 @@ $baseurl:"{{ site.baseurl }}";
2928
@import "cookie-banner";
3029
@import "hub";
3130
@import "hub-search";
31+
@import "ecosystem";
3232
@import "compact";
3333
@import "mobile";
3434
@import "deep-learning";

‎ecosystem/ecosystem.html

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -62,34 +62,40 @@ <h1>
6262

6363
<!-- START CONTENT -->
6464

65-
<div class="row ecosystem-cards-wrapper">
66-
{% assign ecosystem = site.ecosystem | sort_natural: "title" %}
67-
68-
{% for item in ecosystem %}
69-
<div class="col-md-6 ecosystem-card-wrapper" data-categories="{{ item.category | join: "," }}">
70-
<div class="card ecosystem-card">
71-
<a href="{{ item.link }}" target="_blank">
72-
<div class="card-body {{ item.logo-class }} {% if item.experimental %}experimental{% endif %}">
73-
<div class="ecosystem-card-title-container">
74-
<ul class="star-list">
75-
<li class="card-title">{{ item.title }}</li>
76-
<div class="icon-count-container">
77-
<li><img class="github-logo" src="/assets/images/logo-github.svg"></li>
78-
<li class="github-stars-count">27</li>
79-
</div>
80-
</ul>
81-
{% if item.experimental %}
82-
<div class="experimental-badge">
83-
Experimental
84-
</div>
85-
{% endif %}
65+
{% include ecosystem_sort.html %}
66+
67+
<hr class="ecosystem-divider">
68+
69+
<div id="ecosystem-index-cards">
70+
<div class="list row ecosystem-cards-wrapper cards-right">
71+
{% assign ecosystem = site.ecosystem | sort_natural: "title" %}
72+
73+
{% for item in ecosystem %}
74+
<div class="col-md-6 ecosystem-card-wrapper" id="ecosystemCards" data-categories="{{ item.category | join: "," }}">
75+
<div class="card ecosystem-card">
76+
<a href="{{ item.link }}" target="_blank">
77+
<div class="card-body {{ item.logo-class }} {% if item.experimental %}experimental{% endif %}">
78+
<div class="ecosystem-card-title-container">
79+
<ul class="star-list">
80+
<li class="card-title">{{ item.title }}</li>
81+
<div class="icon-count-container">
82+
<li><img class="github-logo" src="/assets/images/logo-github.svg"></li>
83+
<li class="github-stars-count">27</li>
84+
</div>
85+
</ul>
86+
{% if item.experimental %}
87+
<div class="experimental-badge">
88+
Experimental
89+
</div>
90+
{% endif %}
91+
</div>
92+
<p class="card-summary">{{ item.summary }}</p>
8693
</div>
87-
<p class="card-summary">{{ item.summary }}</p>
88-
</div>
89-
</a>
94+
</a>
95+
</div>
9096
</div>
91-
</div>
92-
{% endfor %}
97+
{% endfor %}
98+
</div>
9399
</div>
94100

95101
<div class="join-notice">
@@ -146,4 +152,8 @@ <h1>
146152
$(".nav-link[data-category=" + category + "]").addClass('selected');
147153
}
148154
</script>
155+
149156
<script star-count-call-date="ecosystemStarCountCallDate" star-count-data="ecosystemStarCountData" src="{{ site.baseurl }}/assets/github-stars.js"></script>
157+
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
158+
<script list-id="ecosystem-index-cards" display-count="100" pagination="false" src="{{ site.baseurl }}/assets/filter-hub-tags.js"></script>
159+
<script src="{{ site.baseurl }}/assets/hub-sort.js"></script>

0 commit comments

Comments
 (0)