[GSoC24] Resolved Issue #7620 (Changed the alignment of the empty com…

…ponent in job page) (#7621) ref issue: #7620 I've created a class called `cvat-empty-jobs-list` and added it to a div to make the empty component in the job page aligned in the middle as all other pages having empty component aligned to its center. ![after ](https://github.com/opencv/cvat/assets/50093149/4e05d9c9-6049-4900-8234-66f719976310)
cvat-ai · Mar 20, 2024 · d1a300f · d1a300f
1 parent 53bf350
commit d1a300f
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 43 deletions.
diff --git a/changelog.d/20240318_203856_kavikumarceo.md b/changelog.d/20240318_203856_kavikumarceo.md
@@ -0,0 +1,4 @@
+### Fixed
+
+- Incorrect alignment of empty job list component
+  (<https://github.com/opencv/cvat/pull/7621>)
diff --git a/cvat-ui/src/components/jobs-page/jobs-page.tsx b/cvat-ui/src/components/jobs-page/jobs-page.tsx
@@ -1,5 +1,5 @@
 // Copyright (C) 2022 Intel Corporation
-// Copyright (C) 2023 CVAT.ai Corporation
+// Copyright (C) 2023-2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -76,7 +76,18 @@ function JobsPageComponent(): JSX.Element {
                 </Col>
             </Row>
         </>
-    ) : <Empty description={<Text>No results matched your search...</Text>} />;
+    ) : (
+        <div className='cvat-empty-jobs-list'>
+            <Empty description={(
+                <Row justify='center' align='middle'>
+                    <Col>
+                        <Text>No results matched your search...</Text>
+                    </Col>
+                </Row>
+            )}
+            />
+        </div>
+    );
 
     return (
         <div className='cvat-jobs-page'>
@@ -110,9 +121,7 @@ function JobsPageComponent(): JSX.Element {
                     );
                 }}
             />
-            { fetching ? (
-                <Spin size='large' className='cvat-spinner' />
-            ) : content }
+            {fetching ? <Spin size='large' className='cvat-spinner' /> : content}
         </div>
     );
 }

diff --git a/cvat-ui/src/components/jobs-page/styles.scss b/cvat-ui/src/components/jobs-page/styles.scss
@@ -1,5 +1,5 @@
 // Copyright (C) 2022 Intel Corporation
-// Copyright (C) 2022 CVAT.ai Corporation
+// Copyright (C) 2022-2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -12,23 +12,40 @@
     width: 100%;
     overflow: auto;
 
-    > div:nth-child(1) {
-        div > {
-            .cvat-title {
-                color: $text-color;
+    .cvat-jobs-page-top-bar {
+        > div {
+            display: flex;
+            justify-content: space-between;
+
+            > div {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+
+                .cvat-jobs-page-search-bar {
+                    width: $grid-unit-size * 32;
+                    padding-left: $grid-unit-size * 0.5;
+                }
+
+                > div {
+                    > *:not(:last-child) {
+                        margin-right: $grid-unit-size;
+                    }
+
+                    display: flex;
+                }
             }
         }
     }
 
-    > div:nth-child(2) {
-        &.ant-empty {
+    .cvat-empty-jobs-list {
+        .ant-empty {
             position: absolute;
-            top: 40%;
+            top: 50%;
             left: 50%;
+            transform: translate(-50%, -50%);
         }
-
-        padding-bottom: $grid-unit-size;
-        padding-top: $grid-unit-size;
     }
 
     .cvat-job-page-list-item {
@@ -129,6 +146,8 @@
     .cvat-jobs-page-list {
         display: flex;
         flex-wrap: wrap;
+        padding-top: $grid-unit-size;
+        padding-bottom: $grid-unit-size;
     }
 
     .cvat-job-card-more-button {
@@ -138,30 +157,3 @@
         font-size: 16px;
     }
 }
-
-.cvat-jobs-page-top-bar {
-    > div {
-        display: flex;
-        justify-content: space-between;
-
-        > div {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            width: 100%;
-
-            .cvat-jobs-page-search-bar {
-                width: $grid-unit-size * 32;
-                padding-left: $grid-unit-size * 0.5;
-            }
-
-            > div {
-                > *:not(:last-child) {
-                    margin-right: $grid-unit-size;
-                }
-
-                display: flex;
-            }
-        }
-    }
-}