From e697d7eadfd7e99073b1576a606565de24214402 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 17 Feb 2020 17:02:40 +0300
Subject: [PATCH 1/5] Add support of tablet device in ResizeHandler

---
 src/views/layout/mixin/ResizeHandler.js | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/views/layout/mixin/ResizeHandler.js b/src/views/layout/mixin/ResizeHandler.js
index 2636d5bd..b5befa14 100644
--- a/src/views/layout/mixin/ResizeHandler.js
+++ b/src/views/layout/mixin/ResizeHandler.js
@@ -1,8 +1,9 @@
 import store from '@/store'
 
 const { body } = document
-const WIDTH = 1024
-const RATIO = 3
+const mobileWidth = 480
+const tabletWidth = 801
+const ratio = 3
 
 export default {
   watch: {
@@ -17,23 +18,31 @@ export default {
   },
   mounted() {
     const isMobile = this.isMobile()
-    if (isMobile) {
-      store.dispatch('toggleDevice', 'mobile')
+    const isTablet = this.isTablet()
+    if (isMobile || isTablet) {
+      store.dispatch('toggleDevice', isMobile ? 'mobile' : 'tablet')
       store.dispatch('closeSideBar', { withoutAnimation: true })
     }
   },
   methods: {
     isMobile() {
       const rect = body.getBoundingClientRect()
-      return rect.width - RATIO < WIDTH
+      return rect.width - ratio < mobileWidth
+    },
+    isTablet() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - ratio < tabletWidth && rect.width - ratio > mobileWidth
     },
     resizeHandler() {
       if (!document.hidden) {
         const isMobile = this.isMobile()
-        store.dispatch('toggleDevice', isMobile ? 'mobile' : 'desktop')
+        const isTablet = this.isTablet()
 
-        if (isMobile) {
+        if (isMobile || isTablet) {
+          store.dispatch('toggleDevice', isMobile ? 'mobile' : 'tablet')
           store.dispatch('closeSideBar', { withoutAnimation: true })
+        } else {
+          store.dispatch('toggleDevice', 'desktop')
         }
       }
     }

From 85ef1074acbc4be21a60f60dfb7510cc8450d5ab Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 17 Feb 2020 17:27:07 +0300
Subject: [PATCH 2/5] Set different label width for desktop, tablet and mobile

---
 src/views/emojiPacks/index.vue                   | 13 +++++++++++--
 src/views/settings/components/ActivityPub.vue    | 11 ++++++++++-
 src/views/settings/components/Authentication.vue | 11 ++++++++++-
 src/views/settings/components/AutoLinker.vue     | 11 ++++++++++-
 src/views/settings/components/Captcha.vue        | 11 ++++++++++-
 src/views/settings/components/Esshd.vue          | 11 ++++++++++-
 src/views/settings/components/Frontend.vue       | 11 ++++++++++-
 src/views/settings/components/Gopher.vue         | 11 ++++++++++-
 src/views/settings/components/Http.vue           | 11 ++++++++++-
 src/views/settings/components/Inputs.vue         | 13 +++++++++++--
 src/views/settings/components/Instance.vue       | 11 ++++++++++-
 src/views/settings/components/JobQueue.vue       | 11 ++++++++++-
 src/views/settings/components/Logger.vue         | 11 ++++++++++-
 src/views/settings/components/MRF.vue            | 11 ++++++++++-
 src/views/settings/components/Mailer.vue         | 11 ++++++++++-
 src/views/settings/components/MediaProxy.vue     | 11 ++++++++++-
 src/views/settings/components/Metadata.vue       | 11 ++++++++++-
 src/views/settings/components/Other.vue          | 11 ++++++++++-
 src/views/settings/components/RateLimiters.vue   | 11 ++++++++++-
 src/views/settings/components/Setting.vue        |  5 ++++-
 src/views/settings/components/Upload.vue         | 11 ++++++++++-
 src/views/settings/components/WebPush.vue        | 11 ++++++++++-
 src/views/settings/index.vue                     |  5 ++++-
 23 files changed, 220 insertions(+), 25 deletions(-)

diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 78716d55..19e0702d 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -10,7 +10,7 @@
       </el-tooltip>
     </div>
     <el-divider class="divider"/>
-    <el-form label-width="180px" class="emoji-packs-form">
+    <el-form :label-width="labelWidth" class="emoji-packs-form">
       <el-form-item :label="$t('emoji.localPacks')">
         <el-button type="primary" @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
       </el-form-item>
@@ -71,8 +71,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '240px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '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 095b0bdc..abd03f10 100644
--- a/src/views/settings/components/ActivityPub.vue
+++ b/src/views/settings/components/ActivityPub.vue
@@ -35,8 +35,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '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 e525953a..e9a6b6f4 100644
--- a/src/views/settings/components/Authentication.vue
+++ b/src/views/settings/components/Authentication.vue
@@ -43,8 +43,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '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 b5d3148e..eee70a1f 100644
--- a/src/views/settings/components/AutoLinker.vue
+++ b/src/views/settings/components/AutoLinker.vue
@@ -31,8 +31,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Captcha.vue b/src/views/settings/components/Captcha.vue
index aafffb0d..1e2d79f5 100644
--- a/src/views/settings/components/Captcha.vue
+++ b/src/views/settings/components/Captcha.vue
@@ -35,6 +35,9 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     kocaptcha() {
       return this.settings.description.find(setting => setting.key === 'Pleroma.Captcha.Kocaptcha')
     },
@@ -42,7 +45,13 @@ export default {
       return _.get(this.settings.settings, [':pleroma', 'Pleroma.Captcha.Kocaptcha']) || {}
     },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Esshd.vue b/src/views/settings/components/Esshd.vue
index ba58faff..4f0f0e7a 100644
--- a/src/views/settings/components/Esshd.vue
+++ b/src/views/settings/components/Esshd.vue
@@ -31,8 +31,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index 2641ef4f..48493e01 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -79,8 +79,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Gopher.vue b/src/views/settings/components/Gopher.vue
index 952662c0..efd3e7ef 100644
--- a/src/views/settings/components/Gopher.vue
+++ b/src/views/settings/components/Gopher.vue
@@ -31,8 +31,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Http.vue b/src/views/settings/components/Http.vue
index 0e152a83..a94000b2 100644
--- a/src/views/settings/components/Http.vue
+++ b/src/views/settings/components/Http.vue
@@ -67,8 +67,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index da86c8e4..dabd525c 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -92,7 +92,7 @@
         <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-tooltip v-if="canBeDeleted && (isMobile || isTablet)" :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>
@@ -210,8 +210,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '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 0e9f1e63..eb8eb34b 100644
--- a/src/views/settings/components/Instance.vue
+++ b/src/views/settings/components/Instance.vue
@@ -65,8 +65,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/JobQueue.vue b/src/views/settings/components/JobQueue.vue
index e1d94167..c58d5733 100644
--- a/src/views/settings/components/JobQueue.vue
+++ b/src/views/settings/components/JobQueue.vue
@@ -37,8 +37,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Logger.vue b/src/views/settings/components/Logger.vue
index 7c7a67f6..c140f9ff 100644
--- a/src/views/settings/components/Logger.vue
+++ b/src/views/settings/components/Logger.vue
@@ -49,8 +49,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/MRF.vue b/src/views/settings/components/MRF.vue
index 139ff8a5..a5e05eb1 100644
--- a/src/views/settings/components/MRF.vue
+++ b/src/views/settings/components/MRF.vue
@@ -51,8 +51,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Mailer.vue b/src/views/settings/components/Mailer.vue
index ab2c9cee..2eb4db08 100644
--- a/src/views/settings/components/Mailer.vue
+++ b/src/views/settings/components/Mailer.vue
@@ -40,8 +40,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '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 fdae5768..5ff2eaf2 100644
--- a/src/views/settings/components/MediaProxy.vue
+++ b/src/views/settings/components/MediaProxy.vue
@@ -25,8 +25,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Metadata.vue b/src/views/settings/components/Metadata.vue
index 8ad6edb9..603524ed 100644
--- a/src/views/settings/components/Metadata.vue
+++ b/src/views/settings/components/Metadata.vue
@@ -29,8 +29,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Other.vue b/src/views/settings/components/Other.vue
index f35f9243..d748c2da 100644
--- a/src/views/settings/components/Other.vue
+++ b/src/views/settings/components/Other.vue
@@ -32,8 +32,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/RateLimiters.vue b/src/views/settings/components/RateLimiters.vue
index 8246836c..27af3812 100644
--- a/src/views/settings/components/RateLimiters.vue
+++ b/src/views/settings/components/RateLimiters.vue
@@ -31,8 +31,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.$store.state.settings.loading
diff --git a/src/views/settings/components/Setting.vue b/src/views/settings/components/Setting.vue
index 4b163521..945a2dfa 100644
--- a/src/views/settings/components/Setting.vue
+++ b/src/views/settings/components/Setting.vue
@@ -47,7 +47,7 @@
                 </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-tooltip v-if="canBeDeleted(setting.key) && (isMobile || isTablet)" :content="$t('settings.removeFromDB')" placement="bottom-end">
                 <el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting(setting.key)"/>
               </el-tooltip>
             </div>
@@ -103,6 +103,9 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     loading() {
       return this.$store.state.settings.loading
     }
diff --git a/src/views/settings/components/Upload.vue b/src/views/settings/components/Upload.vue
index 94d43bdd..c866ff66 100644
--- a/src/views/settings/components/Upload.vue
+++ b/src/views/settings/components/Upload.vue
@@ -43,8 +43,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/WebPush.vue b/src/views/settings/components/WebPush.vue
index 4b2216b7..d4de848c 100644
--- a/src/views/settings/components/WebPush.vue
+++ b/src/views/settings/components/WebPush.vue
@@ -25,8 +25,17 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
     labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 0925b73d..3c8255bb 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -78,7 +78,7 @@
         </el-tab-pane>
       </el-tabs>
     </div>
-    <div v-if="isMobile">
+    <div v-if="isMobile || isTablet">
       <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
       <div class="settings-header-container">
         <el-select v-model="activeTab" class="settings-menu" placeholder="Select">
@@ -216,6 +216,9 @@ export default {
     },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
+    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
     }
   },
   mounted: function() {

From 67e6fd29731250d67703e3c7a402f304e812db05 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 18 Feb 2020 01:18:43 +0300
Subject: [PATCH 3/5] Move styles from settings index to css file

---
 src/views/settings/index.vue | 43 +++---------------------------------
 1 file changed, 3 insertions(+), 40 deletions(-)

diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 3c8255bb..bc2099ad 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -227,44 +227,7 @@ export default {
 }
 </script>
 
-<style rel='stylesheet/scss' lang='scss' scoped>
-.settings-container {
-  .el-tabs {
-    margin-top: 20px
-  }
-}
-.settings-docs-button {
-  width: 163px;
-  text-align: left;
-  padding: 10px;
-}
-.settings-header {
-  margin: 0;
-}
-.settings-header-container {
-  display: flex;
-  height: 36px;
-  justify-content: space-between;
-  align-items: center;
-  margin: 22px 30px 15px 15px;
-}
-
-@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-header-container {
-    margin: 15px;
-  }
-  .settings-menu {
-    width: 163px;
-  }
-}
+<style rel='stylesheet/scss' lang='scss'>
+@import './styles/main';
+@include settings
 </style>

From 5c914b7f36ba3654e2bab6c4eaa16d1b811bbb78 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 18 Feb 2020 01:19:54 +0300
Subject: [PATCH 4/5] Add styles for tablet

---
 src/views/settings/components/Inputs.vue      |   2 +-
 src/views/settings/components/Setting.vue     |   6 +-
 .../inputComponents/EditableKeywordInput.vue  |   2 +-
 .../components/inputComponents/IconsInput.vue |   4 +-
 .../inputComponents/MascotsInput.vue          |   4 +-
 .../inputComponents/MultipleSelect.vue        |   4 +-
 .../inputComponents/RateLimitInput.vue        |   2 +-
 src/views/settings/styles/main.scss           | 101 ++++++++++++++++--
 8 files changed, 107 insertions(+), 18 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index dabd525c..9b6da5e9 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -15,7 +15,7 @@
           :setting-parent="[...settingParent, subSetting]"
           :setting="subSetting"
           :data="data[setting.key]"
-          :custom-label-width="isDesktop ? '120px' : '100px'"
+          :custom-label-width="isMobile ? '100px' : '120px'"
           :label-class="subSetting.type === 'keyword' ? 'center-label' : ''"
           :margin="isDesktop ? margin + 15 : margin + 8"
           :nested="true"/>
diff --git a/src/views/settings/components/Setting.vue b/src/views/settings/components/Setting.vue
index 945a2dfa..d676da29 100644
--- a/src/views/settings/components/Setting.vue
+++ b/src/views/settings/components/Setting.vue
@@ -46,10 +46,10 @@
                   </el-tooltip>
                 </span>
                 <span class="label-font">{{ setting.label }}</span>
+                <el-tooltip v-if="canBeDeleted(setting.key) && (isMobile || isTablet)" :content="$t('settings.removeFromDB')" placement="bottom-end">
+                  <el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting(setting.key)"/>
+                </el-tooltip>
               </el-form-item>
-              <el-tooltip v-if="canBeDeleted(setting.key) && (isMobile || isTablet)" :content="$t('settings.removeFromDB')" placement="bottom-end">
-                <el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting(setting.key)"/>
-              </el-tooltip>
             </div>
             <div v-for="subSetting in setting.children" :key="subSetting.key">
               <inputs
diff --git a/src/views/settings/components/inputComponents/EditableKeywordInput.vue b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
index 69fa6f54..bc2bb65c 100644
--- a/src/views/settings/components/inputComponents/EditableKeywordInput.vue
+++ b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="editable-keyword-container">
     <div v-if="setting.key === ':replace'">
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="pattern" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
diff --git a/src/views/settings/components/inputComponents/IconsInput.vue b/src/views/settings/components/inputComponents/IconsInput.vue
index 4f940995..f5278bba 100644
--- a/src/views/settings/components/inputComponents/IconsInput.vue
+++ b/src/views/settings/components/inputComponents/IconsInput.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div v-for="(icon, index) in data" :key="index" class="mascot-container">
+  <div class="mascot-container">
+    <div v-for="(icon, index) in data" :key="index" class="mascot">
       <div class="icons-container">
         <div class="icon-container">
           <div v-for="{ key, value, id } in icon" :key="id" class="icon-values-container">
diff --git a/src/views/settings/components/inputComponents/MascotsInput.vue b/src/views/settings/components/inputComponents/MascotsInput.vue
index 8b5fbf62..902ed22f 100644
--- a/src/views/settings/components/inputComponents/MascotsInput.vue
+++ b/src/views/settings/components/inputComponents/MascotsInput.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div v-for="mascot in data" :key="getId(mascot)" class="mascot-container">
+  <div class="mascot-container">
+    <div v-for="mascot in data" :key="getId(mascot)" class="mascot">
       <el-form-item label="Name" label-width="85px" class="mascot-form-item">
         <div class="mascot-name-container">
           <el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/>
diff --git a/src/views/settings/components/inputComponents/MultipleSelect.vue b/src/views/settings/components/inputComponents/MultipleSelect.vue
index bcb766fa..ead60d69 100644
--- a/src/views/settings/components/inputComponents/MultipleSelect.vue
+++ b/src/views/settings/components/inputComponents/MultipleSelect.vue
@@ -1,11 +1,12 @@
 <template>
-  <div>
+  <div class="multiple-select-container">
     <el-select
       v-if="setting.key === ':backends'"
       :value="data.value"
       multiple
       filterable
       allow-create
+      class="input"
       @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
       <el-option value=":console" label="console"/>
       <el-option value=":ex_syslogger" label="ExSyslogger"/>
@@ -17,6 +18,7 @@
       multiple
       filterable
       allow-create
+      class="input"
       @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
       <el-option value="strip" label="strip"/>
       <el-option value="auto-orient" label="auto-orient"/>
diff --git a/src/views/settings/components/inputComponents/RateLimitInput.vue b/src/views/settings/components/inputComponents/RateLimitInput.vue
index e9d01724..caddd15c 100644
--- a/src/views/settings/components/inputComponents/RateLimitInput.vue
+++ b/src/views/settings/components/inputComponents/RateLimitInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="rate-limit-container">
     <div v-if="!rateLimitAuthUsers">
       <el-input
         :value="rateLimitAllUsers[0]"
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index aa8c4b75..e18c9932 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -40,6 +40,9 @@
   .divider.thick-line {
     height: 2px;
   }
+  .editable-keyword-container {
+    width: 100%;
+  }
   .el-form-item .rate-limit {
     margin-right: 0;
   }
@@ -153,9 +156,12 @@
     border: 1px solid #eee;
     margin-bottom: 18px;
   }
-  .mascot-container {
+  .mascot {
     margin-bottom: 15px;
   }
+  .mascot-container {
+    width: 100%;
+  }
   .mascot-input {
     margin-bottom: 7px;
   }
@@ -166,6 +172,9 @@
   .mascot-name-input {
     margin-right: 10px
   }
+  .multiple-select-container {
+    width: 100%;
+  }
   .name-input {
     width: 30%;
     margin-right: 8px
@@ -178,6 +187,7 @@
     display: flex;
     align-items: center;
     margin-bottom: 10px;
+    width: 100%;
   }
   .proxy-url-host-input {
     width: 35%;
@@ -202,6 +212,9 @@
       display: flex;
     }
   }
+  .rate-limit-container {
+    width: 100%;
+  }
   .rate-limit-content {
     width: 100%;
   }
@@ -229,13 +242,33 @@
     width: 47%;
     margin: 0 1% 5px 0
   }
