Added adjustments for 3440x1440px (#3506)

* Added adjustments for 3440x1440px

* fixed testts

* Adjusted resolution

* Fixed some comments

* Added user hook

* Changed parameter name

cvat-ui/src/components/annotation-page/annotation-page.tsx

@@ -44,7 +44,7 @@ export default function AnnotationPageComponent(props: Props): JSX.Element {
         saveLogs();
         const root = window.document.getElementById('root');
         if (root) {
-            root.style.minHeight = '600px';
+            root.style.minHeight = '720px';
         }
 
         return () => {

cvat-ui/src/components/models-page/styles.scss

@@ -5,7 +5,8 @@
 @import '../../base.scss';
 
 .cvat-models-page {
-    padding-top: 30px;
+    padding-top: $grid-unit-size * 2;
+    padding-bottom: $grid-unit-size;
     height: 90%;
     overflow: auto;
     position: fixed;

cvat-ui/src/components/projects-page/project-item.tsx

@@ -15,18 +15,27 @@ import Button from 'antd/lib/button';
 import { MoreOutlined } from '@ant-design/icons';
 
 import { CombinedState, Project } from 'reducers/interfaces';
+import { useCardHeightHOC } from 'utils/hooks';
 import ProjectActionsMenuComponent from './actions-menu';
 
 interface Props {
     projectInstance: Project;
 }
 
+const useCardHeight = useCardHeightHOC({
+    containerClassName: 'cvat-projects-page',
+    siblingClassNames: ['cvat-projects-pagination', 'cvat-projects-top-bar'],
+    paddings: 40,
+    numberOfRows: 3,
+});
+
 export default function ProjectItemComponent(props: Props): JSX.Element {
     const {
         projectInstance: { instance, preview },
     } = props;
 
     const history = useHistory();
+    const height = useCardHeight();
     const ownerName = instance.owner ? instance.owner.username : null;
     const updated = moment(instance.updatedDate).fromNow();
     const deletes = useSelector((state: CombinedState) => state.projects.activities.deletes);
@@ -36,8 +45,7 @@ export default function ProjectItemComponent(props: Props): JSX.Element {
         history.push(`/projects/${instance.id}`);
     };
 
-    const style: React.CSSProperties = {};
-
+    const style: React.CSSProperties = { height };
     if (deleted) {
         style.pointerEvents = 'none';
         style.opacity = 0.5;

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);
+    const projects = useSelector((state: CombinedState) => state.projects.current);
     const gettingQuery = useSelector((state: CombinedState) => state.projects.gettingQuery);
 
     function changePage(p: number): void {
@@ -27,28 +27,13 @@ export default function ProjectListComponent(): JSX.Element {
         );
     }
 
-    const projects = projectInstances.reduce<Project[][]>((rows, key, index) => {
-        if (index % 4 === 0) {
-            rows.push([key]);
-        } else {
-            rows[rows.length - 1].push(key);
-        }
-        return rows;
-    }, []);
-
     return (
         <>
             <Row justify='center' align='middle' className='cvat-project-list-content'>
                 <Col className='cvat-projects-list' md={22} lg={18} xl={16} xxl={14}>
                     {projects.map(
-                        (row: Project[]): JSX.Element => (
-                            <Row key={row[0].instance.id} gutter={[8, 8]}>
-                                {row.map((project: Project) => (
-                                    <Col span={6} key={project.instance.id}>
-                                        <ProjectItem projectInstance={project} />
-                                    </Col>
-                                ))}
-                            </Row>
+                        (project: Project): JSX.Element => (
+                            <ProjectItem key={project.instance.id} projectInstance={project} />
                         ),
                     )}
                 </Col>

cvat-ui/src/components/projects-page/styles.scss

@@ -6,9 +6,8 @@
 
 .cvat-projects-page {
     padding-top: $grid-unit-size * 2;
-    padding-bottom: $grid-unit-size * 5;
+    padding-bottom: $grid-unit-size;
     height: 100%;
-    position: fixed;
     width: 100%;
 
     > div:nth-child(1) {
@@ -71,28 +70,6 @@
     justify-content: center;
 }
 
-.cvat-projects-project-item-title,
-.cvat-projects-project-item-card-preview {
-    cursor: pointer;
-}
-
-.cvat-porjects-project-item-description {
-    display: flex;
-    justify-content: space-between;
-
-    // actions button
-    > div:nth-child(2) {
-        display: flex;
-        align-self: flex-end;
-        justify-content: center;
-
-        > button {
-            color: $text-color;
-            width: inherit;
-        }
-    }
-}
-
 .ant-menu.cvat-project-actions-menu {
     box-shadow: 0 0 17px rgba(0, 0, 0, 0.2);
 
@@ -107,17 +84,62 @@
 }
 
 .cvat-projects-project-item-card {
-    .ant-empty {
-        margin: $grid-unit-size;
-        height: $grid-unit-size * 16;
-    }
+    .cvat-projects-project-item-card-preview {
+        .ant-empty {
+            margin: $grid-unit-size;
+            height: inherit;
+            display: grid;
+
+            > div:first-child {
+                margin: auto;
+            }
+        }
 
-    img {
-        height: $grid-unit-size * 18;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
         object-fit: cover;
+        cursor: pointer;
     }
+
+    .cvat-projects-project-item-title {
+        cursor: pointer;
+    }
+
+    .cvat-porjects-project-item-description {
+        display: flex;
+        justify-content: space-between;
+
+        // actions button
+        > div:nth-child(2) {
+            display: flex;
+            align-self: flex-end;
+            justify-content: center;
+
+            > button {
+                color: $text-color;
+                width: inherit;
+            }
+        }
+    }
+
+    .ant-card-cover {
+        flex: 1;
+        height: 0;
+    }
+
+    width: 25%;
+    border-width: 4px;
+    display: flex;
+    flex-direction: column;
 }
 
 .cvat-project-list-content {
     padding-bottom: $grid-unit-size;
 }
+
+.cvat-projects-list {
+    display: flex;
+    flex-wrap: wrap;
+}

cvat-ui/src/components/task-page/styles.scss

@@ -88,9 +88,7 @@
 .cvat-task-preview-wrapper {
     overflow: hidden;
     margin-bottom: 20px;
-    width: $grid-unit-size * 32;
     height: $grid-unit-size * 18;
-    display: table-cell;
     text-align: center;
     vertical-align: middle;
     background-color: $background-color-2;
@@ -98,7 +96,6 @@
 
 .cvat-task-parameters {
     margin-top: $grid-unit-size * 2;
-    width: $grid-unit-size * 32;
 }
 
 .cvat-open-bug-tracker-button {

cvat-ui/src/components/tasks-page/styles.scss

@@ -6,8 +6,8 @@
 @import '../../styles.scss';
 
 .cvat-tasks-page {
-    padding-top: 15px;
-    padding-bottom: 40px;
+    padding-top: $grid-unit-size * 2;
+    padding-bottom: $grid-unit-size;
     height: 100%;
     width: 100%;
 
@@ -33,6 +33,18 @@
         padding-top: 10px;
     }
 
+    @media screen and (min-height: 900px) {
+        > div:nth-child(2) {
+            height: 88%;
+        }
+    }
+
+    @media screen and (min-height: 1200px) {
+        > div:nth-child(2) {
+            height: 93%;
+        }
+    }
+
     > div:nth-child(3) {
         padding-top: 10px;
     }

cvat-ui/src/styles.scss

@@ -57,7 +57,7 @@ hr {
     width: 100%;
     height: 100%;
     display: grid;
-    min-width: 1280px;
+    min-width: 1024px;
 }
 
 #layout-grid {

cvat-ui/src/utils/hooks.ts

 // Copyright (C) 2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
 
 // eslint-disable-next-line import/prefer-default-export
 export function usePrevious<T>(value: T): T | undefined {
@@ -11,3 +11,51 @@ export function usePrevious<T>(value: T): T | undefined {
     });
     return ref.current;
 }
+
+export interface ICardHeightHOC {
+    numberOfRows: number;
+    paddings: number;
+    containerClassName: string;
+    siblingClassNames: string[];
+}
+
+export function useCardHeightHOC(params: ICardHeightHOC): () => string {
+    const {
+        numberOfRows, paddings, containerClassName, siblingClassNames,
+    } = params;
+
+    return (): string => {
+        const [height, setHeight] = useState('auto');
+        useEffect(() => {
+            const resize = (): void => {
+                const container = window.document.getElementsByClassName(containerClassName)[0];
+                const siblings = siblingClassNames.map(
+                    (classname: string): Element | undefined => window.document.getElementsByClassName(classname)[0],
+                );
+
+                if (container) {
+                    const { clientHeight: containerHeight } = container;
+                    const othersHeight = siblings.reduce<number>((acc: number, el: Element | undefined): number => {
+                        if (el) {
+                            return acc + el.clientHeight;
+                        }
+
+                        return acc;
+                    }, 0);
+
+                    const cardHeight = (containerHeight - (othersHeight + paddings)) / numberOfRows;
+                    setHeight(`${Math.round(cardHeight)}px`);
+                }
+            };
+
+            resize();
+            window.addEventListener('resize', resize);
+
+            return () => {
+                window.removeEventListener('resize', resize);
+            };
+        }, []);
+
+        return height;
+    };
+}

tests/cypress/support/commands_projects.js

@@ -29,9 +29,7 @@ Cypress.Commands.add(
             cy.contains('Submit').click();
         });
         if (expectedResult == 'success') {
-            cy.get('.cvat-notification-create-project-success')
-                .should('exist')
-                .find('[data-icon="close"]').click();
+            cy.get('.cvat-notification-create-project-success').should('exist').find('[data-icon="close"]').click();
         } else if (expectedResult == 'fail') {
             cy.get('.cvat-notification-create-project-success').should('not.exist');
         }
@@ -61,7 +59,7 @@ Cypress.Commands.add('deleteProject', (projectName, projectID, expectedResult =
     if (expectedResult === 'success') {
         cy.get('.cvat-projects-project-item-card').should('have.css', 'opacity', '0.5');
     } else if (expectedResult === 'fail') {
-        cy.get('.cvat-projects-project-item-card').should('not.have.attr', 'style');
+        cy.get('.cvat-projects-project-item-card').should('not.have.css', 'opacity', '0.5');
     }
 });
 
@@ -96,19 +94,25 @@ Cypress.Commands.add('closeNotification', (className) => {
 Cypress.Commands.add('movingTask', (taskName, projectName, labelMappingFrom, labelMappingTo, fromTask) => {
     if (fromTask) {
         cy.contains('.cvat-text-color', 'Actions').click();
-        cy.get('.ant-dropdown').not('.ant-dropdown-hidden').within(() => {
-            cy.contains('Move to project').click();
-        });
+        cy.get('.ant-dropdown')
+            .not('.ant-dropdown-hidden')
+            .within(() => {
+                cy.contains('Move to project').click();
+            });
     } else {
         cy.contains('strong', taskName).parents('.cvat-tasks-list-item').find('.cvat-menu-icon').click();
-        cy.get('.ant-dropdown').not('.ant-dropdown-hidden').within(() => {
-            cy.contains('Move to project').click();
-        });
+        cy.get('.ant-dropdown')
+            .not('.ant-dropdown-hidden')
+            .within(() => {
+                cy.contains('Move to project').click();
+            });
     }
     cy.get('.cvat-task-move-modal').find('.cvat-project-search-field').click();
-    cy.get('.ant-select-dropdown').not('.ant-select-dropdown-hidden').within(() => {
-        cy.get(`[title="${projectName}"]`).click();
-    });
+    cy.get('.ant-select-dropdown')
+        .not('.ant-select-dropdown-hidden')
+        .within(() => {
+            cy.get(`[title="${projectName}"]`).click();
+        });
     if (labelMappingFrom !== labelMappingTo) {
         cy.get('.cvat-move-task-label-mapper-item').within(() => {
             cy.contains(labelMappingFrom).should('exist');
@@ -122,5 +126,5 @@ Cypress.Commands.add('movingTask', (taskName, projectName, labelMappingFrom, lab
     }
     cy.get('.cvat-task-move-modal').within(() => {
         cy.contains('button', 'OK').click();
-    })
+    });
 });