From bb3681349007b13a43f32bbd3c66327939c4b641 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 22 Apr 2020 01:28:40 +0300
Subject: [PATCH] Align label on top on MRF tab

---
 src/views/settings/components/MRF.vue | 23 +++++++++++++----------
 src/views/settings/styles/main.scss   |  7 +++----
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/views/settings/components/MRF.vue b/src/views/settings/components/MRF.vue
index d13d5178..94d3762e 100644
--- a/src/views/settings/components/MRF.vue
+++ b/src/views/settings/components/MRF.vue
@@ -1,40 +1,40 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="mrfSimple" :model="mrfSimpleData" :label-width="labelWidth">
+    <el-form ref="mrfSimple" :model="mrfSimpleData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mrfSimple" :data="mrfSimpleData"/>
     </el-form>
     <el-divider class="divider thick-line"/>
-    <el-form ref="mrfRejectnonpublic" :model="mrfRejectnonpublicData" :label-width="labelWidth">
+    <el-form ref="mrfRejectnonpublic" :model="mrfRejectnonpublicData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mrfRejectnonpublic" :data="mrfRejectnonpublicData"/>
     </el-form>
     <el-divider class="divider thick-line"/>
-    <el-form ref="mrfHellthread" :model="mrfHellthreadData" :label-width="labelWidth">
+    <el-form ref="mrfHellthread" :model="mrfHellthreadData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mrfHellthread" :data="mrfHellthreadData"/>
     </el-form>
     <el-divider class="divider thick-line"/>
-    <el-form ref="mrfKeyword" :model="mrfKeywordData" :label-width="labelWidth">
+    <el-form ref="mrfKeyword" :model="mrfKeywordData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mrfKeyword" :data="mrfKeywordData"/>
     </el-form>
-    <el-form ref="mrfSubchain" :model="mrfSubchainData" :label-width="labelWidth">
+    <el-form ref="mrfSubchain" :model="mrfSubchainData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mrfSubchain" :data="mrfSubchainData"/>
     </el-form>
-    <el-form ref="mrfMention" :model="mrfMentionData" :label-width="labelWidth">
+    <el-form ref="mrfMention" :model="mrfMentionData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mrfMention" :data="mrfMentionData"/>
     </el-form>
     <el-divider class="divider thick-line"/>
-    <el-form ref="mrfNormalizeMarkup" :model="mrfNormalizeMarkupData" :label-width="labelWidth">
+    <el-form ref="mrfNormalizeMarkup" :model="mrfNormalizeMarkupData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mrfNormalizeMarkup" :data="mrfNormalizeMarkupData"/>
     </el-form>
     <el-divider class="divider thick-line"/>
-    <el-form ref="mrfVocabulary" :model="mrfVocabularyData" :label-width="labelWidth">
+    <el-form ref="mrfVocabulary" :model="mrfVocabularyData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mrfVocabulary" :data="mrfVocabularyData"/>
     </el-form>
     <el-divider class="divider thick-line"/>
-    <el-form ref="mrfObjectAge" :model="mrfObjectAgeData" :label-width="labelWidth">
+    <el-form ref="mrfObjectAge" :model="mrfObjectAgeData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mrfObjectAge" :data="mrfObjectAgeData"/>
     </el-form>
     <el-divider class="divider thick-line"/>
-    <el-form ref="modules" :model="modulesData" :label-width="labelWidth">
+    <el-form ref="modules" :model="modulesData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="modules" :data="modulesData"/>
     </el-form>
     <div class="submit-button-container">
@@ -65,6 +65,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/styles/main.scss b/src/views/settings/styles/main.scss
index 7c9e3bbb..430fd0a7 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -394,7 +394,7 @@
     }
     .description > p {
       line-height: 18px;
-      margin: 0 5px 7px 0;
+      margin: 0 5px 7px 15px;
       code {
         display: inline;
         line-height: 18px;
@@ -429,7 +429,7 @@
       width: 100%;
       .el-form-item:first-child {
         margin: 0;
-        padding: 0 15px 10px 0;
+        padding: 0 15px 10px 15px;
       }
       .el-form-item.crontab-container:first-child {
         margin: 0;
@@ -527,8 +527,7 @@
     padding: 0 5px 0 5px
     }
     .el-form-item__label:not(.no-top-margin) {
-      padding-left: 3px;
-      padding-right: 10px;
+      padding-bottom: 5px;
       line-height: 22px;
       margin-top: 7px;
     }