From cbc60e64a1651683ef2cb366dcc26b806dfdccdb Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 6 Feb 2020 19:53:30 +0300
Subject: [PATCH 01/21] Add select menu for mobile UI

---
 src/views/settings/index.vue | 131 ++++++++++++++++++++++++++---------
 1 file changed, 100 insertions(+), 31 deletions(-)

diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 5edb0a19..0a5cc15b 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -1,72 +1,101 @@
 <template>
   <div class="settings-container">
-    <h1>{{ $t('settings.settings') }}</h1>
-    <el-tabs v-model="activeTab" :tab-position="tabPosition">
-      <el-tab-pane :label="$t('settings.activityPub')" :disabled="configDisabled" lazy>
+    <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
+    <el-tabs v-if="isDesktop" v-model="activeTab" tab-position="left">
+      <el-tab-pane :label="$t('settings.activityPub')" :disabled="configDisabled" name="activityPub" lazy>
         <activity-pub/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.auth')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.auth')" :disabled="configDisabled" name="auth" lazy>
         <authentication/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.autoLinker')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.autoLinker')" :disabled="configDisabled" name="autoLinker" lazy>
         <auto-linker/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.esshd')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.esshd')" :disabled="configDisabled" name="esshd" lazy>
         <esshd/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.captcha')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.captcha')" :disabled="configDisabled" name="captcha" lazy>
         <captcha/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.frontend')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.frontend')" :disabled="configDisabled" name="frontend" lazy>
         <frontend/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.gopher')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.gopher')" :disabled="configDisabled" name="gopher" lazy>
         <gopher/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.http')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.http')" :disabled="configDisabled" name="http" lazy>
         <http/>
       </el-tab-pane>
       <el-tab-pane :label="$t('settings.instance')" :disabled="configDisabled" name="instance">
         <instance/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.jobQueue')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.jobQueue')" :disabled="configDisabled" name="jobQueue" lazy>
         <job-queue/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.logger')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.logger')" :disabled="configDisabled" name="logger" lazy>
         <logger/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.mailer')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.mailer')" :disabled="configDisabled" name="mailer" lazy>
         <mailer/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.mediaProxy')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.mediaProxy')" :disabled="configDisabled" name="mediaProxy" lazy>
         <media-proxy/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.metadata')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.metadata')" :disabled="configDisabled" name="metadata" lazy>
         <metadata/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.mrf')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.mrf')" :disabled="configDisabled" name="mrf" lazy>
         <mrf/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.rateLimiters')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.rateLimiters')" :disabled="configDisabled" name="rateLimiters" lazy>
         <rate-limiters/>
       </el-tab-pane>
       <el-tab-pane :label="$t('settings.relays')" lazy name="relays">
         <relays/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.webPush')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.webPush')" :disabled="configDisabled" name="webPush" lazy>
         <web-push/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.upload')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.upload')" :disabled="configDisabled" name="upload" lazy>
         <upload/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.other')" :disabled="configDisabled" lazy>
+      <el-tab-pane :label="$t('settings.other')" :disabled="configDisabled" name="other" lazy>
         <other/>
       </el-tab-pane>
     </el-tabs>
+    <el-select v-if="isMobile" v-model="activeTab" class="settings-menu" placeholder="Select">
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="configDisabled"/>
+    </el-select>
+    <activity-pub v-if="activeTab === 'activityPub'"/>
+    <authentication v-if="activeTab === 'auth'"/>
+    <auto-linker v-if="activeTab === 'autoLinker'"/>
+    <esshd v-if="activeTab === 'esshd'"/>
+    <captcha v-if="activeTab === 'captcha'"/>
+    <frontend v-if="activeTab === 'frontend'"/>
+    <gopher v-if="activeTab === 'gopher'"/>
+    <http v-if="activeTab === 'http'"/>
+    <instance v-if="activeTab === 'instance'"/>
+    <job-queue v-if="activeTab === 'jobQueue'"/>
+    <logger v-if="activeTab === 'logger'"/>
+    <mailer v-if="activeTab === 'mailer'"/>
+    <media-proxy v-if="activeTab === 'mediaProxy'"/>
+    <metadata v-if="activeTab === 'metadata'"/>
+    <mrf v-if="activeTab === 'mrf'"/>
+    <rate-limiters v-if="activeTab === 'rateLimiters'"/>
+    <relays v-if="activeTab === 'relays'"/>
+    <web-push v-if="activeTab === 'webPush'"/>
+    <upload v-if="activeTab === 'upload'"/>
+    <other v-if="activeTab === 'other'"/>
   </div>
 </template>
 
 <script>
