Skip to content

Commit

Permalink
Move pagination to partial, show at bottom and top of page, resolves #74
Browse files Browse the repository at this point in the history
  • Loading branch information
carolinaisslaying committed Mar 23, 2024
1 parent 95663aa commit b8e2b13
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 356 deletions.
71 changes: 71 additions & 0 deletions views/partials/pagination.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<%- include("./isDefaultCSS/pagination.ejs") %>
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<a class="pagination-previous" <% if (Number(req.query.page) <= 1) { %>disabled<% } else { %>href="<%= linkPrefix %>/<%= linkLocation %><%= pageParam %><%= Number(req.query.page) - 1 %>"<% } %>><%= __("common.pagination.previous") %></a>
<a class="pagination-next" <% if (Number(req.query.page) >= pages) { %>disabled<% } else { %>href="<%= linkPrefix %>/<%= linkLocation %><%= pageParam %><%= Number(req.query.page) + 1 %>"<% } %>><%= __("common.pagination.next") %></a>
<ul class="pagination-list">
<% if (Number(req.query.page) <= 3) { %>
<li>
<% if (Number(req.query.page) === 1) { %>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "1") %>" aria-current="page">1</a>
<% } else { %>
<a class="pagination-link" href="<%= linkPrefix %>/<%= linkLocation %><%= pageParam %>1" aria-label="<%= __("common.pagination.gotoPage", "1") %>">1</a>
<% } %>
</li>
<% if (2 <= pages) { %>
<% if (Number(req.query.page) === 2) { %>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "2") %>" aria-current="page">2</a>
<% } else { %>
<a class="pagination-link" href="<%= linkPrefix %>/<%= linkLocation %><%= pageParam %>2" aria-label="<%= __("common.pagination.gotoPage", "2") %>">2</a>
<% } %>
<% } %>
<% if (3 <= pages) { %>
<li>
<% if (Number(req.query.page) === 3) { %>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "3") %>" aria-current="page">3</a>
<% } else { %>
<a class="pagination-link" href="<%= linkPrefix %>/<%= linkLocation %><%= pageParam %>3" aria-label="<%= __("common.pagination.gotoPage", "3") %>">3</a>
<% } %>
</li>
<% } %>
<% if (pages > 3) { %>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" href="<%= linkPrefix %>/<%= linkLocation %><%= pageParam %><%= pages %>" aria-label="<%= __("common.pagination.gotoPage", pages) %>"><%= pages %></a>
</li>
<% } %>
<% } else { %>
<li>
<a class="pagination-link" href="<%= linkPrefix %>/<%= linkLocation %><%= pageParam %>1" aria-label="<%= __("common.pagination.gotoPage", "1") %>">1</a>
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<% if (Number(req.query.page) === pages) { %>
<li>
<a class="pagination-link" href="<%= linkPrefix %>/<%= linkLocation %><%= pageParam %><%= Number(req.query.page) - 2 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) - 2) %>"><%= Number(req.query.page) - 2 %></a>
</li>
<% } %>
<li>
<a class="pagination-link" href="<%= linkPrefix %>/<%= linkLocation %><%= pageParam %><%= Number(req.query.page) - 1 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) - 1) %>"><%= Number(req.query.page) - 1 %></a>
</li>
<li>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", req.query.page) %>" aria-current="page"><%= req.query.page %></a>
</li>
<% if (Number(req.query.page) !== pages) { %>
<li>
<a class="pagination-link" href="<%= linkPrefix %>/<%= linkLocation %><%= pageParam %><%= Number(req.query.page) + 1 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) + 1) %>"><%= Number(req.query.page) + 1 %></a>
</li>
<% } %>
<% if (Number(req.query.page <= (pages - 2))) { %>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" href="<%= linkPrefix %>/<%= linkLocation %><%= pageParam %><%= pages %>" aria-label="<%= __("common.pagination.gotoPage", pages) %>"><%= pages %></a>
</li>
<% } %>
<% } %>
</ul>
</nav>
75 changes: 3 additions & 72 deletions views/templates/bots/index.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
<%- include("../../partials/nav.ejs") %>

