Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-24 09:45:35 +08:00
Code Issues Projects Releases Wiki Activity

feat(config): update page layout, limit the max width of the container

Browse Source
This commit is contained in:
kunish 2023-09-16 23:46:22 +08:00
parent 97ea63ca02
commit d059ea85b3
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/Config.tsx
View File

@ -71,11 +71,11 @@ const DNSQueryForm = () => {
return ( return (
<div class="flex flex-col"> <div class="flex flex-col">
<form use:form={form} class="flex flex-col gap-2 sm:flex-row"> <form use:form={form} class="flex gap-2 sm:flex-row">
<input <input
type="search" type="search"
name="name" name="name"
class="input input-bordered w-full sm:flex-1" class="input input-bordered min-w-0 flex-1"
/> />
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@ -114,7 +114,7 @@ const ConfigForm = () => {
const [t] = useI18n() const [t] = useI18n()
const navigate = useNavigate() const navigate = useNavigate()
const portsList = [ const portList = [
{ {
label: 'HTTP Port', label: 'HTTP Port',
key: 'port', key: 'port',
@ -197,10 +197,10 @@ const ConfigForm = () => {
<option value={MODE_OPTIONS.Direct}>{t('direct')}</option> <option value={MODE_OPTIONS.Direct}>{t('direct')}</option>
</select> </select>
<form class="contents" use:form={form}> <form class="grid grid-cols-2 gap-2" use:form={form}>
<For each={portsList}> <For each={portList}>
{(item) => ( {(item) => (
<div class="form-control w-64 max-w-sm"> <div class="form-control">
<label class="label"> <label class="label">
<span class="label-text">{item.label}</span> <span class="label-text">{item.label}</span>
</label> </label>
@ -357,7 +357,7 @@ const Versions = () => {
export default () => { export default () => {
return ( return (
<div class="flex flex-col gap-4"> <div class="mx-auto flex w-full max-w-screen-md flex-col gap-4">
<DNSQueryForm /> <DNSQueryForm />
<ConfigForm /> <ConfigForm />
<ConfigForXd /> <ConfigForXd />