PonyMirrors/ponepaste
1
0
Fork 0
mirror of https://github.com/Neetpone/ponepaste.git synced 2025-03-12 14:40:09 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make pagination less weird.

Browse source
This commit is contained in:
Floorb 2022-04-18 20:48:29 -04:00
parent 5981f6d914
commit 72747dd992
2 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
js/data_tables.js
View file

@ -26,8 +26,8 @@ class SimplePaginator {
} }
/* First and last page the main paginator will show */ /* First and last page the main paginator will show */
const firstPageShow = (currentPage - firstPage) < numPagesToShow ? firstPage : ((currentPage - numPagesToShow < 0) ? currentPage : currentPage - numPagesToShow); const firstPageShow = (currentPage - numPagesToShow) < firstPage ? firstPage : (currentPage - numPagesToShow);
const lastPageShow = (firstPageShow + numPagesToShow) > lastPage ? lastPage : (firstPageShow + numPagesToShow + numPagesToShow); const lastPageShow = (currentPage + numPagesToShow) > lastPage ? lastPage : (currentPage + numPagesToShow);
/* Whether to show the first and last pages in existence at the ends of the paginator */ /* Whether to show the first and last pages in existence at the ends of the paginator */
const showFirstPage = (Math.abs(firstPage - currentPage)) > (numPagesToShow); const showFirstPage = (Math.abs(firstPage - currentPage)) > (numPagesToShow);
@ -38,13 +38,13 @@ class SimplePaginator {
/* Previous button */ /* Previous button */
this.element.appendChild(makeEl( this.element.appendChild(makeEl(
`<a class="paginator__button previous ${prevButtonDisabled}" data-page="${currentPage - 1}">Previous</a>` `<button class="paginator__button previous" ${prevButtonDisabled} data-page="${currentPage - 1}">Previous</button>`
)); ));
/* First page button */ /* First page button */
if (showFirstPage) { if (showFirstPage) {
this.element.appendChild(makeEl( this.element.appendChild(makeEl(
`<a class="paginator__button" data-page="${firstPage}">${firstPage}</a>` `<button class="paginator__button" data-page="${firstPage}">${firstPage}</button>`
)); ));
this.element.appendChild(makeEl(`<span class="ellipsis">…</span>`)); this.element.appendChild(makeEl(`<span class="ellipsis">…</span>`));
} }
@ -53,7 +53,7 @@ class SimplePaginator {
for (let i = firstPageShow; i <= lastPageShow; i++) { for (let i = firstPageShow; i <= lastPageShow; i++) {
const selected = (i === currentPage ? 'paginator__button--selected' : ''); const selected = (i === currentPage ? 'paginator__button--selected' : '');
this.element.appendChild(makeEl( this.element.appendChild(makeEl(
`<a class="paginator__button ${selected}" data-page="${i}">${i}</a>` `<button class="paginator__button ${selected}" data-page="${i}">${i}</button>`
)); ));
} }
@ -61,14 +61,14 @@ class SimplePaginator {
if (showLastPage) { if (showLastPage) {
this.element.appendChild(makeEl(`<span class="ellipsis">…</span>`)); this.element.appendChild(makeEl(`<span class="ellipsis">…</span>`));
this.element.appendChild(makeEl( this.element.appendChild(makeEl(
`<a class="paginator__button" data-page="${lastPage}">${lastPage}</a>` `<button class="paginator__button" data-page="${lastPage}">${lastPage}</button>`
)); ));
} }
const nextButtonDisabled = currentPage === lastPage ? 'disabled' : '' const nextButtonDisabled = currentPage === lastPage ? 'disabled' : ''
/* Next button */ /* Next button */
this.element.appendChild(makeEl( this.element.appendChild(makeEl(
`<a class="paginator__button next ${nextButtonDisabled}" data-page="${currentPage + 1}">Next</a>` `<button class="paginator__button next" ${nextButtonDisabled} data-page="${currentPage + 1}">Next</button>`
)); ));
} }
} }

4
theme/bulma/css/paste.css
View file

@ -205,6 +205,10 @@ button.button--no-style {
background-color: #ddd; background-color: #ddd;
} }
.paginator__button:disabled {
cursor: not-allowed;
}
.table_filterer { .table_filterer {
color: #fff; color: #fff;
background: #3298dc; background: #3298dc;