sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add styles for tablet

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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"/>

6
src/views/settings/components/Setting.vue
View file

@ -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="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 v-for="subSetting in setting.children" :key="subSetting.key">
<inputs

2
src/views/settings/components/inputComponents/EditableKeywordInput.vue
View file

@ -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)"/> :

4
src/views/settings/components/inputComponents/IconsInput.vue
View file

@ -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">

4
src/views/settings/components/inputComponents/MascotsInput.vue
View file

@ -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)"/>

4
src/views/settings/components/inputComponents/MultipleSelect.vue
View file

@ -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"/>

2
src/views/settings/components/inputComponents/RateLimitInput.vue
View file

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

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

@ -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;
}
}
}