96 lines
3.2 KiB
Plaintext
96 lines
3.2 KiB
Plaintext
<main class="layout-maxed collection" id="gallery">
|
|
<div class="grid gap-5 grid-cols-1 md:grid-cols-4 list hover">
|
|
<%
|
|
for ( let i = 0 ; i < page.images.length ; i += 1 ) {
|
|
const image = page.images[i];
|
|
%>
|
|
<div
|
|
class="item link imagesPreview"
|
|
data-toggle="modal"
|
|
id="item-<%= i %>"
|
|
data-original="<%= image.originalFile %>"
|
|
data-medium="<%= image.mediumFile %>"
|
|
data-small="<%= image.smallFile %>"
|
|
onclick="displayImageDetails('<%= i %>')"
|
|
>
|
|
<div>
|
|
<img src="<%= image.smallFile %>" alt="Image <%= i %>">
|
|
</div>
|
|
<div>
|
|
<small>
|
|
Le <%= DateTime.fromMillis(image.time).setLocale('fr').toFormat('D à T') %>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<%
|
|
}
|
|
%>
|
|
</div>
|
|
|
|
<nav class="pagination" aria-label="Pagination">
|
|
<ul class="pagination-list">
|
|
<% if ( page.currentPage > 1 ) { %>
|
|
<li>
|
|
<a class="pagination-link" href="?page=1" aria-label="Aller à la première page">
|
|
«
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="pagination-link" href="?page=<%= page.currentPage - 1 %>" aria-label="Aller à la page précédente">
|
|
‹
|
|
</a>
|
|
</li>
|
|
<% } %>
|
|
<% for ( let i = 1 ; i <= page.totalPages ; i += 1 ) { %>
|
|
<% if (i < 2 || i > (page.totalPages - 1) || (Number(page.currentPage) - 1) <= i && Number(page.currentPage) + 1 >= i) { %>
|
|
<li>
|
|
<a class="pagination-link <%= i === page.currentPage ? 'is-current' : '' %>" href="?page=<%= i %>">
|
|
<%= i %>
|
|
</a>
|
|
</li>
|
|
<% } %>
|
|
<% if ((Number(page.currentPage) - 3 === i && Number(page.currentPage) - 2 > 1) || (Number(page.currentPage) + 2 === i && Number(page.currentPage) + 2 < page.totalPages - 1)) { %>
|
|
<li>
|
|
<a class="pagination-link is-disabled">…</a>
|
|
</li>
|
|
<% } %>
|
|
<% } %>
|
|
|
|
<% if ( page.currentPage < page.totalPages ) { %>
|
|
<li>
|
|
<a class="pagination-link" href="?page=<%= page.currentPage + 1 %>" aria-label="Aller à la page suivante">
|
|
›
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="pagination-link" href="?page=<%= page.totalPages %>" aria-label="Aller à la dernière page">
|
|
»
|
|
</a>
|
|
</li>
|
|
<% } %>
|
|
</ul>
|
|
</nav>
|
|
</main>
|
|
|
|
<div class="modal">
|
|
<div class="modal-background" onclick="closeModale()"></div>
|
|
<div class="modal-card">
|
|
<header>
|
|
<div>Détails d'une image</div>
|
|
<button aria-label="Fermer" class="close" onclick="closeModale()"></button>
|
|
</header>
|
|
<div class="body">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
|
|
<div class="image-preview">
|
|
<img src="/img/logo.png" id="previewImage" alt="Image">
|
|
</div>
|
|
<div>
|
|
<%- include('../partials/details', {file: {}, index: 0, hideShortUrl: true}) %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<button class="button is-primary" onclick="closeModale()">Fermer</button>
|
|
</footer>
|
|
</div>
|
|
</div> |