Add mobile UI for proxy-url setting

src/views/settings/components/Inputs.vue

@@ -15,10 +15,10 @@
           :setting-parent="[...settingParent, subSetting]"
           :setting="subSetting"
           :data="data[setting.key]"
-          :custom-label-width="isDesktop ? 'auto' : '100px'"
+          :custom-label-width="isDesktop ? '120px' : '100px'"
           :label-class="'center-label'"
           :input-class="'keyword-inner-input'"
-          :margin="margin + 20"
+          :margin="isDesktop ? margin + 15 : margin + 8"
           :nested="true"/>
       </el-form-item>
     </div>
@@ -103,7 +103,6 @@
       <div
         v-if="setting.description && setting.type !== 'keyword'"
         :class="inputClass"
-        :style="`margin-left:${margin}px`"
         class="expl"
         v-html="getFormattedDescription(setting.description)"/>
     </el-form-item>
@@ -193,11 +192,6 @@ export default {
       required: false
     }
   },
-  data() {
-    return {
-      currentMargin: 0
-    }
-  },
   computed: {
     canBeDeleted() {
       const { group, key } = this.settingGroup

src/views/settings/components/inputComponents/ProxyUrlInput.vue

@@ -1,16 +1,20 @@
 <template>
-  <div class="setting-input">
+  <div class="proxy-url-input">
     <el-input
       :value="proxyUrlData.host"
       placeholder="host (e.g. localhost or 127.0.0.1)"
       class="proxy-url-host-input"
-      @input="updateProxyUrl($event, 'host')"/> :
+      @input="updateProxyUrl($event, 'host')"/>
+    <span v-if="isDesktop">:</span>
     <el-input
       :value="proxyUrlData.port"
       placeholder="port (e.g 9020 or 3090)"
       class="proxy-url-value-input"
       @input="updateProxyUrl($event, 'port')"/>
-    <el-checkbox :value="proxyUrlData.socks5" class="name-input" @change="updateProxyUrl($event, 'socks5')">Socks5</el-checkbox>
+    <div class="socks5-checkbox-container">
+      <el-checkbox :value="proxyUrlData.socks5" @change="updateProxyUrl($event, 'socks5')"/>
+      <span class="socks5-checkbox">Socks5</span>
+    </div>
   </div>
 </template>
 
@@ -47,6 +51,9 @@ export default {
     }
   },
   computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
     settings() {
       return this.$store.state.settings.settings
     },

src/views/settings/styles/main.scss

@@ -154,9 +154,14 @@
     width: 20%;
     margin-right: 8px
   }
+  .proxy-url-input {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
   .proxy-url-host-input {
     width: 35%;
-    margin-right: 10px
+    margin-right: 8px
   }
   .proxy-url-value-input {
     width: 35%;
@@ -185,6 +190,20 @@
   .single-input {
     margin-right: 10px
   }
+  .socks5-checkbox {
+    font-size: 14px;
+    color: #606266;
+    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
+    font-weight: 700;
+    margin-left: 10px;
+  }
+  .socks5-checkbox-container {
+    width: 40%;
+    height: 36px;
+    margin-right: 5px;
+    display: flex;
+    align-items: center;
+  }
   .ssl-tls-opts {
     margin: 36px 0 0 0;
   }
@@ -257,6 +276,19 @@
         margin: 4px 7px 0 -5px;
       }
     }
+    .proxy-url-input {
+      flex-direction: column;
+      align-items: flex-start;
+      margin-bottom: 0;
+    }
+    .proxy-url-host-input {
+      width: 100%;
+      margin-bottom: 5px;
+    }
+    .proxy-url-value-input {
+      width: 100%;
+      margin-left: 0;
+    }
     .setting-label {
       display: flex;
       justify-content: space-between;
@@ -266,6 +298,9 @@
       width: 90%;
       margin: 0 0 10px 0;
     }
+    .socks5-checkbox-container {
+      width: 100%;
+    }
     .el-input__inner {
     padding: 0 5px 0 5px
     }