mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
fix: layout issue on mobile platform
This commit is contained in:
kunish
parent
a92f18fd19
commit
35a02e4174
@ -2,7 +2,10 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
<link rel="shortcut icon" type="image/svg" href="/src/assets/favicon.svg" />
|
||||
<title>Solid App</title>
|
||||
@ -10,7 +13,7 @@
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
41
src/App.tsx
41
src/App.tsx
@ -1,7 +1,6 @@
|
||||
import { Route, Routes, useLocation, useNavigate } from '@solidjs/router'
|
||||
import { For, Show, onMount } from 'solid-js'
|
||||
import { Route, Routes, useNavigate } from '@solidjs/router'
|
||||
import { Show, onMount } from 'solid-js'
|
||||
import { Header } from '~/components/Header'
|
||||
import { themes } from '~/constants'
|
||||
import { Config } from '~/pages/Config'
|
||||
import { Connections } from '~/pages/Connections'
|
||||
import { Logs } from '~/pages/Logs'
|
||||
@ -9,10 +8,9 @@ import { Overview } from '~/pages/Overview'
|
||||
import { Proxies } from '~/pages/Proxies'
|
||||
import { Rules } from '~/pages/Rules'
|
||||
import { Setup } from '~/pages/Setup'
|
||||
import { curTheme, selectedEndpoint, setCurTheme } from '~/signals'
|
||||
import { curTheme, selectedEndpoint } from '~/signals'
|
||||
|
||||
export const App = () => {
|
||||
const location = useLocation()
|
||||
const navigate = useNavigate()
|
||||
|
||||
onMount(() => {
|
||||
@ -23,39 +21,12 @@ export const App = () => {
|
||||
|
||||
return (
|
||||
<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()}
|
||||
>
|
||||
<div class="sticky inset-x-0 top-0 z-50 flex items-center rounded-md bg-base-200 px-4 py-2">
|
||||
<Show when={location.pathname !== '/setup'}>
|
||||
<Header />
|
||||
</Show>
|
||||
<Header />
|
||||
|
||||
<div class="dropdown-end dropdown-hover dropdown ml-auto">
|
||||
<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">
|
||||
<div class="flex-1 py-4">
|
||||
<Routes>
|
||||
<Show when={selectedEndpoint()}>
|
||||
<Route path="/" component={Overview} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { A, useNavigate } from '@solidjs/router'
|
||||
import { A, useLocation, useNavigate } from '@solidjs/router'
|
||||
import {
|
||||
IconFileStack,
|
||||
IconGlobe,
|
||||
@ -8,62 +8,105 @@ import {
|
||||
IconRuler,
|
||||
IconSettings,
|
||||
} 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 = () => {
|
||||
const location = useLocation()
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<ul class="menu rounded-box menu-horizontal">
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/" data-tip="Home">
|
||||
<IconHome />
|
||||
</A>
|
||||
</li>
|
||||
<div class="sticky inset-x-0 top-0 z-10 flex items-center rounded-md bg-base-200 px-4 py-2">
|
||||
<Show when={location.pathname !== '/setup'}>
|
||||
<ul class="menu rounded-box menu-horizontal">
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/" data-tip="Home">
|
||||
<IconHome />
|
||||
</A>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/proxies" data-tip="Proxies">
|
||||
<IconGlobe />
|
||||
</A>
|
||||
</li>
|
||||
<li>
|
||||
<A
|
||||
class="tooltip tooltip-bottom"
|
||||
href="/proxies"
|
||||
data-tip="Proxies"
|
||||
>
|
||||
<IconGlobe />
|
||||
</A>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules">
|
||||
<IconRuler />
|
||||
</A>
|
||||
</li>
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules">
|
||||
<IconRuler />
|
||||
</A>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/conns" data-tip="Connections">
|
||||
<IconNetwork />
|
||||
</A>
|
||||
</li>
|
||||
<li>
|
||||
<A
|
||||
class="tooltip tooltip-bottom"
|
||||
href="/conns"
|
||||
data-tip="Connections"
|
||||
>
|
||||
<IconNetwork />
|
||||
</A>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs">
|
||||
<IconFileStack />
|
||||
</A>
|
||||
</li>
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs">
|
||||
<IconFileStack />
|
||||
</A>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/config" data-tip="Config">
|
||||
<IconSettings />
|
||||
</A>
|
||||
</li>
|
||||
<li>
|
||||
<A class="tooltip tooltip-bottom" href="/config" data-tip="Config">
|
||||
<IconSettings />
|
||||
</A>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button
|
||||
class="tooltip tooltip-bottom"
|
||||
data-tip="Switch Endpoint"
|
||||
onClick={() => {
|
||||
setSelectedEndpoint('')
|
||||
<li>
|
||||
<button
|
||||
class="tooltip tooltip-bottom"
|
||||
data-tip="Switch Endpoint"
|
||||
onClick={() => {
|
||||
setSelectedEndpoint('')
|
||||
|
||||
navigate('/setup')
|
||||
}}
|
||||
>
|
||||
<IconNetworkOff />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
navigate('/setup')
|
||||
}}
|
||||
>
|
||||
<IconNetworkOff />
|
||||
</button>
|
||||
</li>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -40,13 +40,13 @@ export const Setup = () => {
|
||||
setEndpointList(endpointList().filter((e) => e.id !== id))
|
||||
|
||||
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}>
|
||||
<div class="join flex w-full">
|
||||
<div class="flex w-full flex-col gap-4">
|
||||
<input
|
||||
name="url"
|
||||
type="url"
|
||||
class="input join-item input-bordered flex-1"
|
||||
class="input input-bordered"
|
||||
placeholder="http://127.0.0.1:9000"
|
||||
list="defaultEndpoints"
|
||||
/>
|
||||
@ -59,7 +59,7 @@ export const Setup = () => {
|
||||
name="secret"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="input join-item input-bordered"
|
||||
class="input input-bordered"
|
||||
placeholder="secret"
|
||||
/>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user