Fixed cards on project page, updated stylelint & css loader packages (#6551)

<!-- Raise an issue to propose your change
(https://github.com/opencv/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution
guide](https://opencv.github.io/cvat/docs/contributing/). -->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
Resolved #5615

Area is scrollable now. 

![image](https://github.com/opencv/cvat/assets/40690378/1f9b4b38-2a00-4632-ada0-3fe9cfbafdc2)


### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [x] I submit my changes into the `develop` branch
- [x] I have added a description of my changes into the
[CHANGELOG](https://github.com/opencv/cvat/blob/develop/CHANGELOG.md)
file
- [ ] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
- [ ] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
- [x] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/opencv/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/opencv/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/opencv/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/opencv/cvat/tree/develop/cvat-ui#versioning))

### License

- [x] I submit _my code changes_ under the same [MIT License](
https://github.com/opencv/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.

.stylelintrc.json

 {
   "extends": "stylelint-config-standard-scss",
   "rules": {
-    "indentation": 4,
-    "value-keyword-case": null,
-    "selector-combinator-space-after": null,
-    "no-descending-specificity": null,
-    "at-rule-no-unknown": [
-      true,
-      {
-        "ignoreAtRules": ["extend"]
-      }
-    ],
-    "selector-type-no-unknown": [
-      true,
-      {
-        "ignoreTypes": ["first-child"]
-      }
-    ],
     "scss/comment-no-empty": null,
-    "scss/at-extend-no-missing-placeholder": null
+    "value-keyword-case": null,
+    "color-function-notation": ["legacy"],
+    "scss/at-extend-no-missing-placeholder": null,
+    "no-descending-specificity": null
   },
   "ignoreFiles": ["**/*.js", "**/*.ts", "**/*.py"]
 }

CHANGELOG.md

@@ -35,6 +35,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Using initial frame from query parameter to open specific frame in a job
  (<https://github.com/opencv/cvat/pull/6506>)
 - Problem with first keyframe removing (<https://github.com/opencv/cvat/pull/6494>)
+- Project previews on small screens, updated stylelint & rules (<https://github.com/opencv/cvat/pull/6551>)
 - Server-side validation for attribute specifications
   (<https://github.com/opencv/cvat/pull/6447>)
 - \[API\] File downloading failures for filenames with special characters l(<https://github.com/opencv/cvat/pull/6492>)

cvat-canvas/webpack.config.js

@@ -19,7 +19,13 @@ const styleLoaders = [
     {
         loader: 'postcss-loader',
         options: {
-            plugins: [require('postcss-preset-env')],
+            postcssOptions: {
+                plugins: [
+                    [
+                        'postcss-preset-env', {},
+                    ],
+                ],
+            },
         },
     },
     'sass-loader',

cvat-canvas3d/webpack.config.js

@@ -19,7 +19,13 @@ const styleLoaders = [
     {
         loader: 'postcss-loader',
         options: {
-            plugins: [require('postcss-preset-env')],
+            postcssOptions: {
+                plugins: [
+                    [
+                        'postcss-preset-env', {},
+                    ],
+                ],
+            },
         },
     },
     'sass-loader',

cvat-ui/package.json

 {
   "name": "cvat-ui",
-  "version": "1.54.0",
+  "version": "1.54.1",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/components/jobs-page/job-card.tsx

@@ -17,6 +17,7 @@ const useCardHeight = useCardHeightHOC({
     containerClassName: 'cvat-jobs-page',
     siblingClassNames: ['cvat-jobs-page-pagination', 'cvat-jobs-page-top-bar'],
     paddings: 40,
+    minHeight: 200,
     numberOfRows: 3,
 });
 

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

@@ -3,13 +3,14 @@
 //
 // SPDX-License-Identifier: MIT
 
-@import '../../base.scss';
+@import '../../base';
 
 .cvat-jobs-page {
     padding-top: $grid-unit-size * 2;
     padding-bottom: $grid-unit-size;
     height: 100%;
     width: 100%;
+    overflow: auto;
 
     > div:nth-child(1) {
         div > {

cvat-ui/src/components/projects-page/dimensions.ts

+// Copyright (C) 2023 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+const dimensions = {
+    xs: 24,
+    sm: 24,
+    md: 22,
+    lg: 18,
+    xl: 16,
+    xxl: 16,
+};
+
+export default dimensions;

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

@@ -28,6 +28,7 @@ const useCardHeight = useCardHeightHOC({
     containerClassName: 'cvat-projects-page',
     siblingClassNames: ['cvat-projects-pagination', 'cvat-projects-page-top-bar'],
     paddings: 40,
+    minHeight: 200,
     numberOfRows: 3,
 });
 

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

@@ -10,6 +10,7 @@ import Pagination from 'antd/lib/pagination';
 
 import { getProjectsAsync } from 'actions/projects-actions';
 import { CombinedState, Project } from 'reducers';
+import dimensions from './dimensions';
 import ProjectItem from './project-item';
 
 export default function ProjectListComponent(): JSX.Element {
@@ -29,13 +30,6 @@ export default function ProjectListComponent(): JSX.Element {
         );
     }, [gettingQuery]);
 
-    const dimensions = {
-        md: 22,
-        lg: 18,
-        xl: 16,
-        xxl: 16,
-    };
-
     return (
         <>
             <Row justify='center' align='middle' className='cvat-project-list-content'>

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

@@ -3,13 +3,14 @@
 //
 // SPDX-License-Identifier: MIT
 
-@import '../../base.scss';
+@import '../../base';
 
 .cvat-projects-page {
     padding-top: $grid-unit-size * 2;
     padding-bottom: $grid-unit-size;
     height: 100%;
     width: 100%;
+    overflow: auto;
 
     .cvat-projects-page-top-bar {
         > div:nth-child(1) {
@@ -106,7 +107,7 @@
 }
 
 .ant-menu.cvat-project-actions-menu {
-    box-shadow: 0 0 17px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 17px rgba(0, 0, 0, 20%);
 
     > li:hover {
         background-color: $hover-menu-color;

cvat-ui/src/components/projects-page/top-bar.tsx

@@ -16,6 +16,7 @@ import { usePrevious } from 'utils/hooks';
 import { ProjectsQuery } from 'reducers';
 import { SortingComponent, ResourceFilterHOC, defaultVisibility } from 'components/resource-sorting-filtering';
 
+import dimensions from './dimensions';
 import {
     localStorageRecentKeyword, localStorageRecentCapacity, predefinedFilterValues, config,
 } from './projects-filter-configuration';
@@ -49,7 +50,7 @@ function TopBarComponent(props: Props): JSX.Element {
 
     return (
         <Row className='cvat-projects-page-top-bar' justify='center' align='middle'>
-            <Col md={22} lg={18} xl={16} xxl={16}>
+            <Col {...dimensions}>
                 <div className='cvat-projects-page-filters-wrapper'>
                     <Input.Search
                         enterButton

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

@@ -3,8 +3,8 @@
 //
 // SPDX-License-Identifier: MIT
 
-@import '../../base.scss';
-@import '../../styles.scss';
+@import '../../base';
+@import '../../styles';
 
 .cvat-tasks-page {
     padding-top: $grid-unit-size * 2;
@@ -44,13 +44,13 @@
         padding-top: 10px;
     }
 
-    @media screen and (min-height: 900px) {
+    @media screen and (height >= 900px) {
         > div:nth-child(2) {
             height: 88%;
         }
     }
 
-    @media screen and (min-height: 1200px) {
+    @media screen and (height >= 1200px) {
         > div:nth-child(2) {
             height: 93%;
         }

cvat-ui/src/utils/hooks.ts

@@ -76,6 +76,7 @@ export function useGoBack(): () => void {
 
 export interface ICardHeightHOC {
     numberOfRows: number;
+    minHeight: number;
     paddings: number;
     containerClassName: string;
     siblingClassNames: string[];
@@ -83,7 +84,7 @@ export interface ICardHeightHOC {
 
 export function useCardHeightHOC(params: ICardHeightHOC): () => string {
     const {
-        numberOfRows, paddings, containerClassName, siblingClassNames,
+        numberOfRows, minHeight, paddings, containerClassName, siblingClassNames,
     } = params;
 
     return (): string => {
@@ -106,7 +107,7 @@ export function useCardHeightHOC(params: ICardHeightHOC): () => string {
                     }, 0);
 
                     const cardHeight = (containerHeight - (othersHeight + paddings)) / numberOfRows;
-                    setHeight(`${Math.round(cardHeight)}px`);
+                    setHeight(`${Math.max(Math.round(cardHeight), minHeight)}px`);
                 }
             };
 

cvat-ui/webpack.config.js

@@ -128,7 +128,13 @@ module.exports = (env) => {
                         {
                             loader: 'postcss-loader',
                             options: {
-                                plugins: [require('postcss-preset-env')],
+                                postcssOptions: {
+                                    plugins: [
+                                        [
+                                            'postcss-preset-env', {},
+                                        ],
+                                    ],
+                                },
                             },
                         },
                         'sass-loader',

package.json

@@ -35,7 +35,7 @@
     "babel-register": "^6.26.0",
     "bundle-declarations-webpack-plugin": "^3.1.0",
     "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^3.4.2",
+    "css-loader": "^6.8.1",
     "eslint": "^7.11.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-airbnb-base": "14.2.1",
@@ -55,8 +55,8 @@
     "nodemon": "^2.0.7",
     "nyc": "^15.1.0",
     "postcss": "8",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
+    "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^9.0.0",
     "react-svg-loader": "^3.0.3",
     "remark-cli": "^9.0.0",
     "remark-frontmatter": "^3.0.0",
@@ -77,8 +77,7 @@
     "sass-loader": "^10.0.0",
     "source-map-support": "^0.5.19",
     "style-loader": "^1.0.0",
-    "stylelint": "^15.10.1",
-    "stylelint-config-standard": "^20.0.0",
+    "stylelint": "^15.10.2",
     "stylelint-config-standard-scss": "^10.0.0",
     "typescript": "^5.0.2",
     "vfile-reporter-json": "^2.0.2",