-  .settings-delete-button {
-    margin-left: 5px;
-  }
   .setting-input {
     display: flex;
     margin-bottom: 10px;
   }
+  .settings-container {
+    .el-tabs {
+      margin-top: 20px
+    }
+  }
+  .settings-delete-button {
+    margin-left: 5px;
+  }
+  .settings-docs-button {
+    width: 163px;
+    text-align: left;
+    padding: 10px;
+  }
+  .settings-header {
+    margin: 0;
+  }
+  .settings-header-container {
+    display: flex;
+    height: 36px;
+    justify-content: space-between;
+    align-items: center;
+    margin: 22px 30px 15px 15px;
+  }
   .single-input {
     margin-right: 10px
   }
@@ -285,6 +318,10 @@
   }
 
   @media only screen and (min-width: 1824px) {
+    .settings-container {
+      max-width: 1824px;
+      margin: auto;
+    }
     .submit-button-container {
       max-width: 1637px;
       margin-left: auto;
@@ -293,8 +330,7 @@
     }
   }
 
-  @media only screen and (max-width: 760px),
-    (min-device-width: 768px) and (max-device-width: 1024px) {
+  @media only screen and (max-width:480px) {
     .delete-setting-button {
       margin: 4px 0 0 5px;
       height: 28px;
@@ -345,7 +381,8 @@
         padding: 0;
       }
       .settings-delete-button {
-        margin: 4px 15px 0 -5px;
+        margin-top: 4px;
+        float: right;
       }
     }
     .input-row {
@@ -387,6 +424,15 @@
       display: flex;
       justify-content: space-between;
     }
+    .settings-header {
+      margin: 7px 10px 15px 15px;
+    }
+    .settings-header-container {
+      margin: 15px;
+    }
+    .settings-menu {
+      width: 163px;
+    }
     .socks5-checkbox-container {
       width: 100%;
     }
@@ -461,4 +507,45 @@
       margin-right: 8px
     }
   }
