frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change pagination styles for file matches table

Browse Source
This commit is contained in:
smanylov
2026-03-31 15:35:16 +07:00
parent 0887ccde13
commit 89506c222b
2 changed files with 86 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/styles/pages-styles.scss
+47 -27
View File
@@ -4417,6 +4417,7 @@
grid-template-columns: 1fr 3fr;
gap: 10px;
height: 80vh;
margin-bottom: 20px;
.sources-list {
display: flex;
@@ -4424,10 +4425,6 @@
gap: 15px;
.source-card {
/* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 12px;
border: 1px solid v.$border-color-1; */
background: #fff;
border: 1px solid #f3f4f6;
border-radius: 20px;
@@ -4441,7 +4438,6 @@
cursor: pointer;
display: flex;
justify-content: space-between;
/* flex-direction: column; */
opacity: 0.75;
&:hover {
@@ -4503,6 +4499,12 @@
}
}
.sources-list-pagination {
display: flex;
justify-content: space-between;
align-items: center;
}
.source-status {
padding: 4px 10px;
border-radius: 6px;
@@ -4696,37 +4698,55 @@
}
}
.pagination {
.pagination-controls {
display: flex;
justify-content: start;
gap: 4px;
margin-top: 20px;
align-items: center;
gap: 0.5rem;
&-item {
padding: 8px 12px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
background: white;
color: #374151;
border: 2px solid #e5e7eb;
transition: all 0.2s ease;
.arrow {
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
border: 2px solid v.$border-color-1;
border-radius: 10px;
box-shadow: 0 1px 2px #0000000d;
color: v.$p-color;
&:disabled {
opacity: 0.6;
.icon {
width: 18px;
}
&:hover {
border-color: #667eea;
background-color: v.$bg-light;
}
&-active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: 2px solid #667eea;
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
&:hover {
border-color: #667eea;
&-pages {
display: flex;
align-items: center;
gap: 0.25rem;
button {
border: 2px solid v.$border-color-1;
padding: 0.25rem 0.75rem;
border-radius: 10px;
color: v.$p-color;
&.current {
background-color: v.$p-color;
color: v.$white;
}
&.other {
&:hover {
background-color: v.$bg-light;
}
}
}
}
src/app/ui/file-page/violation-table/file-page-violations-list.tsx
+39 -28
View File
@@ -8,6 +8,7 @@ import FilePageViolationInfo from '@/app/ui/file-page/violation-table/file-page-
import { useFileViolations } from '@/app/hooks/react-query/useFileViolations';
import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
import DropDownList from '@/app/components/DropDownList';
import { IconArrowLeft, IconArrowRight } from '@/app/ui/icons/icons';
export default function FilePageViolationsList({
currentPage,
@@ -96,9 +97,6 @@ export default function FilePageViolationsList({
<li value="AUTHORIZED_USE">{tStatus('AUTHORIZED_USE')}</li>
</DropDownList>
</div>
<span>
{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
</span>
</div>
</div>
@@ -173,35 +171,48 @@ export default function FilePageViolationsList({
<FilePageViolationInfo selectedViolation={selectedViolation} />
</div>
{fileViolations.total_pages > 1 && (
<div className="pagination">
<button
onClick={() => handlePageChange(currentPage - 1)}
className="pagination-item pagination-item-prev"
disabled={!fileViolations.has_previous}
>
{t('previous')}
</button>
{getPageNumbers().map(pageNum => (
<div
className="sources-list-pagination"
>
<span>
{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
</span>
{fileViolations.total_pages > 1 && (
<div className="pagination-controls">
<button
key={pageNum}
onClick={() => handlePageChange(pageNum)}
className={`pagination-item ${currentPage === pageNum ? 'pagination-item-active' : ''}`}
onClick={() => handlePageChange(currentPage - 1)}
className="arrow"
disabled={!fileViolations.has_previous}
>
{pageNum}
<IconArrowLeft />
</button>
))}
<button
onClick={() => handlePageChange(currentPage + 1)}
className="pagination-item pagination-item-next"
disabled={!fileViolations.has_next}
>
{t('next')}
</button>
</div>
)}
<div
className="pagination-controls-pages"
>
{getPageNumbers().map(pageNum => (
<button
key={pageNum}
onClick={() => handlePageChange(pageNum)}
/* className={`pagination-item ${currentPage === pageNum ? 'pagination-item-active' : ''}`} */
className={currentPage === pageNum ? 'current' : 'other'}
>
{pageNum}
</button>
))}
</div>
<button
onClick={() => handlePageChange(currentPage + 1)}
className="arrow"
disabled={!fileViolations.has_next}
>
<IconArrowRight />
</button>
</div>
)}
</div>
</div>
);
}