better design - OCPD Problem

7 files changed, 19 insertions, 27 deletions

diff --git a/web/html/xui/form/protocol/dokodemo.html b/web/html/xui/form/protocol/dokodemo.html
index a5309597..70ffe7e0 100644
--- a/web/html/xui/form/protocol/dokodemo.html
+++ b/web/html/xui/form/protocol/dokodemo.html
@@ -1,5 +1,5 @@
 {{define "form/dokodemo"}}
-<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
     <a-form-item label='{{ i18n "pages.inbounds.targetAddress"}}'>
         <a-input v-model.trim="inbound.settings.address"></a-input>
     </a-form-item>
diff --git a/web/html/xui/form/protocol/http.html b/web/html/xui/form/protocol/http.html
index ff266de5..ed0c73b2 100644
--- a/web/html/xui/form/protocol/http.html
+++ b/web/html/xui/form/protocol/http.html
@@ -1,5 +1,5 @@
 {{define "form/http"}}
-<a-form>
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
         <table style="width: 100%; text-align: center; margin-bottom: 10px;">
             <tr>
                 <td width="45%">{{ i18n "username" }}</td>
diff --git a/web/html/xui/form/protocol/shadowsocks.html b/web/html/xui/form/protocol/shadowsocks.html
index 8e4861cf..b55a3d5c 100644
--- a/web/html/xui/form/protocol/shadowsocks.html
+++ b/web/html/xui/form/protocol/shadowsocks.html
@@ -20,7 +20,7 @@
         </a-collapse-panel>
     </a-collapse>
 </template>
-<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
     <a-form-item label='{{ i18n "encryption" }}'>
         <a-select v-model="inbound.settings.method" @change="SSMethodChange" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option v-for="(method,method_name) in SSMethods" :value="method">[[ method_name ]]</a-select-option>
diff --git a/web/html/xui/form/protocol/socks.html b/web/html/xui/form/protocol/socks.html
index e9a937e2..ccaec0d7 100644
--- a/web/html/xui/form/protocol/socks.html
+++ b/web/html/xui/form/protocol/socks.html
@@ -1,5 +1,5 @@
 {{define "form/socks"}}
-<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
     <a-form-item label='{{ i18n "pages.inbounds.enable" }} UDP'>
         <a-switch v-model="inbound.settings.udp"></a-switch>
     </a-form-item>
diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html
index 3f1d830b..fe1db139 100644
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -19,27 +19,23 @@
     </a-collapse-panel>
 </a-collapse>
 <template v-if="inbound.isTcp && !inbound.stream.isReality">
-    <a-form layout="inline">
+    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
         <a-form-item label="Fallbacks">
-            <a-row>
-                <a-button type="primary" size="small"
-                        @click="inbound.settings.addFallback()">
-                    +
-                </a-button>
-            </a-row>
+            <a-button type="primary" size="small" @click="inbound.settings.addFallback()">+</a-button>
         </a-form-item>
     </a-form>
 
     <!-- trojan fallbacks -->
-    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:8} }"
+        :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;"/>
+                style="color: rgb(255, 77, 79);cursor: pointer;" />
         </a-divider>
         <a-form-item label='SNI'>
             <a-input v-model="fallback.name"></a-input>
-        </a-form-item>            
+        </a-form-item>
         <a-form-item label='ALPN'>
             <a-input v-model="fallback.alpn"></a-input>
         </a-form-item>
@@ -53,6 +49,6 @@
             <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>
+    <a-divider style="margin:5px 0;"></a-divider>
 </template>
 {{end}}
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index 73859ad5..5ccec3fe 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -21,27 +21,23 @@
     </a-collapse-panel>
 </a-collapse>
 <template v-if="inbound.isTcp && !inbound.stream.isReality">
-    <a-form layout="inline">
+    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
         <a-form-item label="Fallbacks">
-            <a-row>
-                <a-button type="primary" size="small"
-                        @click="inbound.settings.addFallback()">
-                    +
-                </a-button>
-            </a-row>
+            <a-button type="primary" size="small" @click="inbound.settings.addFallback()">+</a-button>
         </a-form-item>
     </a-form>
 
     <!-- vless fallbacks -->
-    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:8} }"
+        :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;"/>
+                style="color: rgb(255, 77, 79);cursor: pointer;" />
         </a-divider>
         <a-form-item label='SNI'>
             <a-input v-model="fallback.name"></a-input>
-        </a-form-item>            
+        </a-form-item>
         <a-form-item label='ALPN'>
             <a-input v-model="fallback.alpn"></a-input>
         </a-form-item>
diff --git a/web/html/xui/form/protocol/wireguard.html b/web/html/xui/form/protocol/wireguard.html
index c618a770..a1ac5628 100644
--- a/web/html/xui/form/protocol/wireguard.html
+++ b/web/html/xui/form/protocol/wireguard.html
@@ -1,5 +1,5 @@
 {{define "form/wireguard"}}
-<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
     <a-form-item>
         <template slot="label">
             <a-tooltip>
@@ -26,7 +26,7 @@
     <a-form-item label="Peers">
         <a-button type="primary" size="small" @click="inbound.settings.addPeer()">+</a-button>
     </a-form-item>
-    <a-form v-for="(peer, index) in inbound.settings.peers" :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+    <a-form v-for="(peer, index) in inbound.settings.peers" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
         <a-divider style="margin:0;">
             Peer [[ index + 1 ]]
             <a-icon v-if="inbound.settings.peers.length>1" type="delete" @click="() => inbound.settings.delPeer(index)"