add explanations to rate limit input

src/lang/en.js

@@ -471,6 +471,8 @@ export default {
     setLimits: 'Set different limits for unauthenticated and authenticated users',
     unauthenticatedUsers: 'Unauthenticated users',
     authenticatedUsers: 'Authenticated users',
+    scale: 'Timespan (ms)',
+    limit: 'Requests',
     setLimitsForAll: 'Set limit for all users',
     ref: 'Ref',
     file: 'File',

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

@@ -1,19 +1,20 @@
 <template>
   <div :data-search="setting.key || setting.group" class="rate-limit-container">
     <div v-if="!rateLimitAuthUsers">
-      <el-input-number
-        :value="rateLimitAllUsers[0]"
-        :controls="false"
-        placeholder="scale"
-        class="scale-input"
-        @input="parseRateLimiter($event, setting.key, 'scale', 'oneLimit', rateLimitAllUsers)"/>
-      <span>:</span>
+      <label>{{ $t('settings.limit') }}:</label>
       <el-input-number
         :value="rateLimitAllUsers[1]"
         :controls="false"
         placeholder="limit"
         class="limit-input"
         @input="parseRateLimiter($event, setting.key, 'limit', 'oneLimit', rateLimitAllUsers)"/>
+      <label>{{ $t('settings.scale') }}:</label>
+      <el-input-number
+        :value="rateLimitAllUsers[0]"
+        :controls="false"
+        placeholder="scale"
+        class="scale-input"
+        @input="parseRateLimiter($event, setting.key, 'scale', 'oneLimit', rateLimitAllUsers)"/>
       <div class="limit-button-container">
         <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="toggleLimits([['', ''], ['', '']], setting.key)"/>
         <p class="expl limit-expl">{{ $t('settings.setLimits') }}</p>
@@ -27,15 +28,7 @@
           </span>
         </div>
         <div class="rate-limit-content">
-          <el-input-number
-            :value="rateLimitUnauthUsers[0]"
-            :controls="false"
-            placeholder="scale"
-            class="scale-input"
-            @input="parseRateLimiter(
-              $event, setting.key, 'scale', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers]
-          )"/>
-          <span>:</span>
+          <label>{{ $t('settings.limit') }}:</label>
           <el-input-number
             :value="rateLimitUnauthUsers[1]"
             :controls="false"
@@ -44,6 +37,15 @@
             @input="parseRateLimiter(
               $event, setting.key, 'limit', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers]
           )"/>
+          <label>{{ $t('settings.scale') }}:</label>
+          <el-input-number
+            :value="rateLimitUnauthUsers[0]"
+            :controls="false"
+            placeholder="scale"
+            class="scale-input"
+            @input="parseRateLimiter(
+              $event, setting.key, 'scale', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers]
+          )"/>
         </div>
       </el-form-item>
       <el-form-item class="rate-limit">
@@ -53,6 +55,14 @@
           </span>
         </div>
         <div class="rate-limit-content">
+          <label>{{ $t('settings.limit') }}:</label>
+          <el-input-number
+            :value="rateLimitAuthUsers[1]"
+            :controls="false"
+            placeholder="limit"
+            class="limit-input"
+            @input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
+          <label>{{ $t('settings.scale') }}:</label>
           <el-input-number
             :value="rateLimitAuthUsers[0]"
             :controls="false"
@@ -60,12 +70,6 @@
             class="scale-input"
             @input="parseRateLimiter($event, setting.key, 'scale', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
           <span>:</span>
-          <el-input-number
-            :value="rateLimitAuthUsers[1]"
-            :controls="false"
-            placeholder="limit"
-            class="limit-input"
-            @input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
         </div>
       </el-form-item>
       <div class="limit-button-container">

src/views/styles/settings.scss

@@ -162,7 +162,7 @@
     margin-left: 10px;
   }
   .limit-input {
-    width: 47%;
+    width: 27%;
     margin: 0 0 5px 1%
   }
   .line {
@@ -492,7 +492,7 @@
       margin-left: 15px;
     }
     .limit-input {
-      width: 45%;
+      width: 27%;
     }
     .proxy-url-input {
       flex-direction: column;