GitHub/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-05-26 07:08:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): stack form fields on mobile in client/inbound/node modals

Browse Source 
Replace fixed :span values with responsive :xs="24" :md="N" so form rows
collapse to a single column on narrow viewports instead of squeezing.
This commit is contained in:
MHSanaei
2026-05-21 18:54:42 +02:00
parent 3d1d75d65a
commit f2f5d584b3
3 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/pages/clients/ClientFormModal.vue
View File

@@ -270,7 +270,7 @@ async function onSubmit() {
:ok-button-props="{ loading: submitting }" :width="720" @ok="onSubmit" @cancel="close">
<a-form layout="vertical" :model="form">
<a-row :gutter="16">
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.clients.email')" required>
<a-input-group compact style="display: flex">
<a-input v-model:value="form.email" :placeholder="t('pages.clients.email')" style="flex: 1" />
@@ -278,7 +278,7 @@ async function onSubmit() {
</a-input-group>
</a-form-item>
</a-col>
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.clients.subId')">
<a-input-group compact style="display: flex">
<a-input v-model:value="form.subId" style="flex: 1" />
@@ -289,7 +289,7 @@ async function onSubmit() {
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.clients.hysteriaAuth')">
<a-input-group compact style="display: flex">
<a-input v-model:value="form.auth" style="flex: 1" />
@@ -297,7 +297,7 @@ async function onSubmit() {
</a-input-group>
</a-form-item>
</a-col>
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.clients.password')">
<a-input-group compact style="display: flex">
<a-input v-model:value="form.password" style="flex: 1" />
@@ -308,7 +308,7 @@ async function onSubmit() {
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.clients.uuid')">
<a-input-group compact style="display: flex">
<a-input v-model:value="form.uuid" style="flex: 1" />
@@ -316,12 +316,12 @@ async function onSubmit() {
</a-input-group>
</a-form-item>
</a-col>
<a-col :span="ipLimitEnable ? 8 : 12">
<a-col :xs="24" :md="ipLimitEnable ? 8 : 12">
<a-form-item :label="t('pages.clients.totalGB')">
<a-input-number v-model:value="form.totalGB" :min="0" :step="0.1" style="width: 100%" />
</a-form-item>
</a-col>
<a-col v-if="ipLimitEnable" :span="4">
<a-col v-if="ipLimitEnable" :xs="24" :md="4">
<a-form-item :label="t('pages.clients.limitIp')">
<a-input-number v-model:value="form.limitIp" :min="0" style="width: 100%" />
</a-form-item>
@@ -329,7 +329,7 @@ async function onSubmit() {
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item v-if="form.delayedStart" :label="t('pages.clients.expireDays')">
<a-input-number v-model:value="form.delayedDays" :min="0" style="width: 100%" />
</a-form-item>
@@ -337,7 +337,7 @@ async function onSubmit() {
<a-date-picker v-model:value="form.expiryDate" show-time style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.clients.delayedStart')">
<a-switch v-model:checked="form.delayedStart" @change="onDelayedStartToggle" />
</a-form-item>
@@ -345,7 +345,7 @@ async function onSubmit() {
</a-row>
<a-row v-if="showFlow || showReverseTag" :gutter="16">
<a-col v-if="showFlow" :span="12">
<a-col v-if="showFlow" :xs="24" :md="12">
<a-form-item :label="t('pages.clients.flow')">
<a-select v-model:value="form.flow">
<a-select-option value="">{{ t('none') }}</a-select-option>
@@ -353,7 +353,7 @@ async function onSubmit() {
</a-select>
</a-form-item>
</a-col>
<a-col v-if="showReverseTag" :span="12">
<a-col v-if="showReverseTag" :xs="24" :md="12">
<a-form-item :label="t('pages.clients.reverseTag')">
<a-input v-model:value="form.reverseTag" :placeholder="t('pages.clients.reverseTagPlaceholder')" />
</a-form-item>
@@ -361,13 +361,13 @@ async function onSubmit() {
</a-row>
<a-row :gutter="16">
<a-col v-if="tgBotEnable" :span="12">
<a-col v-if="tgBotEnable" :xs="24" :md="12">
<a-form-item :label="t('pages.clients.telegramId')">
<a-input-number v-model:value="form.tgId" :min="0" :controls="false"
:placeholder="t('pages.clients.telegramIdPlaceholder')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="tgBotEnable ? 12 : 24">
<a-col :xs="24" :md="tgBotEnable ? 12 : 24">
<a-form-item :label="t('pages.clients.comment')">
<a-input v-model:value="form.comment" />
</a-form-item>

8
frontend/src/pages/inbounds/InboundFormModal.vue
View File

@@ -1030,16 +1030,16 @@ watch(() => inbound.value?.protocol, () => stampAdvancedTextFor('stream'));
</a-col>
</a-row>
<a-row v-if="isFallbackEditing(record.rowKey)" :gutter="8" style="margin-top: 8px">
<a-col :span="8">
<a-col :xs="24" :md="8">
<a-input v-model:value="record.name" addon-before="SNI" :placeholder="t('pages.inbounds.fallbacks.matchAny') || 'any'" />
</a-col>
<a-col :span="5">
<a-col :xs="24" :md="5">
<a-input v-model:value="record.alpn" addon-before="ALPN" :placeholder="t('pages.inbounds.fallbacks.matchAny') || 'any'" />
</a-col>
<a-col :span="7">
<a-col :xs="24" :md="7">
<a-input v-model:value="record.path" addon-before="Path" placeholder="/" />
</a-col>
<a-col :span="4">
<a-col :xs="24" :md="4">
<a-input-number v-model:value="record.xver" addon-before="xver" :min="0" :max="2" style="width: 100%" />
</a-col>
</a-row>

14
frontend/src/pages/nodes/NodeFormModal.vue
View File

@@ -117,12 +117,12 @@ async function onSave() {
:mask-closable="false" width="640px" @ok="onSave" @cancel="close">
<a-form layout="vertical" :model="form">
<a-row :gutter="16">
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.nodes.name')" required>
<a-input v-model:value="form.name" :placeholder="t('pages.nodes.namePlaceholder')" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.nodes.remark')">
<a-input v-model:value="form.remark" />
</a-form-item>
@@ -130,7 +130,7 @@ async function onSave() {
</a-row>
<a-row :gutter="16">
<a-col :span="6">
<a-col :xs="24" :md="6">
<a-form-item :label="t('pages.nodes.scheme')">
<a-select v-model:value="form.scheme">
<a-select-option value="https">https</a-select-option>
@@ -138,12 +138,12 @@ async function onSave() {
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.nodes.address')" required>
<a-input v-model:value="form.address" :placeholder="t('pages.nodes.addressPlaceholder')" />
</a-form-item>
</a-col>
<a-col :span="6">
<a-col :xs="24" :md="6">
<a-form-item :label="t('pages.nodes.port')" required>
<a-input-number v-model:value="form.port" :min="1" :max="65535" style="width: 100%" />
</a-form-item>
@@ -151,12 +151,12 @@ async function onSave() {
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.nodes.basePath')">
<a-input v-model:value="form.basePath" placeholder="/" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.nodes.enable')">
<a-switch v-model:checked="form.enable" />
</a-form-item>