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] 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() {