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 20 Packages Projects Releases Wiki Activity

ui/pager: make responsive

Browse Source
This commit is contained in:
Adorian Doran 2026-02-16 21:31:03 +02:00
parent 3d41ce13b1
commit 7964bd3be4
2 changed files with 50 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,13 @@
--note-list-pager-ellipsis-width: 20px;
}
.note-list-pager-container {
display: flex;
justify-content: flex-end;
width: 100%;
container: note-list-pager / inline-size;
}
.note-list-pager {
display: flex;
align-items: center;
@ -35,9 +42,29 @@
}
}
.note-list-pager-narrow-counter {
display: none;
min-width: 60px;
text-align: center;
white-space: nowrap;
}
.note-list-pager-total-count {
margin-inline-start: 8px;
opacity: .75;
white-space: nowrap;
}
}
@container note-list-pager (max-width: 550px) {
.note-list-pager-page-button-container,
.note-list-pager-total-count {
background: red;
display: none;
}
.note-list-pager-narrow-counter {
display: block;
}
}
}

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

@ -22,25 +22,30 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
if (pageCount < 2) return;
return (
<div class="note-list-pager">
<ActionButton
icon="bx bx-chevron-left"
disabled={(page === 1)}
text={t("pagination.prev_page")}
onClick={() => {setPage(page - 1)}}
/>
<div class="note-list-pager-container">
<div class="note-list-pager">
<ActionButton
icon="bx bx-chevron-left"
disabled={(page === 1)}
text={t("pagination.prev_page")}
onClick={() => {setPage(page - 1)}}
/>
<PageButtons page={page} setPage={setPage} pageCount={pageCount} />
<ActionButton
icon="bx bx-chevron-right"
disabled={(page === pageCount)}
text={t("pagination.next_page")}
onClick={() => {setPage(page + 1)}}
/>
<PageButtons page={page} setPage={setPage} pageCount={pageCount} />
<div className="note-list-pager-narrow-counter">
<strong>{page}</strong> / <strong>{pageCount}</strong>
</div>
<ActionButton
icon="bx bx-chevron-right"
disabled={(page === pageCount)}
text={t("pagination.next_page")}
onClick={() => {setPage(page + 1)}}
/>
<div className="note-list-pager-total-count">
{t("pagination.total_notes", { count: totalNotes })}
<div className="note-list-pager-total-count">
{t("pagination.total_notes", { count: totalNotes })}
</div>
</div>
</div>
)