gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-19 20:24:28 +01:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

ui/pager: improve layout

Browse Source
This commit is contained in:
Adorian Doran 2026-02-16 20:39:33 +02:00
parent a6309715f3
commit 6f0881ab8a
2 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,23 @@
:where(.note-list-pager) {
--note-list-pager-page-button-width: 40px;
--note-list-pager-ellipsis-width: 20px;
}
.note-list-pager { .note-list-pager {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: .8rem; font-size: .8rem;
.note-list-pager-page-button-container { .note-list-pager-page-button-container {
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-page-button { .note-list-pager-page-button {
min-width: 40px; min-width: var(--note-list-pager-page-button-width);
padding-inline: 0; padding-inline: 0;
&.note-list-pager-page-button-current { &.note-list-pager-page-button-current {
@ -17,7 +29,7 @@
.note-list-pager-ellipsis { .note-list-pager-ellipsis {
display: inline-block; display: inline-block;
width: 20px; width: var(--note-list-pager-ellipsis-width);
text-align: center; text-align: center;
opacity: .5; opacity: .5;
} }

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

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