forked from AkkomaGang/admin-fe
Change styles for settting inputs for mobile ui
This commit is contained in:
parent
cbc60e64a1
commit
3a8132da7a
23 changed files with 160 additions and 143 deletions
|
@ -72,7 +72,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '240px'
|
return this.isMobile ? '120px' : '240px'
|
||||||
},
|
},
|
||||||
localPacks() {
|
localPacks() {
|
||||||
return this.$store.state.emojiPacks.localPacks
|
return this.$store.state.emojiPacks.localPacks
|
||||||
|
|
|
@ -36,7 +36,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.$store.state.settings.loading
|
return this.$store.state.settings.loading
|
||||||
|
|
|
@ -44,7 +44,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
ldap() {
|
ldap() {
|
||||||
return this.settings.description.find(setting => setting.key === ':ldap')
|
return this.settings.description.find(setting => setting.key === ':ldap')
|
||||||
|
|
|
@ -32,7 +32,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -42,7 +42,7 @@ export default {
|
||||||
return _.get(this.settings.settings, [':pleroma', 'Pleroma.Captcha.Kocaptcha']) || {}
|
return _.get(this.settings.settings, [':pleroma', 'Pleroma.Captcha.Kocaptcha']) || {}
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -32,7 +32,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -74,7 +74,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -32,7 +32,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -66,7 +66,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div class="input-container">
|
||||||
<el-form-item :label-width="customLabelWidth" :class="labelClass">
|
<el-form-item :label-width="customLabelWidth" :class="labelClass">
|
||||||
<span slot="label">
|
<span slot="label">
|
||||||
{{ setting.label }}
|
{{ setting.label }}
|
||||||
<el-tooltip v-if="canBeDeleted" :content="$t('settings.removeFromDB')" placement="bottom-end">
|
<el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
|
||||||
<el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting"/>
|
<el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting"/>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</span>
|
</span>
|
||||||
|
@ -21,7 +22,6 @@
|
||||||
:placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
|
:placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
|
||||||
:min="0"
|
:min="0"
|
||||||
size="large"
|
size="large"
|
||||||
class="top-margin"
|
|
||||||
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
|
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
|
||||||
<el-select
|
<el-select
|
||||||
v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes(false))"
|
v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes(false))"
|
||||||
|
@ -77,12 +77,16 @@
|
||||||
<prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
|
<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"/>
|
<rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
|
||||||
<!-------------------->
|
<!-------------------->
|
||||||
<span
|
<div
|
||||||
v-if="setting.description && setting.type !== 'keyword'"
|
v-if="setting.description && setting.type !== 'keyword'"
|
||||||
:class="inputClass"
|
:class="inputClass"
|
||||||
class="expl"
|
class="expl"
|
||||||
v-html="getFormattedDescription(setting.description)"/>
|
v-html="getFormattedDescription(setting.description)"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-tooltip v-if="isMobile" :content="$t('settings.removeFromDB')" placement="bottom-end">
|
||||||
|
<el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting"/>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -185,8 +189,14 @@ export default {
|
||||||
return this.data[this.setting.key]
|
return this.data[this.setting.key]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
isDesktop() {
|
||||||
|
return this.$store.state.app.device === 'desktop'
|
||||||
|
},
|
||||||
|
isMobile() {
|
||||||
|
return this.$store.state.app.device === 'mobile'
|
||||||
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
keywordData() {
|
keywordData() {
|
||||||
return Array.isArray(this.data) ? this.data : []
|
return Array.isArray(this.data) ? this.data : []
|
||||||
|
|
|
@ -71,7 +71,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -38,7 +38,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -51,7 +51,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -52,7 +52,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -41,7 +41,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.$store.state.settings.loading
|
return this.$store.state.settings.loading
|
||||||
|
|
|
@ -26,7 +26,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -30,7 +30,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -33,7 +33,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -32,7 +32,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.$store.state.settings.loading
|
return this.$store.state.settings.loading
|
||||||
|
|
|
@ -44,7 +44,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -26,7 +26,7 @@ export default {
|
||||||
return this.$store.state.app.device === 'mobile'
|
return this.$store.state.app.device === 'mobile'
|
||||||
},
|
},
|
||||||
labelWidth() {
|
labelWidth() {
|
||||||
return this.isMobile ? '100px' : '280px'
|
return this.isMobile ? '120px' : '280px'
|
||||||
},
|
},
|
||||||
loading() {
|
loading() {
|
||||||
return this.settings.loading
|
return this.settings.loading
|
||||||
|
|
|
@ -63,7 +63,8 @@
|
||||||
<other/>
|
<other/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
<el-select v-if="isMobile" v-model="activeTab" class="settings-menu" placeholder="Select">
|
<div v-if="isMobile">
|
||||||
|
<el-select v-model="activeTab" class="settings-menu" placeholder="Select">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
|
@ -92,6 +93,7 @@
|
||||||
<upload v-if="activeTab === 'upload'"/>
|
<upload v-if="activeTab === 'upload'"/>
|
||||||
<other v-if="activeTab === 'other'"/>
|
<other v-if="activeTab === 'other'"/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -96,14 +96,14 @@
|
||||||
.icons-container {
|
.icons-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
.input-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: start;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
.keyword-inner-input {
|
.keyword-inner-input {
|
||||||
margin-bottom: 22px;
|
margin-bottom: 22px;
|
||||||
}
|
}
|
||||||
label {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.limit-button-container {
|
.limit-button-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
|
@ -156,6 +156,9 @@
|
||||||
width: 47%;
|
width: 47%;
|
||||||
margin: 0 1% 5px 0
|
margin: 0 1% 5px 0
|
||||||
}
|
}
|
||||||
|
.settings-delete-button {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
.setting-input {
|
.setting-input {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
@ -202,9 +205,15 @@
|
||||||
|
|
||||||
@media only screen and (max-width: 760px),
|
@media only screen and (max-width: 760px),
|
||||||
(min-device-width: 768px) and (max-device-width: 1024px) {
|
(min-device-width: 768px) and (max-device-width: 1024px) {
|
||||||
|
.input-container {
|
||||||
.el-form-item {
|
.el-form-item {
|
||||||
margin-right: 15px;
|
margin: 0 0 15px 0;
|
||||||
}
|
}
|
||||||
|
.settings-delete-button {
|
||||||
|
margin: 4px 7px 0 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.el-input__inner {
|
.el-input__inner {
|
||||||
padding: 0 5px 0 5px
|
padding: 0 5px 0 5px
|
||||||
}
|
}
|
||||||
|
@ -236,10 +245,6 @@
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
margin-right: 5px
|
margin-right: 5px
|
||||||
}
|
}
|
||||||
.top-margin {
|
|
||||||
position: absolute;
|
|
||||||
top: 25%;
|
|
||||||
}
|
|
||||||
.value-input {
|
.value-input {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
|
Loading…
Reference in a new issue