<%- include("../../partials/isDefaultCSS/button.ejs") %>
<%- include("../../partials/isDefaultCSS/pagination.ejs") %>
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
Expand Down Expand Up @@ -101,76 +100,7 @@
</section>
<div class="container is-fluid">
<div class="section is-fluid">
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<a class="pagination-previous" <% if (Number(req.query.page) <= 1) { %>disabled<% } else { %>href="<%= linkPrefix %>/bots<%= pageParam %><%= Number(req.query.page) - 1 %>"<% } %>><%= __("common.pagination.previous") %></a>
<a class="pagination-next" <% if (Number(req.query.page) >= pages) { %>disabled<% } else { %>href="<%= linkPrefix %>/bots<%= pageParam %><%= Number(req.query.page) + 1 %>"<% } %>><%= __("common.pagination.next") %></a>
<ul class="pagination-list">
<% if (Number(req.query.page) <= 3) { %>
<li>
<% if (Number(req.query.page) === 1) { %>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "1") %>" aria-current="page">1</a>
<% } else { %>
<a class="pagination-link" href="<%= linkPrefix %>/bots<%= pageParam %>1" aria-label="<%= __("common.pagination.gotoPage", "1") %>">1</a>
<% } %>
</li>
<% if (2 <= pages) { %>
<% if (Number(req.query.page) === 2) { %>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "2") %>" aria-current="page">2</a>
<% } else { %>
<a class="pagination-link" href="<%= linkPrefix %>/bots<%= pageParam %>2" aria-label="<%= __("common.pagination.gotoPage", "2") %>">2</a>
<% } %>
<% } %>
<% if (3 <= pages) { %>
<li>
<% if (Number(req.query.page) === 3) { %>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "3") %>" aria-current="page">3</a>
<% } else { %>
<a class="pagination-link" href="<%= linkPrefix %>/bots<%= pageParam %>3" aria-label="<%= __("common.pagination.gotoPage", "3") %>">3</a>
<% } %>
</li>
<% } %>
<% if (pages > 3) { %>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" href="<%= linkPrefix %>/bots<%= pageParam %><%= pages %>" aria-label="<%= __("common.pagination.gotoPage", pages) %>"><%= pages %></a>
</li>
<% } %>
<% } else { %>
<li>
<a class="pagination-link" href="<%= linkPrefix %>/bots<%= pageParam %>1" aria-label="<%= __("common.pagination.gotoPage", "1") %>">1</a>
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<% if (Number(req.query.page) === pages) { %>
<li>
<a class="pagination-link" href="<%= linkPrefix %>/bots<%= pageParam %><%= Number(req.query.page) - 2 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) - 2) %>"><%= Number(req.query.page) - 2 %></a>
</li>
<% } %>
<li>
<a class="pagination-link" href="<%= linkPrefix %>/bots<%= pageParam %><%= Number(req.query.page) - 1 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) - 1) %>"><%= Number(req.query.page) - 1 %></a>
</li>
<li>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", req.query.page) %>" aria-current="page"><%= req.query.page %></a>
</li>
<% if (Number(req.query.page) !== pages) { %>
<li>
<a class="pagination-link" href="<%= linkPrefix %>/bots<%= pageParam %><%= Number(req.query.page) + 1 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) + 1) %>"><%= Number(req.query.page) + 1 %></a>
</li>
<% } %>
<% if (Number(req.query.page <= (pages - 2))) { %>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" href="<%= linkPrefix %>/bots<%= pageParam %><%= pages %>" aria-label="<%= __("common.pagination.gotoPage", pages) %>"><%= pages %></a>
</li>
<% } %>
<% } %>
</ul>
</nav>
<%- include("../../partials/pagination.ejs", { linkLocation: "bots" }) %>
<br />
<div class="columns is-multiline is-centered">
<% if (!bots || bots.length === 0) { %>
Expand All @@ -183,7 +113,8 @@
<% } %>
<% } %>
</div>

