Backup_Repos/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2026-01-02 21:52:26 +01:00
Code Issues Projects Releases Wiki Activity

Add (hidden) pagination to list results header (#6234)

Browse source
This commit is contained in:
WithoutPants 2025-11-06 10:45:57 +11:00 committed by GitHub
parent 6cace4ff88
commit f2a787a2ba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/v2.5/src/components/List/ListResultsHeader.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { ListFilterModel } from "src/models/list-filter/filter";
import { PaginationIndex } from "../List/Pagination";
import { Pagination, PaginationIndex } from "../List/Pagination";
import { ButtonToolbar } from "react-bootstrap";
import { ListViewOptions } from "../List/ListViewOptions";
import { PageSizeSelector, SortBySelect } from "../List/ListFilter";
@ -53,6 +53,12 @@ export const ListResultsHeader: React.FC<{
/>
</div>
<div className="pagination-index-container">
<Pagination
currentPage={filter.currentPage}
itemsPerPage={filter.itemsPerPage}
totalItems={totalCount}
onChangePage={(page) => onChangeFilter(filter.changePage(page))}
/>
<PaginationIndex
loading={loading}
itemsPerPage={filter.itemsPerPage}

20
ui/v2.5/src/components/List/styles.scss
View file

@ -1305,7 +1305,7 @@ input[type="range"].zoom-slider {
}
.list-results-header {
align-items: center;
align-items: flex-start;
background-color: $body-bg;
display: flex;
@ -1327,6 +1327,18 @@ input[type="range"].zoom-slider {
}
}
.list-results-header .pagination-index-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
.pagination {
// hidden by default. Can be shown via css override if needed
display: none;
margin: 0;
}
}
.list-results-header {
gap: 0.25rem;
margin-bottom: 0.5rem;
@ -1342,7 +1354,7 @@ input[type="range"].zoom-slider {
}
& > div.pagination-index-container {
justify-content: flex-end;
align-items: flex-end;
order: 3;
}
}
@ -1356,6 +1368,10 @@ input[type="range"].zoom-slider {
margin-left: auto;
margin-right: auto;
}
& > div.pagination-index-container {
align-items: center;
}
}
}