forked from AkkomaGang/admin-fe
Merge branch 'feature/styles-for-tablet' into 'develop'
Add styles for tablets See merge request pleroma/admin-fe!93
This commit is contained in:
Angelina Filippova
commit
2ef5198684
30 changed files with 348 additions and 92 deletions
|
|
@ -10,7 +10,7 @@
|
|||
</el-tooltip>
|
||||
</div>
|
||||
<el-divider class="divider"/>
|
||||
<el-form label-width="180px" class="emoji-packs-form">
|
||||
<el-form :label-width="labelWidth" class="emoji-packs-form">
|
||||
<el-form-item :label="$t('emoji.localPacks')">
|
||||
<el-button type="primary" @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
|
||||
</el-form-item>
|
||||
|
|
@ -71,8 +71,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '240px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '240px'
|
||||
}
|
||||
},
|
||||
localPacks() {
|
||||
return this.$store.state.emojiPacks.localPacks
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import store from '@/store'
|
||||
|
||||
const { body } = document
|
||||
const WIDTH = 1024
|
||||
const RATIO = 3
|
||||
const mobileWidth = 480
|
||||
const tabletWidth = 801
|
||||
const ratio = 3
|
||||
|
||||
export default {
|
||||
watch: {
|
||||
|
|
@ -17,23 +18,31 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
const isMobile = this.isMobile()
|
||||
if (isMobile) {
|
||||
store.dispatch('toggleDevice', 'mobile')
|
||||
const isTablet = this.isTablet()
|
||||
if (isMobile || isTablet) {
|
||||
store.dispatch('toggleDevice', isMobile ? 'mobile' : 'tablet')
|
||||
store.dispatch('closeSideBar', { withoutAnimation: true })
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isMobile() {
|
||||
const rect = body.getBoundingClientRect()
|
||||
return rect.width - RATIO < WIDTH
|
||||
return rect.width - ratio < mobileWidth
|
||||
},
|
||||
isTablet() {
|
||||
const rect = body.getBoundingClientRect()
|
||||
return rect.width - ratio < tabletWidth && rect.width - ratio > mobileWidth
|
||||
},
|
||||
resizeHandler() {
|
||||
if (!document.hidden) {
|
||||
const isMobile = this.isMobile()
|
||||
store.dispatch('toggleDevice', isMobile ? 'mobile' : 'desktop')
|
||||
const isTablet = this.isTablet()
|
||||
|
||||
if (isMobile) {
|
||||
if (isMobile || isTablet) {
|
||||
store.dispatch('toggleDevice', isMobile ? 'mobile' : 'tablet')
|
||||
store.dispatch('closeSideBar', { withoutAnimation: true })
|
||||
} else {
|
||||
store.dispatch('toggleDevice', 'desktop')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,8 +35,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.$store.state.settings.loading
|
||||
|
|
|
|||
|
|
@ -43,8 +43,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
ldap() {
|
||||
return this.settings.description.find(setting => setting.key === ':ldap')
|
||||
|
|
|
|||
|
|
@ -31,8 +31,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -35,6 +35,9 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
kocaptcha() {
|
||||
return this.settings.description.find(setting => setting.key === 'Pleroma.Captcha.Kocaptcha')
|
||||
},
|
||||
|
|
@ -42,7 +45,13 @@ export default {
|
|||
return _.get(this.settings.settings, [':pleroma', 'Pleroma.Captcha.Kocaptcha']) || {}
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -31,8 +31,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -79,8 +79,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -31,8 +31,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -67,8 +67,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
:setting-parent="[...settingParent, subSetting]"
|
||||
:setting="subSetting"
|
||||
:data="data[setting.key]"
|
||||
:custom-label-width="isDesktop ? '120px' : '100px'"
|
||||
:custom-label-width="isMobile ? '100px' : '120px'"
|
||||
:label-class="subSetting.type === 'keyword' ? 'center-label' : ''"
|
||||
:margin="isDesktop ? margin + 15 : margin + 8"
|
||||
:nested="true"/>
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
<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"/>
|
||||
<!-------------------->
|
||||
<el-tooltip v-if="canBeDeleted && isMobile" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container">
|
||||
<el-tooltip v-if="canBeDeleted && (isMobile || isTablet)" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container">
|
||||
<el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
|
@ -210,8 +210,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
keywordData() {
|
||||
return Array.isArray(this.data) ? this.data : []
|
||||
|
|
|
|||
|
|
@ -65,8 +65,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -37,8 +37,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -49,8 +49,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -51,8 +51,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -40,8 +40,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.$store.state.settings.loading
|
||||
|
|
|
|||
|
|
@ -25,8 +25,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -29,8 +29,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -32,8 +32,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -31,8 +31,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.$store.state.settings.loading
|
||||
|
|
|
|||
|
|
@ -46,10 +46,10 @@
|
|||
</el-tooltip>
|
||||
</span>
|
||||
<span class="label-font">{{ setting.label }}</span>
|
||||
<el-tooltip v-if="canBeDeleted(setting.key) && (isMobile || isTablet)" :content="$t('settings.removeFromDB')" placement="bottom-end">
|
||||
<el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting(setting.key)"/>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-tooltip v-if="isMobile && canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
|
||||
<el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting(setting.key)"/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div v-for="subSetting in setting.children" :key="subSetting.key">
|
||||
<inputs
|
||||
|
|
@ -103,6 +103,9 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
loading() {
|
||||
return this.$store.state.settings.loading
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,8 +43,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -25,8 +25,17 @@ export default {
|
|||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
return this.isMobile ? '120px' : '280px'
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="editable-keyword-container">
|
||||
<div v-if="setting.key === ':replace'">
|
||||
<div v-for="element in data" :key="getId(element)" class="setting-input">
|
||||
<el-input :value="getKey(element)" placeholder="pattern" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-for="(icon, index) in data" :key="index" class="mascot-container">
|
||||
<div class="mascot-container">
|
||||
<div v-for="(icon, index) in data" :key="index" class="mascot">
|
||||
<div class="icons-container">
|
||||
<div class="icon-container">
|
||||
<div v-for="{ key, value, id } in icon" :key="id" class="icon-values-container">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-for="mascot in data" :key="getId(mascot)" class="mascot-container">
|
||||
<div class="mascot-container">
|
||||
<div v-for="mascot in data" :key="getId(mascot)" class="mascot">
|
||||
<el-form-item label="Name" label-width="85px" class="mascot-form-item">
|
||||
<div class="mascot-name-container">
|
||||
<el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="multiple-select-container">
|
||||
<el-select
|
||||
v-if="setting.key === ':backends'"
|
||||
:value="data.value"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
class="input"
|
||||
@change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
|
||||
<el-option value=":console" label="console"/>
|
||||
<el-option value=":ex_syslogger" label="ExSyslogger"/>
|
||||
|
|
@ -17,6 +18,7 @@
|
|||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
class="input"
|
||||
@change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
|
||||
<el-option value="strip" label="strip"/>
|
||||
<el-option value="auto-orient" label="auto-orient"/>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="rate-limit-container">
|
||||
<div v-if="!rateLimitAuthUsers">
|
||||
<el-input
|
||||
:value="rateLimitAllUsers[0]"
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div v-if="isMobile">
|
||||
<div v-if="isMobile || isTablet">
|
||||
<h1 class="settings-header">{{ $t('settings.settings') }}</h1>
|
||||
<div class="settings-header-container">
|
||||
<el-select v-model="activeTab" class="settings-menu" placeholder="Select">
|
||||
|
|
@ -216,6 +216,9 @@ export default {
|
|||
},
|
||||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
|
|
@ -224,44 +227,7 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style rel='stylesheet/scss' lang='scss' scoped>
|
||||
.settings-container {
|
||||
.el-tabs {
|
||||
margin-top: 20px
|
||||
}
|
||||
}
|
||||
.settings-docs-button {
|
||||
width: 163px;
|
||||
text-align: left;
|
||||
padding: 10px;
|
||||
}
|
||||
.settings-header {
|
||||
margin: 0;
|
||||
}
|
||||
.settings-header-container {
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 22px 30px 15px 15px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1824px) {
|
||||
.settings-container {
|
||||
max-width: 1824px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 760px),
|
||||
(min-device-width: 768px) and (max-device-width: 1024px) {
|
||||
.settings-header {
|
||||
margin: 7px 10px 15px 10px;
|
||||
}
|
||||
.settings-header-container {
|
||||
margin: 15px;
|
||||
}
|
||||
.settings-menu {
|
||||
width: 163px;
|
||||
}
|
||||
}
|
||||
<style rel='stylesheet/scss' lang='scss'>
|
||||
@import './styles/main';
|
||||
@include settings
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -40,6 +40,9 @@
|
|||
.divider.thick-line {
|
||||
height: 2px;
|
||||
}
|
||||
.editable-keyword-container {
|
||||
width: 100%;
|
||||
}
|
||||
.el-form-item .rate-limit {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
@ -153,9 +156,12 @@
|
|||
border: 1px solid #eee;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.mascot-container {
|
||||
.mascot {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.mascot-container {
|
||||
width: 100%;
|
||||
}
|
||||
.mascot-input {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
|
@ -166,6 +172,9 @@
|
|||
.mascot-name-input {
|
||||
margin-right: 10px
|
||||
}
|
||||
.multiple-select-container {
|
||||
width: 100%;
|
||||
}
|
||||
.name-input {
|
||||
width: 30%;
|
||||
margin-right: 8px
|
||||
|
|
@ -178,6 +187,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.proxy-url-host-input {
|
||||
width: 35%;
|
||||
|
|
@ -202,6 +212,9 @@
|
|||
display: flex;
|
||||
}
|
||||
}
|
||||
.rate-limit-container {
|
||||
width: 100%;
|
||||
}
|
||||
.rate-limit-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -214,7 +227,7 @@
|
|||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
|
||||
font-weight: 700;
|
||||
height: 36px;
|
||||
width: 240px;
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.relays-container {
|
||||
|
|
@ -229,13 +242,33 @@
|
|||
width: 47%;
|
||||
margin: 0 1% 5px 0
|
||||
}
|
||||
.settings-delete-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.setting-input {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.settings-container {
|
||||
.el-tabs {
|
||||
margin-top: 20px
|
||||
}
|
||||
}
|
||||
.settings-delete-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.settings-docs-button {
|
||||
width: 163px;
|
||||
text-align: left;
|
||||
padding: 10px;
|
||||
}
|
||||
.settings-header {
|
||||
margin: 0;
|
||||
}
|
||||
.settings-header-container {
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 22px 30px 15px 15px;
|
||||
}
|
||||
.single-input {
|
||||
margin-right: 10px
|
||||
}
|
||||
|
|
@ -285,6 +318,10 @@
|
|||
}
|
||||
|
||||
@media only screen and (min-width: 1824px) {
|
||||
.settings-container {
|
||||
max-width: 1824px;
|
||||
margin: auto;
|
||||
}
|
||||
.submit-button-container {
|
||||
max-width: 1637px;
|
||||
margin-left: auto;
|
||||
|
|
@ -293,8 +330,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 760px),
|
||||
(min-device-width: 768px) and (max-device-width: 1024px) {
|
||||
@media only screen and (max-width:480px) {
|
||||
.delete-setting-button {
|
||||
margin: 4px 0 0 5px;
|
||||
height: 28px;
|
||||
|
|
@ -345,7 +381,8 @@
|
|||
padding: 0;
|
||||
}
|
||||
.settings-delete-button {
|
||||
margin: 4px 15px 0 -5px;
|
||||
margin-top: 4px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.input-row {
|
||||
|
|
@ -353,7 +390,7 @@
|
|||
justify-content: space-between;
|
||||
}
|
||||
.limit-input {
|
||||
width: 40%;
|
||||
width: 45%;
|
||||
}
|
||||
.proxy-url-input {
|
||||
flex-direction: column;
|
||||
|
|
@ -381,12 +418,21 @@
|
|||
float: left;
|
||||
}
|
||||
.scale-input {
|
||||
width: 40%;
|
||||
width: 45%;
|
||||
}
|
||||
.setting-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.settings-header {
|
||||
margin: 7px 10px 15px 15px;
|
||||
}
|
||||
.settings-header-container {
|
||||
margin: 15px;
|
||||
}
|
||||
.settings-menu {
|
||||
width: 163px;
|
||||
}
|
||||
.socks5-checkbox-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -461,4 +507,45 @@
|
|||
margin-right: 8px
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width:801px) and (min-width: 481px) {
|
||||
.delete-setting-button {
|
||||
margin: 4px 0 0 10px;
|
||||
height: 28px;
|
||||
}
|
||||
.delete-setting-button-container {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.description > p {
|
||||
line-height: 18px;
|
||||
margin: 0 15px 10px 0;
|
||||
}
|
||||
.icon-minus-button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.input {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.input-container {
|
||||
.el-form-item__label {
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.rate-limit-label-container {
|
||||
width: 250px;
|
||||
}
|
||||
.settings-delete-button {
|
||||
float: right;
|
||||
}
|
||||
.settings-header {
|
||||
margin: 5px 0 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue