gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-03-04 07:57:31 +01:00
Code Issues Actions 7 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

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

@ -3,6 +3,13 @@
--note-list-pager-ellipsis-width: 20px; --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 { .note-list-pager {
display: flex; display: flex;
align-items: center; 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 { .note-list-pager-total-count {
margin-inline-start: 8px; margin-inline-start: 8px;
opacity: .75; opacity: .75;
white-space: nowrap; 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;
}
}
} }

37
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; if (pageCount < 2) return;
return ( return (
<div class="note-list-pager"> <div class="note-list-pager-container">
<ActionButton <div class="note-list-pager">
icon="bx bx-chevron-left" <ActionButton
disabled={(page === 1)} icon="bx bx-chevron-left"
text={t("pagination.prev_page")} disabled={(page === 1)}
onClick={() => {setPage(page - 1)}} text={t("pagination.prev_page")}
/> onClick={() => {setPage(page - 1)}}
/>
<PageButtons page={page} setPage={setPage} pageCount={pageCount} /> <PageButtons page={page} setPage={setPage} pageCount={pageCount} />
<div className="note-list-pager-narrow-counter">
<strong>{page}</strong> / <strong>{pageCount}</strong>
</div>
<ActionButton <ActionButton
icon="bx bx-chevron-right" icon="bx bx-chevron-right"
disabled={(page === pageCount)} disabled={(page === pageCount)}
text={t("pagination.next_page")} text={t("pagination.next_page")}
onClick={() => {setPage(page + 1)}} onClick={() => {setPage(page + 1)}}
/> />
<div className="note-list-pager-total-count"> <div className="note-list-pager-total-count">
{t("pagination.total_notes", { count: totalNotes })} {t("pagination.total_notes", { count: totalNotes })}
</div>
</div> </div>
</div> </div>
) )