Skip to content

Commit 92c139d

Browse files
ciemborciembor
committed
Paginate complete ranking lists
1 parent d0e2e40 commit 92c139d

37 files changed

Lines changed: 595 additions & 252 deletions

‎app/public/css/components/rankings.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,28 @@
355355
color: var(--accent-strong);
356356
}
357357

358+
.ranking-pagination {
359+
display: grid;
360+
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
361+
align-items: center;
362+
gap: 16px;
363+
margin-top: 24px;
364+
}
365+
366+
.ranking-pagination__side {
367+
min-width: 0;
368+
}
369+
370+
.ranking-pagination__side--next {
371+
text-align: right;
372+
}
373+
374+
.ranking-pagination__status {
375+
color: var(--muted);
376+
font-size: 0.9rem;
377+
white-space: nowrap;
378+
}
379+
358380
.second_place {
359381
background: linear-gradient(130deg, #bbb 0%, #eee 50%);
360382
}

‎app/views/languages/ranking_detail.erb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<section class="ranking-band">
2525
<div class="content">
2626
<p><a class="muted-link muted-link--standalone" href="<%= h app_path(language_index_path) %>"><%= h t('languages.back') %></a></p>
27-
<%= erb :"languages/ranking_table", locals: { heading_id: "language-ranking-detail-#{@language_metric_slug}", title: language_ranking_title(@language_metric_slug), rows: @language_ranking, metric: @language_metric.to_sym, metric_label: language_metric_label(@language_metric) } %>
27+
<%= erb :"languages/ranking_table", locals: { heading_id: "language-ranking-detail-#{@language_metric_slug}", title: language_ranking_title(@language_metric_slug), rows: @language_ranking, rank_offset: @ranking_pagination.offset, metric: @language_metric.to_sym, metric_label: language_metric_label(@language_metric) } %>
28+
<%= erb :"shared/ranking_pagination", locals: { pagination: @ranking_pagination, path: @pagination_path } %>
2829
</div>
2930
</section>

‎app/views/languages/ranking_table.erb‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<article class="ranking-table" aria-labelledby="<%= h heading_id %>">
22
<h3 id="<%= h heading_id %>"><%= h title %></h3>
33
<% if rows.any? %>
4+
<% ranking_offset = defined?(rank_offset) ? rank_offset : 0 %>
45
<ol class="ranking-list" aria-labelledby="<%= h heading_id %>">
56
<% rows.each_with_index do |row, index| %>
6-
<% place_class = { 1 => "first_place", 2 => "second_place", 3 => "third_place" }[index + 1] %>
7+
<% rank = ranking_offset + index + 1 %>
8+
<% place_class = { 1 => "first_place", 2 => "second_place", 3 => "third_place" }[rank] %>
79
<li class="ranking-list__item<% if place_class %> <%= h place_class %><% end %>">
8-
<span class="rank-cell rank-mark"><%= index + 1 %></span>
10+
<span class="rank-cell rank-mark"><%= rank %></span>
911
<div class="ranking-list__body">
1012
<div class="ranking-list__title">
1113
<a class="primary-link" href="<%= h app_path(language_path(row.fetch(:language))) %>"><%= h row.fetch(:language) %></a>
@@ -26,6 +28,6 @@
2628
<p class="ranking-list__empty"><%= h t('rankings.empty.records') %></p>
2729
<% end %>
2830
<% if defined?(top_path) && top_path %>
29-
<a class="ranking-action" href="<%= h app_path(top_path) %>"><%= h t('rankings.see_top_100') %></a>
31+
<a class="ranking-action" href="<%= h app_path(top_path) %>"><%= h t('rankings.see_more') %></a>
3032
<% end %>
3133
</article>

‎app/views/languages/repository_ranking_detail.erb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<section class="ranking-band">
2525
<div class="content">
2626
<p><a class="muted-link muted-link--standalone" href="<%= h app_path(language_path(@language)) %>"><%= h t('languages.back_to_language', language: @language) %></a></p>
27-
<%= erb :"languages/repository_ranking_table", locals: { heading_id: "language-repository-ranking-detail-#{language_repository_kind_key(@language_repository_kind)}-#{@language_repository_metric_slug}", title: language_repository_ranking_title(@language, @language_repository_kind, @language_repository_metric_slug), rows: @language_repository_ranking, metric: @language_repository_metric.to_sym, metric_label: language_metric_label(@language_repository_metric) } %>
27+
<%= erb :"languages/repository_ranking_table", locals: { heading_id: "language-repository-ranking-detail-#{language_repository_kind_key(@language_repository_kind)}-#{@language_repository_metric_slug}", title: language_repository_ranking_title(@language, @language_repository_kind, @language_repository_metric_slug), rows: @language_repository_ranking, rank_offset: @ranking_pagination.offset, metric: @language_repository_metric.to_sym, metric_label: language_metric_label(@language_repository_metric) } %>
28+
<%= erb :"shared/ranking_pagination", locals: { pagination: @ranking_pagination, path: @pagination_path } %>
2829
</div>
2930
</section>

‎app/views/languages/repository_ranking_table.erb‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<article class="ranking-table" aria-labelledby="<%= h heading_id %>">
22
<h3 id="<%= h heading_id %>"><%= h title %></h3>
33
<% if rows.any? %>
4+
<% ranking_offset = defined?(rank_offset) ? rank_offset : 0 %>
45
<ol class="ranking-list" aria-labelledby="<%= h heading_id %>">
56
<% rows.each_with_index do |row, index| %>
6-
<% place_class = { 1 => "first_place", 2 => "second_place", 3 => "third_place" }[index + 1] %>
7+
<% rank = ranking_offset + index + 1 %>
8+
<% place_class = { 1 => "first_place", 2 => "second_place", 3 => "third_place" }[rank] %>
79
<% repository = { platform: row.fetch(:platform), full_name: row.fetch(:full_name) } %>
810
<% path = row.fetch(:repository_kind) == "organization" ? organization_repository_profile_path(repository) : repository_profile_path(repository) %>
911
<% owner = { platform: row.fetch(:platform), login: row.fetch(:owner_login) } %>
1012
<% owner_path = row.fetch(:repository_kind) == "organization" ? organization_profile_path(owner) : user_profile_path(owner) %>
1113
<li class="ranking-list__item<% if place_class %> <%= h place_class %><% end %>">
12-
<span class="rank-cell rank-mark"><%= index + 1 %></span>
14+
<span class="rank-cell rank-mark"><%= rank %></span>
1315
<div class="ranking-list__body">
1416
<div class="ranking-list__title">
1517
<a class="primary-link" href="<%= h app_path(path) %>"><%= h repository_display_name(row) %></a>
@@ -39,6 +41,6 @@
3941
<p class="ranking-list__empty"><%= h t('rankings.empty.records') %></p>
4042
<% end %>
4143
<% if defined?(top_path) && top_path %>
42-
<a class="ranking-action" href="<%= h app_path(top_path) %>"><%= h t('rankings.see_top_100') %></a>
44+
<a class="ranking-action" href="<%= h app_path(top_path) %>"><%= h t('rankings.see_more') %></a>
4345
<% end %>
4446
</article>

‎app/views/packages/ranking_detail.erb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
<section class="ranking-band">
2626
<div class="content">
2727
<p><a class="muted-link muted-link--standalone" href="<%= h app_path(package_ecosystem_path(@package_ecosystem)) %>"><%= h t('rankings.back') %></a></p>
28-
<%= erb :"packages/ranking_table", locals: { heading_id: "package-ranking-detail-#{@package_metric_slug}", title: title, rows: @package_ranking, metric: @package_metric.to_sym, metric_label: package_metric_label(@package_metric, ecosystem: @package_ecosystem) } %>
28+
<%= erb :"packages/ranking_table", locals: { heading_id: "package-ranking-detail-#{@package_metric_slug}", title: title, rows: @package_ranking, rank_offset: @ranking_pagination.offset, metric: @package_metric.to_sym, metric_label: package_metric_label(@package_metric, ecosystem: @package_ecosystem) } %>
29+
<%= erb :"shared/ranking_pagination", locals: { pagination: @ranking_pagination, path: @pagination_path } %>
2930
</div>
3031
</section>

‎app/views/packages/ranking_table.erb‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<article class="ranking-table" aria-labelledby="<%= h heading_id %>">
22
<h3 id="<%= h heading_id %>"><%= h title %></h3>
33
<% if rows.any? %>
4+
<% ranking_offset = defined?(rank_offset) ? rank_offset : 0 %>
45
<ol class="ranking-list" aria-labelledby="<%= h heading_id %>">
56
<% rows.each_with_index do |row, index| %>
6-
<% place_class = { 1 => "first_place", 2 => "second_place", 3 => "third_place" }[index + 1] %>
7+
<% rank = ranking_offset + index + 1 %>
8+
<% place_class = { 1 => "first_place", 2 => "second_place", 3 => "third_place" }[rank] %>
79
<% registry_url = safe_external_url(row[:registry_url]) %>
810
<% repository_profile_url = package_repository_profile_link(row) %>
911
<% repository_source_url = package_repository_link(row) %>
1012
<% owner_profile_url = package_owner_profile_link(row) %>
1113
<% owner_login = package_owner_login(row) %>
1214
<li class="ranking-list__item<% if place_class %> <%= h place_class %><% end %>">
13-
<span class="rank-cell rank-mark"><%= index + 1 %></span>
15+
<span class="rank-cell rank-mark"><%= rank %></span>
1416
<div class="ranking-list__body">
1517
<div class="ranking-list__title">
1618
<% if repository_profile_url %>
@@ -52,6 +54,6 @@
5254
<p class="ranking-list__empty"><%= h t('rankings.empty.records') %></p>
5355
<% end %>
5456
<% if defined?(top_path) && top_path %>
55-
<a class="ranking-action" href="<%= h app_path(top_path) %>"><%= h t('rankings.see_top_100') %></a>
57+
<a class="ranking-action" href="<%= h app_path(top_path) %>"><%= h t('rankings.see_more') %></a>
5658
<% end %>
5759
</article>

‎app/views/rankings/detail.erb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<section class="ranking-band">
2525
<div class="content">
2626
<p><a class="muted-link muted-link--standalone" href="<%= h app_path(scope_path(@scope)) %>"><%= h t('rankings.back') %></a></p>
27-
<%= erb :"rankings/table", locals: { kind: @kind, heading_id: "ranking-detail-#{@kind}", title: ranking_title(@kind, @metric), rows: @ranking, metric: ranking_metric_column(@kind, @metric), metric_label: ranking_metric_label(@kind, @metric) } %>
27+
<%= erb :"rankings/table", locals: { kind: @kind, heading_id: "ranking-detail-#{@kind}", title: ranking_title(@kind, @metric), rows: @ranking, rank_offset: @ranking_pagination.offset, metric: ranking_metric_column(@kind, @metric), metric_label: ranking_metric_label(@kind, @metric) } %>
28+
<%= erb :"shared/ranking_pagination", locals: { pagination: @ranking_pagination, path: @pagination_path } %>
2829
</div>
2930
</section>

‎app/views/rankings/table.erb‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<article class="ranking-table" aria-labelledby="<%= h heading_id %>">
22
<h3 id="<%= h heading_id %>"><%= h title %></h3>
33
<% if rows.any? %>
4+
<% ranking_offset = defined?(rank_offset) ? rank_offset : 0 %>
45
<ol class="ranking-list" aria-labelledby="<%= h heading_id %>">
56
<% rows.each_with_index do |row, index| %>
6-
<% place_class = { 1 => "first_place", 2 => "second_place", 3 => "third_place" }[index + 1] %>
7+
<% rank = ranking_offset + index + 1 %>
8+
<% place_class = { 1 => "first_place", 2 => "second_place", 3 => "third_place" }[rank] %>
79
<li class="ranking-list__item<% if place_class %> <%= h place_class %><% end %>">
8-
<span class="rank-cell rank-mark"><%= index + 1 %></span>
10+
<span class="rank-cell rank-mark"><%= rank %></span>
911
<div class="ranking-list__body">
1012
<div class="ranking-list__title">
1113
<%= erb :"shared/platform_icon", locals: { platform: row.fetch(:platform, "github") } %>
@@ -71,6 +73,6 @@
7173
<p class="ranking-list__empty"><%= h t('rankings.empty.records') %></p>
7274
<% end %>
7375
<% if defined?(top_path) && top_path %>
74-
<a class="ranking-action" href="<%= h app_path(top_path) %>"><%= h t('rankings.see_top_100') %></a>
76+
<a class="ranking-action" href="<%= h app_path(top_path) %>"><%= h t('rankings.see_more') %></a>
7577
<% end %>
7678
</article>

‎app/views/shared/ranking_pagination.erb‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<% if pagination.previous_page || pagination.next_page %>
2+
<nav class="ranking-pagination" aria-label="<%= h t('rankings.pagination.label') %>">
3+
<span class="ranking-pagination__side">
4+
<% if pagination.previous_page %>
5+
<a class="ranking-action" href="<%= h app_path(pagination.previous_page == 1 ? path : "#{path}?page=#{pagination.previous_page}") %>"><%= h t('rankings.pagination.previous') %></a>
6+
<% end %>
7+
</span>
8+
<span class="ranking-pagination__status"><%= h t('rankings.pagination.page', page: pagination.number) %></span>
9+
<span class="ranking-pagination__side ranking-pagination__side--next">
10+
<% if pagination.next_page %>
11+
<a class="ranking-action" href="<%= h app_path("#{path}?page=#{pagination.next_page}") %>"><%= h t('rankings.pagination.next') %></a>
12+
<% end %>
13+
</span>
14+
</nav>
15+
<% end %>

0 commit comments

Comments
 (0)