AkkomaGang/admin-fe
5
2
Fork 8
Code Issues 5 Pull requests 2 Projects Releases Wiki Activity

Update label position on Frontend, Gopher, Http, Instance, JobQueue, Logger and Mailer tabs

Browse source
This commit is contained in:
Angelina Filippova 2020-04-22 20:50:15 +03:00
parent a31952b8aa
commit 73a87b440a
8 changed files with 66 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/views/settings/components/Frontend.vue
View file

@ -1,33 +1,33 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="frontendData" :model="frontendData" :label-width="labelWidth">
<el-form ref="frontendData" :model="frontendData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="frontend" :data="frontendData"/>
</el-form>
<el-form ref="staticFeData" :model="staticFeData" :label-width="labelWidth">
<el-form ref="staticFeData" :model="staticFeData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="staticFe" :data="staticFeData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
<el-form ref="assetsData" :model="assetsData" :label-position="labelPosition" :label-width="labelWidth">
<el-form-item class="grouped-settings-header">
<span class="label-font">{{ $t('settings.assets') }}</span>
<span class="label-font label-with-margin">{{ $t('settings.assets') }}</span>
</el-form-item>
<setting :setting-group="assets" :data="assetsData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
<el-form ref="emojiData" :model="emojiData" :label-position="labelPosition" :label-width="labelWidth">
<el-form-item data-search=":emoji" class="grouped-settings-header">
<span class="label-font">{{ $t('settings.emoji') }}</span>
<span class="label-font label-with-margin">{{ $t('settings.emoji') }}</span>
</el-form-item>
<setting :setting-group="emoji" :data="emojiData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="chatData" :model="chatData" :label-width="labelWidth">
<el-form ref="chatData" :model="chatData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="chat" :data="chatData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="markupData" :model="markupData" :label-width="labelWidth">
<el-form ref="markupData" :model="markupData" :label-position="labelPosition" :label-width="labelWidth">
<el-form-item data-search=":markup" class="grouped-settings-header">
<span class="label-font">{{ $t('settings.markup') }}</span>
<span class="label-font label-with-margin">{{ $t('settings.markup') }}</span>
</el-form-item>
<setting :setting-group="markup" :data="markupData"/>
</el-form>
@ -83,6 +83,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

5
src/views/settings/components/Gopher.vue
View file

@ -1,6 +1,6 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form v-if="!loading" ref="gopher" :model="gopherData" :label-width="labelWidth">
<el-form v-if="!loading" ref="gopher" :model="gopherData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="gopher" :data="gopherData"/>
</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'

15
src/views/settings/components/Http.vue
View file

@ -1,24 +1,24 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="httpData" :model="httpData" :label-width="labelWidth">
<el-form ref="httpData" :model="httpData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="http" :data="httpData"/>
</el-form>
<el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
<el-form ref="corsPlugData" :model="corsPlugData" :label-position="labelPosition" :label-width="labelWidth">
<el-form-item data-search=":cors_plug" class="grouped-settings-header">
<span class="label-font">{{ $t('settings.corsPlug') }}</span>
<span class="label-font label-with-margin">{{ $t('settings.corsPlug') }}</span>
</el-form-item>
<setting :setting-group="corsPlug" :data="corsPlugData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="httpSignatures" :model="httpSignaturesData" :label-width="labelWidth">
<el-form ref="httpSignatures" :model="httpSignaturesData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="httpSignatures" :data="httpSignaturesData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="httpSecurityData" :model="httpSecurityData" :label-width="labelWidth">
<el-form ref="httpSecurityData" :model="httpSecurityData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="httpSecurity" :data="httpSecurityData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="webCacheTtl" :model="webCacheTtlData" :label-width="labelWidth">
<el-form ref="webCacheTtl" :model="webCacheTtlData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="webCacheTtl" :data="webCacheTtlData"/>
</el-form>
<div class="submit-button-container">
@ -73,6 +73,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

19
src/views/settings/components/Instance.vue
View file

