Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-10 05:15:35 +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">
<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>

39
src/App.tsx
View File

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

51
src/components/Header.tsx
View File

@ -1,4 +1,4 @@
import { A, useNavigate } from '@solidjs/router'
import { A, useLocation, useNavigate } from '@solidjs/router'
import {
IconFileStack,
IconGlobe,
@ -8,12 +8,17 @@ 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 (
<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">
@ -22,7 +27,11 @@ export const Header = () => {
</li>
<li>
<A class="tooltip tooltip-bottom" href="/proxies" data-tip="Proxies">
<A
class="tooltip tooltip-bottom"
href="/proxies"
data-tip="Proxies"
>
<IconGlobe />
</A>
</li>
@ -34,7 +43,11 @@ export const Header = () => {
</li>
<li>
<A class="tooltip tooltip-bottom" href="/conns" data-tip="Connections">
<A
class="tooltip tooltip-bottom"
href="/conns"
data-tip="Connections"
>
<IconNetwork />
</A>
</li>
@ -65,5 +78,35 @@ export const Header = () => {
</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>
)
}

8
src/pages/Setup.tsx
View File

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