qbism/qb-admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Packages Projects Releases Wiki Activity

Change styles for settting inputs for mobile ui

Browse source
This commit is contained in:
Angelina Filippova 2020-02-06 21:01:54 +03:00
parent cbc60e64a1
commit 3a8132da7a
23 changed files with 160 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/views/emojiPacks/index.vue
View file

@ -72,7 +72,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '240px'
return this.isMobile ? '120px' : '240px'
},
localPacks() {
return this.$store.state.emojiPacks.localPacks

2
src/views/settings/components/ActivityPub.vue
View file

@ -36,7 +36,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.$store.state.settings.loading

2
src/views/settings/components/Authentication.vue
View file

@ -44,7 +44,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
ldap() {
return this.settings.description.find(setting => setting.key === ':ldap')

2
src/views/settings/components/AutoLinker.vue
View file

@ -32,7 +32,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/Captcha.vue
View file

@ -42,7 +42,7 @@ export default {
return _.get(this.settings.settings, [':pleroma', 'Pleroma.Captcha.Kocaptcha']) || {}
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/Esshd.vue
View file

@ -32,7 +32,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

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

@ -74,7 +74,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

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

@ -32,7 +32,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

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

@ -66,7 +66,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

18
src/views/settings/components/Inputs.vue
View file

@ -1,8 +1,9 @@
<template>
<div class="input-container">
<el-form-item :label-width="customLabelWidth" :class="labelClass">
<span slot="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-tooltip>
</span>
@ -21,7 +22,6 @@
:placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
:min="0"
size="large"
class="top-margin"
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
<el-select
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"/>
<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'"
:class="inputClass"
class="expl"
v-html="getFormattedDescription(setting.description)"/>
</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>
<script>
@ -185,8 +189,14 @@ export default {
return this.data[this.setting.key]
}
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
isMobile() {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
keywordData() {
return Array.isArray(this.data) ? this.data : []

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

@ -71,7 +71,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

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

@ -38,7 +38,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

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

@ -51,7 +51,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/MRF.vue
View file

@ -52,7 +52,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

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

@ -41,7 +41,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.$store.state.settings.loading

2
src/views/settings/components/MediaProxy.vue
View file

@ -26,7 +26,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/Metadata.vue
View file

@ -30,7 +30,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/Other.vue
View file

@ -33,7 +33,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/RateLimiters.vue
View file

@ -32,7 +32,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.$store.state.settings.loading

2
src/views/settings/components/Upload.vue
View file

@ -44,7 +44,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/WebPush.vue
View file

@ -26,7 +26,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

4
src/views/settings/index.vue
View file

@ -63,7 +63,8 @@
<other/>
</el-tab-pane>
</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
v-for="item in options"
:key="item.value"
@ -92,6 +93,7 @@
<upload v-if="activeTab === 'upload'"/>
<other v-if="activeTab === 'other'"/>
</div>
</div>
</template>
<script>

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

@ -96,14 +96,14 @@
.icons-container {
display: flex;
}
.input-container {
display: flex;
align-items: start;
justify-content: space-between;
}
.keyword-inner-input {
margin-bottom: 22px;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.limit-button-container {
display: flex;
align-items: baseline;
@ -156,6 +156,9 @@
width: 47%;
margin: 0 1% 5px 0
}
.settings-delete-button {
margin-left: 5px;
}
.setting-input {
display: flex;
margin-bottom: 10px;
@ -202,9 +205,15 @@
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.input-container {
.el-form-item {
margin-right: 15px;
margin: 0 0 15px 0;
}
.settings-delete-button {
margin: 4px 7px 0 7px;
}
}
.el-input__inner {
padding: 0 5px 0 5px
}
@ -236,10 +245,6 @@
margin-left: 4px;
margin-right: 5px
}
.top-margin {
position: absolute;
top: 25%;
}
.value-input {
width: 60%;
margin-left: 5px;