+import i18n from '@/lang'
 import {
   ActivityPub,
   Authentication,
@@ -113,6 +142,32 @@ export default {
     Upload,
     WebPush
   },
+  data() {
+    return {
+      options: [
+        { value: 'activityPub', label: i18n.t('settings.activityPub') },
+        { value: 'auth', label: i18n.t('settings.auth') },
+        { value: 'autoLinker', label: i18n.t('settings.autoLinker') },
+        { value: 'esshd', label: i18n.t('settings.esshd') },
+        { value: 'captcha', label: i18n.t('settings.captcha') },
+        { value: 'frontend', label: i18n.t('settings.frontend') },
+        { value: 'gopher', label: i18n.t('settings.gopher') },
+        { value: 'http', label: i18n.t('settings.http') },
+        { value: 'instance', label: i18n.t('settings.instance') },
+        { value: 'jobQueue', label: i18n.t('settings.jobQueue') },
+        { value: 'logger', label: i18n.t('settings.logger') },
+        { value: 'mailer', label: i18n.t('settings.mailer') },
+        { value: 'mediaProxy', label: i18n.t('settings.mediaProxy') },
+        { value: 'metadata', label: i18n.t('settings.metadata') },
+        { value: 'mrf', label: i18n.t('settings.mrf') },
+        { value: 'rateLimiters', label: i18n.t('settings.rateLimiters') },
+        { value: 'relays', label: i18n.t('settings.relays') },
+        { value: 'webPush', label: i18n.t('settings.webPush') },
+        { value: 'upload', label: i18n.t('settings.upload') },
+        { value: 'other', label: i18n.t('settings.other') }
+      ]
+    }
+  },
   computed: {
     activeTab: {
       get() {
@@ -125,6 +180,9 @@ export default {
     configDisabled() {
       return this.$store.state.settings.configDisabled
     },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
@@ -139,18 +197,29 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss' scoped>
+.settings-container {
+  .el-tabs {
+    margin-top: 20px
+  }
+
+}
+.settings-header {
+  margin: 22px 0 0 15px;
+}
+@media only screen and (min-width: 1824px) {
   .settings-container {
-    .el-tabs {
-      margin-top: 20px
-    }
-    h1 {
-      margin: 22px 0 0 15px;
-    }
+    max-width: 1824px;
+    margin: auto;
   }
-  @media only screen and (min-width: 1824px) {
-    .settings-container {
-      max-width: 1824px;
-      margin: auto;
-    }
+}
+@media only screen and (max-width: 760px),
+  (min-device-width: 768px) and (max-device-width: 1024px) {
+  .settings-header {
+    margin: 7px 10px 15px 10px;
   }
+  .settings-menu {
+    margin: 0 0 15px 10px;
+    width: 45%;
+  }
+}
 </style>

From 3a8132da7a2764e84e8464ecde1d934a9ebce1c2 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 6 Feb 2020 21:01:54 +0300
Subject: [PATCH 02/21] Change styles for settting inputs for mobile ui

---
 src/views/emojiPacks/index.vue                |   2 +-
 src/views/settings/components/ActivityPub.vue |   2 +-
 .../settings/components/Authentication.vue    |   2 +-
 src/views/settings/components/AutoLinker.vue  |   2 +-
 src/views/settings/components/Captcha.vue     |   2 +-
 src/views/settings/components/Esshd.vue       |   2 +-
 src/views/settings/components/Frontend.vue    |   2 +-
 src/views/settings/components/Gopher.vue      |   2 +-
 src/views/settings/components/Http.vue        |   2 +-
 src/views/settings/components/Inputs.vue      | 178 +++++++++---------
 src/views/settings/components/Instance.vue    |   2 +-
 src/views/settings/components/JobQueue.vue    |   2 +-
 src/views/settings/components/Logger.vue      |   2 +-
 src/views/settings/components/MRF.vue         |   2 +-
 src/views/settings/components/Mailer.vue      |   2 +-
 src/views/settings/components/MediaProxy.vue  |   2 +-
 src/views/settings/components/Metadata.vue    |   2 +-
 src/views/settings/components/Other.vue       |   2 +-
 .../settings/components/RateLimiters.vue      |   2 +-
 src/views/settings/components/Upload.vue      |   2 +-
 src/views/settings/components/WebPush.vue     |   2 +-
 src/views/settings/index.vue                  |  58 +++---
 src/views/settings/styles/main.scss           |  27 +--
 23 files changed, 160 insertions(+), 143 deletions(-)

diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 40c40d3e..48c7a0e3 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -72,7 +72,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '240px'
+      return this.isMobile ? '120px' : '240px'
     },
     localPacks() {
       return this.$store.state.emojiPacks.localPacks
diff --git a/src/views/settings/components/ActivityPub.vue b/src/views/settings/components/ActivityPub.vue
index 56a57b9a..d4eba8c1 100644
--- a/src/views/settings/components/ActivityPub.vue
+++ b/src/views/settings/components/ActivityPub.vue
@@ -36,7 +36,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.$store.state.settings.loading
diff --git a/src/views/settings/components/Authentication.vue b/src/views/settings/components/Authentication.vue
index fa517f35..e83db32a 100644
--- a/src/views/settings/components/Authentication.vue
+++ b/src/views/settings/components/Authentication.vue
@@ -44,7 +44,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     ldap() {
       return this.settings.description.find(setting => setting.key === ':ldap')
diff --git a/src/views/settings/components/AutoLinker.vue b/src/views/settings/components/AutoLinker.vue
index 18ebabc3..b5d3148e 100644
--- a/src/views/settings/components/AutoLinker.vue
+++ b/src/views/settings/components/AutoLinker.vue
@@ -32,7 +32,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Captcha.vue b/src/views/settings/components/Captcha.vue
index cc150337..f677f641 100644
--- a/src/views/settings/components/Captcha.vue
+++ b/src/views/settings/components/Captcha.vue
@@ -42,7 +42,7 @@ export default {
       return _.get(this.settings.settings, [':pleroma', 'Pleroma.Captcha.Kocaptcha']) || {}
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Esshd.vue b/src/views/settings/components/Esshd.vue
index 38b0865e..ba58faff 100644
--- a/src/views/settings/components/Esshd.vue
+++ b/src/views/settings/components/Esshd.vue
@@ -32,7 +32,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index 3931a2c8..9696bb4f 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -74,7 +74,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Gopher.vue b/src/views/settings/components/Gopher.vue
index 04aec565..952662c0 100644
--- a/src/views/settings/components/Gopher.vue
+++ b/src/views/settings/components/Gopher.vue
@@ -32,7 +32,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Http.vue b/src/views/settings/components/Http.vue
index afbf79c6..cd450076 100644
--- a/src/views/settings/components/Http.vue
+++ b/src/views/settings/components/Http.vue
@@ -66,7 +66,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 1f5a79c6..ae3ebb8c 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -1,88 +1,92 @@
 <template>
-  <el-form-item :label-width="customLabelWidth" :class="labelClass">
-    <span slot="label">
-      {{ setting.label }}
-      <el-tooltip v-if="canBeDeleted" :content="$t('settings.removeFromDB')" placement="bottom-end">
-        <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @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 ? 0 : inputValue"
-      :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
-      :min="0"
-      size="large"
-      class="top-margin"
-      @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(false))"
-      :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>
-    <div v-if="setting.type === 'keyword'">
-      <div v-for="subSetting in setting.children" :key="subSetting.key">
-        <inputs
-          :setting-group="settingGroup"
-          :setting-parent="[...settingParent, subSetting]"
-          :setting="subSetting"
-          :data="data[setting.key]"
-          :custom-label-width="'140px'"
-          :label-class="'center-label'"
-          :input-class="'keyword-inner-input'"
-          :nested="true"/>
+  <div class="input-container">
+    <el-form-item :label-width="customLabelWidth" :class="labelClass">
+      <span slot="label">
+        {{ setting.label }}
+        <el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
+          <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @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 ? 0 : inputValue"
+        :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
+        :min="0"
+        size="large"
+        @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(false))"
+        :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>
+      <div v-if="setting.type === 'keyword'">
+        <div v-for="subSetting in setting.children" :key="subSetting.key">
+          <inputs
+            :setting-group="settingGroup"
+            :setting-parent="[...settingParent, subSetting]"
+            :setting="subSetting"
+            :data="data[setting.key]"
+            :custom-label-width="'140px'"
+            :label-class="'center-label'"
+            :input-class="'keyword-inner-input'"
+            :nested="true"/>
+        </div>
       </div>
-    </div>
-    <!-- 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"/>
-    <!-------------------->
-    <span
-      v-if="setting.description && setting.type !== 'keyword'"
-      :class="inputClass"
-      class="expl"
-      v-html="getFormattedDescription(setting.description)"/>
-  </el-form-item>
+      <!-- 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
+        v-if="setting.description && setting.type !== 'keyword'"
+        :class="inputClass"
+        class="expl"
+        v-html="getFormattedDescription(setting.description)"/>
+    </el-form-item>
+    <el-tooltip v-if="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>
 
 <script>
@@ -185,8 +189,14 @@ export default {
         return this.data[this.setting.key]
       }
     },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     keywordData() {
       return Array.isArray(this.data) ? this.data : []
diff --git a/src/views/settings/components/Instance.vue b/src/views/settings/components/Instance.vue
index 904fc088..b0cf34ad 100644
--- a/src/views/settings/components/Instance.vue
+++ b/src/views/settings/components/Instance.vue
@@ -71,7 +71,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/JobQueue.vue b/src/views/settings/components/JobQueue.vue
index f823d63a..e1d94167 100644
--- a/src/views/settings/components/JobQueue.vue
+++ b/src/views/settings/components/JobQueue.vue
@@ -38,7 +38,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Logger.vue b/src/views/settings/components/Logger.vue
index aa7e361a..0c21158a 100644
--- a/src/views/settings/components/Logger.vue
+++ b/src/views/settings/components/Logger.vue
@@ -51,7 +51,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/MRF.vue b/src/views/settings/components/MRF.vue
index 8e49ca84..41838421 100644
--- a/src/views/settings/components/MRF.vue
+++ b/src/views/settings/components/MRF.vue
@@ -52,7 +52,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Mailer.vue b/src/views/settings/components/Mailer.vue
index 43812952..cfd098c0 100644
--- a/src/views/settings/components/Mailer.vue
+++ b/src/views/settings/components/Mailer.vue
@@ -41,7 +41,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.$store.state.settings.loading
diff --git a/src/views/settings/components/MediaProxy.vue b/src/views/settings/components/MediaProxy.vue
index a249ba29..fdae5768 100644
--- a/src/views/settings/components/MediaProxy.vue
+++ b/src/views/settings/components/MediaProxy.vue
@@ -26,7 +26,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Metadata.vue b/src/views/settings/components/Metadata.vue
index b43ab85e..78b8d78b 100644
--- a/src/views/settings/components/Metadata.vue
+++ b/src/views/settings/components/Metadata.vue
@@ -30,7 +30,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Other.vue b/src/views/settings/components/Other.vue
index 0c0a797c..bcae1817 100644
--- a/src/views/settings/components/Other.vue
+++ b/src/views/settings/components/Other.vue
@@ -33,7 +33,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/RateLimiters.vue b/src/views/settings/components/RateLimiters.vue
index 37ff5574..8246836c 100644
--- a/src/views/settings/components/RateLimiters.vue
+++ b/src/views/settings/components/RateLimiters.vue
@@ -32,7 +32,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.$store.state.settings.loading
diff --git a/src/views/settings/components/Upload.vue b/src/views/settings/components/Upload.vue
index a9a57619..b485dc10 100644
--- a/src/views/settings/components/Upload.vue
+++ b/src/views/settings/components/Upload.vue
@@ -44,7 +44,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/WebPush.vue b/src/views/settings/components/WebPush.vue
index 9200fc31..4b2216b7 100644
--- a/src/views/settings/components/WebPush.vue
+++ b/src/views/settings/components/WebPush.vue
@@ -26,7 +26,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 0a5cc15b..2e77f905 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -63,34 +63,36 @@
         <other/>
       </el-tab-pane>
     </el-tabs>
-    <el-select v-if="isMobile" v-model="activeTab" class="settings-menu" placeholder="Select">
-      <el-option
-        v-for="item in options"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-        :disabled="configDisabled"/>
-    </el-select>
-    <activity-pub v-if="activeTab === 'activityPub'"/>
-    <authentication v-if="activeTab === 'auth'"/>
-    <auto-linker v-if="activeTab === 'autoLinker'"/>
-    <esshd v-if="activeTab === 'esshd'"/>
-    <captcha v-if="activeTab === 'captcha'"/>
-    <frontend v-if="activeTab === 'frontend'"/>
-    <gopher v-if="activeTab === 'gopher'"/>
-    <http v-if="activeTab === 'http'"/>
-    <instance v-if="activeTab === 'instance'"/>
-    <job-queue v-if="activeTab === 'jobQueue'"/>
-    <logger v-if="activeTab === 'logger'"/>
-    <mailer v-if="activeTab === 'mailer'"/>
-    <media-proxy v-if="activeTab === 'mediaProxy'"/>
-    <metadata v-if="activeTab === 'metadata'"/>
-    <mrf v-if="activeTab === 'mrf'"/>
-    <rate-limiters v-if="activeTab === 'rateLimiters'"/>
-    <relays v-if="activeTab === 'relays'"/>
-    <web-push v-if="activeTab === 'webPush'"/>
-    <upload v-if="activeTab === 'upload'"/>
-    <other v-if="activeTab === 'other'"/>
+    <div v-if="isMobile">
+      <el-select v-model="activeTab" class="settings-menu" placeholder="Select">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          :disabled="configDisabled"/>
+      </el-select>
+      <activity-pub v-if="activeTab === 'activityPub'"/>
+      <authentication v-if="activeTab === 'auth'"/>
+      <auto-linker v-if="activeTab === 'autoLinker'"/>
+      <esshd v-if="activeTab === 'esshd'"/>
+      <captcha v-if="activeTab === 'captcha'"/>
+      <frontend v-if="activeTab === 'frontend'"/>
+      <gopher v-if="activeTab === 'gopher'"/>
+      <http v-if="activeTab === 'http'"/>
+      <instance v-if="activeTab === 'instance'"/>
+      <job-queue v-if="activeTab === 'jobQueue'"/>
+      <logger v-if="activeTab === 'logger'"/>
+      <mailer v-if="activeTab === 'mailer'"/>
+      <media-proxy v-if="activeTab === 'mediaProxy'"/>
+      <metadata v-if="activeTab === 'metadata'"/>
+      <mrf v-if="activeTab === 'mrf'"/>
+      <rate-limiters v-if="activeTab === 'rateLimiters'"/>
+      <relays v-if="activeTab === 'relays'"/>
+      <web-push v-if="activeTab === 'webPush'"/>
+      <upload v-if="activeTab === 'upload'"/>
+      <other v-if="activeTab === 'other'"/>
+    </div>
   </div>
 </template>
 
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 023bfcca..e644a9da 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -96,14 +96,14 @@
   .icons-container {
     display: flex;
   }
+  .input-container {
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+  }
   .keyword-inner-input {
     margin-bottom: 22px;
   }
-  label {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
   .limit-button-container {
     display: flex;
     align-items: baseline;
@@ -156,6 +156,9 @@
     width: 47%;
     margin: 0 1% 5px 0
   }
+  .settings-delete-button {
+    margin-left: 5px;
+  }
   .setting-input {
     display: flex;
     margin-bottom: 10px;
@@ -202,9 +205,15 @@
 
   @media only screen and (max-width: 760px),
     (min-device-width: 768px) and (max-device-width: 1024px) {
-    .el-form-item {
-      margin-right: 15px;
+    .input-container {
+      .el-form-item {
+        margin: 0 0 15px 0;
+      }
+      .settings-delete-button {
+        margin: 4px 7px 0 7px;
+      }
     }
+
     .el-input__inner {
     padding: 0 5px 0 5px
     }
@@ -236,10 +245,6 @@
       margin-left: 4px;
       margin-right: 5px
     }
-    .top-margin {
-      position: absolute;
-      top: 25%;
-    }
     .value-input {
       width: 60%;
       margin-left: 5px;

From 0f4e609e0be12cbb08e096ef29e629feb215078b Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 6 Feb 2020 21:54:58 +0300
Subject: [PATCH 03/21] Add styles for buttons in mobile UI

---
 src/views/settings/components/Inputs.vue      |  4 +--
 .../inputComponents/EditableKeywordInput.vue  | 15 ++++----
 .../components/inputComponents/IconsInput.vue | 11 ++++--
 .../inputComponents/MascotsInput.vue          |  9 +++--
 .../inputComponents/RateLimitInput.vue        |  7 ++--
 src/views/settings/styles/main.scss           | 35 ++++++++++++++++---
 6 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index ae3ebb8c..feec9fda 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="input-container">
-    <el-form-item :label-width="customLabelWidth" :class="labelClass">
+    <el-form-item :label-width="customLabelWidth" :class="labelClass" class="settings-input">
       <span slot="label">
         {{ setting.label }}
         <el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
@@ -21,7 +21,7 @@
         :value="inputValue === null ? 0 : inputValue"
         :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
         :min="0"
-        size="large"
+        :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(false))"
diff --git a/src/views/settings/components/inputComponents/EditableKeywordInput.vue b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
index 9489c685..0f5eb0d1 100644
--- a/src/views/settings/components/inputComponents/EditableKeywordInput.vue
+++ b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
@@ -4,25 +4,25 @@
       <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)"/> :
         <el-input :value="getValue(element)" placeholder="replacement" class="value-input" @input="parseEditableKeyword($event, 'value', element)"/>
-        <el-button icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
       </div>
-      <el-button icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
+      <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
     <div v-else-if="editableKeywordWithInteger">
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
         <el-input-number :value="getValue(element)" :min="0" size="large" class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
-        <el-button icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
       </div>
-      <el-button icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
+      <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
     <div v-else>
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
         <el-select :value="getValue(element)" multiple filterable allow-create class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
-        <el-button icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
       </div>
-      <el-button icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
+      <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
   </div>
 </template>
@@ -53,6 +53,9 @@ export default {
   computed: {
     editableKeywordWithInteger() {
       return Array.isArray(this.setting.type) && this.setting.type.includes('keyword') && this.setting.type.includes('integer')
+    },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
     }
   },
   methods: {
diff --git a/src/views/settings/components/inputComponents/IconsInput.vue b/src/views/settings/components/inputComponents/IconsInput.vue
index ac994fe1..f9c48608 100644
--- a/src/views/settings/components/inputComponents/IconsInput.vue
+++ b/src/views/settings/components/inputComponents/IconsInput.vue
@@ -8,16 +8,16 @@
             <el-input :value="value" placeholder="value" class="icon-value-input" @input="parseIcons($event, 'value', index, id)"/>
           </div>
         </div>
-        <el-button icon="el-icon-minus" circle class="icon-minus-button" @click="deleteIcondRow(index)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle class="icon-minus-button" @click="deleteIcondRow(index)"/>
       </div>
       <div class="icons-button-container">
-        <el-button icon="el-icon-plus" circle @click="addValueToIcons(index)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addValueToIcons(index)"/>
         <span class="icons-button-desc">Add another `key - value` pair to this icon</span>
       </div>
       <div class="line"/>
     </div>
     <div class="icons-button-container">
-      <el-button icon="el-icon-plus" circle @click="addIconToIcons"/>
+      <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addIconToIcons"/>
       <span class="icons-button-desc">Add another icon configuration</span>
     </div>
   </div>
@@ -46,6 +46,11 @@ export default {
       }
     }
   },
+  computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    }
+  },
   methods: {
     addIconToIcons() {
       const updatedValue = [...this.data, [{ key: '', value: '', id: this.generateID() }]]
diff --git a/src/views/settings/components/inputComponents/MascotsInput.vue b/src/views/settings/components/inputComponents/MascotsInput.vue
index 96ec5ca7..b4ad6980 100644
--- a/src/views/settings/components/inputComponents/MascotsInput.vue
+++ b/src/views/settings/components/inputComponents/MascotsInput.vue
@@ -4,7 +4,7 @@
       <el-form-item label="Name" label-width="100px">
         <div class="mascot-name-container">
           <el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/>
-          <el-button icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
+          <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
         </div>
       </el-form-item>
       <el-form-item label="URL" label-width="100px">
@@ -14,7 +14,7 @@
         <el-input :value="getMimeType(mascot)" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', mascot)"/>
       </el-form-item>
     </div>
-    <el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
+    <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToMascots"/>
   </div>
 </template>
 
@@ -41,6 +41,11 @@ export default {
       }
     }
   },
+  computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    }
+  },
   methods: {
     addRowToMascots() {
       const updatedValue = [...this.data, { '': { ':url': '', ':mime_type': '', id: this.generateID() }}]
diff --git a/src/views/settings/components/inputComponents/RateLimitInput.vue b/src/views/settings/components/inputComponents/RateLimitInput.vue
index 358dcdf6..5328b347 100644
--- a/src/views/settings/components/inputComponents/RateLimitInput.vue
+++ b/src/views/settings/components/inputComponents/RateLimitInput.vue
@@ -13,7 +13,7 @@
         class="limit-input"
         @input="parseRateLimiter($event, setting.key, 'limit', 'oneLimit', rateLimitAllUsers)"/>
       <div class="limit-button-container">
-        <el-button icon="el-icon-plus" circle @click="toggleLimits([['', ''], ['', '']], setting.key)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="toggleLimits([['', ''], ['', '']], setting.key)"/>
         <p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
       </div>
     </div>
@@ -45,7 +45,7 @@
           @input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
       </el-form-item>
       <div class="limit-button-container">
-        <el-button icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
         <p class="expl limit-expl">Set limit for all users</p>
       </div>
     </div>
@@ -76,6 +76,9 @@ export default {
     }
   },
   computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
     rateLimitAllUsers() {
       return this.data[this.setting.key] ? this.data[this.setting.key] : ['', '']
     },
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index e644a9da..66a0d2a8 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -206,14 +206,16 @@
   @media only screen and (max-width: 760px),
     (min-device-width: 768px) and (max-device-width: 1024px) {
     .input-container {
-      .el-form-item {
-        margin: 0 0 15px 0;
-      }
+      width: 100%;
       .settings-delete-button {
         margin: 4px 7px 0 7px;
       }
     }
-
+    .settings-input {
+      display: inline-block;
+      width: 90%;
+      margin: 0 0 10px 0;
+    }
     .el-input__inner {
     padding: 0 5px 0 5px
     }
@@ -229,6 +231,31 @@
     .el-select__tags {
       overflow: hidden;
     }
+    .expl, .expl > p {
+      line-height: 16px;
+    }
+    .icon-key-input {
+      width: 40%;
+      margin-right: 4px
+    }
+    .icon-minus-button {
+      width: 28px;
+      height: 28px;
+      margin-top: 4px;
+    }
+    .icon-values-container {
+      margin: 0 7px 7px 0;
+    }
+    .icon-value-input {
+      width: 60%;
+      margin-left: 4px;
+    }
+    .icons-button-container {
+      line-height: 24px;
+    }
+    .line {
+      margin-bottom: 10px;
+    }
     .name-input {
       width: 40%;
       margin-right: 5px

From 541970424925e84fbbceef23dea86062d40f298b Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 6 Feb 2020 21:56:17 +0300
Subject: [PATCH 04/21] Remove Suggestions settings from Instance tab

---
 src/views/settings/components/Instance.vue | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/views/settings/components/Instance.vue b/src/views/settings/components/Instance.vue
index b0cf34ad..b66f56ab 100644
--- a/src/views/settings/components/Instance.vue
+++ b/src/views/settings/components/Instance.vue
@@ -20,11 +20,6 @@
       <setting :setting-group="manifest" :data="manifestData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="suggestions" :model="suggestionsData" :label-width="labelWidth">
-      <el-form-item label="Suggestions:"/>
-      <setting :setting-group="suggestions" :data="suggestionsData"/>
-    </el-form>
-    <div class="line"/>
     <el-form ref="pleromaUser" :model="pleromaUserData" :label-width="labelWidth">
       <setting :setting-group="pleromaUser" :data="pleromaUserData"/>
     </el-form>
@@ -93,12 +88,6 @@ export default {
     },
     scheduledActivityData() {
       return _.get(this.settings.settings, [':pleroma', 'Pleroma.ScheduledActivity']) || {}
-    },
-    suggestions() {
-      return this.$store.state.settings.description.find(setting => setting.key === ':suggestions')
-    },
-    suggestionsData() {
-      return _.get(this.settings.settings, [':pleroma', ':suggestions']) || {}
     }
   },
   methods: {

From 497f36d568700a0340513085152d57fd669152a1 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 6 Feb 2020 23:59:01 +0300
Subject: [PATCH 05/21] Add styles for setting input and buttons

---
 src/views/settings/components/Frontend.vue    |  6 ++--
 src/views/settings/components/Http.vue        |  2 +-
 src/views/settings/components/Inputs.vue      |  2 +-
 src/views/settings/components/Logger.vue      |  2 +-
 src/views/settings/components/Setting.vue     | 29 +++++++++++++------
 src/views/settings/components/Upload.vue      |  2 +-
 .../inputComponents/EditableKeywordInput.vue  |  6 ++--
 .../inputComponents/MascotsInput.vue          |  8 ++---
 .../components/inputComponents/PruneInput.vue |  4 +--
 .../inputComponents/RateLimitInput.vue        |  6 ++--
 src/views/settings/styles/main.scss           | 24 +++++++++++++++
 11 files changed, 63 insertions(+), 28 deletions(-)

diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index 9696bb4f..1772bbbc 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -4,12 +4,12 @@
       <setting :setting-group="frontend" :data="frontendData"/>
     </el-form>
     <el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
-      <el-form-item label="Assets:"/>
+      <el-form-item label="Assets:" class="settings-input"/>
       <setting :setting-group="assets" :data="assetsData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
-      <el-form-item label="Emoji:"/>
+      <el-form-item label="Emoji:" class="settings-input"/>
       <setting :setting-group="emoji" :data="emojiData"/>
     </el-form>
     <div class="line"/>
@@ -18,7 +18,7 @@
     </el-form>
     <div class="line"/>
     <el-form ref="markupData" :model="markupData" :label-width="labelWidth">
-      <el-form-item label="Markup settings:"/>
+      <el-form-item label="Markup settings:" class="settings-input"/>
       <setting :setting-group="markup" :data="markupData"/>
     </el-form>
     <div class="submit-button-container">
diff --git a/src/views/settings/components/Http.vue b/src/views/settings/components/Http.vue
index cd450076..ae35ddea 100644
--- a/src/views/settings/components/Http.vue
+++ b/src/views/settings/components/Http.vue
@@ -4,7 +4,7 @@
       <setting :setting-group="http" :data="httpData"/>
     </el-form>
     <el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
-      <el-form-item label="Cors plug config:"/>
+      <el-form-item label="Cors plug config:" class="settings-input"/>
       <setting :setting-group="corsPlug" :data="corsPlugData"/>
     </el-form>
     <div class="line"/>
diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index feec9fda..b2773fd1 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -83,7 +83,7 @@
         class="expl"
         v-html="getFormattedDescription(setting.description)"/>
     </el-form-item>
-    <el-tooltip v-if="isMobile" :content="$t('settings.removeFromDB')" placement="bottom-end">
+    <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>
diff --git a/src/views/settings/components/Logger.vue b/src/views/settings/components/Logger.vue
index 0c21158a..ff4ab6b2 100644
--- a/src/views/settings/components/Logger.vue
+++ b/src/views/settings/components/Logger.vue
@@ -13,7 +13,7 @@
     </el-form>
     <div class="line"/>
     <el-form ref="quackData" :model="quackData" :label-width="labelWidth">
-      <el-form-item label="Quack logger:"/>
+      <el-form-item label="Quack logger:" class="settings-input"/>
       <setting :setting-group="quack" :data="quackData"/>
     </el-form>
     <div class="submit-button-container">
diff --git a/src/views/settings/components/Setting.vue b/src/views/settings/components/Setting.vue
index 82f8419f..e5a7310d 100644
--- a/src/views/settings/components/Setting.vue
+++ b/src/views/settings/components/Setting.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading">
-    <el-form-item v-if="settingGroup.description" class="description-container">
+    <el-form-item v-if="settingGroup.description" class="description-container settings-input">
       <span class="description" v-html="getFormattedDescription(settingGroup.description)"/>
     </el-form-item>
     <div v-if="settingGroup.key === 'Pleroma.Emails.Mailer'">
@@ -37,14 +37,19 @@
               :nested="true"/>
           </div>
           <div v-else>
-            <el-form-item>
-              <span slot="label">
-                {{ setting.label }}:
-                <el-tooltip v-if="canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
-                  <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting(setting.key)"/>
-                </el-tooltip>
-              </span>
-            </el-form-item>
+            <div class="input-container">
+              <el-form-item class="settings-input">
+                <span slot="label">
+                  {{ setting.label }}:
+                  <el-tooltip v-if="isDesktop && canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
+                    <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting(setting.key)"/>
+                  </el-tooltip>
+                </span>
+              </el-form-item>
+              <el-tooltip v-if="isMobile && canBeDeleted(setting.key)" :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
                 :setting-group="settingGroup"
@@ -91,6 +96,12 @@ export default {
       const adapter = this.$store.state.settings.settings[':pleroma']['Pleroma.Emails.Mailer'][':adapter']
       return this.settingGroup.children.filter(child => child.group && child.group.includes(adapter))
     },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     loading() {
       return this.$store.state.settings.loading
     }
diff --git a/src/views/settings/components/Upload.vue b/src/views/settings/components/Upload.vue
index b485dc10..2d824c6c 100644
--- a/src/views/settings/components/Upload.vue
+++ b/src/views/settings/components/Upload.vue
@@ -4,7 +4,7 @@
       <setting :setting-group="upload" :data="uploadData"/>
     </el-form>
     <el-form v-if="showUploadersLocal" ref="uploadersLocal" :model="uploadersLocalData" :label-width="labelWidth">
-      <el-form-item class="description-container description">
+      <el-form-item class="description-container description settings-input">
         <span class="description"><p>Pleroma.Uploaders.Local</p></span>
       </el-form-item>
       <setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
diff --git a/src/views/settings/components/inputComponents/EditableKeywordInput.vue b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
index 0f5eb0d1..69fa6f54 100644
--- a/src/views/settings/components/inputComponents/EditableKeywordInput.vue
+++ b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
@@ -4,7 +4,7 @@
       <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)"/> :
         <el-input :value="getValue(element)" placeholder="replacement" class="value-input" @input="parseEditableKeyword($event, 'value', element)"/>
-        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
       </div>
       <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
@@ -12,7 +12,7 @@
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
         <el-input-number :value="getValue(element)" :min="0" size="large" class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
-        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
       </div>
       <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
@@ -20,7 +20,7 @@
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
         <el-select :value="getValue(element)" multiple filterable allow-create class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
-        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
       </div>
       <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
diff --git a/src/views/settings/components/inputComponents/MascotsInput.vue b/src/views/settings/components/inputComponents/MascotsInput.vue
index b4ad6980..4f4ec9f2 100644
--- a/src/views/settings/components/inputComponents/MascotsInput.vue
+++ b/src/views/settings/components/inputComponents/MascotsInput.vue
@@ -1,16 +1,16 @@
 <template>
   <div>
     <div v-for="mascot in data" :key="getId(mascot)" class="mascot-container">
-      <el-form-item label="Name" label-width="100px">
+      <el-form-item label="Name" label-width="85px" class="settings-input">
         <div class="mascot-name-container">
           <el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/>
-          <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
+          <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
         </div>
       </el-form-item>
-      <el-form-item label="URL" label-width="100px">
+      <el-form-item label="URL" label-width="85px" class="settings-input">
         <el-input :value="getUrl(mascot)" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', mascot)"/>
       </el-form-item>
-      <el-form-item label="Mime type" label-width="100px">
+      <el-form-item label="Mime type" label-width="85px" class="settings-input">
         <el-input :value="getMimeType(mascot)" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', mascot)"/>
       </el-form-item>
     </div>
diff --git a/src/views/settings/components/inputComponents/PruneInput.vue b/src/views/settings/components/inputComponents/PruneInput.vue
index f24176bb..a37f22c2 100644
--- a/src/views/settings/components/inputComponents/PruneInput.vue
+++ b/src/views/settings/components/inputComponents/PruneInput.vue
@@ -5,7 +5,7 @@
       <el-radio label=":maxlen">Limit-based</el-radio>
       <el-radio label=":maxage">Time-based</el-radio>
     </el-radio-group>
-    <el-form-item v-if="prune === ':maxlen'" label="max length" label-width="100" label-position="left">
+    <el-form-item v-if="prune === ':maxlen'" label="max length" label-width="100" label-position="left" class="settings-input">
       <el-input-number
         :value="data[1]"
         :min="0"
@@ -14,7 +14,7 @@
         class="top-margin"
         @change="updateIntInput($event, ':maxlen')"/>
     </el-form-item>
-    <el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left">
+    <el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left" class="settings-input">
       <el-input-number
         :value="data[1]"
         :min="0"
diff --git a/src/views/settings/components/inputComponents/RateLimitInput.vue b/src/views/settings/components/inputComponents/RateLimitInput.vue
index 5328b347..bb2da3e6 100644
--- a/src/views/settings/components/inputComponents/RateLimitInput.vue
+++ b/src/views/settings/components/inputComponents/RateLimitInput.vue
@@ -18,7 +18,7 @@
       </div>
     </div>
     <div v-if="rateLimitAuthUsers">
-      <el-form-item label="Unauthenticated users:" label-width="180px" class="rate-limit">
+      <el-form-item label="Unauthenticated users:" label-width="180px" class="rate-limit settings-input">
         <el-input
           :value="rateLimitUnauthUsers[0]"
           placeholder="scale"
@@ -31,7 +31,7 @@
           class="limit-input"
           @input="parseRateLimiter($event, setting.key, 'limit', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
       </el-form-item>
-      <el-form-item label="Authenticated users:" label-width="180px" class="rate-limit">
+      <el-form-item label="Authenticated users:" label-width="180px" class="rate-limit settings-input">
         <el-input
           :value="rateLimitAuthUsers[0]"
           placeholder="scale"
@@ -45,7 +45,7 @@
           @input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
       </el-form-item>
       <div class="limit-button-container">
-        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
         <p class="expl limit-expl">Set limit for all users</p>
       </div>
     </div>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 66a0d2a8..f9662d3b 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -104,6 +104,10 @@
   .keyword-inner-input {
     margin-bottom: 22px;
   }
+  label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .limit-button-container {
     display: flex;
     align-items: baseline;
@@ -205,12 +209,23 @@
 
   @media only screen and (max-width: 760px),
     (min-device-width: 768px) and (max-device-width: 1024px) {
+    .description > p {
+      line-height: 18px;
+      margin: 0 0 7px 0;
+    }
+    .description-container.settings-input {
+      margin-bottom: 0;
+    }
     .input-container {
       width: 100%;
       .settings-delete-button {
         margin: 4px 7px 0 7px;
       }
     }
+    .setting-label {
+      display: flex;
+      justify-content: space-between;
+    }
     .settings-input {
       display: inline-block;
       width: 90%;
@@ -253,9 +268,18 @@
     .icons-button-container {
       line-height: 24px;
     }
+    .keyword-inner-input {
+      margin-bottom: 10px;
+    }
     .line {
       margin-bottom: 10px;
     }
+    .mascot-container {
+      margin-bottom: 5px;
+      .settings-input {
+        width: 100%;
+      }
+    }
     .name-input {
       width: 40%;
       margin-right: 5px

From aa5d00c777b9a1378356b6f1f4084449b67ad135 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 8 Feb 2020 02:59:45 +0300
Subject: [PATCH 06/21] Fix input width for mobile and desktop UI

---
 src/views/settings/styles/main.scss | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index f9662d3b..785fff01 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -28,9 +28,6 @@
     overflow-wrap: break-word;
     margin-bottom: 0;
   }
-  .el-form-item {
-    margin-right: 30px;
-  }
   .el-form-item .rate-limit {
     margin-right: 0;
   }
@@ -38,9 +35,6 @@
     padding-left: 10px;
     padding-right: 10px;
   }
-  .el-select {
-    width: 100%;
-  }
   .esshd-list {
     margin: 0;
   }
@@ -100,6 +94,13 @@
     display: flex;
     align-items: start;
     justify-content: space-between;
+    .el-form-item {
+      margin-right: 30px;
+      width: 100%
+    }
+    .el-select {
+      width: 100%;
+    }
   }
   .keyword-inner-input {
     margin-bottom: 22px;
@@ -218,8 +219,11 @@
     }
     .input-container {
       width: 100%;
+      .el-form-item {
+        margin-right: 15px;
+      }
       .settings-delete-button {
-        margin: 4px 7px 0 7px;
+        margin: 4px 7px 0 -5px;
       }
     }
     .setting-label {

From a3dca567c313fdd195c620334e266b57500a72d7 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 9 Feb 2020 19:52:17 +0300
Subject: [PATCH 07/21] Fix styles for Relays tab

---
 src/views/settings/components/Inputs.vue |  2 +-
 src/views/settings/components/Relays.vue | 14 +++++-------
 src/views/settings/styles/main.scss      | 27 ++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index b2773fd1..d7f6def4 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -61,7 +61,7 @@
             :setting-parent="[...settingParent, subSetting]"
             :setting="subSetting"
             :data="data[setting.key]"
-            :custom-label-width="'140px'"
+            :custom-label-width="isDesktop ? '140px' : '100px'"
             :label-class="'center-label'"
             :input-class="'keyword-inner-input'"
             :nested="true"/>
diff --git a/src/views/settings/components/Relays.vue b/src/views/settings/components/Relays.vue
index 18db6f5b..eb3ac264 100644
--- a/src/views/settings/components/Relays.vue
+++ b/src/views/settings/components/Relays.vue
@@ -1,13 +1,9 @@
 <template>
-  <div v-if="!loading">
-    <el-row :gutter="5">
-      <el-col :span="8">
-        <el-input v-model="newRelay" :placeholder="$t('settings.followRelay')" @keyup.enter.native="followRelay"/>
-      </el-col>
-      <el-col :span="8">
-        <el-button type="primary" @click.native="followRelay">{{ $t('settings.follow') }}</el-button>
-      </el-col>
-    </el-row>
+  <div v-if="!loading" class="relays-container">
+    <div class="follow-relay-container">
+      <el-input v-model="newRelay" :placeholder="$t('settings.followRelay')" class="follow-relay" @keyup.enter.native="followRelay"/>
+      <el-button type="primary" @click.native="followRelay">{{ $t('settings.follow') }}</el-button>
+    </div>
     <el-table :data="relaysTable">
       <el-table-column
         :label="$t('settings.instanceUrl')"
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 785fff01..04d71905 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -51,6 +51,10 @@
       padding: 2px 3px;
     }
   }
+  .follow-relay {
+    width: 350px;
+    margin-right: 7px;
+  }
   .form-container {
     margin-bottom: 80px;
   }
@@ -152,6 +156,9 @@
     margin-left: 8px;
     margin-right: 10px
   }
+  .relays-container {
+    margin: 0 15px;
+  }
   .replacement-input {
     width: 80%;
     margin-left: 8px;
@@ -213,10 +220,27 @@
     .description > p {
       line-height: 18px;
       margin: 0 0 7px 0;
+      code {
+        display: inline;
+        line-height: 18px;
+        padding: 2px 3px;
+        font-size: 14px;
+      }
     }
     .description-container.settings-input {
       margin-bottom: 0;
     }
+    .follow-relay {
+      width: 70%;
+      margin-right: 5px;
+      input {
+        width: 100%;
+      }
+    }
+    .follow-relay-container {
+      display: flex;
+      justify-content: space-between;
+    }
     .input-container {
       width: 100%;
       .el-form-item {
@@ -295,6 +319,9 @@
       width: 40%;
       margin-right: 4px
     }
+    .relays-container {
+      margin: 0 10px;
+    }
     .replacement-input {
       width: 60%;
       margin-left: 4px;

From 2a82ad691c12b8cd6325c4c5b821c0c5ae7d38ee Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 9 Feb 2020 22:24:23 +0300
Subject: [PATCH 08/21] Fix styles for desktop and mobile UI on Reports tab

---
 src/components/Status/index.vue               |  4 +-
 .../reports/components/GroupedReport.vue      | 40 +++++++++-----
 src/views/reports/components/Report.vue       | 54 +++++++++++++------
 src/views/reports/components/ReportCard.vue   | 14 +++--
 src/views/reports/index.vue                   | 13 ++---
 5 files changed, 77 insertions(+), 48 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index 99d4df0f..f6c63a12 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -214,6 +214,7 @@ export default {
 
 <style rel='stylesheet/scss' lang='scss'>
 .status-card {
+  margin-bottom: 10px;
   .account {
     text-decoration: underline;
     line-height: 26px;
@@ -254,9 +255,6 @@ export default {
     font-size: 15px;
     line-height: 26px;
   }
-  .status-card {
-    margin-bottom: 15px;
-  }
   .status-deleted {
     font-style: italic;
     margin-top: 3px;
diff --git a/src/views/reports/components/GroupedReport.vue b/src/views/reports/components/GroupedReport.vue
index 24242f59..b2f3e675 100644
--- a/src/views/reports/components/GroupedReport.vue
+++ b/src/views/reports/components/GroupedReport.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-timeline class="timeline">
+  <el-timeline class="reports-timeline">
     <el-timeline-item
       v-for="groupedReport in groupedReports"
       :key="groupedReport.id"
@@ -13,7 +13,7 @@
           </div>
           <div>
             <el-dropdown trigger="click">
-              <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeAllReports') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
+              <el-button plain size="small" icon="el-icon-edit" class="report-actions-button">{{ $t('reports.changeAllReports') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item @click.native="changeAllReports('resolved', groupedReport.reports)">{{ $t('reports.resolveAll') }}</el-dropdown-item>
                 <el-dropdown-item @click.native="changeAllReports('open', groupedReport.reports)">{{ $t('reports.reopenAll') }}</el-dropdown-item>
@@ -46,7 +46,7 @@
         <div v-if="groupedReport.status">
           <div class="line"/>
           <span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
-          <status :status="groupedReport.status" class="reported-status"/>
+          <status :status="groupedReport.status" :show-checkbox="false" class="reported-status"/>
         </div>
         <div v-if="groupedReport.reports">
           <el-collapse>
@@ -109,11 +109,13 @@ export default {
   .el-icon-arrow-right {
     margin-right: 6px;
   }
-  .header-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    height: 40px;
+  .grouped-report {
+    .header-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      height: 36px;
+    }
   }
   .line {
     width: 100%;
@@ -128,16 +130,30 @@ export default {
     font-size: 14px;
     font-weight: 500;
   }
+  .reports-timeline {
+    margin: 30px 45px 45px 19px;
+    padding: 0px;
+  }
   .reported-status {
     margin-top: 15px;
   }
   @media
   only screen and (max-width: 760px),
   (min-device-width: 768px) and (max-device-width: 1024px) {
-    .header-container {
-      display: flex;
-      flex-direction: column;
-      height: 80px;
+    .grouped-report {
+      .header-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        height: auto;
+      }
+      .report-actions-button {
+        margin: 3px 0 6px;
+      }
+      .report-title {
+        margin-bottom: 7px;
+      }
     }
   }
 </style>
diff --git a/src/views/reports/components/Report.vue b/src/views/reports/components/Report.vue
index 45d93382..537815e2 100644
--- a/src/views/reports/components/Report.vue
+++ b/src/views/reports/components/Report.vue
@@ -1,22 +1,22 @@
 <template>
   <div>
-    <el-timeline class="timeline">
+    <el-timeline class="reports-timeline">
       <el-timeline-item
         v-for="report in reports"
         :timestamp="parseTimestamp(report.created_at)"
         :key="report.id"
         placement="top"
         class="timeline-item-container">
-        <el-card>
+        <el-card class="report">
           <div class="header-container">
-            <div>
+            <div class="title-container">
               <h3 class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3>
               <h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5>
             </div>
             <div>
-              <el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
+              <el-tag :type="getStateType(report.state)" size="large" class="report-tag">{{ capitalizeFirstLetter(report.state) }}</el-tag>
               <el-dropdown trigger="click">
-                <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
+                <el-button plain size="small" icon="el-icon-edit" class="report-actions-button">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item v-if="report.state !== 'resolved'" @click.native="changeReportState('resolved', report.id)">{{ $t('reports.resolve') }}</el-dropdown-item>
                   <el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">{{ $t('reports.reopen') }}</el-dropdown-item>
@@ -43,7 +43,7 @@
               <span>{{ report.content }}</span>
             </span>
           </div>
-          <div>
+          <div :style="showStatuses(report.statuses) ? '' : 'margin-bottom:15px'">
             <div class="line"/>
             <span class="report-row-key">{{ $t('reports.actor') }}:</span>
             <img
@@ -54,7 +54,7 @@
               <span>{{ report.actor.acct }}</span>
             </a>
           </div>
-          <div v-if="report.statuses.length > 0" class="statuses">
+          <div v-if="showStatuses(report.statuses)" class="statuses">
             <el-collapse>
               <el-collapse-item :title="getStatusesTitle(report.statuses)">
                 <div v-for="status in report.statuses" :key="status.id">
@@ -153,15 +153,18 @@ export default {
     getNotesTitle(notes = []) {
       return `Notes: ${notes.length} item(s)`
     },
+    handleNewNote(reportID) {
+      this.$store.dispatch('CreateReportNote', { content: this.notes[reportID], reportID })
+      this.notes[reportID] = ''
+    },
     handlePageChange(page) {
       this.$store.dispatch('FetchReports', page)
     },
     parseTimestamp(timestamp) {
       return moment(timestamp).format('L HH:mm')
     },
-    handleNewNote(reportID) {
-      this.$store.dispatch('CreateReportNote', { content: this.notes[reportID], reportID })
-      this.notes[reportID] = ''
+    showStatuses(statuses) {
+      return statuses.length > 0
     }
   }
 }
@@ -205,11 +208,13 @@ export default {
     margin: 0;
     height: 17px;
   }
-  .header-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    height: 40px;
+  .report {
+    .header-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      height: 40px;
+    }
   }
   .id {
     color: gray;
@@ -258,6 +263,10 @@ export default {
     margin: 25px 0;
     text-align: center;
   }
+  .reports-timeline {
+    margin: 30px 45px 45px 19px;
+    padding: 0px;
+  }
   .statuses {
     margin-top: 15px;
   }
@@ -273,15 +282,26 @@ export default {
   @media
   only screen and (max-width: 760px),
   (min-device-width: 768px) and (max-device-width: 1024px) {
-    .timeline-item-container {
+    .report {
       .header-container {
         display: flex;
         flex-direction: column;
-        height: 80px;
+        justify-content: flex-start;
+        align-items: flex-start;
+        height: auto;
       }
       .id {
         margin: 6px 0 0 0;
       }
+      .report-actions-button {
+        margin: 3px 0 6px;
+      }
+      .report-tag {
+        margin: 3px 0 6px;
+      }
+      .title-container {
+        margin-bottom: 7px;
+      }
     }
   }
 </style>
diff --git a/src/views/reports/components/ReportCard.vue b/src/views/reports/components/ReportCard.vue
index 67b0b01c..6121bb52 100644
--- a/src/views/reports/components/ReportCard.vue
+++ b/src/views/reports/components/ReportCard.vue
@@ -13,7 +13,7 @@
             </a>
           </div>
           <div>
-            <el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
+            <el-tag :type="getStateType(report.state)" size="large" class="report-tag">{{ capitalizeFirstLetter(report.state) }}</el-tag>
             <el-dropdown trigger="click">
               <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
               <el-dropdown-menu slot="dropdown">
@@ -117,14 +117,12 @@ export default {
     .report-header {
       display: flex;
       flex-direction: column;
-      height: 80px;
+      justify-content: flex-start;
+      align-items: flex-start;
+      height: auto;
     }
-    .report-actor-container {
-      margin-bottom: 5px;
-    }
-    .report-header {
-      display: flex;
-      flex-direction: column;
+    .report-tag {
+      margin: 3px 0 6px;
     }
   }
 </style>
diff --git a/src/views/reports/index.vue b/src/views/reports/index.vue
index 3c87d3e5..3e67d90e 100644
--- a/src/views/reports/index.vue
+++ b/src/views/reports/index.vue
@@ -8,7 +8,7 @@
       {{ $t('reports.reports') }}
       <span class="report-count">({{ normalizedReportsCount }})</span>
     </h1>
-    <div class="filter-container">
+    <div class="reports-filter-container">
       <reports-filter v-if="!groupReports"/>
       <el-checkbox v-model="groupReports" class="group-reports-checkbox">
         Group reports by statuses
@@ -70,13 +70,10 @@ export default {
 
 <style rel='stylesheet/scss' lang='scss' scoped>
 .reports-container {
-  .el-timeline {
-    margin: 45px 45px 45px 19px;
-    padding: 0px;
-  }
-  .filter-container {
+  .reports-filter-container {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
     margin: 22px 15px 22px 15px;
     padding-bottom: 0
   }
@@ -102,8 +99,8 @@ only screen and (max-width: 760px),
     h1 {
       margin: 7px 10px 15px 10px;
     }
-    .filter-container {
-      margin: 0 10px
+    .reports-filter-container {
+      margin: 0 10px;
     }
   }
   #app > div > div.main-container > section > div > div.block > ul {

From 73818195b3a13fadfba713226fad58225296f234 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 12 Feb 2020 17:47:51 +0300
Subject: [PATCH 09/21] Render nested settings as a tree

---
 src/views/settings/components/Inputs.vue      | 40 ++++++++++++++++++-
 .../inputComponents/ProxyUrlInput.vue         |  2 +-
 src/views/settings/styles/main.scss           |  7 ++++
 3 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index d7f6def4..4325dbbf 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -1,7 +1,29 @@
 <template>
   <div class="input-container">
-    <el-form-item :label-width="customLabelWidth" :class="labelClass" class="settings-input">
-      <span slot="label">
+    <div v-if="setting.type === 'keyword'" style="width:100%">
+      <el-form-item :label-width="customLabelWidth" :class="labelClass" :style="`margin-left:${margin}px;margin-bottom:0`" class="settings-input">
+        <span slot="label">
+          {{ setting.label }}
+          <el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
+            <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting"/>
+          </el-tooltip>
+        </span>
+      </el-form-item>
+      <el-form-item v-for="subSetting in setting.children" :key="subSetting.key" class="settings-input has-nested">
+        <inputs
+          :setting-group="settingGroup"
+          :setting-parent="[...settingParent, subSetting]"
+          :setting="subSetting"
+          :data="data[setting.key]"
+          :custom-label-width="isDesktop ? 'auto' : '100px'"
+          :label-class="'center-label'"
+          :input-class="'keyword-inner-input'"
+          :margin="margin + 20"
+          :nested="true"/>
+      </el-form-item>
+    </div>
+    <el-form-item v-if="setting.type !== 'keyword'" :label-width="customLabelWidth" :class="labelClass" class="settings-input">
+      <span slot="label" :style="`margin-left:${margin}px`">
         {{ setting.label }}
         <el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
           <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting"/>
@@ -56,6 +78,7 @@
       </el-input>
       <div v-if="setting.type === 'keyword'">
         <div v-for="subSetting in setting.children" :key="subSetting.key">
+          <!-- {{ [...settingParent, subSetting].map(s => s.label) }} -->
           <inputs
             :setting-group="settingGroup"
             :setting-parent="[...settingParent, subSetting]"
@@ -80,6 +103,7 @@
       <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>
@@ -136,6 +160,13 @@ export default {
       },
       required: false
     },
+    margin: {
+      type: Number,
+      default: function() {
+        return 0
+      },
+      required: false
+    },
     nested: {
       type: Boolean,
       default: function() {
@@ -162,6 +193,11 @@ export default {
       required: false
     }
   },
+  data() {
+    return {
+      currentMargin: 0
+    }
+  },
   computed: {
     canBeDeleted() {
       const { group, key } = this.settingGroup
diff --git a/src/views/settings/components/inputComponents/ProxyUrlInput.vue b/src/views/settings/components/inputComponents/ProxyUrlInput.vue
index 83829bd5..dc9d3b24 100644
--- a/src/views/settings/components/inputComponents/ProxyUrlInput.vue
+++ b/src/views/settings/components/inputComponents/ProxyUrlInput.vue
@@ -3,7 +3,7 @@
     <el-input
       :value="proxyUrlData.host"
       placeholder="host (e.g. localhost or 127.0.0.1)"
-      class="proxy-url-value-input"
+      class="proxy-url-host-input"
       @input="updateProxyUrl($event, 'host')"/> :
     <el-input
       :value="proxyUrlData.port"
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 04d71905..f94c67cd 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -4,6 +4,9 @@
   }
   .center-label label {
     text-align: center;
+    span {
+      float: left;
+    }
   }
   .code {
     background-color: #adbed67a;
@@ -151,6 +154,10 @@
     width: 20%;
     margin-right: 8px
   }
+  .proxy-url-host-input {
+    width: 35%;
+    margin-right: 10px
+  }
   .proxy-url-value-input {
     width: 35%;
     margin-left: 8px;

From e321c15da5d61050dfc0cee96c87fd5f7ccb17e0 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 12 Feb 2020 22:52:40 +0300
Subject: [PATCH 10/21] Add mobile UI for proxy-url setting

---
 src/views/settings/components/Inputs.vue      | 10 +----
 .../inputComponents/ProxyUrlInput.vue         | 13 +++++--
 src/views/settings/styles/main.scss           | 37 ++++++++++++++++++-
 3 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 4325dbbf..52304232 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/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
diff --git a/src/views/settings/components/inputComponents/ProxyUrlInput.vue b/src/views/settings/components/inputComponents/ProxyUrlInput.vue
index dc9d3b24..84956074 100644
--- a/src/views/settings/components/inputComponents/ProxyUrlInput.vue
+++ b/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
     },
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index f94c67cd..99faa360 100644
--- a/src/views/settings/styles/main.scss
+++ b/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
     }

From fc3d1627be7edf85fdb1c571b3a2975bb82f6378 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 13 Feb 2020 19:18:25 +0300
Subject: [PATCH 11/21] Update styles for Rate limit inputs

---
 src/views/settings/components/Inputs.vue      |  2 +-
 .../inputComponents/RateLimitInput.vue        | 66 ++++++++++++-------
 src/views/settings/styles/main.scss           | 43 +++++++++++-
 3 files changed, 84 insertions(+), 27 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 52304232..35e29aae 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -9,7 +9,7 @@
           </el-tooltip>
         </span>
       </el-form-item>
-      <el-form-item v-for="subSetting in setting.children" :key="subSetting.key" class="settings-input has-nested">
+      <el-form-item v-for="subSetting in setting.children" :key="subSetting.key" class="settings-input">
         <inputs
           :setting-group="settingGroup"
           :setting-parent="[...settingParent, subSetting]"
diff --git a/src/views/settings/components/inputComponents/RateLimitInput.vue b/src/views/settings/components/inputComponents/RateLimitInput.vue
index bb2da3e6..c1180476 100644
--- a/src/views/settings/components/inputComponents/RateLimitInput.vue
+++ b/src/views/settings/components/inputComponents/RateLimitInput.vue
@@ -18,31 +18,49 @@
       </div>
     </div>
     <div v-if="rateLimitAuthUsers">
-      <el-form-item label="Unauthenticated users:" label-width="180px" class="rate-limit settings-input">
-        <el-input
-          :value="rateLimitUnauthUsers[0]"
-          placeholder="scale"
-          class="scale-input"
-          @input="parseRateLimiter($event, setting.key, 'scale', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
-        <span>:</span>
-        <el-input
-          :value="rateLimitUnauthUsers[1]"
-          placeholder="limit"
-          class="limit-input"
-          @input="parseRateLimiter($event, setting.key, 'limit', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
+      <el-form-item class="rate-limit settings-input">
+        <div class="rate-limit-label-container">
+          <span class="rate-limit-label">
+            Unauthenticated users:
+          </span>
+        </div>
+        <div class="rate-limit-content">
+          <el-input
+            :value="rateLimitUnauthUsers[0]"
+            placeholder="scale"
+            class="scale-input"
+            @input="parseRateLimiter(
+              $event, setting.key, 'scale', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers]
+          )"/>
+          <span>:</span>
+          <el-input
+            :value="rateLimitUnauthUsers[1]"
+            placeholder="limit"
+            class="limit-input"
+            @input="parseRateLimiter(
+              $event, setting.key, 'limit', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers]
+          )"/>
+        </div>
       </el-form-item>
-      <el-form-item label="Authenticated users:" label-width="180px" class="rate-limit settings-input">
-        <el-input
-          :value="rateLimitAuthUsers[0]"
-          placeholder="scale"
-          class="scale-input"
-          @input="parseRateLimiter($event, setting.key, 'scale', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
-        <span>:</span>
-        <el-input
-          :value="rateLimitAuthUsers[1]"
-          placeholder="limit"
-          class="limit-input"
-          @input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
+      <el-form-item class="rate-limit settings-input">
+        <div class="rate-limit-label-container">
+          <span class="rate-limit-label">
+            Authenticated users:
+          </span>
+        </div>
+        <div class="rate-limit-content">
+          <el-input
+            :value="rateLimitAuthUsers[0]"
+            placeholder="scale"
+            class="scale-input"
+            @input="parseRateLimiter($event, setting.key, 'scale', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
+          <span>:</span>
+          <el-input
+            :value="rateLimitAuthUsers[1]"
+            placeholder="limit"
+            class="limit-input"
+            @input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
+        </div>
       </el-form-item>
       <div class="limit-button-container">
         <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 99faa360..f0e218a5 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -47,6 +47,8 @@
     line-height: 22px;
     margin: 5px 0 0 0;
     overflow-wrap: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
     code {
       display: inline;
       line-height: 22px;
@@ -168,6 +170,27 @@
     margin-left: 8px;
     margin-right: 10px
   }
+  .rate-limit {
+    .el-form-item__content {
+      width: 100%;
+      display: flex;
+    }
+  }
+  .rate-limit-content {
+    width: 100%;
+  }
+  .rate-limit-label {
+    float: right;
+  }
+  .rate-limit-label-container {
+    font-size: 14px;
+    color: #606266;
+    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
+    font-weight: 700;
+    height: 36px;
+    width: 240px;
+    margin-right: 10px;
+  }
   .relays-container {
     margin: 0 15px;
   }
@@ -270,12 +293,16 @@
     .input-container {
       width: 100%;
       .el-form-item {
-        margin-right: 15px;
+        margin: 0;
+        padding: 0 15px 10px 0;
       }
       .settings-delete-button {
         margin: 4px 7px 0 -5px;
       }
     }
+    .limit-input {
+      width: 46%;
+    }
     .proxy-url-input {
       flex-direction: column;
       align-items: flex-start;
@@ -289,6 +316,17 @@
       width: 100%;
       margin-left: 0;
     }
+    .rate-limit {
+      .el-form-item__content {
+        flex-direction: column;
+      }
+    }
+    .rate-limit-label {
+      float: left;
+    }
+    .scale-input {
+      width: 46%;
+    }
     .setting-label {
       display: flex;
       justify-content: space-between;
@@ -296,7 +334,8 @@
     .settings-input {
       display: inline-block;
       width: 90%;
-      margin: 0 0 10px 0;
+      padding: 0 15px 10px 0;
+      margin: 0;
     }
     .socks5-checkbox-container {
       width: 100%;

From 50ed2adf170b54549af8132e942e6bd24a616fb7 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 14 Feb 2020 18:52:33 +0300
Subject: [PATCH 12/21] Fix styles for menu and docs on settings tab

---
 src/views/settings/index.vue | 186 +++++++++++++++++++----------------
 1 file changed, 102 insertions(+), 84 deletions(-)

diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index a78db3ba..bf112080 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -1,90 +1,106 @@
 <template>
   <div class="settings-container">
-    <div class="settings-header-container">
-      <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
-      <el-link
-        :underline="false"
-        href="https://docs-develop.pleroma.social/backend/admin/config/"
-        target="_blank">
-        <el-button class="settings-docs-button">
-          <span>
-            <i class="el-icon-document"/>
-            {{ $t('settings.seeDocs') }}
-          </span>
-        </el-button>
-      </el-link>
+    <div v-if="isDesktop">
+      <div class="settings-header-container">
+        <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
+        <el-link
+          :underline="false"
+          href="https://docs-develop.pleroma.social/backend/administration/CLI_tasks/config/"
+          target="_blank">
+          <el-button class="settings-docs-button">
+            <span>
+              <i class="el-icon-document"/>
+              {{ $t('settings.seeDocs') }}
+            </span>
+          </el-button>
+        </el-link>
+      </div>
+      <el-tabs v-model="activeTab" tab-position="left">
+        <el-tab-pane :label="$t('settings.activityPub')" :disabled="configDisabled" name="activityPub" lazy>
+          <activity-pub/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.auth')" :disabled="configDisabled" name="auth" lazy>
+          <authentication/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.autoLinker')" :disabled="configDisabled" name="autoLinker" lazy>
+          <auto-linker/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.esshd')" :disabled="configDisabled" name="esshd" lazy>
+          <esshd/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.captcha')" :disabled="configDisabled" name="captcha" lazy>
+          <captcha/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.frontend')" :disabled="configDisabled" name="frontend" lazy>
+          <frontend/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.gopher')" :disabled="configDisabled" name="gopher" lazy>
+          <gopher/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.http')" :disabled="configDisabled" name="http" lazy>
+          <http/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.instance')" :disabled="configDisabled" name="instance">
+          <instance/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.jobQueue')" :disabled="configDisabled" name="jobQueue" lazy>
+          <job-queue/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.logger')" :disabled="configDisabled" name="logger" lazy>
+          <logger/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.mailer')" :disabled="configDisabled" name="mailer" lazy>
+          <mailer/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.mediaProxy')" :disabled="configDisabled" name="mediaProxy" lazy>
+          <media-proxy/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.metadata')" :disabled="configDisabled" name="metadata" lazy>
+          <metadata/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.mrf')" :disabled="configDisabled" name="mrf" lazy>
+          <mrf/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.rateLimiters')" :disabled="configDisabled" name="rateLimiters" lazy>
+          <rate-limiters/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.relays')" lazy name="relays">
+          <relays/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.webPush')" :disabled="configDisabled" name="webPush" lazy>
+          <web-push/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.upload')" :disabled="configDisabled" name="upload" lazy>
+          <upload/>
+        </el-tab-pane>
+        <el-tab-pane :label="$t('settings.other')" :disabled="configDisabled" name="other" lazy>
+          <other/>
+        </el-tab-pane>
+      </el-tabs>
     </div>
-    <el-tabs v-if="isDesktop" v-model="activeTab" tab-position="left">
-      <el-tab-pane :label="$t('settings.activityPub')" :disabled="configDisabled" name="activityPub" lazy>
-        <activity-pub/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.auth')" :disabled="configDisabled" name="auth" lazy>
-        <authentication/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.autoLinker')" :disabled="configDisabled" name="autoLinker" lazy>
-        <auto-linker/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.esshd')" :disabled="configDisabled" name="esshd" lazy>
-        <esshd/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.captcha')" :disabled="configDisabled" name="captcha" lazy>
-        <captcha/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.frontend')" :disabled="configDisabled" name="frontend" lazy>
-        <frontend/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.gopher')" :disabled="configDisabled" name="gopher" lazy>
-        <gopher/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.http')" :disabled="configDisabled" name="http" lazy>
-        <http/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.instance')" :disabled="configDisabled" name="instance">
-        <instance/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.jobQueue')" :disabled="configDisabled" name="jobQueue" lazy>
-        <job-queue/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.logger')" :disabled="configDisabled" name="logger" lazy>
-        <logger/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.mailer')" :disabled="configDisabled" name="mailer" lazy>
-        <mailer/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.mediaProxy')" :disabled="configDisabled" name="mediaProxy" lazy>
-        <media-proxy/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.metadata')" :disabled="configDisabled" name="metadata" lazy>
-        <metadata/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.mrf')" :disabled="configDisabled" name="mrf" lazy>
-        <mrf/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.rateLimiters')" :disabled="configDisabled" name="rateLimiters" lazy>
-        <rate-limiters/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.relays')" lazy name="relays">
-        <relays/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.webPush')" :disabled="configDisabled" name="webPush" lazy>
-        <web-push/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.upload')" :disabled="configDisabled" name="upload" lazy>
-        <upload/>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('settings.other')" :disabled="configDisabled" name="other" lazy>
-        <other/>
-      </el-tab-pane>
-    </el-tabs>
     <div v-if="isMobile">
-      <el-select v-model="activeTab" class="settings-menu" placeholder="Select">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-          :disabled="configDisabled"/>
-      </el-select>
+      <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
+      <div class="settings-header-container">
+        <el-select v-model="activeTab" class="settings-menu" placeholder="Select">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+            :disabled="configDisabled"/>
+        </el-select>
+        <el-link
+          :underline="false"
+          href="https://docs-develop.pleroma.social/backend/administration/CLI_tasks/config/"
+          target="_blank">
+          <el-button class="settings-docs-button">
+            <span>
+              <i class="el-icon-document"/>
+              {{ $t('settings.seeDocs') }}
+            </span>
+          </el-button>
+        </el-link>
+      </div>
       <activity-pub v-if="activeTab === 'activityPub'"/>
       <authentication v-if="activeTab === 'auth'"/>
       <auto-linker v-if="activeTab === 'autoLinker'"/>
@@ -241,8 +257,10 @@ export default {
   .settings-header {
     margin: 7px 10px 15px 10px;
   }
+  .settings-header-container {
+    margin: 15px;
+  }
   .settings-menu {
-    margin: 0 0 15px 10px;
     width: 45%;
   }
 }

From 0d991135fa7625c758c36af0d833e1bd5e9bc375 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 14 Feb 2020 22:56:59 +0300
Subject: [PATCH 13/21] Change the way headers of group of settings are
 displayed

---
 src/lang/en.js                             |  6 +++++-
 src/views/settings/components/Frontend.vue | 12 ++++++++---
 src/views/settings/components/Http.vue     |  4 +++-
 src/views/settings/components/Inputs.vue   | 24 +---------------------
 src/views/settings/components/Setting.vue  |  4 ++--
 src/views/settings/components/Upload.vue   |  4 ++--
 src/views/settings/styles/main.scss        | 15 ++++++++------
 7 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 24c1a3b9..3fa42e8c 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -359,7 +359,11 @@ export default {
     metadatLowerCase: 'metadata',
     files: 'files',
     successfullyRemoved: 'Setting removed successfully!',
-    seeDocs: 'See Documentation'
+    seeDocs: 'See Documentation',
+    assets: 'Assets',
+    emoji: 'Emoji',
+    markup: 'Markup settings',
+    corsPlug: 'CORS plug config'
   },
   invites: {
     inviteTokens: 'Invite tokens',
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index 1772bbbc..9a1d6dc0 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -4,12 +4,16 @@
       <setting :setting-group="frontend" :data="frontendData"/>
     </el-form>
     <el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
-      <el-form-item label="Assets:" class="settings-input"/>
+      <el-form-item class="grouped-settings-header">
+        <span class="label-font">{{ $t('settings.assets') }}</span>
+      </el-form-item>
       <setting :setting-group="assets" :data="assetsData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
-      <el-form-item label="Emoji:" class="settings-input"/>
+      <el-form-item class="grouped-settings-header">
+        <span class="label-font">{{ $t('settings.emoji') }}</span>
+      </el-form-item>
       <setting :setting-group="emoji" :data="emojiData"/>
     </el-form>
     <div class="line"/>
@@ -18,7 +22,9 @@
     </el-form>
     <div class="line"/>
     <el-form ref="markupData" :model="markupData" :label-width="labelWidth">
-      <el-form-item label="Markup settings:" class="settings-input"/>
+      <el-form-item class="grouped-settings-header">
+        <span class="label-font">{{ $t('settings.markup') }}</span>
+      </el-form-item>
       <setting :setting-group="markup" :data="markupData"/>
     </el-form>
     <div class="submit-button-container">
diff --git a/src/views/settings/components/Http.vue b/src/views/settings/components/Http.vue
index ae35ddea..f6605c4b 100644
--- a/src/views/settings/components/Http.vue
+++ b/src/views/settings/components/Http.vue
@@ -4,7 +4,9 @@
       <setting :setting-group="http" :data="httpData"/>
     </el-form>
     <el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
-      <el-form-item label="Cors plug config:" class="settings-input"/>
+      <el-form-item class="grouped-settings-header">
+        <span class="label-font">{{ $t('settings.corsPlug') }}</span>
+      </el-form-item>
       <setting :setting-group="corsPlug" :data="corsPlugData"/>
     </el-form>
     <div class="line"/>
diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 0ee36961..ad7fa9ea 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -16,8 +16,7 @@
           :setting="subSetting"
           :data="data[setting.key]"
           :custom-label-width="isDesktop ? '120px' : '100px'"
-          :label-class="'center-label'"
-          :input-class="'keyword-inner-input'"
+          :label-class="subSetting.type === 'keyword' ? 'center-label' : ''"
           :margin="isDesktop ? margin + 15 : margin + 8"
           :nested="true"/>
       </el-form-item>
@@ -76,20 +75,6 @@
         @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
         <template slot="prepend">:</template>
       </el-input>
-      <div v-if="setting.type === 'keyword'">
-        <div v-for="subSetting in setting.children" :key="subSetting.key">
-          <!-- {{ [...settingParent, subSetting].map(s => s.label) }} -->
-          <inputs
-            :setting-group="settingGroup"
-            :setting-parent="[...settingParent, subSetting]"
-            :setting="subSetting"
-            :data="data[setting.key]"
-            :custom-label-width="isDesktop ? '140px' : '100px'"
-            :label-class="'center-label'"
-            :input-class="'keyword-inner-input'"
-            :nested="true"/>
-        </div>
-      </div>
       <!-- 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"/>
@@ -145,13 +130,6 @@ export default {
         return {}
       }
     },
-    inputClass: {
-      type: String,
-      default: function() {
-        return 'input-class'
-      },
-      required: false
-    },
     labelClass: {
       type: String,
       default: function() {
diff --git a/src/views/settings/components/Setting.vue b/src/views/settings/components/Setting.vue
index e5a7310d..53e45450 100644
--- a/src/views/settings/components/Setting.vue
+++ b/src/views/settings/components/Setting.vue
@@ -38,13 +38,13 @@
           </div>
           <div v-else>
             <div class="input-container">
-              <el-form-item class="settings-input">
+              <el-form-item class="grouped-settings-header">
                 <span slot="label">
-                  {{ setting.label }}:
                   <el-tooltip v-if="isDesktop && canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
                     <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting(setting.key)"/>
                   </el-tooltip>
                 </span>
+                <span class="label-font">{{ setting.label }}</span>
               </el-form-item>
               <el-tooltip v-if="isMobile && canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
                 <el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting(setting.key)"/>
diff --git a/src/views/settings/components/Upload.vue b/src/views/settings/components/Upload.vue
index 2d824c6c..34b22e1f 100644
--- a/src/views/settings/components/Upload.vue
+++ b/src/views/settings/components/Upload.vue
@@ -4,8 +4,8 @@
       <setting :setting-group="upload" :data="uploadData"/>
     </el-form>
     <el-form v-if="showUploadersLocal" ref="uploadersLocal" :model="uploadersLocalData" :label-width="labelWidth">
-      <el-form-item class="description-container description settings-input">
-        <span class="description"><p>Pleroma.Uploaders.Local</p></span>
+      <el-form-item class="grouped-settings-header">
+        <span class="label-font">Pleroma.Uploaders.Local</span>
       </el-form-item>
       <setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
       <div class="line"/>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index f0e218a5..9c1aefd8 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -63,6 +63,9 @@
   .form-container {
     margin-bottom: 80px;
   }
+  .grouped-settings-header {
+    margin: 0 0 14px 0;
+  }
   .highlight {
   background-color: #e6e6e6;
   }
@@ -111,13 +114,16 @@
       width: 100%;
     }
   }
-  .keyword-inner-input {
-    margin-bottom: 22px;
-  }
   label {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .label-font {
+    font-size: 14px;
+    color: #606266;
+    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
+    font-weight: 700;
+  }
   .limit-button-container {
     display: flex;
     align-items: baseline;
@@ -377,9 +383,6 @@
     .icons-button-container {
       line-height: 24px;
     }
-    .keyword-inner-input {
-      margin-bottom: 10px;
-    }
     .line {
       margin-bottom: 10px;
     }

From 287e46d8605063f86805829ff3259acc4cf933d8 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 14 Feb 2020 23:12:48 +0300
Subject: [PATCH 14/21] Remove style tags from components

---
 src/views/settings/components/Inputs.vue | 8 ++++----
 src/views/settings/styles/main.scss      | 6 ++++++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index ad7fa9ea..957e35ab 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="input-container">
-    <div v-if="setting.type === 'keyword'" style="width:100%">
+    <div v-if="setting.type === 'keyword'" class="keyword-container">
       <el-form-item :label-width="customLabelWidth" :class="labelClass" :style="`margin-left:${margin}px;margin-bottom:0`" class="settings-input">
         <span slot="label">
           {{ setting.label }}
           <el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
-            <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting"/>
+            <el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
           </el-tooltip>
         </span>
       </el-form-item>
@@ -22,10 +22,10 @@
       </el-form-item>
     </div>
     <el-form-item v-if="setting.type !== 'keyword'" :label-width="customLabelWidth" :class="labelClass" class="settings-input">
-      <span slot="label" :style="`margin-left:${margin}px`">
+      <span slot="label">
         {{ setting.label }}
         <el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
-          <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting"/>
+          <el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
         </el-tooltip>
       </span>
       <el-input
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 9c1aefd8..48c958c7 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -14,6 +14,9 @@
     font-family: monospace;
     padding: 0 3px 0 3px;
   }
+  .delete-setting-button {
+    margin-left: 5px;
+  }
   .description > p {
     font-size: 14px;
     color: #606266;
@@ -114,6 +117,9 @@
       width: 100%;
     }
   }
+  .keyword-container {
+    width: 100%
+  }
   label {
     overflow: hidden;
     text-overflow: ellipsis;

From af96cb4adc5957d01c3c49e25d9a884bc30b31f2 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 15 Feb 2020 00:11:23 +0300
Subject: [PATCH 15/21] Remove settings-input class

---
 src/views/settings/components/Inputs.vue       |  6 +++---
 src/views/settings/components/Setting.vue      |  2 +-
 .../inputComponents/MascotsInput.vue           |  6 +++---
 .../components/inputComponents/PruneInput.vue  |  6 +++---
 .../inputComponents/RateLimitInput.vue         |  4 ++--
 src/views/settings/index.vue                   |  2 +-
 src/views/settings/styles/main.scss            | 18 ++++++------------
 7 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 957e35ab..93d0f28e 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="input-container">
     <div v-if="setting.type === 'keyword'" class="keyword-container">
-      <el-form-item :label-width="customLabelWidth" :class="labelClass" :style="`margin-left:${margin}px;margin-bottom:0`" class="settings-input">
+      <el-form-item :label-width="customLabelWidth" :class="labelClass" :style="`margin-left:${margin}px;margin-bottom:0`" >
         <span slot="label">
           {{ setting.label }}
           <el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
@@ -9,7 +9,7 @@
           </el-tooltip>
         </span>
       </el-form-item>
-      <el-form-item v-for="subSetting in setting.children" :key="subSetting.key" class="settings-input">
+      <el-form-item v-for="subSetting in setting.children" :key="subSetting.key">
         <inputs
           :setting-group="settingGroup"
           :setting-parent="[...settingParent, subSetting]"
@@ -21,7 +21,7 @@
           :nested="true"/>
       </el-form-item>
     </div>
-    <el-form-item v-if="setting.type !== 'keyword'" :label-width="customLabelWidth" :class="labelClass" class="settings-input">
+    <el-form-item v-if="setting.type !== 'keyword'" :label-width="customLabelWidth" :class="labelClass">
       <span slot="label">
         {{ setting.label }}
         <el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
diff --git a/src/views/settings/components/Setting.vue b/src/views/settings/components/Setting.vue
index 53e45450..116aada5 100644
--- a/src/views/settings/components/Setting.vue
+++ b/src/views/settings/components/Setting.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading">
-    <el-form-item v-if="settingGroup.description" class="description-container settings-input">
+    <el-form-item v-if="settingGroup.description" class="description-container">
       <span class="description" v-html="getFormattedDescription(settingGroup.description)"/>
     </el-form-item>
     <div v-if="settingGroup.key === 'Pleroma.Emails.Mailer'">
diff --git a/src/views/settings/components/inputComponents/MascotsInput.vue b/src/views/settings/components/inputComponents/MascotsInput.vue
index 4f4ec9f2..a409e5c4 100644
--- a/src/views/settings/components/inputComponents/MascotsInput.vue
+++ b/src/views/settings/components/inputComponents/MascotsInput.vue
@@ -1,16 +1,16 @@
 <template>
   <div>
     <div v-for="mascot in data" :key="getId(mascot)" class="mascot-container">
-      <el-form-item label="Name" label-width="85px" class="settings-input">
+      <el-form-item label="Name" label-width="85px">
         <div class="mascot-name-container">
           <el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/>
           <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
         </div>
       </el-form-item>
-      <el-form-item label="URL" label-width="85px" class="settings-input">
+      <el-form-item label="URL" label-width="85px">
         <el-input :value="getUrl(mascot)" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', mascot)"/>
       </el-form-item>
-      <el-form-item label="Mime type" label-width="85px" class="settings-input">
+      <el-form-item label="Mime type" label-width="85px">
         <el-input :value="getMimeType(mascot)" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', mascot)"/>
       </el-form-item>
     </div>
diff --git a/src/views/settings/components/inputComponents/PruneInput.vue b/src/views/settings/components/inputComponents/PruneInput.vue
index a37f22c2..c851aa5b 100644
--- a/src/views/settings/components/inputComponents/PruneInput.vue
+++ b/src/views/settings/components/inputComponents/PruneInput.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <el-radio-group v-model="prune">
+    <el-radio-group v-model="prune" class="prune-options">
       <el-radio label=":disabled">Disabled</el-radio>
       <el-radio label=":maxlen">Limit-based</el-radio>
       <el-radio label=":maxage">Time-based</el-radio>
     </el-radio-group>
-    <el-form-item v-if="prune === ':maxlen'" label="max length" label-width="100" label-position="left" class="settings-input">
+    <el-form-item v-if="prune === ':maxlen'" label="max length" label-width="100" label-position="left">
       <el-input-number
         :value="data[1]"
         :min="0"
@@ -14,7 +14,7 @@
         class="top-margin"
         @change="updateIntInput($event, ':maxlen')"/>
     </el-form-item>
-    <el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left" class="settings-input">
+    <el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left">
       <el-input-number
         :value="data[1]"
         :min="0"
diff --git a/src/views/settings/components/inputComponents/RateLimitInput.vue b/src/views/settings/components/inputComponents/RateLimitInput.vue
index c1180476..e9d01724 100644
--- a/src/views/settings/components/inputComponents/RateLimitInput.vue
+++ b/src/views/settings/components/inputComponents/RateLimitInput.vue
@@ -18,7 +18,7 @@
       </div>
     </div>
     <div v-if="rateLimitAuthUsers">
-      <el-form-item class="rate-limit settings-input">
+      <el-form-item class="rate-limit">
         <div class="rate-limit-label-container">
           <span class="rate-limit-label">
             Unauthenticated users:
@@ -42,7 +42,7 @@
           )"/>
         </div>
       </el-form-item>
-      <el-form-item class="rate-limit settings-input">
+      <el-form-item class="rate-limit">
         <div class="rate-limit-label-container">
           <span class="rate-limit-label">
             Authenticated users:
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index bf112080..0925b73d 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -261,7 +261,7 @@ export default {
     margin: 15px;
   }
   .settings-menu {
-    width: 45%;
+    width: 163px;
   }
 }
 </style>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 48c958c7..c13f259e 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -182,6 +182,9 @@
     margin-left: 8px;
     margin-right: 10px
   }
+  .prune-options {
+    display: flex;
+  }
   .rate-limit {
     .el-form-item__content {
       width: 100%;
@@ -288,9 +291,6 @@
         font-size: 14px;
       }
     }
-    .description-container.settings-input {
-      margin-bottom: 0;
-    }
     .follow-relay {
       width: 70%;
       margin-right: 5px;
@@ -328,6 +328,9 @@
       width: 100%;
       margin-left: 0;
     }
+    .prune-options {
+      flex-direction: column;
+    }
     .rate-limit {
       .el-form-item__content {
         flex-direction: column;
@@ -343,12 +346,6 @@
       display: flex;
       justify-content: space-between;
     }
-    .settings-input {
-      display: inline-block;
-      width: 90%;
-      padding: 0 15px 10px 0;
-      margin: 0;
-    }
     .socks5-checkbox-container {
       width: 100%;
     }
@@ -394,9 +391,6 @@
     }
     .mascot-container {
       margin-bottom: 5px;
-      .settings-input {
-        width: 100%;
-      }
     }
     .name-input {
       width: 40%;

From 38638e56372961f5442a7ed17015ecdd4ec75c16 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 15 Feb 2020 14:25:45 +0300
Subject: [PATCH 16/21] Add a divider to distinguish grouped settings

---
 src/views/emojiPacks/index.vue                      |  4 ++--
 src/views/reports/components/GroupedReport.vue      |  6 +++---
 src/views/reports/components/Report.vue             |  6 +++---
 src/views/settings/components/ActivityPub.vue       |  3 ++-
 src/views/settings/components/Authentication.vue    |  6 +++---
 src/views/settings/components/Captcha.vue           |  2 +-
 src/views/settings/components/Frontend.vue          |  6 +++---
 src/views/settings/components/Http.vue              |  6 +++---
 src/views/settings/components/Inputs.vue            |  1 -
 src/views/settings/components/Instance.vue          | 10 +++++-----
 src/views/settings/components/Logger.vue            |  6 +++---
 src/views/settings/components/MRF.vue               | 10 +++++-----
 src/views/settings/components/Mailer.vue            |  2 +-
 src/views/settings/components/Metadata.vue          |  2 +-
 src/views/settings/components/Other.vue             |  2 +-
 src/views/settings/components/Setting.vue           |  6 +++++-
 src/views/settings/components/Upload.vue            |  6 +++---
 .../components/inputComponents/IconsInput.vue       |  2 +-
 src/views/settings/styles/main.scss                 | 13 +++++++++++--
 19 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 48c7a0e3..78716d55 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -9,7 +9,7 @@
         </el-button>
       </el-tooltip>
     </div>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form label-width="180px" class="emoji-packs-form">
       <el-form-item :label="$t('emoji.localPacks')">
         <el-button type="primary" @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
@@ -30,7 +30,7 @@
           <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
         </el-collapse>
       </el-form-item>
-      <div class="line"/>
+      <el-divider class="divider"/>
       <el-form-item :label="$t('emoji.remotePacks')">
         <div class="create-pack">
           <el-input
diff --git a/src/views/reports/components/GroupedReport.vue b/src/views/reports/components/GroupedReport.vue
index b2f3e675..fe4aa6f3 100644
--- a/src/views/reports/components/GroupedReport.vue
+++ b/src/views/reports/components/GroupedReport.vue
@@ -24,7 +24,7 @@
           </div>
         </div>
         <div>
-          <div class="line"/>
+          <el-divider class="divider"/>
           <span class="report-row-key">{{ $t('reports.account') }}:</span>
           <img
             :src="groupedReport.account.avatar"
@@ -35,7 +35,7 @@
           </a>
         </div>
         <div>
-          <div class="line"/>
+          <el-divider class="divider"/>
           <span class="report-row-key">{{ $t('reports.actors') }}:</span>
           <span v-for="(actor, index) in groupedReport.actors" :key="actor.id">
             <a :href="actor.url" target="_blank">
@@ -44,7 +44,7 @@
           </span>
         </div>
         <div v-if="groupedReport.status">
-          <div class="line"/>
+          <el-divider class="divider"/>
           <span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
           <status :status="groupedReport.status" :show-checkbox="false" class="reported-status"/>
         </div>
diff --git a/src/views/reports/components/Report.vue b/src/views/reports/components/Report.vue
index 537815e2..9b963679 100644
--- a/src/views/reports/components/Report.vue
+++ b/src/views/reports/components/Report.vue
@@ -27,7 +27,7 @@
             </div>
           </div>
           <div>
-            <div class="line"/>
+            <el-divider class="divider"/>
             <span class="report-row-key">{{ $t('reports.account') }}:</span>
             <img
               :src="report.account.avatar"
@@ -38,13 +38,13 @@
             </a>
           </div>
           <div v-if="report.content.length > 0">
-            <div class="line"/>
+            <el-divider class="divider"/>
             <span class="report-row-key">{{ $t('reports.content') }}:
               <span>{{ report.content }}</span>
             </span>
           </div>
           <div :style="showStatuses(report.statuses) ? '' : 'margin-bottom:15px'">
-            <div class="line"/>
+            <el-divider class="divider"/>
             <span class="report-row-key">{{ $t('reports.actor') }}:</span>
             <img
               :src="report.actor.avatar"
diff --git a/src/views/settings/components/ActivityPub.vue b/src/views/settings/components/ActivityPub.vue
index d4eba8c1..35be09f0 100644
--- a/src/views/settings/components/ActivityPub.vue
+++ b/src/views/settings/components/ActivityPub.vue
@@ -3,7 +3,8 @@
     <el-form ref="activitypubData" :model="activitypubData" :label-width="labelWidth">
       <setting :setting-group="activitypub" :data="activitypubData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
+    <el-divider class="divider"/>
     <el-form ref="userData" :model="userData" :label-width="labelWidth">
       <setting :setting-group="user" :data="userData"/>
     </el-form>
diff --git a/src/views/settings/components/Authentication.vue b/src/views/settings/components/Authentication.vue
index e83db32a..2e80824d 100644
--- a/src/views/settings/components/Authentication.vue
+++ b/src/views/settings/components/Authentication.vue
@@ -3,15 +3,15 @@
     <el-form ref="pleromaAuthenticatorData" :model="pleromaAuthenticatorData" :label-width="labelWidth">
       <setting :setting-group="pleromaAuthenticator" :data="pleromaAuthenticatorData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="authData" :model="authData" :label-width="labelWidth">
       <setting :setting-group="auth" :data="authData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="ldapData" :model="ldapData" :label-width="labelWidth">
       <setting :setting-group="ldap" :data="ldapData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="oauth2" :model="oauth2Data" :label-width="labelWidth">
       <setting :setting-group="oauth2" :data="oauth2Data"/>
     </el-form>
diff --git a/src/views/settings/components/Captcha.vue b/src/views/settings/components/Captcha.vue
index f677f641..0094c0e4 100644
--- a/src/views/settings/components/Captcha.vue
+++ b/src/views/settings/components/Captcha.vue
@@ -3,7 +3,7 @@
     <el-form ref="captchaData" :model="captchaData" :label-width="labelWidth">
       <setting :setting-group="captcha" :data="captchaData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="kocaptchaData" :model="kocaptchaData" :label-width="labelWidth">
       <setting :setting-group="kocaptcha" :data="kocaptchaData"/>
     </el-form>
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index 9a1d6dc0..614e5f94 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -9,18 +9,18 @@
       </el-form-item>
       <setting :setting-group="assets" :data="assetsData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
       <el-form-item class="grouped-settings-header">
         <span class="label-font">{{ $t('settings.emoji') }}</span>
       </el-form-item>
       <setting :setting-group="emoji" :data="emojiData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="chatData" :model="chatData" :label-width="labelWidth">
       <setting :setting-group="chat" :data="chatData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="markupData" :model="markupData" :label-width="labelWidth">
       <el-form-item class="grouped-settings-header">
         <span class="label-font">{{ $t('settings.markup') }}</span>
diff --git a/src/views/settings/components/Http.vue b/src/views/settings/components/Http.vue
index f6605c4b..7de0845d 100644
--- a/src/views/settings/components/Http.vue
+++ b/src/views/settings/components/Http.vue
@@ -9,15 +9,15 @@
       </el-form-item>
       <setting :setting-group="corsPlug" :data="corsPlugData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="httpSignatures" :model="httpSignaturesData" :label-width="labelWidth">
       <setting :setting-group="httpSignatures" :data="httpSignaturesData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="httpSecurityData" :model="httpSecurityData" :label-width="labelWidth">
       <setting :setting-group="httpSecurity" :data="httpSecurityData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="webCacheTtl" :model="webCacheTtlData" :label-width="labelWidth">
       <setting :setting-group="webCacheTtl" :data="webCacheTtlData"/>
     </el-form>
diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 93d0f28e..6d1b9c32 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -87,7 +87,6 @@
       <!-------------------->
       <div
         v-if="setting.description && setting.type !== 'keyword'"
-        :class="inputClass"
         class="expl"
         v-html="getFormattedDescription(setting.description)"/>
     </el-form-item>
diff --git a/src/views/settings/components/Instance.vue b/src/views/settings/components/Instance.vue
index b66f56ab..32562dd5 100644
--- a/src/views/settings/components/Instance.vue
+++ b/src/views/settings/components/Instance.vue
@@ -3,23 +3,23 @@
     <el-form ref="instanceData" :model="instanceData" :label-width="labelWidth">
       <setting :setting-group="instance" :data="instanceData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="adminToken" :model="adminTokenData" :label-width="labelWidth">
       <setting :setting-group="adminToken" :data="adminTokenData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="scheduledActivity" :model="scheduledActivityData" :label-width="labelWidth">
       <setting :setting-group="scheduledActivity" :data="scheduledActivityData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="fetchInitialPosts" :model="fetchInitialPostsData" :label-width="labelWidth">
       <setting :setting-group="fetchInitialPosts" :data="fetchInitialPostsData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="manifest" :model="manifestData" :label-width="labelWidth">
       <setting :setting-group="manifest" :data="manifestData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="pleromaUser" :model="pleromaUserData" :label-width="labelWidth">
       <setting :setting-group="pleromaUser" :data="pleromaUserData"/>
     </el-form>
diff --git a/src/views/settings/components/Logger.vue b/src/views/settings/components/Logger.vue
index 08fe4d81..064ea584 100644
--- a/src/views/settings/components/Logger.vue
+++ b/src/views/settings/components/Logger.vue
@@ -3,15 +3,15 @@
     <el-form ref="loggerData" :model="loggerData" :label-width="labelWidth">
       <setting :setting-group="logger" :data="loggerData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="consoleData" :model="consoleData" :label-width="labelWidth">
       <setting :setting-group="console" :data="consoleData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="exsysloggerData" :model="exsysloggerData" :label-width="labelWidth">
       <setting :setting-group="exsyslogger" :data="exsysloggerData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="quackData" :model="quackData" :label-width="labelWidth">
       <setting :setting-group="quack" :data="quackData"/>
     </el-form>
diff --git a/src/views/settings/components/MRF.vue b/src/views/settings/components/MRF.vue
index 41838421..beb28e7c 100644
--- a/src/views/settings/components/MRF.vue
+++ b/src/views/settings/components/MRF.vue
@@ -3,15 +3,15 @@
     <el-form ref="mrfSimple" :model="mrfSimpleData" :label-width="labelWidth">
       <setting :setting-group="mrfSimple" :data="mrfSimpleData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="mrfRejectnonpublic" :model="mrfRejectnonpublicData" :label-width="labelWidth">
       <setting :setting-group="mrfRejectnonpublic" :data="mrfRejectnonpublicData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="mrfHellthread" :model="mrfHellthreadData" :label-width="labelWidth">
       <setting :setting-group="mrfHellthread" :data="mrfHellthreadData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="mrfKeyword" :model="mrfKeywordData" :label-width="labelWidth">
       <setting :setting-group="mrfKeyword" :data="mrfKeywordData"/>
     </el-form>
@@ -21,11 +21,11 @@
     <el-form ref="mrfMention" :model="mrfMentionData" :label-width="labelWidth">
       <setting :setting-group="mrfMention" :data="mrfMentionData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="mrfNormalizeMarkup" :model="mrfNormalizeMarkupData" :label-width="labelWidth">
       <setting :setting-group="mrfNormalizeMarkup" :data="mrfNormalizeMarkupData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="mrfVocabulary" :model="mrfVocabularyData" :label-width="labelWidth">
       <setting :setting-group="mrfVocabulary" :data="mrfVocabularyData"/>
     </el-form>
diff --git a/src/views/settings/components/Mailer.vue b/src/views/settings/components/Mailer.vue
index cfd098c0..dbe14ba9 100644
--- a/src/views/settings/components/Mailer.vue
+++ b/src/views/settings/components/Mailer.vue
@@ -3,7 +3,7 @@
     <el-form ref="mailer" :model="mailerData" :label-width="labelWidth">
       <setting :setting-group="mailer" :data="mailerData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="emailNotifications" :model="emailNotificationsData" :label-width="labelWidth">
       <setting :setting-group="emailNotifications" :data="emailNotificationsData"/>
     </el-form>
diff --git a/src/views/settings/components/Metadata.vue b/src/views/settings/components/Metadata.vue
index 78b8d78b..e085f7da 100644
--- a/src/views/settings/components/Metadata.vue
+++ b/src/views/settings/components/Metadata.vue
@@ -3,7 +3,7 @@
     <el-form ref="metadata" :model="metadataData" :label-width="labelWidth">
       <setting :setting-group="metadata" :data="metadataData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="richMedia" :model="richMediaData" :label-width="labelWidth">
       <setting :setting-group="richMedia" :data="richMediaData"/>
     </el-form>
diff --git a/src/views/settings/components/Other.vue b/src/views/settings/components/Other.vue
index bcae1817..bff68f9c 100644
--- a/src/views/settings/components/Other.vue
+++ b/src/views/settings/components/Other.vue
@@ -3,7 +3,7 @@
     <el-form ref="teslaAdapter" :model="teslaAdapterData" :label-width="labelWidth">
       <setting :setting-group="teslaAdapter" :data="teslaAdapterData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="mimeTypes" :model="mimeTypesData" :label-width="labelWidth">
       <setting :setting-group="mimeTypes" :data="mimeTypesData"/>
     </el-form>
diff --git a/src/views/settings/components/Setting.vue b/src/views/settings/components/Setting.vue
index 116aada5..4b163521 100644
--- a/src/views/settings/components/Setting.vue
+++ b/src/views/settings/components/Setting.vue
@@ -29,6 +29,7 @@
             :nested="false"/>
         </div>
         <div v-if="compound(setting)">
+          <el-divider v-if="divideSetting(setting.key)" class="divider"/>
           <div v-if="!setting.children">
             <inputs
               :setting-group="settingGroup"
@@ -59,7 +60,7 @@
                 :nested="true"/>
             </div>
           </div>
-          <div class="line"/>
+          <el-divider class="divider"/>
         </div>
       </div>
     </div>
@@ -119,6 +120,9 @@ export default {
         type.includes('keyword') ||
         key === ':replace'
     },
+    divideSetting(key) {
+      return [':sslopts', ':tlsopts', ':adapter', ':poll_limits', ':queues', ':styling', ':proxy_opts'].includes(key)
+    },
     getFormattedDescription(desc) {
       return marked(desc)
     },
diff --git a/src/views/settings/components/Upload.vue b/src/views/settings/components/Upload.vue
index 34b22e1f..b6e817b6 100644
--- a/src/views/settings/components/Upload.vue
+++ b/src/views/settings/components/Upload.vue
@@ -8,16 +8,16 @@
         <span class="label-font">Pleroma.Uploaders.Local</span>
       </el-form-item>
       <setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
-      <div class="line"/>
+      <el-divider class="divider"/>
     </el-form>
     <el-form v-if="showUploadersS3" ref="uploadersS3" :model="uploadersS3Data" :label-width="labelWidth">
       <setting :setting-group="uploadersS3" :data="uploadersS3Data"/>
-      <div class="line"/>
+      <el-divider class="divider"/>
     </el-form>
     <el-form ref="uploadFilterMogrify" :model="uploadFilterMogrifyData" :label-width="labelWidth">
       <setting :setting-group="uploadFilterMogrify" :data="uploadFilterMogrifyData"/>
     </el-form>
-    <div class="line"/>
+    <el-divider class="divider"/>
     <el-form ref="uploadAnonymizeFilename" :model="uploadAnonymizeFilenameData" :label-width="labelWidth">
       <setting :setting-group="uploadAnonymizeFilename" :data="uploadAnonymizeFilenameData"/>
     </el-form>
diff --git a/src/views/settings/components/inputComponents/IconsInput.vue b/src/views/settings/components/inputComponents/IconsInput.vue
index f9c48608..4f940995 100644
--- a/src/views/settings/components/inputComponents/IconsInput.vue
+++ b/src/views/settings/components/inputComponents/IconsInput.vue
@@ -14,7 +14,7 @@
         <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addValueToIcons(index)"/>
         <span class="icons-button-desc">Add another `key - value` pair to this icon</span>
       </div>
-      <div class="line"/>
+      <el-divider class="divider"/>
     </div>
     <div class="icons-button-container">
       <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addIconToIcons"/>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index c13f259e..f9c189d1 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -34,6 +34,9 @@
     overflow-wrap: break-word;
     margin-bottom: 0;
   }
+  .divider {
+    margin: 0 0 18px 0;
+  }
   .el-form-item .rate-limit {
     margin-right: 0;
   }
@@ -145,7 +148,7 @@
     width: 100%;
     height: 0;
     border: 1px solid #eee;
-    margin-bottom: 22px;
+    margin-bottom: 18px;
   }
   .mascot-container {
     margin-bottom: 15px;
@@ -291,6 +294,9 @@
         font-size: 14px;
       }
     }
+    .divider {
+      margin: 0 0 10px 0;
+    }
     .follow-relay {
       width: 70%;
       margin-right: 5px;
@@ -304,7 +310,7 @@
     }
     .input-container {
       width: 100%;
-      .el-form-item {
+      .el-form-item:first-child {
         margin: 0;
         padding: 0 15px 10px 0;
       }
@@ -349,6 +355,9 @@
     .socks5-checkbox-container {
       width: 100%;
     }
+    .submit-button {
+      margin: 0 15px 22px 0;
+    }
     .el-input__inner {
     padding: 0 5px 0 5px
     }

From b541b5712a6d1e14c0b4ce2fc9364667eb8986d8 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 15 Feb 2020 14:53:48 +0300
Subject: [PATCH 17/21] Add thick lines between different groups of settings

---
 src/views/settings/components/ActivityPub.vue    |  3 +--
 src/views/settings/components/Authentication.vue |  6 +++---
 src/views/settings/components/Captcha.vue        |  2 +-
 src/views/settings/components/Frontend.vue       |  6 +++---
 src/views/settings/components/Http.vue           |  6 +++---
 src/views/settings/components/Instance.vue       | 10 +++++-----
 src/views/settings/components/Logger.vue         |  6 +++---
 src/views/settings/components/MRF.vue            | 10 +++++-----
 src/views/settings/components/Mailer.vue         |  2 +-
 src/views/settings/components/Metadata.vue       |  2 +-
 src/views/settings/components/Other.vue          |  2 +-
 src/views/settings/components/Upload.vue         |  6 +++---
 src/views/settings/styles/main.scss              |  6 ++++++
 13 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/src/views/settings/components/ActivityPub.vue b/src/views/settings/components/ActivityPub.vue
index 35be09f0..095b0bdc 100644
--- a/src/views/settings/components/ActivityPub.vue
+++ b/src/views/settings/components/ActivityPub.vue
@@ -3,8 +3,7 @@
     <el-form ref="activitypubData" :model="activitypubData" :label-width="labelWidth">
       <setting :setting-group="activitypub" :data="activitypubData"/>
     </el-form>
-    <el-divider class="divider"/>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="userData" :model="userData" :label-width="labelWidth">
       <setting :setting-group="user" :data="userData"/>
     </el-form>
diff --git a/src/views/settings/components/Authentication.vue b/src/views/settings/components/Authentication.vue
index 2e80824d..e525953a 100644
--- a/src/views/settings/components/Authentication.vue
+++ b/src/views/settings/components/Authentication.vue
@@ -3,15 +3,15 @@
     <el-form ref="pleromaAuthenticatorData" :model="pleromaAuthenticatorData" :label-width="labelWidth">
       <setting :setting-group="pleromaAuthenticator" :data="pleromaAuthenticatorData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="authData" :model="authData" :label-width="labelWidth">
       <setting :setting-group="auth" :data="authData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="ldapData" :model="ldapData" :label-width="labelWidth">
       <setting :setting-group="ldap" :data="ldapData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="oauth2" :model="oauth2Data" :label-width="labelWidth">
       <setting :setting-group="oauth2" :data="oauth2Data"/>
     </el-form>
diff --git a/src/views/settings/components/Captcha.vue b/src/views/settings/components/Captcha.vue
index 0094c0e4..aafffb0d 100644
--- a/src/views/settings/components/Captcha.vue
+++ b/src/views/settings/components/Captcha.vue
@@ -3,7 +3,7 @@
     <el-form ref="captchaData" :model="captchaData" :label-width="labelWidth">
       <setting :setting-group="captcha" :data="captchaData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="kocaptchaData" :model="kocaptchaData" :label-width="labelWidth">
       <setting :setting-group="kocaptcha" :data="kocaptchaData"/>
     </el-form>
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index 614e5f94..2641ef4f 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -9,18 +9,18 @@
       </el-form-item>
       <setting :setting-group="assets" :data="assetsData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
       <el-form-item class="grouped-settings-header">
         <span class="label-font">{{ $t('settings.emoji') }}</span>
       </el-form-item>
       <setting :setting-group="emoji" :data="emojiData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="chatData" :model="chatData" :label-width="labelWidth">
       <setting :setting-group="chat" :data="chatData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="markupData" :model="markupData" :label-width="labelWidth">
       <el-form-item class="grouped-settings-header">
         <span class="label-font">{{ $t('settings.markup') }}</span>
diff --git a/src/views/settings/components/Http.vue b/src/views/settings/components/Http.vue
index 7de0845d..0e152a83 100644
--- a/src/views/settings/components/Http.vue
+++ b/src/views/settings/components/Http.vue
@@ -9,15 +9,15 @@
       </el-form-item>
       <setting :setting-group="corsPlug" :data="corsPlugData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="httpSignatures" :model="httpSignaturesData" :label-width="labelWidth">
       <setting :setting-group="httpSignatures" :data="httpSignaturesData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="httpSecurityData" :model="httpSecurityData" :label-width="labelWidth">
       <setting :setting-group="httpSecurity" :data="httpSecurityData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="webCacheTtl" :model="webCacheTtlData" :label-width="labelWidth">
       <setting :setting-group="webCacheTtl" :data="webCacheTtlData"/>
     </el-form>
diff --git a/src/views/settings/components/Instance.vue b/src/views/settings/components/Instance.vue
index 32562dd5..0e9f1e63 100644
--- a/src/views/settings/components/Instance.vue
+++ b/src/views/settings/components/Instance.vue
@@ -3,23 +3,23 @@
     <el-form ref="instanceData" :model="instanceData" :label-width="labelWidth">
       <setting :setting-group="instance" :data="instanceData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="adminToken" :model="adminTokenData" :label-width="labelWidth">
       <setting :setting-group="adminToken" :data="adminTokenData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="scheduledActivity" :model="scheduledActivityData" :label-width="labelWidth">
       <setting :setting-group="scheduledActivity" :data="scheduledActivityData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="fetchInitialPosts" :model="fetchInitialPostsData" :label-width="labelWidth">
       <setting :setting-group="fetchInitialPosts" :data="fetchInitialPostsData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="manifest" :model="manifestData" :label-width="labelWidth">
       <setting :setting-group="manifest" :data="manifestData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="pleromaUser" :model="pleromaUserData" :label-width="labelWidth">
       <setting :setting-group="pleromaUser" :data="pleromaUserData"/>
     </el-form>
diff --git a/src/views/settings/components/Logger.vue b/src/views/settings/components/Logger.vue
index 064ea584..7c7a67f6 100644
--- a/src/views/settings/components/Logger.vue
+++ b/src/views/settings/components/Logger.vue
@@ -3,15 +3,15 @@
     <el-form ref="loggerData" :model="loggerData" :label-width="labelWidth">
       <setting :setting-group="logger" :data="loggerData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="consoleData" :model="consoleData" :label-width="labelWidth">
       <setting :setting-group="console" :data="consoleData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="exsysloggerData" :model="exsysloggerData" :label-width="labelWidth">
       <setting :setting-group="exsyslogger" :data="exsysloggerData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="quackData" :model="quackData" :label-width="labelWidth">
       <setting :setting-group="quack" :data="quackData"/>
     </el-form>
diff --git a/src/views/settings/components/MRF.vue b/src/views/settings/components/MRF.vue
index beb28e7c..139ff8a5 100644
--- a/src/views/settings/components/MRF.vue
+++ b/src/views/settings/components/MRF.vue
@@ -3,15 +3,15 @@
     <el-form ref="mrfSimple" :model="mrfSimpleData" :label-width="labelWidth">
       <setting :setting-group="mrfSimple" :data="mrfSimpleData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="mrfRejectnonpublic" :model="mrfRejectnonpublicData" :label-width="labelWidth">
       <setting :setting-group="mrfRejectnonpublic" :data="mrfRejectnonpublicData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="mrfHellthread" :model="mrfHellthreadData" :label-width="labelWidth">
       <setting :setting-group="mrfHellthread" :data="mrfHellthreadData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="mrfKeyword" :model="mrfKeywordData" :label-width="labelWidth">
       <setting :setting-group="mrfKeyword" :data="mrfKeywordData"/>
     </el-form>
@@ -21,11 +21,11 @@
     <el-form ref="mrfMention" :model="mrfMentionData" :label-width="labelWidth">
       <setting :setting-group="mrfMention" :data="mrfMentionData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="mrfNormalizeMarkup" :model="mrfNormalizeMarkupData" :label-width="labelWidth">
       <setting :setting-group="mrfNormalizeMarkup" :data="mrfNormalizeMarkupData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="mrfVocabulary" :model="mrfVocabularyData" :label-width="labelWidth">
       <setting :setting-group="mrfVocabulary" :data="mrfVocabularyData"/>
     </el-form>
diff --git a/src/views/settings/components/Mailer.vue b/src/views/settings/components/Mailer.vue
index dbe14ba9..ab2c9cee 100644
--- a/src/views/settings/components/Mailer.vue
+++ b/src/views/settings/components/Mailer.vue
@@ -3,7 +3,7 @@
     <el-form ref="mailer" :model="mailerData" :label-width="labelWidth">
       <setting :setting-group="mailer" :data="mailerData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="emailNotifications" :model="emailNotificationsData" :label-width="labelWidth">
       <setting :setting-group="emailNotifications" :data="emailNotificationsData"/>
     </el-form>
diff --git a/src/views/settings/components/Metadata.vue b/src/views/settings/components/Metadata.vue
index e085f7da..8ad6edb9 100644
--- a/src/views/settings/components/Metadata.vue
+++ b/src/views/settings/components/Metadata.vue
@@ -3,7 +3,7 @@
     <el-form ref="metadata" :model="metadataData" :label-width="labelWidth">
       <setting :setting-group="metadata" :data="metadataData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="richMedia" :model="richMediaData" :label-width="labelWidth">
       <setting :setting-group="richMedia" :data="richMediaData"/>
     </el-form>
diff --git a/src/views/settings/components/Other.vue b/src/views/settings/components/Other.vue
index bff68f9c..f35f9243 100644
--- a/src/views/settings/components/Other.vue
+++ b/src/views/settings/components/Other.vue
@@ -3,7 +3,7 @@
     <el-form ref="teslaAdapter" :model="teslaAdapterData" :label-width="labelWidth">
       <setting :setting-group="teslaAdapter" :data="teslaAdapterData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="mimeTypes" :model="mimeTypesData" :label-width="labelWidth">
       <setting :setting-group="mimeTypes" :data="mimeTypesData"/>
     </el-form>
diff --git a/src/views/settings/components/Upload.vue b/src/views/settings/components/Upload.vue
index b6e817b6..94d43bdd 100644
--- a/src/views/settings/components/Upload.vue
+++ b/src/views/settings/components/Upload.vue
@@ -8,16 +8,16 @@
         <span class="label-font">Pleroma.Uploaders.Local</span>
       </el-form-item>
       <setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
-      <el-divider class="divider"/>
+      <el-divider class="divider thick-line"/>
     </el-form>
     <el-form v-if="showUploadersS3" ref="uploadersS3" :model="uploadersS3Data" :label-width="labelWidth">
       <setting :setting-group="uploadersS3" :data="uploadersS3Data"/>
-      <el-divider class="divider"/>
+      <el-divider class="divider thick-line"/>
     </el-form>
     <el-form ref="uploadFilterMogrify" :model="uploadFilterMogrifyData" :label-width="labelWidth">
       <setting :setting-group="uploadFilterMogrify" :data="uploadFilterMogrifyData"/>
     </el-form>
-    <el-divider class="divider"/>
+    <el-divider class="divider thick-line"/>
     <el-form ref="uploadAnonymizeFilename" :model="uploadAnonymizeFilenameData" :label-width="labelWidth">
       <setting :setting-group="uploadAnonymizeFilename" :data="uploadAnonymizeFilenameData"/>
     </el-form>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index f9c189d1..be8298f2 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -37,6 +37,9 @@
   .divider {
     margin: 0 0 18px 0;
   }
+  .divider.thick-line {
+    height: 2px;
+  }
   .el-form-item .rate-limit {
     margin-right: 0;
   }
@@ -297,6 +300,9 @@
     .divider {
       margin: 0 0 10px 0;
     }
+    .divider .thick-line {
+      height: 2px;
+    }
     .follow-relay {
       width: 70%;
       margin-right: 5px;

From b03ef7f9bb21e84696ab5e317a69d8ba8854a687 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 15 Feb 2020 16:09:03 +0300
Subject: [PATCH 18/21] Empty input number after submitting null value

---
 src/views/settings/components/Inputs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 6d1b9c32..be5e27d4 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -39,7 +39,7 @@
         @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
       <el-input-number
         v-if="setting.type === 'integer'"
-        :value="inputValue === null ? 0 : inputValue"
+        :value="inputValue === null ? undefined : inputValue"
         :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
         :min="0"
         :size="isDesktop ? 'large' : 'small'"

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 19/21] 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 {

From c55c642d4596328e531e13468ffb6c05bb54627e Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 16 Feb 2020 23:11:13 +0300
Subject: [PATCH 20/21] Fix styles

---
 src/views/settings/components/Inputs.vue          |  2 +-
 .../components/inputComponents/MascotsInput.vue   |  6 +++---
 src/views/settings/styles/main.scss               | 15 ++++++++++-----
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index f03d8567..da86c8e4 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -45,7 +45,7 @@
           :value="inputValue === null ? undefined : inputValue"
           :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
           :min="0"
-          :size="isDesktop ? 'large' : 'small'"
+          :size="isDesktop ? 'large' : 'medium'"
           @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'))"
diff --git a/src/views/settings/components/inputComponents/MascotsInput.vue b/src/views/settings/components/inputComponents/MascotsInput.vue
index a409e5c4..8b5fbf62 100644
--- a/src/views/settings/components/inputComponents/MascotsInput.vue
+++ b/src/views/settings/components/inputComponents/MascotsInput.vue
@@ -1,16 +1,16 @@
 <template>
   <div>
     <div v-for="mascot in data" :key="getId(mascot)" class="mascot-container">
-      <el-form-item label="Name" label-width="85px">
+      <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)"/>
           <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
         </div>
       </el-form-item>
-      <el-form-item label="URL" label-width="85px">
+      <el-form-item label="URL" label-width="85px" class="mascot-form-item">
         <el-input :value="getUrl(mascot)" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', mascot)"/>
       </el-form-item>
-      <el-form-item label="Mime type" label-width="85px">
+      <el-form-item label="Mime type" label-width="85px" class="mascot-form-item">
         <el-input :value="getMimeType(mascot)" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', mascot)"/>
       </el-form-item>
     </div>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index e908e554..aa8c4b75 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -296,7 +296,7 @@
   @media only screen and (max-width: 760px),
     (min-device-width: 768px) and (max-device-width: 1024px) {
     .delete-setting-button {
-      margin-left: 5px;
+      margin: 4px 0 0 5px;
       height: 28px;
     }
     .delete-setting-button-container {
@@ -338,17 +338,22 @@
         margin: 0;
         padding: 0 15px 10px 0;
       }
+      .el-form-item:first-child .mascot-form-item {
+        padding: 0;
+      }
+      .el-form-item:first-child .rate-limit {
+        padding: 0;
+      }
       .settings-delete-button {
-        margin: 4px 7px 0 -5px;
+        margin: 4px 15px 0 -5px;
       }
     }
     .input-row {
       display: flex;
-      align-items: center;
       justify-content: space-between;
     }
     .limit-input {
-      width: 46%;
+      width: 40%;
     }
     .proxy-url-input {
       flex-direction: column;
@@ -376,7 +381,7 @@
       float: left;
     }
     .scale-input {
-      width: 46%;
+      width: 40%;
     }
     .setting-label {
       display: flex;

From bdeae8e6be5d7eab279145d06692bb30544e6d0c Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 16 Feb 2020 23:23:34 +0300
Subject: [PATCH 21/21] Changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dde5f9f0..f7ab238c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Report notes
 - Ability to moderate users on the statuses page
 - Ability to moderate user on the user's page
+- Mobile UI for Settings tab
 
 ### Fixed
 
@@ -36,6 +37,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Reports update (also, now it's optimistic)
 - Remove duplicated success message
 - Fix styles for Statuses by instance page
+- Fix styles for Reports section
 
 ## [1.2.0] - 2019-09-27