From 4752ce96a39e460400350e9c55458ac6a5ef69f2 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 23 Apr 2020 03:20:29 +0300
Subject: [PATCH] Update label position for Metadata, Other, RateLimiters,
 Upload and WebPush tabs

---
 src/views/settings/components/Metadata.vue     |  7 +++++--
 src/views/settings/components/Other.vue        |  7 +++++--
 src/views/settings/components/RateLimiters.vue |  5 ++++-
 src/views/settings/components/Upload.vue       | 15 +++++++++------
 src/views/settings/components/WebPush.vue      |  5 ++++-
 5 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/views/settings/components/Metadata.vue b/src/views/settings/components/Metadata.vue
index a72d7add..b4aef7c8 100644
--- a/src/views/settings/components/Metadata.vue
+++ b/src/views/settings/components/Metadata.vue
@@ -1,10 +1,10 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="metadata" :model="metadataData" :label-width="labelWidth">
+    <el-form ref="metadata" :model="metadataData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="metadata" :data="metadataData"/>
     </el-form>
     <el-divider class="divider thick-line"/>
-    <el-form ref="richMedia" :model="richMediaData" :label-width="labelWidth">
+    <el-form ref="richMedia" :model="richMediaData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="richMedia" :data="richMediaData"/>
     </el-form>
     <div class="submit-button-container">
@@ -35,6 +35,9 @@ export default {
     isTablet() {
       return this.$store.state.app.device === 'tablet'
     },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
     labelWidth() {
       if (this.isMobile) {
         return '120px'
diff --git a/src/views/settings/components/Other.vue b/src/views/settings/components/Other.vue
index 129b9e61..2eee5468 100644
--- a/src/views/settings/components/Other.vue
+++ b/src/views/settings/components/Other.vue
@@ -1,9 +1,9 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="mimeTypes" :model="mimeTypesData" :label-width="labelWidth">
+    <el-form ref="mimeTypes" :model="mimeTypesData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mimeTypes" :data="mimeTypesData"/>
     </el-form>
-    <el-form ref="remoteIp" :model="remoteIpData" :label-width="labelWidth">
+    <el-form ref="remoteIp" :model="remoteIpData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="remoteIp" :data="remoteIpData"/>
     </el-form>
     <div class="submit-button-container">
@@ -34,6 +34,9 @@ export default {
     isTablet() {
       return this.$store.state.app.device === 'tablet'
     },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
     labelWidth() {
       if (this.isMobile) {
         return '120px'
diff --git a/src/views/settings/components/RateLimiters.vue b/src/views/settings/components/RateLimiters.vue
index 6237b16d..1b0283c9 100644
--- a/src/views/settings/components/RateLimiters.vue
+++ b/src/views/settings/components/RateLimiters.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form v-if="!loading" ref="rateLimiters" :model="rateLimitersData" :label-width="labelWidth">
+    <el-form v-if="!loading" ref="rateLimiters" :model="rateLimitersData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="rateLimiters" :data="rateLimitersData"/>
     </el-form>
     <div class="submit-button-container">
@@ -37,6 +37,9 @@ export default {
     isTablet() {
       return this.$store.state.app.device === 'tablet'
     },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
     labelWidth() {
       if (this.isMobile) {
         return '120px'
diff --git a/src/views/settings/components/Upload.vue b/src/views/settings/components/Upload.vue
index 05950cff..b557fb5a 100644
--- a/src/views/settings/components/Upload.vue
+++ b/src/views/settings/components/Upload.vue
@@ -1,24 +1,24 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="uploadData" :model="uploadData" :label-width="labelWidth">
+    <el-form ref="uploadData" :model="uploadData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="upload" :data="uploadData"/>
     </el-form>
-    <el-form v-if="showUploadersLocal" ref="uploadersLocal" :model="uploadersLocalData" :label-width="labelWidth">
+    <el-form v-if="showUploadersLocal" ref="uploadersLocal" :model="uploadersLocalData" :label-position="labelPosition" :label-width="labelWidth">
       <el-form-item class="grouped-settings-header">
-        <span class="label-font">Pleroma.Uploaders.Local</span>
+        <span class="label-font label-with-margin">Pleroma.Uploaders.Local</span>
       </el-form-item>
       <setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
       <el-divider class="divider thick-line"/>
     </el-form>
-    <el-form v-if="showUploadersS3" ref="uploadersS3" :model="uploadersS3Data" :label-width="labelWidth">
+    <el-form v-if="showUploadersS3" ref="uploadersS3" :model="uploadersS3Data" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="uploadersS3" :data="uploadersS3Data"/>
       <el-divider class="divider thick-line"/>
     </el-form>
-    <el-form ref="uploadFilterMogrify" :model="uploadFilterMogrifyData" :label-width="labelWidth">
+    <el-form ref="uploadFilterMogrify" :model="uploadFilterMogrifyData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="uploadFilterMogrify" :data="uploadFilterMogrifyData"/>
     </el-form>
     <el-divider class="divider thick-line"/>
-    <el-form ref="uploadAnonymizeFilename" :model="uploadAnonymizeFilenameData" :label-width="labelWidth">
+    <el-form ref="uploadAnonymizeFilename" :model="uploadAnonymizeFilenameData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="uploadAnonymizeFilename" :data="uploadAnonymizeFilenameData"/>
     </el-form>
     <div class="submit-button-container">
@@ -49,6 +49,9 @@ export default {
     isTablet() {
       return this.$store.state.app.device === 'tablet'
     },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
     labelWidth() {
       if (this.isMobile) {
         return '120px'
diff --git a/src/views/settings/components/WebPush.vue b/src/views/settings/components/WebPush.vue
index 2fd7446d..9c76a608 100644
--- a/src/views/settings/components/WebPush.vue
+++ b/src/views/settings/components/WebPush.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form v-if="!loading" ref="vapidDetailsData" :model="vapidDetailsData" :label-width="labelWidth">
+    <el-form v-if="!loading" ref="vapidDetailsData" :model="vapidDetailsData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="vapidDetails" :data="vapidDetailsData"/>
     </el-form>
     <div class="submit-button-container">
@@ -31,6 +31,9 @@ export default {
     isTablet() {
       return this.$store.state.app.device === 'tablet'
     },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
     labelWidth() {
       if (this.isMobile) {
         return '120px'