Skip to content

Commit 40b5470

Browse files
Sandeshshiftkey
Sandesh
authored and
shiftkey
committed
Limited the visible count of projects on main webpage and added see more projects button as well
1 parent a0eab18 commit 40b5470

File tree

2 files changed

+171
-131
lines changed

2 files changed

+171
-131
lines changed

‎_includes/scripts.html‎

Lines changed: 118 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,11 @@
3030
data-placeholder="Select a project..."
3131
>
3232
<% _.each(names, function(entry, key){ %>
33-
<option value="<%-key%>"><%- entry.name%></option>
33+
<option value="<%-key%>"><%- entry.name%></option>
3434
<% }) %>
3535
</select>
3636
</div>
37+
3738
<div class="filters-panel cf">
3839
<label class="filter-label" for="label">Filter by label: </label>
3940
<select
@@ -43,10 +44,11 @@
4344
data-placeholder="Select a label..."
4445
>
4546
<% _.each(labels, function(entry, key){ %>
46-
<option value="<%-key%>"><%- entry.name%></option>
47+
<option value="<%-key%>"><%- entry.name%></option>
4748
<% }) %>
4849
</select>
4950
</div>
51+
5052
<div class="filters-panel cf">
5153
<label class="filter-label" for="tag">Filter by tags: </label>
5254
<select
@@ -56,118 +58,146 @@
5658
data-placeholder="Select a tag..."
5759
>
5860
<% _.each(tags, function(entry, key){ %>
59-
<option value="<%-entry.name%>">
60-
<%- entry.name%> (<%-entry.frequency%>)
61-
</option>
61+
<option value="<%-entry.name%>">
62+
<%- entry.name%> (<%-entry.frequency%>)
63+
</option>
6264
<% }) %>
6365
</select>
6466
</div>
67+
6568
<div class="filters-panel cf">
6669
<label class="filter-label">Popular tags:</label>
6770
<ul class="popular-tags">
6871
<% _.each(popularTags, function(entry, key){ %>
69-
<li>
70-
<a title="Popular Tag: <%-entry.name%>" tabindex="0"
71-
><%-entry.name%>
72-
<span class="popular-tags__frequency"
73-
>(<%-entry.frequency%>)</span
74-
></a
75-
>
76-
</li>
72+
<li>
73+
<a title="Popular Tag: <%-entry.name%>" tabindex="0">
74+
<%-entry.name%>
75+
<span class="popular-tags__frequency">
76+
(<%-entry.frequency%>)
77+
</span>
78+
</a>
79+
</li>
7780
<% }) %>
7881
</ul>
7982
</div>
8083
</menu>
84+
8185
<div class="projects">
82-
<% let count=0 %> <% _.each(projects, function(project) { %> <%
83-
count=count+1%>
84-
<div class="data-box" class="<% if ( project.stats ) { %>counted<% } %>">
85-
<div>
86+
<% let count = 0 %>
87+
<% _.each(projects, function(project, index) { %>
88+
<% count = count + 1 %>
89+
<div
90+
class="data-box project-card <%= index >= 9 ? 'hidden-project' : '' %> <% if (project.stats) { %>counted<% } %>"
91+
>
8692
<div>
87-
<div colspan="2" class="title">
88-
<span class="proj"
89-
><a href="<%-project.site %>" target="_blank"
90-
><%-project.name %></a
91-
></span
92-
>
93+
<div>
94+
<div colspan="2" class="title">
95+
<span class="proj">
96+
<a href="<%-project.site %>" target="_blank">
97+
<%-project.name %>
98+
</a>
99+
</span>
100+
</div>
93101
</div>
94-
</div>
95-
<div>
96-
<div class="details stats">
97-
<p class="label">
98-
<a
99-
href="<%- project.upforgrabs.link %>"
100-
title="View open issues for <%-project.name %>"
101-
target="_blank"
102-
tabindex="-1"
103-
>
104-
<%-project.upforgrabs.name %> <% if (project.stats &&
105-
project.stats['last-updated']) { const now=new Date(); let
106-
lastUpdated=new Date(project.stats['last-updated']); let
107-
since=relativeTime(now, lastUpdated); %>
108-
<span class="count" title="Last updated <%- since %>"
109-
><%-project.stats['issue-count']%></span
102+
<div>
103+
<div class="details stats">
104+
<p class="label">
105+
<a
106+
href="<%- project.upforgrabs.link %>"
107+
title="View open issues for <%-project.name %>"
108+
target="_blank"
109+
tabindex="-1"
110110
>
111-
<% } else if (project.stats) { %>
112-
<span class="count" title="No recent activity"
113-
><%-project.stats['issue-count']%></span
114-
>
115-
<% } %>
116-
</a>
117-
</p>
118-
<% if (project.stats) { %>
119-
<div class="fork-count" title="Number of forks">
120-
<svg
121-
aria-hidden="true"
122-
height="16"
123-
viewBox="0 0 16 16"
124-
version="1.1"
125-
width="16"
126-
data-view-component="true"
127-
class="fork-count-svg"
128-
>
129-
<path
130-
d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"
131-
></path>
132-
</svg>
133-
<%-project.stats['fork-count']%>
134-
<span class="tooltip">Forks</span>
111+
<%-project.upforgrabs.name %>
112+
<% if (project.stats && project.stats['last-updated']) {
113+
const now = new Date();
114+
let lastUpdated = new Date(project.stats['last-updated']);
115+
let since = relativeTime(now, lastUpdated); %>
116+
<span
117+
class="count"
118+
title="Last updated <%- since %>"
119+
>
120+
<%-project.stats['issue-count']%>
121+
</span>
122+
<% } else if (project.stats) { %>
123+
<span
124+
class="count"
125+
title="No recent activity"
126+
>
127+
<%-project.stats['issue-count']%>
128+
</span>
129+
<% } %>
130+
</a>
131+
</p>
132+
133+
<% if (project.stats) { %>
134+
<div class="fork-count" title="Number of forks">
135+
<svg
136+
aria-hidden="true"
137+
height="16"
138+
viewBox="0 0 16 16"
139+
version="1.1"
140+
width="16"
141+
data-view-component="true"
142+
class="fork-count-svg"
143+
>
144+
<path
145+
d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"
146+
></path>
147+
</svg>
148+
<%-project.stats['fork-count']%>
149+
<span class="tooltip">Forks</span>
150+
</div>
151+
<% } %>
152+
</div>
153+
154+
<div class="details">
155+
<% if (project.desc) { %>
156+
<span class="desc"><%=project.desc%></span>
157+
<% } %>
135158
</div>
136-
<% } %>
137-
</div>
138-
<div class="details">
139-
<% if (project.desc) { %>
140-
<span class="desc"> <%=project.desc%> </span>
141-
<% } %>
142159
</div>
143160
</div>
161+
162+
<div class="details-tags">
163+
<% if (project.tags) { %>
164+
<ul class="tags" aria-label="project tags">
165+
<% _.each(project.tags, function(tag, i) { %>
166+
<li>
167+
<a
168+
href="#/filters?tags=<%-encodeURIComponent(tag)%>"
169+
tabindex="-1"
170+
>
171+
<%-tag%>
172+
</a>
173+
</li>
174+
<% }) %>
175+
</ul>
176+
<% } %>
177+
</div>
144178
</div>
145-
<div class="details-tags">
146-
<% if (project.tags) { %>
147-
<ul class="tags" aria-label="project tags">
148-
<% _.each(project.tags, function(tag, i) { %>
149-
<li>
150-
<a href="#/filters?tags=<%-encodeURIComponent(tag)%>" tabindex="-1"
151-
><%-tag%></a
152-
>
153-
</li>
154-
<% }) %>
155-
</ul>
156-
<% } %>
157-
</div>
158-
</div>
159179
<% }) %>
160180
</div>
161-
<% if(count==0) { %>
162-
<p style="font-size: 1.5em;font-weight: 600;line-height: 30px;">
163-
No projects found with this description...
164-
</p>
165-
<p><%} %></p>
181+
182+
<% if (count == 0) { %>
183+
<p style="font-size: 1.5em; font-weight: 600; line-height: 30px;">
184+
No projects found with this description...
185+
</p>
186+
<% } else if (count > 9) { %>
187+
<div class="see-more-container">
188+
<button id="see-more-btn" class="see-more-btn">
189+
See More (<span id="remaining-count"><%= count - 9 %></span> more projects)
190+
</button>
191+
</div>
192+
<% } %>
193+
<p></p>
166194
</script>
195+
167196
<script
168197
src="{{ site.github.url }}javascripts/lib/require.js"
169198
data-main="javascripts/app"
170199
></script>
200+
171201
<!-- Google Analytics -->
172202
<script>
173203
(function (i, s, o, g, r, a, m) {

0 commit comments

Comments
 (0)