Merge pull request #2503 from openvinotoolkit/dk/projects-view-fix

Projects layout fix

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" (<https://github.com/openvinotoolkit/cvat/pull/2441>)
 - Reset zoom option doesn't work in tag annotation mode (<https://github.com/openvinotoolkit/cvat/pull/2443>)
 - Canvas is busy error (<https://github.com/openvinotoolkit/cvat/pull/2437>)
+- Projects view layout fix (<https://github.com/openvinotoolkit/cvat/pull/2503>)
 
 ### Security
 

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": {

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": {

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 (
         <>
             <Row type='flex' justify='center' align='middle'>
                 <Col className='cvat-projects-list' md={22} lg={18} xl={16} xxl={14}>
-                    <Row gutter={[8, 8]}>
-                        {projectInstances.map(
-                            (instance: any): JSX.Element => (
-                                <Col xs={8} sm={8} xl={6} key={instance.id}>
-                                    <ProjectItem projectInstance={instance} />
-                                </Col>
-                            ),
-                        )}
-                    </Row>
+                    {projectInstances.map(
+                        (row: any[]): JSX.Element => (
+                            <Row gutter={[8, 8]}>
+                                {row.map((instance: any) => (
+                                    <Col span={6} key={instance.id}>
+                                        <ProjectItem projectInstance={instance} />
+                                    </Col>
+                                ))}
+                            </Row>
+                        ),
+                    )}
                 </Col>
             </Row>
             <Row type='flex' justify='center' align='middle'>

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;
     }
 }