Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-12-26 19:24:12 +08:00
Code Issues Projects Releases Wiki Activity

feat(proxies): add multi-column render back

Browse Source
This commit is contained in:
kunish 2024-10-11 01:38:17 +08:00
parent 4ba8075c13
commit 9f7f8d0161
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
4 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Collapse.tsx
View File

@ -41,7 +41,7 @@ export const Collapse: ParentComponent<Props> = (props) => {
<div <div
class={twMerge( class={twMerge(
getCollapseContentClassName(), getCollapseContentClassName(),
'collapse-content grid grid-cols-1 gap-2 transition-opacity duration-1000 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5', 'collapse-content grid grid-cols-1 gap-2 transition-opacity duration-1000 xl:grid-cols-3 2xl:grid-cols-4',
)} )}
> >
<Show when={props.isOpen}>{children(() => props.children)()}</Show> <Show when={props.isOpen}>{children(() => props.children)()}</Show>

12
src/components/ProxyNodeCard.tsx
View File

@ -43,16 +43,15 @@ export const ProxyNodeCard = (props: {
onClick={onClick} onClick={onClick}
> >
<div class="card-body"> <div class="card-body">
<span class="card-title line-clamp-1 text-start text-sm"> <div class="card-title flex items-center justify-between gap-2">
{proxyName} <span class="line-clamp-1 text-start text-sm">{proxyName}</span>
</span>
<div class="flex items-center justify-between gap-2">
<div class="flex items-center gap-2">
<div class="badge badge-primary badge-sm font-bold uppercase"> <div class="badge badge-primary badge-sm font-bold uppercase">
{formatProxyType(proxyNode()?.type)} {formatProxyType(proxyNode()?.type)}
</div> </div>
</div>
<div class="flex flex-wrap items-center gap-2">
<Show when={specialType()}> <Show when={specialType()}>
<div class="badge badge-secondary badge-sm">{specialType()}</div> <div class="badge badge-secondary badge-sm">{specialType()}</div>
</Show> </Show>
@ -62,7 +61,7 @@ export const ProxyNodeCard = (props: {
</Show> </Show>
</div> </div>
<div class="flex items-center gap-2"> <div class="card-actions items-center justify-end">
<Latency <Latency
name={props.proxyName} name={props.proxyName}
class={twMerge(isSelected && 'badge')} class={twMerge(isSelected && 'badge')}
@ -88,6 +87,5 @@ export const ProxyNodeCard = (props: {
</div> </div>
</div> </div>
</div> </div>
</div>
) )
} }

4
src/pages/Proxies.tsx
View File

@ -173,7 +173,7 @@ export default () => {
<div class="flex-1 overflow-y-auto"> <div class="flex-1 overflow-y-auto">
<Show when={activeTab() === ActiveTab.proxies}> <Show when={activeTab() === ActiveTab.proxies}>
<div class="flex flex-col gap-2"> <div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
<For each={renderProxies()}> <For each={renderProxies()}>
{(proxyGroup) => { {(proxyGroup) => {
const sortedProxyNames = createMemo(() => const sortedProxyNames = createMemo(() =>
@ -278,7 +278,7 @@ export default () => {
</Show> </Show>
<Show when={activeTab() === ActiveTab.proxyProviders}> <Show when={activeTab() === ActiveTab.proxyProviders}>
<div class="flex flex-col gap-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 = createMemo(() => const sortedProxyNames = createMemo(() =>

2
tailwind.config.ts
View File

@ -6,9 +6,11 @@ export default {
plugins: [daisyui], plugins: [daisyui],
daisyui: { themes: true }, daisyui: { themes: true },
theme: { theme: {
extend: {
fontFamily: { fontFamily: {
twemoji: ['system-ui', 'Twemoji Mozilla', 'Fira Sans', 'monospace'], twemoji: ['system-ui', 'Twemoji Mozilla', 'Fira Sans', 'monospace'],
'no-twemoji': ['system-ui', 'Fira Sans', 'monospace'], 'no-twemoji': ['system-ui', 'Fira Sans', 'monospace'],
}, },
}, },
},
} as Config } as Config