From 35a02e4174194efd09a3d1ac98dfd1817828e0f7 Mon Sep 17 00:00:00 2001 From: kunish Date: Sun, 27 Aug 2023 22:25:41 +0800 Subject: [PATCH] fix: layout issue on mobile platform --- index.html | 7 +- src/App.tsx | 41 ++---------- src/components/Header.tsx | 135 +++++++++++++++++++++++++------------- src/pages/Setup.tsx | 8 +-- 4 files changed, 104 insertions(+), 87 deletions(-) diff --git a/index.html b/index.html index 197c8fa..0ea53cf 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,10 @@ - + Solid App @@ -10,7 +13,7 @@ -
+
diff --git a/src/App.tsx b/src/App.tsx index 841896c..5e801cf 100644 --- a/src/App.tsx +++ b/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 (
-
- -
- +
-
- - -
    - - {(theme) => ( -
  • setCurTheme(theme)} - > - {theme} -
    • - )} -     -
-
-
- -
+
diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d4d58db..8c04f52 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -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 ( - + + +
+ + +
+ +
+ +
+
+
+
) } diff --git a/src/pages/Setup.tsx b/src/pages/Setup.tsx index a52167a..715ff0b 100644 --- a/src/pages/Setup.tsx +++ b/src/pages/Setup.tsx @@ -40,13 +40,13 @@ export const Setup = () => { setEndpointList(endpointList().filter((e) => e.id !== id)) return ( -
+
-
+
@@ -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" />