Align label on top on MRF tab

This commit is contained in:
Angelina Filippova 2020-04-22 01:28:40 +03:00
parent 08f96d5881
commit bb36813490
2 changed files with 16 additions and 14 deletions

View file

@ -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'

View file

@ -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;
}