Set different label width for desktop, tablet and mobile

2020-02-17 17:27:07 +03:00 · 2020-02-17 17:27:07 +03:00 · 85ef1074ac
commit 85ef1074ac
parent e697d7eadf
23 changed files with 220 additions and 25 deletions
--- 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
--- 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
--- 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')
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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 : []
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
    }
--- 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
--- 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
--- 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() {