diff --git a/CHANGELOG.md b/CHANGELOG.md index e4395462fe96..987b5f11c3ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Exception: "Value must be a user instance" () - Reset zoom option doesn't work in tag annotation mode () - Canvas is busy error () +- Projects view layout fix () ### Security diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 57d3d32957dc..5063901fadf7 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.10.7", + "version": "1.10.8", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 1168766d50d0..135d15f0cc46 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.10.7", + "version": "1.10.8", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { diff --git a/cvat-ui/src/components/projects-page/project-list.tsx b/cvat-ui/src/components/projects-page/project-list.tsx index 944e4faa0d66..134286be3b0c 100644 --- a/cvat-ui/src/components/projects-page/project-list.tsx +++ b/cvat-ui/src/components/projects-page/project-list.tsx @@ -15,7 +15,7 @@ export default function ProjectListComponent(): JSX.Element { const dispatch = useDispatch(); const projectsCount = useSelector((state: CombinedState) => state.projects.count); const { page } = useSelector((state: CombinedState) => state.projects.gettingQuery); - const projectInstances = useSelector((state: CombinedState) => state.projects.current); + let projectInstances = useSelector((state: CombinedState) => state.projects.current); const gettingQuery = useSelector((state: CombinedState) => state.projects.gettingQuery); function changePage(p: number): void { @@ -27,19 +27,30 @@ export default function ProjectListComponent(): JSX.Element { ); } + projectInstances = projectInstances.reduce((rows, key, index) => { + if (index % 4 === 0) { + rows.push([key]); + } else { + rows[rows.length - 1].push(key); + } + return rows; + }, []); + return ( <> - - {projectInstances.map( - (instance: any): JSX.Element => ( - - - - ), - )} - + {projectInstances.map( + (row: any[]): JSX.Element => ( + + {row.map((instance: any) => ( + + + + ))} + + ), + )} diff --git a/cvat-ui/src/components/projects-page/styles.scss b/cvat-ui/src/components/projects-page/styles.scss index 9b113de487e1..44fb66158704 100644 --- a/cvat-ui/src/components/projects-page/styles.scss +++ b/cvat-ui/src/components/projects-page/styles.scss @@ -109,11 +109,11 @@ .cvat-projects-project-item-card { .ant-empty { margin: $grid-unit-size; + height: $grid-unit-size * 16; } img { - height: 100%; - max-height: $grid-unit-size * 18; + height: $grid-unit-size * 18; object-fit: cover; } }