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

fix: layout issue on mobile platform

Browse Source
This commit is contained in:
kunish 2023-08-27 22:25:41 +08:00
parent a92f18fd19
commit 35a02e4174
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
4 changed files with 104 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -2,7 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/svg" href="/src/assets/favicon.svg" /> <link rel="shortcut icon" type="image/svg" href="/src/assets/favicon.svg" />
<title>Solid App</title> <title>Solid App</title>
@ -10,7 +13,7 @@
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root" style="display: contents"></div>
<script src="/src/index.tsx" type="module"></script> <script src="/src/index.tsx" type="module"></script>
</body> </body>
</html> </html>

41
src/App.tsx
View File

@ -1,7 +1,6 @@
import { Route, Routes, useLocation, useNavigate } from '@solidjs/router' import { Route, Routes, useNavigate } from '@solidjs/router'
import { For, Show, onMount } from 'solid-js' import { Show, onMount } from 'solid-js'
import { Header } from '~/components/Header' import { Header } from '~/components/Header'
import { themes } from '~/constants'
import { Config } from '~/pages/Config' import { Config } from '~/pages/Config'
import { Connections } from '~/pages/Connections' import { Connections } from '~/pages/Connections'
import { Logs } from '~/pages/Logs' import { Logs } from '~/pages/Logs'
@ -9,10 +8,9 @@ import { Overview } from '~/pages/Overview'
import { Proxies } from '~/pages/Proxies' import { Proxies } from '~/pages/Proxies'
import { Rules } from '~/pages/Rules' import { Rules } from '~/pages/Rules'
import { Setup } from '~/pages/Setup' import { Setup } from '~/pages/Setup'
import { curTheme, selectedEndpoint, setCurTheme } from '~/signals' import { curTheme, selectedEndpoint } from '~/signals'
export const App = () => { export const App = () => {
const location = useLocation()
const navigate = useNavigate() const navigate = useNavigate()
onMount(() => { onMount(() => {
@ -23,39 +21,12 @@ export const App = () => {
return ( return (
<div <div
class="relative min-h-screen p-4 subpixel-antialiased" class="relative h-screen flex-col overflow-y-auto p-4 subpixel-antialiased"
data-theme={curTheme()} data-theme={curTheme()}
> >
<div class="sticky inset-x-0 top-0 z-50 flex items-center rounded-md bg-base-200 px-4 py-2"> <Header />
<Show when={location.pathname !== '/setup'}>
<Header />
</Show>
<div class="dropdown-end dropdown-hover dropdown ml-auto"> <div class="flex-1 py-4">
<label tabindex="0" class="btn btn-sm m-2 uppercase">
Themes
</label>
<ul
tabindex="0"
class="menu dropdown-content rounded-box z-[1] gap-2 bg-base-300 p-2 shadow"
>
<For each={themes}>
{(theme) => (
<li
data-theme={theme}
class="btn btn-xs"
onClick={() => setCurTheme(theme)}
>
{theme}
</li>
)}
</For>
</ul>
</div>
</div>
<div class="py-4">
<Routes> <Routes>
<Show when={selectedEndpoint()}> <Show when={selectedEndpoint()}>
<Route path="/" component={Overview} /> <Route path="/" component={Overview} />

135
src/components/Header.tsx
View File

@ -1,4 +1,4 @@
import { A, useNavigate } from '@solidjs/router' import { A, useLocation, useNavigate } from '@solidjs/router'
import { import {
IconFileStack, IconFileStack,
IconGlobe, IconGlobe,
@ -8,62 +8,105 @@ import {
IconRuler, IconRuler,
IconSettings, IconSettings,
} from '@tabler/icons-solidjs' } from '@tabler/icons-solidjs'
import { setSelectedEndpoint } from '~/signals' import { For, Show } from 'solid-js'
import { themes } from '~/constants'
import { setCurTheme, setSelectedEndpoint } from '~/signals'
export const Header = () => { export const Header = () => {
const location = useLocation()
const navigate = useNavigate() const navigate = useNavigate()
return ( return (
<ul class="menu rounded-box menu-horizontal"> <div class="sticky inset-x-0 top-0 z-10 flex items-center rounded-md bg-base-200 px-4 py-2">
<li> <Show when={location.pathname !== '/setup'}>
<A class="tooltip tooltip-bottom" href="/" data-tip="Home"> <ul class="menu rounded-box menu-horizontal">
<IconHome /> <li>
</A> <A class="tooltip tooltip-bottom" href="/" data-tip="Home">
</li> <IconHome />
</A>
</li>
<li> <li>
<A class="tooltip tooltip-bottom" href="/proxies" data-tip="Proxies"> <A
<IconGlobe /> class="tooltip tooltip-bottom"
</A> href="/proxies"
</li> data-tip="Proxies"
>
<IconGlobe />
</A>
</li>
<li> <li>
<A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules"> <A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules">
<IconRuler /> <IconRuler />
</A> </A>
</li> </li>
<li> <li>
<A class="tooltip tooltip-bottom" href="/conns" data-tip="Connections"> <A
<IconNetwork /> class="tooltip tooltip-bottom"
</A> href="/conns"
</li> data-tip="Connections"
>
<IconNetwork />
</A>
</li>
<li> <li>
<A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs"> <A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs">
<IconFileStack /> <IconFileStack />
</A> </A>
</li> </li>
<li> <li>
<A class="tooltip tooltip-bottom" href="/config" data-tip="Config"> <A class="tooltip tooltip-bottom" href="/config" data-tip="Config">
<IconSettings /> <IconSettings />
</A> </A>
</li> </li>
<li> <li>
<button <button
class="tooltip tooltip-bottom" class="tooltip tooltip-bottom"
data-tip="Switch Endpoint" data-tip="Switch Endpoint"
onClick={() => { onClick={() => {
setSelectedEndpoint('') setSelectedEndpoint('')
navigate('/setup') navigate('/setup')
}} }}
> >
<IconNetworkOff /> <IconNetworkOff />
</button> </button>
</li> </li>
</ul> </ul>
</Show>
<div class="drawer drawer-end ml-auto w-auto">
<input id="themes" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<label for="themes" class="btn drawer-button btn-sm m-2 uppercase">
Themes
</label>
</div>
<div class="drawer-side">
<label for="themes" class="drawer-overlay" />
<ul class="menu rounded-box z-50 gap-2 bg-base-300 p-2 shadow">
<For each={themes}>
{(theme) => (
<li
data-theme={theme}
class="btn btn-xs"
onClick={() => setCurTheme(theme)}
>
{theme}
</li>
)}
</For>
</ul>
</div>
</div>
</div>
) )
} }

8
src/pages/Setup.tsx
View File

@ -40,13 +40,13 @@ export const Setup = () => {
setEndpointList(endpointList().filter((e) => e.id !== id)) setEndpointList(endpointList().filter((e) => e.id !== id))
return ( return (
<div class="mx-auto flex w-2/3 flex-col items-center gap-4 py-10"> <div class="mx-auto flex flex-col items-center gap-4 py-10 sm:w-2/3">
<form class="contents" use:form={form}> <form class="contents" use:form={form}>
<div class="join flex w-full"> <div class="flex w-full flex-col gap-4">
<input <input
name="url" name="url"
type="url" type="url"
class="input join-item input-bordered flex-1" class="input input-bordered"
placeholder="http://127.0.0.1:9000" placeholder="http://127.0.0.1:9000"
list="defaultEndpoints" list="defaultEndpoints"
/> />
@ -59,7 +59,7 @@ export const Setup = () => {
name="secret" name="secret"
type="password" type="password"
autocomplete="new-password" autocomplete="new-password"
class="input join-item input-bordered" class="input input-bordered"
placeholder="secret" placeholder="secret"
/> />