feat: update the overall look of the app

This commit is contained in:
kunish 2023-09-06 22:40:52 +08:00
parent 6c880628ec
commit 08ed61045f
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
7 changed files with 31 additions and 15 deletions

View File

@ -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} />

View File

@ -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

View File

@ -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) => (

View File

@ -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')}

View File

@ -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

View File

@ -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]}

View File

@ -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]}