[GSoC2024] Resolved Issue #7620 (Changed the alignment of the empty component in job page)

[thekavikumar]

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.

[syedbarimanjan]

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.

On line number 23 of styles.scss you have

> div:nth-child(2) {
        &.ant-empty {
            position: absolute;
            top: 40%;
            left: 50%;
        }

and by changing it to

> div:nth-child(2) {
        &.ant-empty {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

shall solve the alignment thus you wont need to write so much code.

[thekavikumar]

@syedbarimanjan let me try it out

[thekavikumar]

@syedbarimanjan yeah i tried that, but it was not aligned as other empty components rendered in pages like projects

[syedbarimanjan]

@syedbarimanjan yeah i tried that, but it was not aligned as other empty components rendered in pages like projects

It is properly alligned in the middle. Maybe you applied the styles to the wrong selector.

[klakhov]

Some more comments:

• Please, add a changelog entry
• In each file that you update, update license header with actual change year (-2024)
• Look at the begging at the cvat-ui/src/components/jobs-page/styles.scss file. Class selector .cvat-jobs-page has a couple div:nth-child usages. It was added for faster development of the page but considered as bad practice. Could you fix that and add actual classnames instead of nth selectors? I belive first one is for top-bar and second for empty list. Also you can move your changes with ant-empty alignment here.

[thekavikumar]

@klakhov how do we create a changelog? do we have any script or should we do it manually in changelog folder?

[syedbarimanjan]

@klakhov how do we create a changelog? do we have any script or should we do it manually in changelog folder?

Developers: this project uses scriv (https://scriv.readthedocs.io/en/stable/index.html)
to maintain the changelog. To add an entry, create a fragment:

$ scriv create --edit

Fragments will be merged into this file whenever a release is made.

[thekavikumar]

@klakhov how do we create a changelog? do we have any script or should we do it manually in changelog folder?

Developers: this project uses scriv (https://scriv.readthedocs.io/en/stable/index.html) to maintain the changelog. To add an entry, create a fragment:

$ scriv create --edit

Fragments will be merged into this file whenever a release is made.

thanks

[thekavikumar]

@klakhov can you review it now?

[thekavikumar]

@klakhov @nmanovic can you please review and let me know the status? I've another pr to make!

[klakhov]

@thekavikumar
It looks we lost paddings for non-empty job list after the style changes. Could you fix that?

Should be as on other pages:

[thekavikumar]

@klakhov sure i will fix it

[thekavikumar]

@klakhov check it now

[thekavikumar]

@klakhov I've changed it to $grid-unit-size

[thekavikumar]

@klakhov @nmanovic please review it

[codecov]

Codecov Report

Merging #7621 (4952d3d) into develop (f513aa1) will decrease coverage by 0.03%.
Report is 2 commits behind head on develop.
The diff coverage is n/a.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #7621      +/-   ##
===========================================
- Coverage    83.47%   83.44%   -0.03%     
===========================================
  Files          373      373              
  Lines        39739    39736       -3     
  Branches      3741     3741              
===========================================
- Hits         33171    33157      -14     
- Misses        6568     6579      +11     

Components	Coverage Δ
cvat-ui	79.23% <ø> (-0.06%)	⬇️
cvat-server	87.32% <100.00%> (-0.01%)	⬇️