mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-23 21:35:36 +08:00
feat: update the overall look of the app
This commit is contained in:
parent
6c880628ec
commit
08ed61045f
@ -47,7 +47,7 @@ export const App = () => {
|
||||
>
|
||||
<Header />
|
||||
|
||||
<div class="flex-1 overflow-y-auto overflow-x-hidden p-2 sm:p-4">
|
||||
<div class="flex-1 overflow-y-auto p-2 sm:p-4">
|
||||
<Routes>
|
||||
<Show when={selectedEndpoint()}>
|
||||
<Route path={ROUTES.Overview} component={Overview} />
|
||||
|
@ -62,7 +62,7 @@ const ThemeSwitcher = () => (
|
||||
|
||||
const LogoText = () => (
|
||||
<a
|
||||
class="flex gap-2 whitespace-nowrap text-xl font-bold uppercase"
|
||||
class="text-md flex gap-2 whitespace-nowrap font-bold uppercase sm:text-xl"
|
||||
href="https://github.com/metacubex/metacubexd"
|
||||
target="_blank"
|
||||
>
|
||||
@ -111,7 +111,7 @@ export const Header = () => {
|
||||
const [openedDrawer, setOpenedDrawer] = createSignal(false)
|
||||
|
||||
return (
|
||||
<ul class="navbar rounded-box sticky inset-x-0 top-2 z-50 mx-2 mt-2 flex w-auto items-center justify-center bg-base-300 px-4">
|
||||
<ul class="navbar rounded-box sticky inset-x-0 top-0 z-50 flex w-auto items-center justify-center bg-base-300 px-4">
|
||||
<div class="navbar-start gap-4">
|
||||
<div class={twMerge('drawer w-auto lg:hidden', '')}>
|
||||
<input
|
||||
|
@ -306,7 +306,7 @@ export default () => {
|
||||
]
|
||||
|
||||
return (
|
||||
<div class="flex h-full flex-col gap-4 overflow-y-auto p-1">
|
||||
<div class="flex h-full flex-col gap-4 p-1">
|
||||
<div class="tabs-boxed tabs gap-2">
|
||||
<For each={tabs()}>
|
||||
{(tab) => (
|
||||
|
@ -60,7 +60,7 @@ export default () => {
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="flex h-full flex-col gap-4 overflow-y-auto p-1">
|
||||
<div class="flex h-full flex-col gap-4 p-1">
|
||||
<input
|
||||
class="input input-primary flex-shrink-0"
|
||||
placeholder={t('search')}
|
||||
|
@ -91,7 +91,7 @@ export default () => {
|
||||
}>('connections')
|
||||
|
||||
return (
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="stats stats-vertical w-full grid-cols-2 bg-primary shadow lg:stats-horizontal lg:flex">
|
||||
<TrafficWidget label={t('upload')}>
|
||||
{byteSize(traffic()?.up || 0).toString()}/s
|
||||
|
@ -145,7 +145,13 @@ export default () => {
|
||||
const title = (
|
||||
<>
|
||||
<div class="mr-8 flex items-center justify-between">
|
||||
<span>{proxyProvider.name}</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{proxyProvider.name}</span>
|
||||
<div class="badge badge-sm">
|
||||
{proxyProvider.proxies.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
class="btn btn-circle btn-sm mr-2"
|
||||
@ -176,13 +182,16 @@ export default () => {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SubscriptionInfo
|
||||
subscriptionInfo={proxyProvider.subscriptionInfo}
|
||||
/>
|
||||
|
||||
<div class="text-sm text-slate-500">
|
||||
{proxyProvider.vehicleType} :: {t('updated')}{' '}
|
||||
{formatTimeFromNow(proxyProvider.updatedAt)}
|
||||
</div>
|
||||
|
||||
<Show when={!collapsedMap()[proxyProvider.name]}>
|
||||
<ProxyNodePreview proxyNameList={sortedProxyNames} />
|
||||
</Show>
|
||||
@ -223,7 +232,11 @@ export default () => {
|
||||
const title = (
|
||||
<>
|
||||
<div class="mr-8 flex items-center justify-between">
|
||||
<span>{proxy.name}</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{proxy.name}</span>
|
||||
<div class="badge badge-sm">{proxy.all?.length}</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
class="btn-circle btn-sm"
|
||||
disabled={latencyTestingMap()[proxy.name]}
|
||||
|
@ -56,11 +56,11 @@ export default () => {
|
||||
>
|
||||
{(rule) => (
|
||||
<div class="card card-bordered card-compact mb-2 bg-base-200 p-4">
|
||||
<div class="break-all">
|
||||
{rule.payload}
|
||||
{typeof rule.size === 'number' &&
|
||||
rule.size !== -1 &&
|
||||
` (${rule.size})`}
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="break-all">{rule.payload}</span>
|
||||
<Show when={typeof rule.size === 'number' && rule.size !== -1}>
|
||||
<div class="badge badge-sm">{rule.size}</div>
|
||||
</Show>
|
||||
</div>
|
||||
<div class="text-xs text-slate-500">
|
||||
{rule.type} :: {rule.proxy}
|
||||
@ -90,13 +90,16 @@ export default () => {
|
||||
<For each={rulesProviders()}>
|
||||
{(rulesProvider) => (
|
||||
<div class="card card-bordered card-compact mb-2 bg-base-200 p-4">
|
||||
<div class="break-all pr-8">
|
||||
{rulesProvider.name} ({rulesProvider.ruleCount})
|
||||
<div class="flex items-center gap-2 pr-8">
|
||||
<span class="break-all">{rulesProvider.name}</span>
|
||||
<div class="badge badge-sm">{rulesProvider.ruleCount}</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-slate-500">
|
||||
{rulesProvider.vehicleType} / {rulesProvider.behavior} /
|
||||
{t('updated')} {formatTimeFromNow(rulesProvider.updatedAt)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
class="btn-circle btn-sm absolute right-2 top-2 mr-2 h-4"
|
||||
disabled={updatingMap()[rulesProvider.name]}
|
||||
|
Loading…
Reference in New Issue
Block a user