Add styles for tablet
This commit is contained in:
Angelina Filippova
parent
67e6fd2973
commit
5c914b7f36
8 changed files with 107 additions and 18 deletions
|
|
@ -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"/>
|
||||
|
|
|
|||
|
|
@ -46,10 +46,10 @@
|
|||
</el-tooltip>
|
||||
</span>
|
||||
<span class="label-font">{{ setting.label }}</span>
|
||||
</el-form-item>
|
||||
<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>
|
||||
</div>
|
||||
<div v-for="subSetting in setting.children" :key="subSetting.key">
|
||||
<inputs
|
||||
|
|
|
|||
|
|
@ -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]"
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -387,6 +424,15 @@
|
|||
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