fix(overview): only enable flex-row layout on large screen

This commit is contained in:
kunish 2023-09-04 01:12:29 +08:00
parent bf340e2127
commit be8b54a0f6
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
6 changed files with 31 additions and 29 deletions

View File

@ -10,6 +10,7 @@ export const ProxyPreviewBar = (props: {
const latencyList = createMemo(() =>
props.proxyNameList.map((name) => latencyMap()[name]),
)
const all = createMemo(() => latencyList().length)
const good = createMemo(
() =>
@ -35,9 +36,7 @@ export const ProxyPreviewBar = (props: {
const notConnected = createMemo(
() =>
latencyList().filter(
(latency) =>
latency === latencyQualityMap().NOT_CONNECTED ||
typeof latency !== 'number',
(latency) => latency === latencyQualityMap().NOT_CONNECTED,
).length,
)
@ -47,27 +46,27 @@ export const ProxyPreviewBar = (props: {
<div
class="h-2 bg-success"
style={{
width: `${(good() * 100) / all()}%`, // cant use tw class cause dynamic classname wont import
width: `${(good() * 100) / all()}%`, // cant use tw class, otherwise dynamic classname won't be generated
}}
></div>
/>
<div
class="h-2 bg-warning"
style={{
width: `${(middle() * 100) / all()}%`,
}}
></div>
/>
<div
class="h-2 bg-error"
style={{
width: `${(slow() * 100) / all()}%`,
}}
></div>
/>
<div
class="h-2 bg-neutral"
style={{
width: `${(notConnected() * 100) / all()}%`,
}}
></div>
/>
</div>
<Latency name={props.now} />

View File

@ -2,22 +2,27 @@ import { For } from 'solid-js'
import { twMerge } from 'tailwind-merge'
import { latencyQualityMap, useProxies } from '~/signals'
const LatencyDots = (p: { latency: number | undefined; selected: boolean }) => {
let dotClassName = p.selected
const LatencyDots = (props: {
latency: number | undefined
selected: boolean
}) => {
let dotClassName = props.selected
? 'bg-white border-4 border-success'
: 'bg-success'
if (
typeof p.latency !== 'number' ||
p.latency === latencyQualityMap().NOT_CONNECTED
typeof props.latency !== 'number' ||
props.latency === latencyQualityMap().NOT_CONNECTED
) {
dotClassName = p.selected
dotClassName = props.selected
? 'bg-white border-4 border-neutral'
: 'bg-neutral'
} else if (p.latency > latencyQualityMap().HIGH) {
dotClassName = p.selected ? 'bg-white border-4 border-error' : 'bg-error'
} else if (p.latency > latencyQualityMap().MEDIUM) {
dotClassName = p.selected
} else if (props.latency > latencyQualityMap().HIGH) {
dotClassName = props.selected
? 'bg-white border-4 border-error'
: 'bg-error'
} else if (props.latency > latencyQualityMap().MEDIUM) {
dotClassName = props.selected
? 'bg-white border-4 border-warning'
: 'bg-warning'
}

View File

@ -133,7 +133,7 @@ const ConfigForm = () => {
})
const [updatingGEODatabases, setUpdatingGEODatabases] = createSignal(false)
const [upgraging, setUpgraging] = createSignal(false)
const [upgrading, setUpgrading] = createSignal(false)
const [restarting, setRestarting] = createSignal(false)
const onUpdateGEODatabases = async () => {
@ -145,11 +145,11 @@ const ConfigForm = () => {
}
const onUpgrade = async () => {
setUpgraging(true)
setUpgrading(true)
try {
await request.post('upgrade')
} catch {}
setUpgraging(false)
setUpgrading(false)
}
const onRestart = async () => {
@ -190,7 +190,7 @@ const ConfigForm = () => {
{t('restartCore')}
</Button>
<Button loading={upgraging()} onClick={onUpgrade}>
<Button loading={upgrading()} onClick={onUpgrade}>
{t('upgradeCore')}
</Button>
</div>

View File

@ -36,7 +36,7 @@ export default () => {
const [memories, setMemories] = createSignal<number[]>([])
// https://github.com/apexcharts/apexcharts.js/blob/main/samples/source/line/realtime.xml
// TODO: need a better way
// TODO: needs a better way
makeTimer(
() => {
setTraffics((traffics) => traffics.slice(-CHART_MAX_XAXIS))
@ -152,7 +152,7 @@ export default () => {
</TrafficWidget>
</div>
<div class="rounded-box flex flex-col bg-base-300 sm:flex-row">
<div class="rounded-box flex flex-col bg-base-300 lg:flex-row">
<div class="m-4 flex-1">
<SolidApexCharts
type="area"

View File

@ -18,9 +18,7 @@ export default () => {
const [maxRuleRender, setMaxRuleRender] = createSignal(100)
const renderRules = createMemo(() => rules().slice(0, maxRuleRender()))
onMount(async () => {
updateRules()
})
onMount(updateRules)
const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
const el = getBtnElFromClickEvent(e)

View File

@ -78,7 +78,7 @@ export default () => {
const { form } = createForm<z.infer<typeof schema>>({
extend: validator({ schema }),
onSubmit: onSubmit,
onSubmit,
})
const onRemove = (id: string) =>
@ -88,14 +88,14 @@ export default () => {
const query = new URLSearchParams(window.location.search)
if (query.has('hostname')) {
onSubmit({
void onSubmit({
url: `http://${query.get('hostname')}${
query.get('port') && ':' + query.get('port')
}`,
secret: query.get('secret') ?? '',
})
} else {
onSubmit({
void onSubmit({
url: 'http://127.0.0.1:9090',
secret: '',
})