gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-19 12:14:23 +01:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

ui/pager: improve layout

Browse Source
This commit is contained in:
Adorian Doran 2026-02-16 21:46:16 +02:00
parent 7964bd3be4
commit 782cd59407
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/client/src/widgets/collections/Pagination.css
View File

@ -19,9 +19,12 @@
display: flex;
align-items: baseline;
justify-content: space-around;
/* Prevent the prev/next buttons from shifting when ellipses appear or disappear */
min-width: calc(var(--note-list-pager-page-button-count) * var(--note-list-pager-page-button-width)
+ (var(--note-list-pager-ellipsis-width) * 2));
&.note-list-pager-ellipsis-present {
/* Prevent the prev/next buttons from shifting when ellipses appear or disappear */
min-width: calc(var(--note-list-pager-page-button-count) * var(--note-list-pager-page-button-width)
+ (var(--note-list-pager-ellipsis-width) * 2));
}
.note-list-pager-page-button {
min-width: var(--note-list-pager-page-button-width);

8
apps/client/src/widgets/collections/Pagination.tsx
View File

@ -76,8 +76,12 @@ function PageButtons(props: PageButtonsProps) {
const rightStart = props.pageCount - rightLength + 1;
middleStart = Math.min(middleStart, rightStart - middleLength);
return <div class="note-list-pager-page-button-container"
style={{"--note-list-pager-page-button-count": leftLength + middleLength + rightLength}}>
const totalButtonCount = leftLength + middleLength + rightLength;
return <div className={clsx("note-list-pager-page-button-container", {
"note-list-pager-ellipsis-present": (totalButtonCount === maxButtonCount)
})}
style={{"--note-list-pager-page-button-count": totalButtonCount}}>
{[
...createSegment(leftStart, leftLength, props.page, props.setPage, false),
...createSegment(middleStart, middleLength, props.page, props.setPage, (middleStart - leftLength > 1)),