Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-09-20 01:52:47 +08:00
Code Issues Projects Releases Wiki Activity

fix: proxy providers grid layout

Browse Source
This commit is contained in:
kunish 2023-09-16 01:28:58 +08:00
parent 353b5ebff3
commit 6d242a4457
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
2 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Collapse.tsx
View File

@ -1,15 +1,14 @@
import { JSX, ParentComponent, Show } from 'solid-js'
import { children, JSX, ParentComponent, Show } from 'solid-js'
import { twMerge } from 'tailwind-merge'
type Props = {
title: JSX.Element
content: JSX.Element
isOpen?: boolean
onCollapse: (collapsed: boolean) => void
}
export const Collapse: ParentComponent<Props> = (props) => {
const { title, content, onCollapse } = props
const { title, onCollapse } = props
const getCollapseClassName = () => {
const openedClassName = 'collapse-open'
@ -44,7 +43,7 @@ export const Collapse: ParentComponent<Props> = (props) => {
'collapse-content grid grid-cols-2 gap-2 transition-opacity duration-1000',
)}
>
<Show when={props.isOpen}>{content}</Show>
<Show when={props.isOpen}>{children(() => props.children)()}</Show>
</div>
</div>
)

24
src/pages/Proxies.tsx
View File

@ -203,17 +203,14 @@ export default () => {
<Collapse
isOpen={collapsedMap()[proxy.name]}
title={title}
content={
<ProxyCardGroups
proxyNames={sortedProxyNames}
now={proxy.now}
onClick={(name) => {
void onProxyNodeClick(proxy, name)
}}
/>
}
onCollapse={(val) => setCollapsedMap(proxy.name, val)}
/>
>
<ProxyCardGroups
proxyNames={sortedProxyNames}
now={proxy.now}
onClick={(name) => void onProxyNodeClick(proxy, name)}
/>
</Collapse>
)
}}
</For>
@ -221,7 +218,7 @@ export default () => {
</Show>
<Show when={activeTab() === ActiveTab.proxyProviders}>
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
<div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
<For each={proxyProviders()}>
{(proxyProvider) => {
const sortedProxyNames = filterProxiesByAvailability(
@ -296,11 +293,12 @@ export default () => {
<Collapse
isOpen={collapsedMap()[proxyProvider.name]}
title={title}
content={<ProxyCardGroups proxyNames={sortedProxyNames} />}
onCollapse={(val) =>
setCollapsedMap(proxyProvider.name, val)
}
/>
>
<ProxyCardGroups proxyNames={sortedProxyNames} />
</Collapse>
)
}}
</For>