From 538fdb986040835aca01f4c45e6926252f6dfd49 Mon Sep 17 00:00:00 2001
From: Alireza Ahmadi <alireza7@gmail.com>
Date: Wed, 13 Dec 2023 15:21:54 +0100
Subject: [PATCH] change fallback form to new design

---
 web/html/xui/form/protocol/trojan.html | 59 +++++++-------------------
 web/html/xui/form/protocol/vless.html  | 59 +++++++-------------------
 2 files changed, 32 insertions(+), 86 deletions(-)

diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html
index f34b59b4..9a0f5ce0 100644
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -31,54 +31,27 @@
     </a-form>
 
     <!-- trojan fallbacks -->
-    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
+    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
         <a-divider style="margin:0;">
             fallback[[ index + 1 ]]
             <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
                     style="color: rgb(255, 77, 79);cursor: pointer;"/>
         </a-divider>
-        <table width="100%">
-            <tr>
-                <td style="width: 20%;">Name</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.name" style="width: 250px"></a-input>
-                    </a-form-item>            
-                </td>
-            </tr>
-            <tr>
-                <td>Alpn</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.alpn" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>Path</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.path" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>Dest</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.dest" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>xVer</td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-    </table>
+        <a-form-item label='Name'>
+            <a-input v-model="fallback.name"></a-input>
+        </a-form-item>            
+        <a-form-item label='Alpn'>
+            <a-input v-model="fallback.alpn"></a-input>
+        </a-form-item>
+        <a-form-item label='Path'>
+            <a-input v-model="fallback.path"></a-input>
+        </a-form-item>
+        <a-form-item label='Dest'>
+            <a-input v-model="fallback.dest"></a-input>
+        </a-form-item>
+        <a-form-item label='xVer'>
+            <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
+        </a-form-item>
     </a-form>
     <a-divider style="margin:0;"></a-divider>
 </template>
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index d64f3791..208ff2c1 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -33,54 +33,27 @@
     </a-form>
 
     <!-- vless fallbacks -->
-    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
+    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
         <a-divider style="margin:0;">
             fallback[[ index + 1 ]]
             <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
                     style="color: rgb(255, 77, 79);cursor: pointer;"/>
         </a-divider>
-        <table width="100%">
-            <tr>
-                <td style="width: 20%;">Name</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.name" style="width: 250px"></a-input>
-                    </a-form-item>            
-                </td>
-            </tr>
-            <tr>
-                <td>Alpn</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.alpn" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>Path</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.path" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>Dest</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.dest" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>xVer</td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-    </table>
+        <a-form-item label='Name'>
+            <a-input v-model="fallback.name"></a-input>
+        </a-form-item>            
+        <a-form-item label='Alpn'>
+            <a-input v-model="fallback.alpn"></a-input>
+        </a-form-item>
+        <a-form-item label='Path'>
+            <a-input v-model="fallback.path"></a-input>
+        </a-form-item>
+        <a-form-item label='Dest'>
+            <a-input v-model="fallback.dest"></a-input>
+        </a-form-item>
+        <a-form-item label='xVer'>
+            <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
+        </a-form-item>
     </a-form>
     <a-divider style="margin:0;"></a-divider>
 </template>