Fix: connection multi line style

This commit is contained in:
Dreamacro 2021-07-26 21:09:01 +08:00
parent 91f25ba175
commit b0a3ea78b5
4 changed files with 30 additions and 31 deletions

View File

@ -26,8 +26,8 @@
}, },
"devDependencies": { "devDependencies": {
"@types/lodash-es": "^4.17.4", "@types/lodash-es": "^4.17.4",
"@types/node": "^16.4.0", "@types/node": "^16.4.3",
"@types/react": "^17.0.14", "@types/react": "^17.0.15",
"@types/react-dom": "^17.0.9", "@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.8", "@types/react-router-dom": "^5.1.8",
"@types/react-table": "^7.7.2", "@types/react-table": "^7.7.2",
@ -40,18 +40,18 @@
"eslint": "^7.31.0", "eslint": "^7.31.0",
"eslint-config-react-app": "^6.0.0", "eslint-config-react-app": "^6.0.0",
"eslint-config-standard-with-typescript": "^20.0.0", "eslint-config-standard-with-typescript": "^20.0.0",
"eslint-plugin-flowtype": "^5.8.0", "eslint-plugin-flowtype": "^5.8.1",
"eslint-plugin-import": "^2.23.4", "eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-node": "^11.1.0", "eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0", "eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.24.0", "eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-react-hooks": "^4.2.0",
"sass": "^1.35.2", "sass": "^1.36.0",
"type-fest": "^1.2.2", "type-fest": "^1.2.2",
"typescript": "^4.3.5", "typescript": "^4.3.5",
"vite": "^2.4.3", "vite": "^2.4.3",
"vite-plugin-pwa": "^0.8.1", "vite-plugin-pwa": "^0.8.2",
"vite-plugin-windicss": "^1.2.5", "vite-plugin-windicss": "^1.2.5",
"vite-tsconfig-paths": "^3.3.13", "vite-tsconfig-paths": "^3.3.13",
"windicss": "^3.1.5" "windicss": "^3.1.5"

View File

@ -15,14 +15,14 @@ export function Devices (props: DevicesProps) {
const t = useMemo(() => translation('Connections').t, [translation]) const t = useMemo(() => translation('Connections').t, [translation])
const { className, style } = props const { className, style } = props
const classname = classnames('connections-devices', className) const classname = classnames('flex flex-wrap px-1', className)
function handleSelected (label: string) { function handleSelected (label: string) {
props.onChange?.(label) props.onChange?.(label)
} }
return ( return (
<div className={classname} style={style}> <div className={classname} style={style}>
<div className={classnames('connections-devices-item', { selected: props.selected === '' })} onClick={() => handleSelected('')}> <div className={classnames('connections-devices-item pt-2 mb-2', { selected: props.selected === '' })} onClick={() => handleSelected('')}>
{ t('filter.all') } { t('filter.all') }
</div> </div>
{ {
@ -30,7 +30,7 @@ export function Devices (props: DevicesProps) {
device => ( device => (
<div <div
key={device.label} key={device.label}
className={classnames('connections-devices-item', { selected: props.selected === device.label })} className={classnames('connections-devices-item pt-2 mb-2', { selected: props.selected === device.label })}
onClick={() => handleSelected(device.label)}> onClick={() => handleSelected(device.label)}>
{ device.label } ({ device.number }) { device.label } ({ device.number })
</div> </div>

View File

@ -1,10 +1,4 @@
.connections-devices {
display: flex;
padding: 8px 2px;
}
.connections-devices-item { .connections-devices-item {
padding: 4px 0;
margin-right: 20px; margin-right: 20px;
font-size: 14px; font-size: 14px;
color: $color-gray-darken; color: $color-gray-darken;

View File

@ -1276,11 +1276,16 @@
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q== integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
"@types/node@*", "@types/node@^16.4.0": "@types/node@*":
version "16.4.0" version "16.4.0"
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.0.tgz#2c219eaa3b8d1e4d04f4dd6e40bc68c7467d5272" resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.0.tgz#2c219eaa3b8d1e4d04f4dd6e40bc68c7467d5272"
integrity sha512-HrJuE7Mlqcjj+00JqMWpZ3tY8w7EUd+S0U3L1+PQSWiXZbOgyQDvi+ogoUxaHApPJq5diKxYBQwA3iIlNcPqOg== integrity sha512-HrJuE7Mlqcjj+00JqMWpZ3tY8w7EUd+S0U3L1+PQSWiXZbOgyQDvi+ogoUxaHApPJq5diKxYBQwA3iIlNcPqOg==
"@types/node@^16.4.3":
version "16.4.3"
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.3.tgz#c01c1a215721f6dec71b47d88b4687463601ba48"
integrity sha512-GKM4FLMkWDc0sfx7tXqPWkM6NBow1kge0fgQh0bOnlqo4iT1kvTvMEKE0c1RtUGnbLlGRXiAA8SumE//90uKAg==
"@types/prop-types@*": "@types/prop-types@*":
version "15.7.3" version "15.7.3"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@ -1340,10 +1345,10 @@
"@types/scheduler" "*" "@types/scheduler" "*"
csstype "^3.0.2" csstype "^3.0.2"
"@types/react@^17.0.14": "@types/react@^17.0.15":
version "17.0.14" version "17.0.15"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.14.tgz#f0629761ca02945c4e8fea99b8177f4c5c61fb0f" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.15.tgz#c7533dc38025677e312606502df7656a6ea626d0"
integrity sha512-0WwKHUbWuQWOce61UexYuWTGuGY/8JvtUe/dtQ6lR4sZ3UiylHotJeWpf3ArP9+DSGUoLY3wbU59VyMrJps5VQ== integrity sha512-uTKHDK9STXFHLaKv6IMnwp52fm0hwU+N89w/p9grdUqcFA6WuqDyPhaWopbNyE1k/VhgzmHl8pu1L4wITtmlLw==
dependencies: dependencies:
"@types/prop-types" "*" "@types/prop-types" "*"
"@types/scheduler" "*" "@types/scheduler" "*"
@ -2155,10 +2160,10 @@ eslint-plugin-es@^3.0.0:
eslint-utils "^2.0.0" eslint-utils "^2.0.0"
regexpp "^3.0.0" regexpp "^3.0.0"
eslint-plugin-flowtype@^5.8.0: eslint-plugin-flowtype@^5.8.1:
version "5.8.0" version "5.8.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.8.0.tgz#35b55e4ce559b90efbe913ed33630e391e301481" resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.8.1.tgz#6f2c313a6e9ec271a51315ccd09c2432b4d1930e"
integrity sha512-feK1xnUTsMSNTOw9jFw7aVgZl7Ep+ghpta/YEoaV6jbXU6Yso30B7BIj9ObHLzZ5TFJL7D98az080wfykLCrcw== integrity sha512-ADe4cYAn1UYVs1P1F9wKDNP2lbm3JtwbFykxJpO129utErjAhRZYQJCIKmhy6Rpx7Q9p8pc3gLVIFXtatXJriQ==
dependencies: dependencies:
lodash "^4.17.15" lodash "^4.17.15"
string-natural-compare "^3.0.1" string-natural-compare "^3.0.1"
@ -3659,10 +3664,10 @@ safe-buffer@~5.1.1:
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
sass@^1.35.2: sass@^1.36.0:
version "1.35.2" version "1.36.0"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.35.2.tgz#b732314fcdaf7ef8d0f1698698adc378043cb821" resolved "https://registry.yarnpkg.com/sass/-/sass-1.36.0.tgz#5912ef9d5d16714171ba11cb17edb274c4bbc07e"
integrity sha512-jhO5KAR+AMxCEwIH3v+4zbB2WB0z67V1X0jbapfVwQQdjHZUGUyukpnoM6+iCMfsIUC016w9OPKQ5jrNOS9uXw== integrity sha512-fQzEjipfOv5kh930nu3Imzq3ie/sGDc/4KtQMJlt7RRdrkQSfe37Bwi/Rf/gfuYHsIuE1fIlDMvpyMcEwjnPvg==
dependencies: dependencies:
chokidar ">=3.0.0 <4.0.0" chokidar ">=3.0.0 <4.0.0"
@ -4178,10 +4183,10 @@ value-equal@^1.0.1:
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c" resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw== integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
vite-plugin-pwa@^0.8.1: vite-plugin-pwa@^0.8.2:
version "0.8.1" version "0.8.2"
resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.8.1.tgz#8b6fc6c26fcc6fab9d39a087256ba6280173b6eb" resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.8.2.tgz#2789a157e2f71faf834d968945efc22eee9ad64a"
integrity sha512-Hrfz+NpZ6yroVm5yiCWQ1N9HX9o6H/CCyg7ZHiaP3ZZC29a0Z9lqnnicEAhZMLkVPJqHM60wowL0EJkyOVyxBg== integrity sha512-DuhFaTTV+a7FczxtKMgBEsaCOifJT5Kpe1KhHL72exb2buPkJ3Na+hoy6akAFDp7T3JuAvH0CAO9kivwbp0MPQ==
dependencies: dependencies:
debug "^4.3.2" debug "^4.3.2"
fast-glob "^3.2.5" fast-glob "^3.2.5"