Improve style for add replication rule component (#15632)

Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
孙世军 2021-09-23 15:10:59 +08:00 committed by GitHub
parent ce1cb0cb88
commit 37cd3ce98c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 12 deletions

View File

@ -34,7 +34,7 @@ http {
add_header Cache-Control "no-store, no-cache, must-revalidate";
}
location ~ /(api|c)/* {
location ~ /(api|c|chartrepo)/* {
proxy_pass https://example.com;
}
}

View File

@ -243,12 +243,6 @@
<!--speed-->
<div class="clr-form-control">
<label for="speed" class="required clr-control-label">{{'REPLICATION.BANDWIDTH' | translate}}
<clr-tooltip>
<clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
<clr-tooltip-content clrPosition="top-right" clrSize="lg" *clrIfOpen>
<span>{{'REPLICATION.BANDWIDTH_TOOLTIP' | translate}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
<div class="clr-control-container" [class.clr-error]="(ruleForm.controls.speed.invalid && (ruleForm.controls.speed.dirty || ruleForm.controls.speed.touched))">
<div class="clr-checkbox-wrapper speed">
@ -256,10 +250,16 @@
formControlName="speed" autocomplete="off" required pattern="(^-1$)|(^([1-9]+)([0-9]+)*$)" maxlength="5">
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
</div>
<div class="clr-select-wrapper" [class.unit]="(ruleForm.controls.speed.invalid && (ruleForm.controls.speed.dirty || ruleForm.controls.speed.touched))">
<select class="clr-select" [ngModelOptions]="{standalone: true}" id="speed_unit" name="speed_unit" [(ngModel)]="selectedUnit">
<div class="clr-select-wrapper unit-select" [class.unit]="(ruleForm.controls.speed.invalid && (ruleForm.controls.speed.dirty || ruleForm.controls.speed.touched))">
<select class="clr-select unit-select" [ngModelOptions]="{standalone: true}" id="speed_unit" name="speed_unit" [(ngModel)]="selectedUnit">
<option *ngFor="let unit of speedUnits" [value]="unit.UNIT">{{ unit.UNIT }}</option>
</select>
<clr-tooltip class="ml-10px">
<clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
<clr-tooltip-content clrPosition="top-left" clrSize="lg" *clrIfOpen>
<span>{{'REPLICATION.BANDWIDTH_TOOLTIP' | translate}}</span>
</clr-tooltip-content>
</clr-tooltip>
</div>
<clr-control-error *ngIf="(ruleForm.controls.speed.invalid && (ruleForm.controls.speed.dirty || ruleForm.controls.speed.touched))"
class="tooltip-content">

View File

@ -268,12 +268,19 @@ clr-modal {
transform: translateX(-4.3rem) translateY(1.25rem)!important;
}
.unit {
width: 4rem;
width: 4.18rem !important;
}
.speed {
width: 14.4rem;
width: 14rem;
display: inline-block;
input {
width: 12rem;
}
}
.unit-select {
width: 3rem;
}
.ml-10px {
margin-left: 10px;
}

View File

@ -11,7 +11,7 @@
<div *ngIf="!customIntroduction">
<p class="p5">{{'ABOUT.COPYRIGHT' | translate}}</p>
<p class="p5">
<a href="/license" target="_blank">{{'ABOUT.OPEN_SOURCE_LICENSE' | translate}}</a>
<a routerLink="/license" target="_blank">{{'ABOUT.OPEN_SOURCE_LICENSE' | translate}}</a>
</p>
</div>
<div *ngIf="customIntroduction">