Skip to content

Commit

Permalink
fix: layout issue on mobile platform
Browse files Browse the repository at this point in the history
  • Loading branch information
@kunish
kunish committed Aug 27, 2023
1 parent a92f18f commit 35a02e4
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 87 deletions.
7 changes: 5 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,18 @@
<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>
</head>
<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 changes: 6 additions & 35 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
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'
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(() => {
Expand All @@ -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} />
Expand Down
135 changes: 89 additions & 46 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { A, useNavigate } from '@solidjs/router'
import { A, useLocation, useNavigate } from '@solidjs/router'
import {
IconFileStack,
IconGlobe,
Expand All @@ -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>
)
}
8 changes: 4 additions & 4 deletions src/pages/Setup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand All @@ -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"
/>

Expand Down

0 comments on commit 35a02e4

Please sign in to comment.