style: responsive design for NodeAnalytic in dashboard

This commit is contained in:
0xJacky 2023-12-17 14:07:07 +08:00
parent a63e85aa37
commit f2f2ee1379
No known key found for this signature in database
GPG key ID: B6E4A6E4A561BAF0
5 changed files with 276 additions and 190 deletions

View file

@ -53,7 +53,7 @@
"@vue/tsconfig": "^0.4.0",
"ace-builds": "^1.32.0",
"autoprefixer": "^10.4.16",
"eslint": "^8.54.0",
"eslint": "^8.56.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.29.0",

252
app/pnpm-lock.yaml generated
View file

@ -93,7 +93,7 @@ dependencies:
devDependencies:
'@antfu/eslint-config-vue':
specifier: ^0.43.1
version: 0.43.1(@typescript-eslint/eslint-plugin@6.13.1)(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)(typescript@5.3.2)
version: 0.43.1(@typescript-eslint/eslint-plugin@6.13.1)(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)(typescript@5.3.2)
'@types/lodash':
specifier: ^4.14.202
version: 4.14.202
@ -105,10 +105,10 @@ devDependencies:
version: 1.15.7
'@typescript-eslint/eslint-plugin':
specifier: ^6.13.0
version: 6.13.1(@typescript-eslint/parser@6.13.1)(eslint@8.55.0)(typescript@5.3.2)
version: 6.13.1(@typescript-eslint/parser@6.13.1)(eslint@8.56.0)(typescript@5.3.2)
'@typescript-eslint/parser':
specifier: ^6.13.0
version: 6.13.1(eslint@8.55.0)(typescript@5.3.2)
version: 6.13.1(eslint@8.56.0)(typescript@5.3.2)
'@vitejs/plugin-vue':
specifier: ^4.5.0
version: 4.5.1(vite@5.0.9)(vue@3.3.11)
@ -128,26 +128,26 @@ devDependencies:
specifier: ^10.4.16
version: 10.4.16(postcss@8.4.32)
eslint:
specifier: ^8.54.0
version: 8.55.0
specifier: ^8.56.0
version: 8.56.0
eslint-import-resolver-alias:
specifier: ^1.1.2
version: 1.1.2(eslint-plugin-import@2.29.0)
eslint-import-resolver-typescript:
specifier: ^3.6.1
version: 3.6.1(@typescript-eslint/parser@6.13.1)(eslint-plugin-import@2.29.0)(eslint@8.55.0)
version: 3.6.1(@typescript-eslint/parser@6.13.1)(eslint-plugin-import@2.29.0)(eslint@8.56.0)
eslint-plugin-import:
specifier: ^2.29.0
version: 2.29.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)
version: 2.29.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
eslint-plugin-regex:
specifier: ^1.10.0
version: 1.10.0(eslint@8.55.0)
version: 1.10.0(eslint@8.56.0)
eslint-plugin-sonarjs:
specifier: ^0.23.0
version: 0.23.0(eslint@8.55.0)
version: 0.23.0(eslint@8.56.0)
eslint-plugin-vue:
specifier: ^9.18.1
version: 9.19.2(eslint@8.55.0)
version: 9.19.2(eslint@8.56.0)
less:
specifier: ^4.2.0
version: 4.2.0
@ -219,26 +219,26 @@ packages:
vue: 3.3.11(typescript@5.3.2)
dev: false
/@antfu/eslint-config-basic@0.43.1(@typescript-eslint/eslint-plugin@6.13.1)(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)(typescript@5.3.2):
/@antfu/eslint-config-basic@0.43.1(@typescript-eslint/eslint-plugin@6.13.1)(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)(typescript@5.3.2):
resolution: {integrity: sha512-SW6hmGmqI985fsCJ+oivo4MbiMmRMgCJ0Ne8j/hwCB6O6Mc0m5bDqYeKn5HqFhvZhG84GEg5jPDKNiHrBYnQjw==}
peerDependencies:
eslint: '>=7.4.0'
dependencies:
'@stylistic/eslint-plugin-js': 0.0.4
eslint: 8.55.0
eslint-plugin-antfu: 0.43.1(eslint@8.55.0)(typescript@5.3.2)
eslint-plugin-eslint-comments: 3.2.0(eslint@8.55.0)
eslint: 8.56.0
eslint-plugin-antfu: 0.43.1(eslint@8.56.0)(typescript@5.3.2)
eslint-plugin-eslint-comments: 3.2.0(eslint@8.56.0)
eslint-plugin-html: 7.1.0
eslint-plugin-import: /eslint-plugin-i@2.28.1(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)
eslint-plugin-jsdoc: 46.9.0(eslint@8.55.0)
eslint-plugin-jsonc: 2.10.0(eslint@8.55.0)
eslint-plugin-markdown: 3.0.1(eslint@8.55.0)
eslint-plugin-n: 16.3.1(eslint@8.55.0)
eslint-plugin-import: /eslint-plugin-i@2.28.1(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
eslint-plugin-jsdoc: 46.9.0(eslint@8.56.0)
eslint-plugin-jsonc: 2.10.0(eslint@8.56.0)
eslint-plugin-markdown: 3.0.1(eslint@8.56.0)
eslint-plugin-n: 16.3.1(eslint@8.56.0)
eslint-plugin-no-only-tests: 3.1.0
eslint-plugin-promise: 6.1.1(eslint@8.55.0)
eslint-plugin-unicorn: 48.0.1(eslint@8.55.0)
eslint-plugin-unused-imports: 3.0.0(@typescript-eslint/eslint-plugin@6.13.1)(eslint@8.55.0)
eslint-plugin-yml: 1.10.0(eslint@8.55.0)
eslint-plugin-promise: 6.1.1(eslint@8.56.0)
eslint-plugin-unicorn: 48.0.1(eslint@8.56.0)
eslint-plugin-unused-imports: 3.0.0(@typescript-eslint/eslint-plugin@6.13.1)(eslint@8.56.0)
eslint-plugin-yml: 1.10.0(eslint@8.56.0)
jsonc-eslint-parser: 2.4.0
yaml-eslint-parser: 1.2.2
transitivePeerDependencies:
@ -250,18 +250,18 @@ packages:
- typescript
dev: true
/@antfu/eslint-config-ts@0.43.1(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)(typescript@5.3.2):
/@antfu/eslint-config-ts@0.43.1(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)(typescript@5.3.2):
resolution: {integrity: sha512-s3zItBSopYbM/3eii/JKas1PmWR+wCPRNS89qUi4zxPvpuIgN5mahkBvbsCiWacrNFtLxe1zGgo5qijBhVfuvA==}
peerDependencies:
eslint: '>=7.4.0'
typescript: '>=3.9'
dependencies:
'@antfu/eslint-config-basic': 0.43.1(@typescript-eslint/eslint-plugin@6.13.1)(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)(typescript@5.3.2)
'@stylistic/eslint-plugin-ts': 0.0.4(eslint@8.55.0)(typescript@5.3.2)
'@typescript-eslint/eslint-plugin': 6.13.1(@typescript-eslint/parser@6.13.1)(eslint@8.55.0)(typescript@5.3.2)
'@typescript-eslint/parser': 6.13.1(eslint@8.55.0)(typescript@5.3.2)
eslint: 8.55.0
eslint-plugin-jest: 27.6.0(@typescript-eslint/eslint-plugin@6.13.1)(eslint@8.55.0)(typescript@5.3.2)
'@antfu/eslint-config-basic': 0.43.1(@typescript-eslint/eslint-plugin@6.13.1)(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)(typescript@5.3.2)
'@stylistic/eslint-plugin-ts': 0.0.4(eslint@8.56.0)(typescript@5.3.2)
'@typescript-eslint/eslint-plugin': 6.13.1(@typescript-eslint/parser@6.13.1)(eslint@8.56.0)(typescript@5.3.2)
'@typescript-eslint/parser': 6.13.1(eslint@8.56.0)(typescript@5.3.2)
eslint: 8.56.0
eslint-plugin-jest: 27.6.0(@typescript-eslint/eslint-plugin@6.13.1)(eslint@8.56.0)(typescript@5.3.2)
typescript: 5.3.2
transitivePeerDependencies:
- eslint-import-resolver-typescript
@ -270,15 +270,15 @@ packages:
- supports-color
dev: true
/@antfu/eslint-config-vue@0.43.1(@typescript-eslint/eslint-plugin@6.13.1)(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)(typescript@5.3.2):
/@antfu/eslint-config-vue@0.43.1(@typescript-eslint/eslint-plugin@6.13.1)(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)(typescript@5.3.2):
resolution: {integrity: sha512-HxOfe8Vl+DPrzssbs5LHRDCnBtCy1LSA1DIeV71IC+iTpzoASFahSsVX5qckYu1InFgUm93XOhHCWm34LzPsvg==}
peerDependencies:
eslint: '>=7.4.0'
dependencies:
'@antfu/eslint-config-basic': 0.43.1(@typescript-eslint/eslint-plugin@6.13.1)(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)(typescript@5.3.2)
'@antfu/eslint-config-ts': 0.43.1(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)(typescript@5.3.2)
eslint: 8.55.0
eslint-plugin-vue: 9.19.2(eslint@8.55.0)
'@antfu/eslint-config-basic': 0.43.1(@typescript-eslint/eslint-plugin@6.13.1)(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)(typescript@5.3.2)
'@antfu/eslint-config-ts': 0.43.1(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)(typescript@5.3.2)
eslint: 8.56.0
eslint-plugin-vue: 9.19.2(eslint@8.56.0)
local-pkg: 0.4.3
transitivePeerDependencies:
- '@typescript-eslint/eslint-plugin'
@ -780,13 +780,13 @@ packages:
requiresBuild: true
optional: true
/@eslint-community/eslint-utils@4.4.0(eslint@8.55.0):
/@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
dependencies:
eslint: 8.55.0
eslint: 8.56.0
eslint-visitor-keys: 3.4.3
dev: true
@ -812,8 +812,8 @@ packages:
- supports-color
dev: true
/@eslint/js@8.55.0:
resolution: {integrity: sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==}
/@eslint/js@8.56.0:
resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true
@ -1026,7 +1026,7 @@ packages:
graphemer: 1.4.0
dev: true
/@stylistic/eslint-plugin-ts@0.0.4(eslint@8.55.0)(typescript@5.3.2):
/@stylistic/eslint-plugin-ts@0.0.4(eslint@8.56.0)(typescript@5.3.2):
resolution: {integrity: sha512-sWL4Km5j8S+TLyzya/3adxMWGkCm3lVasJIVQqhxVfwnlGkpMI0GgYVIu/ubdKPS+dSvqjUHpsXgqWfMRF2+cQ==}
peerDependencies:
eslint: '*'
@ -1034,9 +1034,9 @@ packages:
dependencies:
'@stylistic/eslint-plugin-js': 0.0.4
'@typescript-eslint/scope-manager': 6.13.1
'@typescript-eslint/type-utils': 6.13.1(eslint@8.55.0)(typescript@5.3.2)
'@typescript-eslint/utils': 6.13.1(eslint@8.55.0)(typescript@5.3.2)
eslint: 8.55.0
'@typescript-eslint/type-utils': 6.13.1(eslint@8.56.0)(typescript@5.3.2)
'@typescript-eslint/utils': 6.13.1(eslint@8.56.0)(typescript@5.3.2)
eslint: 8.56.0
graphemer: 1.4.0
typescript: 5.3.2
transitivePeerDependencies:
@ -1117,7 +1117,7 @@ packages:
/@types/web-bluetooth@0.0.20:
resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
/@typescript-eslint/eslint-plugin@6.13.1(@typescript-eslint/parser@6.13.1)(eslint@8.55.0)(typescript@5.3.2):
/@typescript-eslint/eslint-plugin@6.13.1(@typescript-eslint/parser@6.13.1)(eslint@8.56.0)(typescript@5.3.2):
resolution: {integrity: sha512-5bQDGkXaxD46bPvQt08BUz9YSaO4S0fB1LB5JHQuXTfkGPI3+UUeS387C/e9jRie5GqT8u5kFTrMvAjtX4O5kA==}
engines: {node: ^16.0.0 || >=18.0.0}
peerDependencies:
@ -1129,13 +1129,13 @@ packages:
optional: true
dependencies:
'@eslint-community/regexpp': 4.10.0
'@typescript-eslint/parser': 6.13.1(eslint@8.55.0)(typescript@5.3.2)
'@typescript-eslint/parser': 6.13.1(eslint@8.56.0)(typescript@5.3.2)
'@typescript-eslint/scope-manager': 6.13.1
'@typescript-eslint/type-utils': 6.13.1(eslint@8.55.0)(typescript@5.3.2)
'@typescript-eslint/utils': 6.13.1(eslint@8.55.0)(typescript@5.3.2)
'@typescript-eslint/type-utils': 6.13.1(eslint@8.56.0)(typescript@5.3.2)
'@typescript-eslint/utils': 6.13.1(eslint@8.56.0)(typescript@5.3.2)
'@typescript-eslint/visitor-keys': 6.13.1
debug: 4.3.4
eslint: 8.55.0
eslint: 8.56.0
graphemer: 1.4.0
ignore: 5.3.0
natural-compare: 1.4.0
@ -1146,7 +1146,7 @@ packages:
- supports-color
dev: true
/@typescript-eslint/parser@6.13.1(eslint@8.55.0)(typescript@5.3.2):
/@typescript-eslint/parser@6.13.1(eslint@8.56.0)(typescript@5.3.2):
resolution: {integrity: sha512-fs2XOhWCzRhqMmQf0eicLa/CWSaYss2feXsy7xBD/pLyWke/jCIVc2s1ikEAtSW7ina1HNhv7kONoEfVNEcdDQ==}
engines: {node: ^16.0.0 || >=18.0.0}
peerDependencies:
@ -1161,7 +1161,7 @@ packages:
'@typescript-eslint/typescript-estree': 6.13.1(typescript@5.3.2)
'@typescript-eslint/visitor-keys': 6.13.1
debug: 4.3.4
eslint: 8.55.0
eslint: 8.56.0
typescript: 5.3.2
transitivePeerDependencies:
- supports-color
@ -1183,7 +1183,7 @@ packages:
'@typescript-eslint/visitor-keys': 6.13.1
dev: true
/@typescript-eslint/type-utils@6.13.1(eslint@8.55.0)(typescript@5.3.2):
/@typescript-eslint/type-utils@6.13.1(eslint@8.56.0)(typescript@5.3.2):
resolution: {integrity: sha512-A2qPlgpxx2v//3meMqQyB1qqTg1h1dJvzca7TugM3Yc2USDY+fsRBiojAEo92HO7f5hW5mjAUF6qobOPzlBCBQ==}
engines: {node: ^16.0.0 || >=18.0.0}
peerDependencies:
@ -1194,9 +1194,9 @@ packages:
optional: true
dependencies:
'@typescript-eslint/typescript-estree': 6.13.1(typescript@5.3.2)
'@typescript-eslint/utils': 6.13.1(eslint@8.55.0)(typescript@5.3.2)
'@typescript-eslint/utils': 6.13.1(eslint@8.56.0)(typescript@5.3.2)
debug: 4.3.4
eslint: 8.55.0
eslint: 8.56.0
ts-api-utils: 1.0.3(typescript@5.3.2)
typescript: 5.3.2
transitivePeerDependencies:
@ -1255,19 +1255,19 @@ packages:
- supports-color
dev: true
/@typescript-eslint/utils@5.62.0(eslint@8.55.0)(typescript@5.3.2):
/@typescript-eslint/utils@5.62.0(eslint@8.56.0)(typescript@5.3.2):
resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.55.0)
'@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
'@types/json-schema': 7.0.15
'@types/semver': 7.5.6
'@typescript-eslint/scope-manager': 5.62.0
'@typescript-eslint/types': 5.62.0
'@typescript-eslint/typescript-estree': 5.62.0(typescript@5.3.2)
eslint: 8.55.0
eslint: 8.56.0
eslint-scope: 5.1.1
semver: 7.5.4
transitivePeerDependencies:
@ -1275,19 +1275,19 @@ packages:
- typescript
dev: true
/@typescript-eslint/utils@6.13.1(eslint@8.55.0)(typescript@5.3.2):
/@typescript-eslint/utils@6.13.1(eslint@8.56.0)(typescript@5.3.2):
resolution: {integrity: sha512-ouPn/zVoan92JgAegesTXDB/oUp6BP1v8WpfYcqh649ejNc9Qv+B4FF2Ff626kO1xg0wWwwG48lAJ4JuesgdOw==}
engines: {node: ^16.0.0 || >=18.0.0}
peerDependencies:
eslint: ^7.0.0 || ^8.0.0
dependencies:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.55.0)
'@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
'@types/json-schema': 7.0.15
'@types/semver': 7.5.6
'@typescript-eslint/scope-manager': 6.13.1
'@typescript-eslint/types': 6.13.1
'@typescript-eslint/typescript-estree': 6.13.1(typescript@5.3.2)
eslint: 8.55.0
eslint: 8.56.0
semver: 7.5.4
transitivePeerDependencies:
- supports-color
@ -2425,13 +2425,13 @@ packages:
engines: {node: '>=12'}
dev: true
/eslint-compat-utils@0.1.2(eslint@8.55.0):
/eslint-compat-utils@0.1.2(eslint@8.56.0):
resolution: {integrity: sha512-Jia4JDldWnFNIru1Ehx1H5s9/yxiRHY/TimCuUc0jNexew3cF1gI6CYZil1ociakfWO3rRqFjl1mskBblB3RYg==}
engines: {node: '>=12'}
peerDependencies:
eslint: '>=6.0.0'
dependencies:
eslint: 8.55.0
eslint: 8.56.0
dev: true
/eslint-import-resolver-alias@1.1.2(eslint-plugin-import@2.29.0):
@ -2440,7 +2440,7 @@ packages:
peerDependencies:
eslint-plugin-import: '>=1.4.0'
dependencies:
eslint-plugin-import: 2.29.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)
eslint-plugin-import: 2.29.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
dev: true
/eslint-import-resolver-node@0.3.9:
@ -2453,7 +2453,7 @@ packages:
- supports-color
dev: true
/eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.13.1)(eslint-plugin-import@2.29.0)(eslint@8.55.0):
/eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.13.1)(eslint-plugin-import@2.29.0)(eslint@8.56.0):
resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
@ -2462,9 +2462,9 @@ packages:
dependencies:
debug: 4.3.4
enhanced-resolve: 5.15.0
eslint: 8.55.0
eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)
eslint-plugin-import: 2.29.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)
eslint: 8.56.0
eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
eslint-plugin-import: 2.29.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
fast-glob: 3.3.2
get-tsconfig: 4.7.2
is-core-module: 2.13.1
@ -2476,7 +2476,7 @@ packages:
- supports-color
dev: true
/eslint-module-utils@2.8.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0):
/eslint-module-utils@2.8.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
engines: {node: '>=4'}
peerDependencies:
@ -2497,45 +2497,45 @@ packages:
eslint-import-resolver-webpack:
optional: true
dependencies:
'@typescript-eslint/parser': 6.13.1(eslint@8.55.0)(typescript@5.3.2)
'@typescript-eslint/parser': 6.13.1(eslint@8.56.0)(typescript@5.3.2)
debug: 3.2.7
eslint: 8.55.0
eslint: 8.56.0
eslint-import-resolver-node: 0.3.9
eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.13.1)(eslint-plugin-import@2.29.0)(eslint@8.55.0)
eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.13.1)(eslint-plugin-import@2.29.0)(eslint@8.56.0)
transitivePeerDependencies:
- supports-color
dev: true
/eslint-plugin-antfu@0.43.1(eslint@8.55.0)(typescript@5.3.2):
/eslint-plugin-antfu@0.43.1(eslint@8.56.0)(typescript@5.3.2):
resolution: {integrity: sha512-Nak+Qpy5qEK10dCXtVaabPTUmLBPLhsVKAFXAtxYGYRlY/SuuZUBhW2YIsLsixNROiICGuov8sN+eNOCC7Wb5g==}
dependencies:
'@typescript-eslint/utils': 6.13.1(eslint@8.55.0)(typescript@5.3.2)
'@typescript-eslint/utils': 6.13.1(eslint@8.56.0)(typescript@5.3.2)
transitivePeerDependencies:
- eslint
- supports-color
- typescript
dev: true
/eslint-plugin-es-x@7.5.0(eslint@8.55.0):
/eslint-plugin-es-x@7.5.0(eslint@8.56.0):
resolution: {integrity: sha512-ODswlDSO0HJDzXU0XvgZ3lF3lS3XAZEossh15Q2UHjwrJggWeBoKqqEsLTZLXl+dh5eOAozG0zRcYtuE35oTuQ==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
eslint: '>=8'
dependencies:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.55.0)
'@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
'@eslint-community/regexpp': 4.10.0
eslint: 8.55.0
eslint-compat-utils: 0.1.2(eslint@8.55.0)
eslint: 8.56.0
eslint-compat-utils: 0.1.2(eslint@8.56.0)
dev: true
/eslint-plugin-eslint-comments@3.2.0(eslint@8.55.0):
/eslint-plugin-eslint-comments@3.2.0(eslint@8.56.0):
resolution: {integrity: sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==}
engines: {node: '>=6.5.0'}
peerDependencies:
eslint: '>=4.19.1'
dependencies:
escape-string-regexp: 1.0.5
eslint: 8.55.0
eslint: 8.56.0
ignore: 5.3.0
dev: true
@ -2545,7 +2545,7 @@ packages:
htmlparser2: 8.0.2
dev: true
/eslint-plugin-i@2.28.1(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0):
/eslint-plugin-i@2.28.1(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
resolution: {integrity: sha512-a4oVt0j3ixNhGhvV4XF6NS7OWRFK2rrJ0Q5C4S2dSRb8FxZi31J0uUd5WJLL58wnVJ/OiQ1BxiXnFA4dWQO1Cg==}
engines: {node: '>=12'}
peerDependencies:
@ -2553,9 +2553,9 @@ packages:
dependencies:
debug: 3.2.7
doctrine: 2.1.0
eslint: 8.55.0
eslint: 8.56.0
eslint-import-resolver-node: 0.3.9
eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)
eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
get-tsconfig: 4.7.2
is-glob: 4.0.3
minimatch: 3.1.2
@ -2568,7 +2568,7 @@ packages:
- supports-color
dev: true
/eslint-plugin-import@2.29.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0):
/eslint-plugin-import@2.29.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
resolution: {integrity: sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==}
engines: {node: '>=4'}
peerDependencies:
@ -2578,16 +2578,16 @@ packages:
'@typescript-eslint/parser':
optional: true
dependencies:
'@typescript-eslint/parser': 6.13.1(eslint@8.55.0)(typescript@5.3.2)
'@typescript-eslint/parser': 6.13.1(eslint@8.56.0)(typescript@5.3.2)
array-includes: 3.1.7
array.prototype.findlastindex: 1.2.3
array.prototype.flat: 1.3.2
array.prototype.flatmap: 1.3.2
debug: 3.2.7
doctrine: 2.1.0
eslint: 8.55.0
eslint: 8.56.0
eslint-import-resolver-node: 0.3.9
eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)
eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.13.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
hasown: 2.0.0
is-core-module: 2.13.1
is-glob: 4.0.3
@ -2603,7 +2603,7 @@ packages:
- supports-color
dev: true
/eslint-plugin-jest@27.6.0(@typescript-eslint/eslint-plugin@6.13.1)(eslint@8.55.0)(typescript@5.3.2):
/eslint-plugin-jest@27.6.0(@typescript-eslint/eslint-plugin@6.13.1)(eslint@8.56.0)(typescript@5.3.2):
resolution: {integrity: sha512-MTlusnnDMChbElsszJvrwD1dN3x6nZl//s4JD23BxB6MgR66TZlL064su24xEIS3VACfAoHV1vgyMgPw8nkdng==}
engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
peerDependencies:
@ -2616,15 +2616,15 @@ packages:
jest:
optional: true
dependencies:
'@typescript-eslint/eslint-plugin': 6.13.1(@typescript-eslint/parser@6.13.1)(eslint@8.55.0)(typescript@5.3.2)
'@typescript-eslint/utils': 5.62.0(eslint@8.55.0)(typescript@5.3.2)
eslint: 8.55.0
'@typescript-eslint/eslint-plugin': 6.13.1(@typescript-eslint/parser@6.13.1)(eslint@8.56.0)(typescript@5.3.2)
'@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@5.3.2)
eslint: 8.56.0
transitivePeerDependencies:
- supports-color
- typescript
dev: true
/eslint-plugin-jsdoc@46.9.0(eslint@8.55.0):
/eslint-plugin-jsdoc@46.9.0(eslint@8.56.0):
resolution: {integrity: sha512-UQuEtbqLNkPf5Nr/6PPRCtr9xypXY+g8y/Q7gPa0YK7eDhh0y2lWprXRnaYbW7ACgIUvpDKy9X2bZqxtGzBG9Q==}
engines: {node: '>=16'}
peerDependencies:
@ -2635,7 +2635,7 @@ packages:
comment-parser: 1.4.1
debug: 4.3.4
escape-string-regexp: 4.0.0
eslint: 8.55.0
eslint: 8.56.0
esquery: 1.5.0
is-builtin-module: 3.2.1
semver: 7.5.4
@ -2644,41 +2644,41 @@ packages:
- supports-color
dev: true
/eslint-plugin-jsonc@2.10.0(eslint@8.55.0):
/eslint-plugin-jsonc@2.10.0(eslint@8.56.0):
resolution: {integrity: sha512-9d//o6Jyh4s1RxC9fNSt1+MMaFN2ruFdXPG9XZcb/mR2KkfjADYiNL/hbU6W0Cyxfg3tS/XSFuhl5LgtMD8hmw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: '>=6.0.0'
dependencies:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.55.0)
eslint: 8.55.0
eslint-compat-utils: 0.1.2(eslint@8.55.0)
'@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
eslint: 8.56.0
eslint-compat-utils: 0.1.2(eslint@8.56.0)
jsonc-eslint-parser: 2.4.0
natural-compare: 1.4.0
dev: true
/eslint-plugin-markdown@3.0.1(eslint@8.55.0):
/eslint-plugin-markdown@3.0.1(eslint@8.56.0):
resolution: {integrity: sha512-8rqoc148DWdGdmYF6WSQFT3uQ6PO7zXYgeBpHAOAakX/zpq+NvFYbDA/H7PYzHajwtmaOzAwfxyl++x0g1/N9A==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies:
eslint: 8.55.0
eslint: 8.56.0
mdast-util-from-markdown: 0.8.5
transitivePeerDependencies:
- supports-color
dev: true
/eslint-plugin-n@16.3.1(eslint@8.55.0):
/eslint-plugin-n@16.3.1(eslint@8.56.0):
resolution: {integrity: sha512-w46eDIkxQ2FaTHcey7G40eD+FhTXOdKudDXPUO2n9WNcslze/i/HT2qJ3GXjHngYSGDISIgPNhwGtgoix4zeOw==}
engines: {node: '>=16.0.0'}
peerDependencies:
eslint: '>=7.0.0'
dependencies:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.55.0)
'@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
builtins: 5.0.1
eslint: 8.55.0
eslint-plugin-es-x: 7.5.0(eslint@8.55.0)
eslint: 8.56.0
eslint-plugin-es-x: 7.5.0(eslint@8.56.0)
get-tsconfig: 4.7.2
ignore: 5.3.0
is-builtin-module: 3.2.1
@ -2693,44 +2693,44 @@ packages:
engines: {node: '>=5.0.0'}
dev: true
/eslint-plugin-promise@6.1.1(eslint@8.55.0):
/eslint-plugin-promise@6.1.1(eslint@8.56.0):
resolution: {integrity: sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: ^7.0.0 || ^8.0.0
dependencies:
eslint: 8.55.0
eslint: 8.56.0
dev: true
/eslint-plugin-regex@1.10.0(eslint@8.55.0):
/eslint-plugin-regex@1.10.0(eslint@8.56.0):
resolution: {integrity: sha512-C8/qYKkkbIb0epxKzaz4aw7oVAOmm19fJpR/moUrUToq/vc4xW4sEKMlTQqH6EtNGpvLjYsbbZRlWNWwQGeTSA==}
engines: {node: '>=6.0.0'}
peerDependencies:
eslint: '>=4.0.0'
dependencies:
eslint: 8.55.0
eslint: 8.56.0
dev: true
/eslint-plugin-sonarjs@0.23.0(eslint@8.55.0):
/eslint-plugin-sonarjs@0.23.0(eslint@8.56.0):
resolution: {integrity: sha512-z44T3PBf9W7qQ/aR+NmofOTyg6HLhSEZOPD4zhStqBpLoMp8GYhFksuUBnCxbnf1nfISpKBVkQhiBLFI/F4Wlg==}
engines: {node: '>=14'}
peerDependencies:
eslint: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies:
eslint: 8.55.0
eslint: 8.56.0
dev: true
/eslint-plugin-unicorn@48.0.1(eslint@8.55.0):
/eslint-plugin-unicorn@48.0.1(eslint@8.56.0):
resolution: {integrity: sha512-FW+4r20myG/DqFcCSzoumaddKBicIPeFnTrifon2mWIzlfyvzwyqZjqVP7m4Cqr/ZYisS2aiLghkUWaPg6vtCw==}
engines: {node: '>=16'}
peerDependencies:
eslint: '>=8.44.0'
dependencies:
'@babel/helper-validator-identifier': 7.22.20
'@eslint-community/eslint-utils': 4.4.0(eslint@8.55.0)
'@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
ci-info: 3.9.0
clean-regexp: 1.0.0
eslint: 8.55.0
eslint: 8.56.0
esquery: 1.5.0
indent-string: 4.0.0
is-builtin-module: 3.2.1
@ -2744,7 +2744,7 @@ packages:
strip-indent: 3.0.0
dev: true
/eslint-plugin-unused-imports@3.0.0(@typescript-eslint/eslint-plugin@6.13.1)(eslint@8.55.0):
/eslint-plugin-unused-imports@3.0.0(@typescript-eslint/eslint-plugin@6.13.1)(eslint@8.56.0):
resolution: {integrity: sha512-sduiswLJfZHeeBJ+MQaG+xYzSWdRXoSw61DpU13mzWumCkR0ufD0HmO4kdNokjrkluMHpj/7PJeN35pgbhW3kw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
@ -2754,38 +2754,38 @@ packages:
'@typescript-eslint/eslint-plugin':
optional: true
dependencies:
'@typescript-eslint/eslint-plugin': 6.13.1(@typescript-eslint/parser@6.13.1)(eslint@8.55.0)(typescript@5.3.2)
eslint: 8.55.0
'@typescript-eslint/eslint-plugin': 6.13.1(@typescript-eslint/parser@6.13.1)(eslint@8.56.0)(typescript@5.3.2)
eslint: 8.56.0
eslint-rule-composer: 0.3.0
dev: true
/eslint-plugin-vue@9.19.2(eslint@8.55.0):
/eslint-plugin-vue@9.19.2(eslint@8.56.0):
resolution: {integrity: sha512-CPDqTOG2K4Ni2o4J5wixkLVNwgctKXFu6oBpVJlpNq7f38lh9I80pRTouZSJ2MAebPJlINU/KTFSXyQfBUlymA==}
engines: {node: ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
dependencies:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.55.0)
eslint: 8.55.0
'@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
eslint: 8.56.0
natural-compare: 1.4.0
nth-check: 2.1.1
postcss-selector-parser: 6.0.13
semver: 7.5.4
vue-eslint-parser: 9.3.2(eslint@8.55.0)
vue-eslint-parser: 9.3.2(eslint@8.56.0)
xml-name-validator: 4.0.0
transitivePeerDependencies:
- supports-color
dev: true
/eslint-plugin-yml@1.10.0(eslint@8.55.0):
/eslint-plugin-yml@1.10.0(eslint@8.56.0):
resolution: {integrity: sha512-53SUwuNDna97lVk38hL/5++WXDuugPM9SUQ1T645R0EHMRCdBIIxGye/oOX2qO3FQ7aImxaUZJU/ju+NMUBrLQ==}
engines: {node: ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: '>=6.0.0'
dependencies:
debug: 4.3.4
eslint: 8.55.0
eslint-compat-utils: 0.1.2(eslint@8.55.0)
eslint: 8.56.0
eslint-compat-utils: 0.1.2(eslint@8.56.0)
lodash: 4.17.21
natural-compare: 1.4.0
yaml-eslint-parser: 1.2.2
@ -2819,15 +2819,15 @@ packages:
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true
/eslint@8.55.0:
resolution: {integrity: sha512-iyUUAM0PCKj5QpwGfmCAG9XXbZCWsqP/eWAWrG/W0umvjuLRBECwSFdt+rCntju0xEH7teIABPwXpahftIaTdA==}
/eslint@8.56.0:
resolution: {integrity: sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
hasBin: true
dependencies:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.55.0)
'@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
'@eslint-community/regexpp': 4.10.0
'@eslint/eslintrc': 2.1.4
'@eslint/js': 8.55.0
'@eslint/js': 8.56.0
'@humanwhocodes/config-array': 0.11.13
'@humanwhocodes/module-importer': 1.0.1
'@nodelib/fs.walk': 1.2.8
@ -5090,14 +5090,14 @@ packages:
dependencies:
vue: 3.3.11(typescript@5.3.2)
/vue-eslint-parser@9.3.2(eslint@8.55.0):
/vue-eslint-parser@9.3.2(eslint@8.56.0):
resolution: {integrity: sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==}
engines: {node: ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: '>=6.0.0'
dependencies:
debug: 4.3.4
eslint: 8.55.0
eslint: 8.56.0
eslint-scope: 7.2.2
eslint-visitor-keys: 3.4.3
espree: 9.6.1

View file

@ -100,6 +100,12 @@ const is_theme_dark = computed(() => settings.theme === 'dark')
border-inline-end: none !important;
}
}
@media (max-width: 512px) {
.ant-card {
border-radius: 0;
}
}
</style>
<style lang="less" scoped>

View file

@ -79,7 +79,48 @@ const visible = computed(() => {
>
<template #renderItem="{ item }">
<AListItem>
<template #actions>
<AListItemMeta>
<template #title>
<div class="mb-1">
{{ item.name }}
<ATag
v-if="item.status"
color="blue"
class="ml-2"
>
{{ $gettext('Online') }}
</ATag>
<ATag
v-else
color="error"
class="ml-2"
>
{{ $gettext('Offline') }}
</ATag>
</div>
<template v-if="item.status">
<div class="runtime-meta mr-2 mb-1">
<Icon :component="pulse" /> {{ formatDateTime(item.response_at) }}
</div>
<div class="runtime-meta mr-2 mb-1">
<ThunderboltOutlined />{{ item.version }}
</div>
</template>
<div class="runtime-meta">
<LinkOutlined />{{ item.url }}
</div>
</template>
<template #avatar>
<AAvatar :src="logo" />
</template>
<template #description>
<div class="md:flex lg:flex justify-between md:items-center">
<NodeAnalyticItem
:item="item"
class="mt-1 mb-1"
/>
<AButton
type="primary"
:disabled="env.id === item.id"
@ -89,36 +130,8 @@ const visible = computed(() => {
<SendOutlined />
{{ env.id !== item.id ? $gettext('Link Start') : $gettext('Connected') }}
</AButton>
</template>
<AListItemMeta>
<template #title>
{{ item.name }}
<ATag
v-if="item.status"
color="blue"
>
{{ $gettext('Online') }}
</ATag>
<ATag
v-else
color="error"
>
{{ $gettext('Offline') }}
</ATag>
<div class="runtime-meta">
<template v-if="item.status">
<span><Icon :component="pulse" /> {{ formatDateTime(item.response_at) }}</span>
<span><ThunderboltOutlined />{{ item.version }}</span>
</template>
<span><LinkOutlined />{{ item.url }}</span>
</div>
</template>
<template #avatar>
<AAvatar :src="logo" />
</template>
<template #description>
<NodeAnalyticItem :item="item" />
</template>
</AListItemMeta>
</AListItem>
</template>
@ -127,30 +140,34 @@ const visible = computed(() => {
</template>
<style scoped lang="less">
:deep(.ant-list-item-meta-title) {
display: flex;
align-items: center;
@media (max-width: 700px) {
display: block;
}
}
.env-list-card {
margin-top: 16px;
.runtime-meta {
display: inline-flex;
@media (max-width: 700px) {
display: block;
margin-top: 5px;
span {
display: flex;
align-items: center;
}
}
span {
font-weight: 400;
font-size: 13px;
margin-right: 16px;
color: #9b9b9b;
&.anticon {
.anticon {
margin-right: 4px;
}
}
}
:deep(.ant-list-item-action) {
@media(max-width: 500px) {
display: none;
}
}
</style>

View file

@ -29,19 +29,23 @@ defineProps<{
<template>
<div class="hardware-monitor">
<div class="hardware-monitor-item longer">
<div>
<LineChartOutlined />
<div class="mb-1">
<LineChartOutlined class="mr-1" />
<span class="load-avg-describe">1min:</span>{{ ` ${item.avg_load?.load1?.toFixed(2)}` }} ·
<span class="load-avg-describe">5min:</span>{{ item.avg_load?.load5?.toFixed(2) }} ·
<span class="load-avg-describe">15min:</span>{{ item.avg_load?.load15?.toFixed(2) }}
</div>
<div>
<div class="flex">
<div class="sm:text-sm md:text-xs lg:text-sm">
<ArrowUpOutlined />
{{ bytesToSize(item?.network?.bytesSent) }}
</div>
<div class="ml-2 sm:text-sm md:text-xs lg:text-sm">
<ArrowDownOutlined />
{{ bytesToSize(item?.network?.bytesRecv) }}
</div>
</div>
</div>
<div class="hardware-monitor-item">
<UsageProgressLine :percent="item.cpu_percent">
<template #icon>
@ -73,26 +77,85 @@ defineProps<{
.hardware-monitor {
display: flex;
@media (max-width: 900px) {
@media (max-width: 1000px) {
display: block;
}
.hardware-monitor-item {
width: 150px;
width: 140px;
margin-right: 20px;
@media(min-width: 1800px) {
width: 300px;
margin-bottom: 10px;
margin-right: 50px;
}
@media(min-width: 1600px) and (max-width: 1800px) {
width: 270px;
margin-bottom: 10px;
margin-right: 20px;
}
@media(min-width: 1500px) and (max-width: 1600px) {
width: 230px;
margin-bottom: 10px;
margin-right: 30px;
@media (max-width: 900px) {
margin-bottom: 5px;
}
@media(min-width: 1400px) and (max-width: 1500px) {
width: 180px;
margin-bottom: 10px;
margin-right: 25px;
}
@media(min-width: 400px) and (max-width: 1000px) {
width: 280px;
margin-bottom: 10px;
}
@media(max-width: 400px) {
width: 200px;
margin-bottom: 10px;
}
}
.longer {
width: 180px;
}
@media (max-width: 400px) {
.longer {
width: 180px;
.load-avg-describe {
display: none;
}
}
}
@media (min-width: 400px) and (max-width: 500px) {
.longer {
width: 300px;
}
}
@media (min-width: 1400px) {
.longer {
min-width: 300px;
}
}
@media (min-width: 1200px) {
.longer {
min-width: 270px;
}
}
@media (min-width: 400px) and (max-width: 1000px) {
.longer {
min-width: 250px;
}
}
@media (min-width: 1100px) and (max-width: 1200px) {
.longer {
min-width: 200px;
}
}
}
.load-avg-describe {
@media (max-width: 1200px) and (min-width: 600px) {
display: none;
}
}
</style>