+  @media only screen and (max-width:801px) and (min-width: 481px) {
+    .delete-setting-button {
+      margin: 4px 0 0 10px;
+      height: 28px;
+    }
+    .delete-setting-button-container {
+      flex: 0 0 auto;
+    }
+    .description > p {
+      line-height: 18px;
+      margin: 0 15px 10px 0;
+    }
+    .icon-minus-button {
+      width: 28px;
+      height: 28px;
+      margin-top: 4px;
+    }
+    .input {
+      flex: 1 1 auto;
+    }
+    .input-container {
+      .el-form-item__label {
+        span {
+          margin-left: 10px;
+        }
+      }
+    }
+    .input-row {
+      display: flex;
+      justify-content: space-between;
+    }
+    .rate-limit-label-container {
+      width: 250px;
+    }
+    .settings-delete-button {
+      float: right;
+    }
+    .settings-header {
+      margin: 5px 0 0 15px;
+    }
+  }
 }

From 59a17dc5e9a1a34bdc8252c572bf42ec850dfd5f Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 18 Feb 2020 01:40:18 +0300
Subject: [PATCH 5/5] Fix style for rate-limit

---
 src/views/settings/styles/main.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index e18c9932..e807deea 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -227,7 +227,7 @@
     font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
     font-weight: 700;
     height: 36px;
-    width: 240px;
+    width: 100%;
     margin-right: 10px;
   }
   .relays-container {
@@ -390,7 +390,7 @@
       justify-content: space-between;
     }
     .limit-input {
-      width: 40%;
+      width: 45%;
     }
     .proxy-url-input {
       flex-direction: column;
@@ -418,7 +418,7 @@
       float: left;
     }
     .scale-input {
-      width: 40%;
+      width: 45%;
     }
     .setting-label {
       display: flex;