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

Update styles for Rate limit inputs

Browse source
This commit is contained in:
Angelina Filippova 2020-02-13 19:18:25 +03:00
parent e321c15da5
commit fc3d1627be
3 changed files with 84 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,7 @@
</el-tooltip>
</span>
</el-form-item>
<el-form-item v-for="subSetting in setting.children" :key="subSetting.key" class="settings-input has-nested">
<el-form-item v-for="subSetting in setting.children" :key="subSetting.key" class="settings-input">
<inputs
:setting-group="settingGroup"
:setting-parent="[...settingParent, subSetting]"

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

@ -18,31 +18,49 @@
</div>
</div>
<div v-if="rateLimitAuthUsers">
<el-form-item label="Unauthenticated users:" label-width="180px" class="rate-limit settings-input">
<el-input
:value="rateLimitUnauthUsers[0]"
placeholder="scale"
class="scale-input"
@input="parseRateLimiter($event, setting.key, 'scale', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
<span>:</span>
<el-input
:value="rateLimitUnauthUsers[1]"
placeholder="limit"
class="limit-input"
@input="parseRateLimiter($event, setting.key, 'limit', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
<el-form-item class="rate-limit settings-input">
<div class="rate-limit-label-container">
<span class="rate-limit-label">
Unauthenticated users:
</span>
</div>
<div class="rate-limit-content">
<el-input
:value="rateLimitUnauthUsers[0]"
placeholder="scale"
class="scale-input"
@input="parseRateLimiter(
$event, setting.key, 'scale', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers]
)"/>
<span>:</span>
<el-input
:value="rateLimitUnauthUsers[1]"
placeholder="limit"
class="limit-input"
@input="parseRateLimiter(
$event, setting.key, 'limit', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers]
)"/>
</div>
</el-form-item>
<el-form-item label="Authenticated users:" label-width="180px" class="rate-limit settings-input">
<el-input
:value="rateLimitAuthUsers[0]"
placeholder="scale"
class="scale-input"
@input="parseRateLimiter($event, setting.key, 'scale', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
<span>:</span>
<el-input
:value="rateLimitAuthUsers[1]"
placeholder="limit"
class="limit-input"
@input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
<el-form-item class="rate-limit settings-input">
<div class="rate-limit-label-container">
<span class="rate-limit-label">
Authenticated users:
</span>
</div>
<div class="rate-limit-content">
<el-input
:value="rateLimitAuthUsers[0]"
placeholder="scale"
class="scale-input"
@input="parseRateLimiter($event, setting.key, 'scale', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
<span>:</span>
<el-input
:value="rateLimitAuthUsers[1]"
placeholder="limit"
class="limit-input"
@input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
</div>
</el-form-item>
<div class="limit-button-container">
<el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>

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

@ -47,6 +47,8 @@
line-height: 22px;
margin: 5px 0 0 0;
overflow-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
code {
display: inline;
line-height: 22px;
@ -168,6 +170,27 @@
margin-left: 8px;
margin-right: 10px
}
.rate-limit {
.el-form-item__content {
width: 100%;
display: flex;
}
}
.rate-limit-content {
width: 100%;
}
.rate-limit-label {
float: right;
}
.rate-limit-label-container {
font-size: 14px;
color: #606266;
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
font-weight: 700;
height: 36px;
width: 240px;
margin-right: 10px;
}
.relays-container {
margin: 0 15px;
}
@ -270,12 +293,16 @@
.input-container {
width: 100%;
.el-form-item {
margin-right: 15px;
margin: 0;
padding: 0 15px 10px 0;
}
.settings-delete-button {
margin: 4px 7px 0 -5px;
}
}
.limit-input {
width: 46%;
}
.proxy-url-input {
flex-direction: column;
align-items: flex-start;
@ -289,6 +316,17 @@
width: 100%;
margin-left: 0;
}
.rate-limit {
.el-form-item__content {
flex-direction: column;
}
}
.rate-limit-label {
float: left;
}
.scale-input {
width: 46%;
}
.setting-label {
display: flex;
justify-content: space-between;
@ -296,7 +334,8 @@
.settings-input {
display: inline-block;
width: 90%;
margin: 0 0 10px 0;
padding: 0 15px 10px 0;
margin: 0;
}
.socks5-checkbox-container {
width: 100%;