<br />
<%- include("../../partials/pagination.ejs", { linkLocation: "bots" }) %>
</div>
</div>
<%- include("../../partials/footer.ejs") %>
74 changes: 3 additions & 71 deletions views/templates/serverTemplates/index.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
<%- include("../../partials/nav.ejs") %>

<%- include("../../partials/isDefaultCSS/button.ejs") %>
<%- include("../../partials/isDefaultCSS/pagination.ejs") %>
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
Expand All @@ -48,76 +47,7 @@
</section>
<div class="container is-fluid">
<div class="section is-fluid">
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<a class="pagination-previous" <% if (Number(req.query.page) <= 1) { %>disabled<% } else { %>href="/templates?page=<%= Number(req.query.page) - 1 %>"<% } %>><%= __("common.pagination.previous") %></a>
<a class="pagination-next" <% if (Number(req.query.page) >= pages) { %>disabled<% } else { %>href="/templates?page=<%= Number(req.query.page) + 1 %>"<% } %>><%= __("common.pagination.next") %></a>
<ul class="pagination-list">
<% if (Number(req.query.page) <= 3) { %>
<li>
<% if (Number(req.query.page) === 1) { %>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "1") %>" aria-current="page">1</a>
<% } else { %>
<a class="pagination-link" href="/templates?page=1" aria-label="<%= __("common.pagination.gotoPage", "1") %>">1</a>
<% } %>
</li>
<% if (2 <= pages) { %>
<% if (Number(req.query.page) === 2) { %>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "2") %>" aria-current="page">2</a>
<% } else { %>
<a class="pagination-link" href="/templates?page=2" aria-label="<%= __("common.pagination.gotoPage", "2") %>">2</a>
<% } %>
<% } %>
<% if (3 <= pages) { %>
<li>
<% if (Number(req.query.page) === 3) { %>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "3") %>" aria-current="page">3</a>
<% } else { %>
<a class="pagination-link" href="/templates?page=3" aria-label="<%= __("common.pagination.gotoPage", "3") %>">3</a>
<% } %>
</li>
<% } %>
<% if (pages > 3) { %>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" href="/templates?page=<%= pages %>" aria-label="<%= __("common.pagination.gotoPage", pages) %>"><%= pages %></a>
</li>
<% } %>
<% } else { %>
<li>
<a class="pagination-link" href="/templates?page=1" aria-label="<%= __("common.pagination.gotoPage", "1") %>">1</a>
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<% if (Number(req.query.page) === pages) { %>
<li>
<a class="pagination-link" href="/templates?page=<%= Number(req.query.page) - 2 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) - 2) %>"><%= Number(req.query.page) - 2 %></a>
</li>
<% } %>
<li>
<a class="pagination-link" href="/templates?page=<%= Number(req.query.page) - 1 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) - 1) %>"><%= Number(req.query.page) - 1 %></a>
</li>
<li>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", req.query.page) %>" aria-current="page"><%= req.query.page %></a>
</li>
<% if (Number(req.query.page) !== pages) { %>
<li>
<a class="pagination-link" href="/templates?page=<%= Number(req.query.page) + 1 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) + 1) %>"><%= Number(req.query.page) + 1 %></a>
</li>
<% } %>
<% if (Number(req.query.page <= (pages - 2))) { %>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" href="/templates?page=<%= pages %>" aria-label="<%= __("common.pagination.gotoPage", pages) %>"><%= pages %></a>
</li>
<% } %>
<% } %>
</ul>
</nav>
<%- include("../../partials/pagination.ejs", { linkLocation: "templates" }) %>
<br />
<div class="columns is-multiline is-centered">
<% if (!templates || templates.length === 0) { %>
Expand All @@ -130,6 +60,8 @@
<% } %>
<% } %>
</div>
<br />
<%- include("../../partials/pagination.ejs", { linkLocation: "templates" }) %>
</div>
</div>
<%- include("../../partials/footer.ejs") %>
Loading

0 comments on commit b8e2b13

Please sign in to comment.