Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-24 09:45:35 +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' 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>
) )

18
src/pages/Proxies.tsx
View File

@ -203,17 +203,14 @@ export default () => {
<Collapse <Collapse
isOpen={collapsedMap()[proxy.name]} isOpen={collapsedMap()[proxy.name]}
title={title} title={title}
content={ onCollapse={(val) => setCollapsedMap(proxy.name, val)}
>
<ProxyCardGroups <ProxyCardGroups
proxyNames={sortedProxyNames} proxyNames={sortedProxyNames}
now={proxy.now} now={proxy.now}
onClick={(name) => { onClick={(name) => void onProxyNodeClick(proxy, name)}
void onProxyNodeClick(proxy, name)
}}
/>
}
onCollapse={(val) => setCollapsedMap(proxy.name, val)}
/> />
</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>