From 14d6514168bd50b0d0aa31ebe9b307d027393059 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Henry=20T=C3=A4schner?= <129834483+HenryT-CG@users.noreply.github.com> Date: Mon, 5 Aug 2024 08:12:34 +0200 Subject: [PATCH] Improve responsive search and detail (#153) * fix: responsive search xs * fix: responsive detail xs * fix: add prettier cache * fix: remove unused classes * fix: code cleanup --- .husky/pre-commit | 2 +- package-lock.json | 202 ++++++++++++++---- package.json | 10 +- src/_mixins.scss | 30 +++ .../app-detail/app-detail.component.html | 25 +-- .../app-search/app-search.component.html | 24 +-- .../app-search/app-search.component.scss | 8 +- 7 files changed, 224 insertions(+), 77 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index 9de1526..7d3733e 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -2,4 +2,4 @@ echo "[Husky] Running lint check:" npm run lint echo "[Husky] Running prettier check:" -npx prettier -c . +npx prettier --cache -c . diff --git a/package-lock.json b/package-lock.json index b4e5e92..fc2780f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,14 +63,14 @@ "@schematics/angular": "^18.1.2", "@storybook/addon-essentials": "8.2.7", "@storybook/angular": "8.2.7", - "@storybook/core-server": "8.2.6", + "@storybook/core-server": "8.2.7", "@svgr/webpack": "^8.1.0", "@swc-node/register": "^1.10.9", "@swc/cli": "~0.4.0", - "@swc/core": "^1.7.3", + "@swc/core": "^1.7.5", "@swc/helpers": "0.5.12", "@types/jasmine": "~5.1.4", - "@types/node": "22.0.2", + "@types/node": "22.1.0", "@typescript-eslint/eslint-plugin": "7.18.0", "@typescript-eslint/parser": "7.18.0", "css-loader": "^7.1.2", @@ -89,7 +89,7 @@ "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.1.0", "karma-sonarqube-unit-reporter": "^0.0.23", - "msw": "^2.3.4", + "msw": "^2.3.5", "msw-storybook-addon": "^2.0.3", "ng-packagr": "18.1.0", "ngx-build-plus": "^18.0.0", @@ -7346,16 +7346,16 @@ } }, "node_modules/@storybook/core-server": { - "version": "8.2.6", - "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-8.2.6.tgz", - "integrity": "sha512-L8wT5C9D33gk8Y6fV9Gak52V/pzm60+TXXFRW2+YYMyRwyjC1c/eDePlrRIu7jAJiEs9UmdxxUwM4R/iEhOHzg==", + "version": "8.2.7", + "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-8.2.7.tgz", + "integrity": "sha512-eZTV5CAbhXu5VErqUWt9O/nMEviRT10ivHplb7ftD1nHIHmBY7leEBlESYJF4ddxzWgfw0e9xTh+v5k0l7PfEA==", "dev": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^8.2.6" + "storybook": "^8.2.7" } }, "node_modules/@storybook/core-webpack": { @@ -7899,9 +7899,9 @@ } }, "node_modules/@swc/core": { - "version": "1.7.4", - "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.7.4.tgz", - "integrity": "sha512-+wSycNxOw9QQz81AJAZlNS34EtOIifwUXMPACg05PWjECsjOKDTXLCVPx6J0lRaxhHSGBU2OYs9mRfIvxGt3CA==", + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.7.6.tgz", + "integrity": "sha512-FZxyao9eQks1MRmUshgsZTmlg/HB2oXK5fghkoWJm/1CU2q2kaJlVDll2as5j+rmWiwkp0Gidlq8wlXcEEAO+g==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -7916,16 +7916,16 @@ "url": "https://opencollective.com/swc" }, "optionalDependencies": { - "@swc/core-darwin-arm64": "1.7.4", - "@swc/core-darwin-x64": "1.7.4", - "@swc/core-linux-arm-gnueabihf": "1.7.4", - "@swc/core-linux-arm64-gnu": "1.7.4", - "@swc/core-linux-arm64-musl": "1.7.4", - "@swc/core-linux-x64-gnu": "1.7.4", - "@swc/core-linux-x64-musl": "1.7.4", - "@swc/core-win32-arm64-msvc": "1.7.4", - "@swc/core-win32-ia32-msvc": "1.7.4", - "@swc/core-win32-x64-msvc": "1.7.4" + "@swc/core-darwin-arm64": "1.7.6", + "@swc/core-darwin-x64": "1.7.6", + "@swc/core-linux-arm-gnueabihf": "1.7.6", + "@swc/core-linux-arm64-gnu": "1.7.6", + "@swc/core-linux-arm64-musl": "1.7.6", + "@swc/core-linux-x64-gnu": "1.7.6", + "@swc/core-linux-x64-musl": "1.7.6", + "@swc/core-win32-arm64-msvc": "1.7.6", + "@swc/core-win32-ia32-msvc": "1.7.6", + "@swc/core-win32-x64-msvc": "1.7.6" }, "peerDependencies": { "@swc/helpers": "*" @@ -7936,10 +7936,90 @@ } } }, + "node_modules/@swc/core-darwin-arm64": { + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.6.tgz", + "integrity": "sha512-6lYHey84ZzsdtC7UuPheM4Rm0Inzxm6Sb8U6dmKc4eCx8JL0LfWG4LC5RsdsrTxnjTsbriWlnhZBffh8ijUHIQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-darwin-x64": { + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.7.6.tgz", + "integrity": "sha512-Fyl+8aH9O5rpx4O7r2KnsPpoi32iWoKOYKiipeTbGjQ/E95tNPxbmsz4yqE8Ovldcga60IPJ5OKQA3HWRiuzdw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm-gnueabihf": { + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.6.tgz", + "integrity": "sha512-2WxYTqFaOx48GKC2cbO1/IntA+w+kfCFy436Ij7qRqqtV/WAvTM9TC1OmiFbqq436rSot52qYmX8fkwdB5UcLQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-gnu": { + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.6.tgz", + "integrity": "sha512-TBEGMSe0LhvPe4S7E68c7VzgT3OMu4VTmBLS7B2aHv4v8uZO92Khpp7L0WqgYU1y5eMjk+XLDLi4kokiNHv/Hg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-musl": { + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.6.tgz", + "integrity": "sha512-QI8QGL0HGT42tj7F1A+YAzhGkJjUcvvTfI1e2m704W0Enl2/UIK9v5D1zvQzYwusRyKuaQfbeBRYDh0NcLOGLg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, "node_modules/@swc/core-linux-x64-gnu": { - "version": "1.7.4", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.4.tgz", - "integrity": "sha512-bcO1MpAm39TXqqHuYW4ox4vDvhB7jkguwMwxvmL+cKBGsUHrIoUTfGt9NM9N4D4CvOwULlxqbyt19veUJ7CVPw==", + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.6.tgz", + "integrity": "sha512-61AYVzhjuNQAVIKKWOJu3H0/pFD28RYJGxnGg3YMhvRLRyuWNyY5Nyyj2WkKcz/ON+g38Arlz00NT1LDIViRLg==", "cpu": [ "x64" ], @@ -7953,9 +8033,9 @@ } }, "node_modules/@swc/core-linux-x64-musl": { - "version": "1.7.4", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.4.tgz", - "integrity": "sha512-N6nXuHyDO/q5kPN2xQxz5BEvhFpgnFSkP+9wxg5xWq+qIQL5bv37jk8dkKvMLx/8fHzTqrIjPDSRzVbcL7sqXg==", + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.6.tgz", + "integrity": "sha512-hQFznpfLK8XajfAAN9Cjs0w/aVmO7iu9VZvInyrTCRcPqxV5O+rvrhRxKvC1LRMZXr5M6JRSRtepp5w+TK4kAw==", "cpu": [ "x64" ], @@ -7968,6 +8048,54 @@ "node": ">=10" } }, + "node_modules/@swc/core-win32-arm64-msvc": { + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.6.tgz", + "integrity": "sha512-Aqsd9afykVMuekzjm4X4TDqwxmG4CrzoOSFe0hZrn9SMio72l5eAPnMtYoe5LsIqtjV8MNprLfXaNbjHjTegmA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-ia32-msvc": { + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.6.tgz", + "integrity": "sha512-9h0hYnOeRVNeQgHQTvD1Im67faNSSzBZ7Adtxyu9urNLfBTJilMllFd2QuGHlKW5+uaT6ZH7ZWDb+c/enx7Lcg==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-x64-msvc": { + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.6.tgz", + "integrity": "sha512-izeoB8glCSe6IIDQmrVm6bvR9muk9TeKgmtY7b6l1BwL4BFnTUk4dMmpbntT90bEVQn3JPCaPtUG4HfL8VuyuA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, "node_modules/@swc/counter": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", @@ -8319,11 +8447,11 @@ } }, "node_modules/@types/node": { - "version": "22.0.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.0.2.tgz", - "integrity": "sha512-yPL6DyFwY5PiMVEwymNeqUTKsDczQBJ/5T7W/46RwLU/VH+AA8aT5TZkvBviLKLbbm0hlfftEkGrNzfRk/fofQ==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.1.0.tgz", + "integrity": "sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==", "dependencies": { - "undici-types": "~6.11.1" + "undici-types": "~6.13.0" } }, "node_modules/@types/node-forge": { @@ -18292,9 +18420,9 @@ } }, "node_modules/msw": { - "version": "2.3.4", - "resolved": "https://registry.npmjs.org/msw/-/msw-2.3.4.tgz", - "integrity": "sha512-sHMlwrajgmZSA2l1o7qRSe+azm/I+x9lvVVcOxAzi4vCtH8uVPJk1K5BQYDkzGl+tt0RvM9huEXXdeGrgcc79g==", + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/msw/-/msw-2.3.5.tgz", + "integrity": "sha512-+GUI4gX5YC5Bv33epBrD+BGdmDvBg2XGruiWnI3GbIbRmMMBeZ5gs3mJ51OWSGHgJKztZ8AtZeYMMNMVrje2/Q==", "hasInstallScript": true, "dependencies": { "@bundled-es-modules/cookie": "^2.0.0", @@ -24776,9 +24904,9 @@ } }, "node_modules/undici-types": { - "version": "6.11.1", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.11.1.tgz", - "integrity": "sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==" + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.13.0.tgz", + "integrity": "sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==" }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", diff --git a/package.json b/package.json index e5210dc..69c7a2b 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ }, "scripts": { "build": "ng build", - "clean": "npm cache clean --force && ng cache clean && rm .eslintcache", + "clean": "npm cache clean --force && ng cache clean && rm -f .eslintcache && rm -f ./node_modules/.cache/prettier/.prettier-cache", "start": "ng serve --configuration=development --proxy-config=proxy.conf.js", "prepare": "husky", "lint": "ng lint --cache=true", @@ -88,14 +88,14 @@ "@schematics/angular": "^18.1.2", "@storybook/addon-essentials": "8.2.7", "@storybook/angular": "8.2.7", - "@storybook/core-server": "8.2.6", + "@storybook/core-server": "8.2.7", "@svgr/webpack": "^8.1.0", "@swc-node/register": "^1.10.9", "@swc/cli": "~0.4.0", - "@swc/core": "^1.7.3", + "@swc/core": "^1.7.5", "@swc/helpers": "0.5.12", "@types/jasmine": "~5.1.4", - "@types/node": "22.0.2", + "@types/node": "22.1.0", "@typescript-eslint/eslint-plugin": "7.18.0", "@typescript-eslint/parser": "7.18.0", "css-loader": "^7.1.2", @@ -114,7 +114,7 @@ "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.1.0", "karma-sonarqube-unit-reporter": "^0.0.23", - "msw": "^2.3.4", + "msw": "^2.3.5", "msw-storybook-addon": "^2.0.3", "ng-packagr": "18.1.0", "ngx-build-plus": "^18.0.0", diff --git a/src/_mixins.scss b/src/_mixins.scss index c574efd..f3db94c 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -268,3 +268,33 @@ } } } + +@mixin displaying-text-responsive { + :host ::ng-deep { + .text-responsive { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } +} + +@mixin media-queries { + :host ::ng-deep { + @media screen and (min-width: 768px) { + .md\:h-2-5rem { + height: 2.5rem !important; + } + .md\:h-3-5rem { + height: 3.5rem !important; + } + } + @media screen and (min-width: 576px) { + .card-badge-right { + &.sm\:badge-2-2 { + top: 33px !important; + } + } + } + } +} diff --git a/src/app/permission/app-detail/app-detail.component.html b/src/app/permission/app-detail/app-detail.component.html index 38e7fb3..93d478b 100644 --- a/src/app/permission/app-detail/app-detail.component.html +++ b/src/app/permission/app-detail/app-detail.component.html @@ -246,7 +246,7 @@ {{ 'PERMISSION.ACTIONS' | translate }} @@ -499,22 +499,17 @@ > - - {{ rowData.resource }} # - {{ rowData.action }} -
{{ limitText(rowData.description, 60) }}
+ +
{{ rowData.resource }} # {{ rowData.action }}
+ - -
{{ rowData.productDisplayName }}
-
{{ rowData.productName }}
+ +
{{ rowData.productDisplayName }}
+ - -
{{ rowData.appDisplayName }}
-
{{ rowData.appId }}
+ +
{{ rowData.appDisplayName }}
+ -
+
{{ app.apps }} -
-
- {{ limitText(app.displayName, 20) }} -
-
- {{ limitText(app.productName, 20) }} -
-
{{ 'APP.TYPE_'.concat(app.appType) | translate }}
+
+ {{ app.appType === 'WORKSPACE' ? app.displayName : app.productName }}
+
{{ 'APP.TYPE_'.concat(app.appType) | translate }}
diff --git a/src/app/permission/app-search/app-search.component.scss b/src/app/permission/app-search/app-search.component.scss index 1d4c0d9..6b87138 100644 --- a/src/app/permission/app-search/app-search.component.scss +++ b/src/app/permission/app-search/app-search.component.scss @@ -5,9 +5,11 @@ @include correct-select-button; @include search-criteria-select-button; @include card-badges; +@include displaying-text-responsive; +@include media-queries; -@media screen and (min-width: 768px) { - .md\:h-2-5rem { - height: 2.5rem !important; +:host { + .card-badge-right.badge-2-1 { + top: 20px; } }