Add styles for tablet

src/views/settings/components/Inputs.vue

@@ -15,7 +15,7 @@
           :setting-parent="[...settingParent, subSetting]"
           :setting="subSetting"
           :data="data[setting.key]"
-          :custom-label-width="isDesktop ? '120px' : '100px'"
+          :custom-label-width="isMobile ? '100px' : '120px'"
           :label-class="subSetting.type === 'keyword' ? 'center-label' : ''"
           :margin="isDesktop ? margin + 15 : margin + 8"
           :nested="true"/>

src/views/settings/components/Setting.vue

@@ -46,10 +46,10 @@
                   </el-tooltip>
                 </span>
                 <span class="label-font">{{ setting.label }}</span>
+                <el-tooltip v-if="canBeDeleted(setting.key) && (isMobile || isTablet)" :content="$t('settings.removeFromDB')" placement="bottom-end">
+                  <el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting(setting.key)"/>
+                </el-tooltip>
               </el-form-item>
-              <el-tooltip v-if="canBeDeleted(setting.key) && (isMobile || isTablet)" :content="$t('settings.removeFromDB')" placement="bottom-end">
-                <el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting(setting.key)"/>
-              </el-tooltip>
             </div>
             <div v-for="subSetting in setting.children" :key="subSetting.key">
               <inputs

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="editable-keyword-container">
     <div v-if="setting.key === ':replace'">
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="pattern" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :

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

@@ -1,6 +1,6 @@
 <template>
-  <div>
+  <div class="mascot-container">
-    <div v-for="(icon, index) in data" :key="index" class="mascot-container">
+    <div v-for="(icon, index) in data" :key="index" class="mascot">
       <div class="icons-container">
         <div class="icon-container">
           <div v-for="{ key, value, id } in icon" :key="id" class="icon-values-container">

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

@@ -1,6 +1,6 @@
 <template>
-  <div>
+  <div class="mascot-container">
-    <div v-for="mascot in data" :key="getId(mascot)" class="mascot-container">
+    <div v-for="mascot in data" :key="getId(mascot)" class="mascot">
       <el-form-item label="Name" label-width="85px" class="mascot-form-item">
         <div class="mascot-name-container">
           <el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/>

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

@@ -1,11 +1,12 @@
 <template>
-  <div>
+  <div class="multiple-select-container">
     <el-select
       v-if="setting.key === ':backends'"
       :value="data.value"
       multiple
       filterable
       allow-create
+      class="input"
       @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
       <el-option value=":console" label="console"/>
       <el-option value=":ex_syslogger" label="ExSyslogger"/>
@@ -17,6 +18,7 @@
       multiple
       filterable
       allow-create
+      class="input"
       @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
       <el-option value="strip" label="strip"/>
       <el-option value="auto-orient" label="auto-orient"/>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="rate-limit-container">
     <div v-if="!rateLimitAuthUsers">
       <el-input
         :value="rateLimitAllUsers[0]"

src/views/settings/styles/main.scss

@@ -40,6 +40,9 @@
   .divider.thick-line {
     height: 2px;
   }
+  .editable-keyword-container {
+    width: 100%;
+  }
   .el-form-item .rate-limit {
     margin-right: 0;
   }
@@ -153,9 +156,12 @@
     border: 1px solid #eee;
     margin-bottom: 18px;
   }
-  .mascot-container {
+  .mascot {
     margin-bottom: 15px;
   }
+  .mascot-container {
+    width: 100%;
+  }
   .mascot-input {
     margin-bottom: 7px;
   }
@@ -166,6 +172,9 @@
   .mascot-name-input {
     margin-right: 10px
   }
+  .multiple-select-container {
+    width: 100%;
+  }
   .name-input {
     width: 30%;
     margin-right: 8px
@@ -178,6 +187,7 @@
     display: flex;
     align-items: center;
     margin-bottom: 10px;
+    width: 100%;
   }
   .proxy-url-host-input {
     width: 35%;
@@ -202,6 +212,9 @@
       display: flex;
     }
   }
+  .rate-limit-container {
+    width: 100%;
+  }
   .rate-limit-content {
     width: 100%;
   }
@@ -229,13 +242,33 @@
     width: 47%;
     margin: 0 1% 5px 0
   }
-  .settings-delete-button {
-    margin-left: 5px;
-  }
   .setting-input {
     display: flex;
     margin-bottom: 10px;
   }
+  .settings-container {
+    .el-tabs {
+      margin-top: 20px
+    }
+  }
+  .settings-delete-button {
+    margin-left: 5px;
+  }
+  .settings-docs-button {
+    width: 163px;
+    text-align: left;
+    padding: 10px;
+  }
+  .settings-header {
+    margin: 0;
+  }
+  .settings-header-container {
+    display: flex;
+    height: 36px;
+    justify-content: space-between;
+    align-items: center;
+    margin: 22px 30px 15px 15px;
+  }
   .single-input {
     margin-right: 10px
   }
@@ -285,6 +318,10 @@
   }
 
   @media only screen and (min-width: 1824px) {
+    .settings-container {
+      max-width: 1824px;
+      margin: auto;
+    }
     .submit-button-container {
       max-width: 1637px;
       margin-left: auto;
@@ -293,8 +330,7 @@
     }
   }
 
-  @media only screen and (max-width: 760px),
+  @media only screen and (max-width:480px) {
-    (min-device-width: 768px) and (max-device-width: 1024px) {
     .delete-setting-button {
       margin: 4px 0 0 5px;
       height: 28px;
@@ -345,7 +381,8 @@
         padding: 0;
       }
       .settings-delete-button {
-        margin: 4px 15px 0 -5px;
+        margin-top: 4px;
+        float: right;
       }
     }
     .input-row {
@@ -387,6 +424,15 @@
       display: flex;
       justify-content: space-between;
     }
+    .settings-header {
+      margin: 7px 10px 15px 15px;
+    }
+    .settings-header-container {
+      margin: 15px;
+    }
+    .settings-menu {
+      width: 163px;
+    }
     .socks5-checkbox-container {
       width: 100%;
     }
@@ -461,4 +507,45 @@
       margin-right: 8px
     }
   }
+  @media only screen and (max-width:801px) and (min-width: 481px) {
+    .delete-setting-button {
+      margin: 4px 0 0 10px;
+      height: 28px;
+    }
+    .delete-setting-button-container {
+      flex: 0 0 auto;
+    }
+    .description > p {
+      line-height: 18px;
+      margin: 0 15px 10px 0;
+    }
+    .icon-minus-button {
+      width: 28px;
+      height: 28px;
+      margin-top: 4px;
+    }
+    .input {
+      flex: 1 1 auto;
+    }
+    .input-container {
+      .el-form-item__label {
+        span {
+          margin-left: 10px;
+        }
+      }
+    }
+    .input-row {
+      display: flex;
+      justify-content: space-between;
+    }
+    .rate-limit-label-container {
+      width: 250px;
+    }
+    .settings-delete-button {
+      float: right;
+    }
+    .settings-header {
+      margin: 5px 0 0 15px;
+    }
+  }
 }