Add styles for tablet

This commit is contained in:
Angelina Filippova 2020-02-18 01:19:54 +03:00
parent 67e6fd2973
commit 5c914b7f36
8 changed files with 107 additions and 18 deletions

View file

@ -15,7 +15,7 @@
:setting-parent="[...settingParent, subSetting]" :setting-parent="[...settingParent, subSetting]"
:setting="subSetting" :setting="subSetting"
:data="data[setting.key]" :data="data[setting.key]"
:custom-label-width="isDesktop ? '120px' : '100px'" :custom-label-width="isMobile ? '100px' : '120px'"
:label-class="subSetting.type === 'keyword' ? 'center-label' : ''" :label-class="subSetting.type === 'keyword' ? 'center-label' : ''"
:margin="isDesktop ? margin + 15 : margin + 8" :margin="isDesktop ? margin + 15 : margin + 8"
:nested="true"/> :nested="true"/>

View file

@ -46,10 +46,10 @@
</el-tooltip> </el-tooltip>
</span> </span>
<span class="label-font">{{ setting.label }}</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-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>
</div> </div>
<div v-for="subSetting in setting.children" :key="subSetting.key"> <div v-for="subSetting in setting.children" :key="subSetting.key">
<inputs <inputs

View file

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="editable-keyword-container">
<div v-if="setting.key === ':replace'"> <div v-if="setting.key === ':replace'">
<div v-for="element in data" :key="getId(element)" class="setting-input"> <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)"/> : <el-input :value="getKey(element)" placeholder="pattern" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :

View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div class="mascot-container">
<div v-for="(icon, index) in data" :key="index" class="mascot-container"> <div v-for="(icon, index) in data" :key="index" class="mascot">
<div class="icons-container"> <div class="icons-container">
<div class="icon-container"> <div class="icon-container">
<div v-for="{ key, value, id } in icon" :key="id" class="icon-values-container"> <div v-for="{ key, value, id } in icon" :key="id" class="icon-values-container">

View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div class="mascot-container">
<div v-for="mascot in data" :key="getId(mascot)" 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"> <el-form-item label="Name" label-width="85px" class="mascot-form-item">
<div class="mascot-name-container"> <div class="mascot-name-container">
<el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/> <el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/>

View file

@ -1,11 +1,12 @@
<template> <template>
<div> <div class="multiple-select-container">
<el-select <el-select
v-if="setting.key === ':backends'" v-if="setting.key === ':backends'"
:value="data.value" :value="data.value"
multiple multiple
filterable filterable
allow-create allow-create
class="input"
@change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)"> @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
<el-option value=":console" label="console"/> <el-option value=":console" label="console"/>
<el-option value=":ex_syslogger" label="ExSyslogger"/> <el-option value=":ex_syslogger" label="ExSyslogger"/>
@ -17,6 +18,7 @@
multiple multiple
filterable filterable
allow-create allow-create
class="input"
@change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)"> @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
<el-option value="strip" label="strip"/> <el-option value="strip" label="strip"/>
<el-option value="auto-orient" label="auto-orient"/> <el-option value="auto-orient" label="auto-orient"/>

View file

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="rate-limit-container">
<div v-if="!rateLimitAuthUsers"> <div v-if="!rateLimitAuthUsers">
<el-input <el-input
:value="rateLimitAllUsers[0]" :value="rateLimitAllUsers[0]"

View file

@ -40,6 +40,9 @@
.divider.thick-line { .divider.thick-line {
height: 2px; height: 2px;
} }
.editable-keyword-container {
width: 100%;
}
.el-form-item .rate-limit { .el-form-item .rate-limit {
margin-right: 0; margin-right: 0;
} }
@ -153,9 +156,12 @@
border: 1px solid #eee; border: 1px solid #eee;
margin-bottom: 18px; margin-bottom: 18px;
} }
.mascot-container { .mascot {
margin-bottom: 15px; margin-bottom: 15px;
} }
.mascot-container {
width: 100%;
}
.mascot-input { .mascot-input {
margin-bottom: 7px; margin-bottom: 7px;
} }
@ -166,6 +172,9 @@
.mascot-name-input { .mascot-name-input {
margin-right: 10px margin-right: 10px
} }
.multiple-select-container {
width: 100%;
}
.name-input { .name-input {
width: 30%; width: 30%;
margin-right: 8px margin-right: 8px
@ -178,6 +187,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
width: 100%;
} }
.proxy-url-host-input { .proxy-url-host-input {
width: 35%; width: 35%;
@ -202,6 +212,9 @@
display: flex; display: flex;
} }
} }
.rate-limit-container {
width: 100%;
}
.rate-limit-content { .rate-limit-content {
width: 100%; width: 100%;
} }
@ -229,13 +242,33 @@
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;
} }
.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 { .single-input {
margin-right: 10px margin-right: 10px
} }
@ -285,6 +318,10 @@
} }
@media only screen and (min-width: 1824px) { @media only screen and (min-width: 1824px) {
.settings-container {
max-width: 1824px;
margin: auto;
}
.submit-button-container { .submit-button-container {
max-width: 1637px; max-width: 1637px;
margin-left: auto; margin-left: auto;
@ -293,8 +330,7 @@
} }
} }
@media only screen and (max-width: 760px), @media only screen and (max-width:480px) {
(min-device-width: 768px) and (max-device-width: 1024px) {
.delete-setting-button { .delete-setting-button {
margin: 4px 0 0 5px; margin: 4px 0 0 5px;
height: 28px; height: 28px;
@ -345,7 +381,8 @@
padding: 0; padding: 0;
} }
.settings-delete-button { .settings-delete-button {
margin: 4px 15px 0 -5px; margin-top: 4px;
float: right;
} }
} }
.input-row { .input-row {
@ -387,6 +424,15 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.settings-header {
margin: 7px 10px 15px 15px;
}
.settings-header-container {
margin: 15px;
}
.settings-menu {
width: 163px;
}
.socks5-checkbox-container { .socks5-checkbox-container {
width: 100%; width: 100%;
} }
@ -461,4 +507,45 @@
margin-right: 8px 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;
}
}
} }