@ -1,33 +1,33 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="instanceData" :model="instanceData" :label-width="labelWidth">
<el-form ref="instanceData" :model="instanceData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="instance" :data="instanceData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="adminToken" :model="adminTokenData" :label-width="labelWidth">
<el-form ref="adminToken" :model="adminTokenData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="adminToken" :data="adminTokenData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="scheduledActivity" :model="scheduledActivityData" :label-width="labelWidth">
<el-form ref="scheduledActivity" :model="scheduledActivityData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="scheduledActivity" :data="scheduledActivityData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="manifest" :model="manifestData" :label-width="labelWidth">
<el-form ref="manifest" :model="manifestData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="manifest" :data="manifestData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="pleromaUser" :model="pleromaUserData" :label-width="labelWidth" data-search="Pleroma.User">
<el-form ref="pleromaUser" :model="pleromaUserData" :label-position="labelPosition" :label-width="labelWidth" data-search="Pleroma.User">
<setting :setting-group="pleromaUser" :data="pleromaUserData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="uriSchemes" :model="uriSchemesData" :label-width="labelWidth">
<el-form ref="uriSchemes" :model="uriSchemesData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="uriSchemes" :data="uriSchemesData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="feed" :model="feedData" :label-width="labelWidth">
<el-form ref="feed" :model="feedData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="feed" :data="feedData"/>
</el-form>
<el-form ref="streamer" :model="streamerData" :label-width="labelWidth">
<el-form ref="streamer" :model="streamerData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="streamer" :data="streamerData"/>
</el-form>
<div class="submit-button-container">
@ -78,6 +78,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

9
src/views/settings/components/JobQueue.vue
View file

@ -1,12 +1,12 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="obanQueuesData" :model="obanQueuesData" :label-width="labelWidth">
<el-form ref="obanQueuesData" :model="obanQueuesData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="obanQueues" :data="obanQueuesData"/>
</el-form>
<el-form ref="workersData" :model="workersData" :label-width="labelWidth">
<el-form ref="workersData" :model="workersData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="workers" :data="workersData"/>
</el-form>
<el-form ref="activityExpiration" :model="activityExpirationData" :label-width="labelWidth">
<el-form ref="activityExpiration" :model="activityExpirationData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="activityExpiration" :data="activityExpirationData"/>
</el-form>
<div class="submit-button-container">
@ -43,6 +43,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

11
src/views/settings/components/Logger.vue
View file

@ -1,18 +1,18 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="loggerData" :model="loggerData" :label-width="labelWidth">
<el-form ref="loggerData" :model="loggerData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="logger" :data="loggerData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="consoleData" :model="consoleData" :label-width="labelWidth">
<el-form ref="consoleData" :model="consoleData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="console" :data="consoleData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="exsysloggerData" :model="exsysloggerData" :label-width="labelWidth">
<el-form ref="exsysloggerData" :model="exsysloggerData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="exsyslogger" :data="exsysloggerData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="quackData" :model="quackData" :label-width="labelWidth">
<el-form ref="quackData" :model="quackData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="quack" :data="quackData"/>
</el-form>
<div class="submit-button-container">
@ -55,6 +55,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

13
src/views/settings/components/Mailer.vue
View file

@ -1,20 +1,20 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="mailer" :model="mailerData" :label-width="labelWidth">
<el-form ref="mailer" :model="mailerData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="mailer" :data="mailerData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="swoosh" :model="swooshData" :label-width="labelWidth">
<el-form ref="swoosh" :model="swooshData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="swoosh" :data="swooshData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="emailNotifications" :model="emailNotificationsData" :label-width="labelWidth">
<el-form ref="emailNotifications" :model="emailNotificationsData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="emailNotifications" :data="emailNotificationsData"/>
</el-form>
<el-form ref="userEmail" :model="userEmailData" :label-width="labelWidth">
<el-form ref="userEmail" :model="userEmailData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="userEmail" :data="userEmailData"/>
</el-form>
<el-form ref="newUsersDigestEmail" :model="newUsersDigestEmailData" :label-width="labelWidth">
<el-form ref="newUsersDigestEmail" :model="newUsersDigestEmailData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="newUsersDigestEmail" :data="newUsersDigestEmailData"/>
</el-form>
<div class="submit-button-container">
@ -53,6 +53,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

9
src/views/settings/styles/main.scss
View file

@ -450,6 +450,9 @@
display: flex;
justify-content: space-between;
}
.label-with-margin {
margin-left: 15px;
}
.limit-input {
width: 45%;
}
@ -562,6 +565,12 @@
.line {
margin-bottom: 10px;
}
.mascot-form-item {
.el-form-item__label:not(.no-top-margin) {
margin: 0;
padding: 0;
}
}
.mascot-container {
margin-bottom: 5px;
}