mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
fix: proxy providers grid layout
This commit is contained in:
parent
353b5ebff3
commit
6d242a4457
@ -1,15 +1,14 @@
|
|||||||
import { JSX, ParentComponent, Show } from 'solid-js'
|
import { children, JSX, ParentComponent, Show } from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
title: JSX.Element
|
title: JSX.Element
|
||||||
content: JSX.Element
|
|
||||||
isOpen?: boolean
|
isOpen?: boolean
|
||||||
onCollapse: (collapsed: boolean) => void
|
onCollapse: (collapsed: boolean) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Collapse: ParentComponent<Props> = (props) => {
|
export const Collapse: ParentComponent<Props> = (props) => {
|
||||||
const { title, content, onCollapse } = props
|
const { title, onCollapse } = props
|
||||||
|
|
||||||
const getCollapseClassName = () => {
|
const getCollapseClassName = () => {
|
||||||
const openedClassName = 'collapse-open'
|
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',
|
'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>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -203,17 +203,14 @@ export default () => {
|
|||||||
<Collapse
|
<Collapse
|
||||||
isOpen={collapsedMap()[proxy.name]}
|
isOpen={collapsedMap()[proxy.name]}
|
||||||
title={title}
|
title={title}
|
||||||
content={
|
|
||||||
<ProxyCardGroups
|
|
||||||
proxyNames={sortedProxyNames}
|
|
||||||
now={proxy.now}
|
|
||||||
onClick={(name) => {
|
|
||||||
void onProxyNodeClick(proxy, name)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
onCollapse={(val) => setCollapsedMap(proxy.name, val)}
|
onCollapse={(val) => setCollapsedMap(proxy.name, val)}
|
||||||
/>
|
>
|
||||||
|
<ProxyCardGroups
|
||||||
|
proxyNames={sortedProxyNames}
|
||||||
|
now={proxy.now}
|
||||||
|
onClick={(name) => void onProxyNodeClick(proxy, name)}
|
||||||
|
/>
|
||||||
|
</Collapse>
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
</For>
|
</For>
|
||||||
@ -221,7 +218,7 @@ export default () => {
|
|||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={activeTab() === ActiveTab.proxyProviders}>
|
<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()}>
|
<For each={proxyProviders()}>
|
||||||
{(proxyProvider) => {
|
{(proxyProvider) => {
|
||||||
const sortedProxyNames = filterProxiesByAvailability(
|
const sortedProxyNames = filterProxiesByAvailability(
|
||||||
@ -296,11 +293,12 @@ export default () => {
|
|||||||
<Collapse
|
<Collapse
|
||||||
isOpen={collapsedMap()[proxyProvider.name]}
|
isOpen={collapsedMap()[proxyProvider.name]}
|
||||||
title={title}
|
title={title}
|
||||||
content={<ProxyCardGroups proxyNames={sortedProxyNames} />}
|
|
||||||
onCollapse={(val) =>
|
onCollapse={(val) =>
|
||||||
setCollapsedMap(proxyProvider.name, val)
|
setCollapsedMap(proxyProvider.name, val)
|
||||||
}
|
}
|
||||||
/>
|
>
|
||||||
|
<ProxyCardGroups proxyNames={sortedProxyNames} />
|
||||||
|
</Collapse>
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
</For>
|
</For>
|
||||||
|
Loading…
Reference in New Issue
Block a user