From 39f892bbfb7408c910363db4f9ec14d64d4d31af Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 16 Feb 2020 22:42:25 +0300
Subject: [PATCH] Fix displaying delete buttons in mobile UI

---
 src/views/settings/components/Inputs.vue | 128 ++++++++++++-----------
 src/views/settings/styles/main.scss      |  26 ++++-
 2 files changed, 93 insertions(+), 61 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index be5e27d4..f03d8567 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -28,71 +28,79 @@
           <el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
         </el-tooltip>
       </span>
-      <el-input
-        v-if="setting.type === 'string' || (setting.type.includes('string') && setting.type.includes('atom'))"
-        :value="inputValue"
-        :placeholder="setting.suggestions ? setting.suggestions[0] : null"
-        @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
-      <el-switch
-        v-if="setting.type === 'boolean'"
-        :value="inputValue"
-        @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
-      <el-input-number
-        v-if="setting.type === 'integer'"
-        :value="inputValue === null ? undefined : inputValue"
-        :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
-        :min="0"
-        :size="isDesktop ? 'large' : 'small'"
-        @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
-      <el-select
-        v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown'))"
-        :value="inputValue"
-        clearable
-        @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
-        <el-option
-          v-for="(option, index) in setting.suggestions"
-          :value="option"
-          :key="index"/>
-      </el-select>
-      <el-select
-        v-if="renderMultipleSelect(setting.type)"
-        :value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue"
-        multiple
-        filterable
-        allow-create
-        @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
-        <el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
-      </el-select>
-      <el-input
-        v-if="setting.key === ':ip'"
-        :value="inputValue"
-        placeholder="xxx.xxx.xxx.xx"
-        @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
-      <el-input
-        v-if="setting.type === 'atom'"
-        :value="inputValue"
-        :placeholder="setting.suggestions[0] ? setting.suggestions[0].substr(1) : ''"
-        @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
-        <template slot="prepend">:</template>
-      </el-input>
-      <!-- special inputs -->
-      <auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
-      <mascots-input v-if="setting.key === ':mascots'" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
-      <editable-keyword-input v-if="editableKeyword(setting.key, setting.type)" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
-      <icons-input v-if="setting.key === ':icons'" :data="iconsData" :setting-group="settingGroup" :setting="setting"/>
-      <proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
-      <multiple-select v-if="setting.key === ':backends' || setting.key === ':args'" :data="data" :setting-group="settingGroup" :setting="setting"/>
-      <prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
-      <rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
-      <!-------------------->
+      <div class="input-row">
+        <el-input
+          v-if="setting.type === 'string' || (setting.type.includes('string') && setting.type.includes('atom'))"
+          :value="inputValue"
+          :placeholder="setting.suggestions ? setting.suggestions[0] : null"
+          class="input"
+          @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
+        <el-switch
+          v-if="setting.type === 'boolean'"
+          :value="inputValue"
+          class="switch-input"
+          @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
+        <el-input-number
+          v-if="setting.type === 'integer'"
+          :value="inputValue === null ? undefined : inputValue"
+          :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
+          :min="0"
+          :size="isDesktop ? 'large' : 'small'"
+          @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
+        <el-select
+          v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown'))"
+          :value="inputValue === false ? 'false' : inputValue"
+          clearable
+          class="input"
+          @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
+          <el-option
+            v-for="(option, index) in setting.suggestions"
+            :value="option"
+            :key="index"/>
+        </el-select>
+        <el-select
+          v-if="renderMultipleSelect(setting.type)"
+          :value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue"
+          multiple
+          filterable
+          allow-create
+          class="input"
+          @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
+          <el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
+        </el-select>
+        <el-input
+          v-if="setting.key === ':ip'"
+          :value="inputValue"
+          placeholder="xxx.xxx.xxx.xx"
+          class="input"
+          @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
+        <el-input
+          v-if="setting.type === 'atom'"
+          :value="inputValue"
+          :placeholder="setting.suggestions[0] ? setting.suggestions[0].substr(1) : ''"
+          class="input"
+          @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
+          <template slot="prepend">:</template>
+        </el-input>
+        <!-- special inputs -->
+        <auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
+        <mascots-input v-if="setting.key === ':mascots'" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
+        <editable-keyword-input v-if="editableKeyword(setting.key, setting.type)" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
+        <icons-input v-if="setting.key === ':icons'" :data="iconsData" :setting-group="settingGroup" :setting="setting"/>
+        <proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
+        <multiple-select v-if="setting.key === ':backends' || setting.key === ':args'" :data="data" :setting-group="settingGroup" :setting="setting"/>
+        <prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
+        <rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
+        <!-------------------->
+        <el-tooltip v-if="canBeDeleted && isMobile" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container">
+          <el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
+        </el-tooltip>
+      </div>
       <div
         v-if="setting.description && setting.type !== 'keyword'"
         class="expl"
         v-html="getFormattedDescription(setting.description)"/>
     </el-form-item>
-    <el-tooltip v-if="canBeDeleted && isMobile" :content="$t('settings.removeFromDB')" placement="bottom-end">
-      <el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting"/>
-    </el-tooltip>
   </div>
 </template>
 
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index be8298f2..e908e554 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -190,6 +190,11 @@
   }
   .prune-options {
     display: flex;
+    height: 36px;
+    align-items: baseline;
+    .el-radio {
+      margin-top: 11px;
+    }
   }
   .rate-limit {
     .el-form-item__content {
@@ -262,6 +267,9 @@
     right: 0;
     z-index: 10000;
   }
+  .switch-input {
+    height: 36px;
+  }
   .text {
     line-height: 20px;
     margin-right: 15px
@@ -287,9 +295,16 @@
 
   @media only screen and (max-width: 760px),
     (min-device-width: 768px) and (max-device-width: 1024px) {
+    .delete-setting-button {
+      margin-left: 5px;
+      height: 28px;
+    }
+    .delete-setting-button-container {
+      flex: 0 0 auto;
+    }
     .description > p {
       line-height: 18px;
-      margin: 0 0 7px 0;
+      margin: 0 5px 7px 0;
       code {
         display: inline;
         line-height: 18px;
@@ -314,6 +329,9 @@
       display: flex;
       justify-content: space-between;
     }
+    .input {
+      flex: 1 1 auto;
+    }
     .input-container {
       width: 100%;
       .el-form-item:first-child {
@@ -324,6 +342,11 @@
         margin: 4px 7px 0 -5px;
       }
     }
+    .input-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
     .limit-input {
       width: 46%;
     }
@@ -342,6 +365,7 @@
     }
     .prune-options {
       flex-direction: column;
+      height: 80px;
     }
     .rate-limit {
       .el-form-item__content {