mirror of
https://github.com/goharbor/harbor.git
synced 2024-09-28 05:18:01 +02:00
Fix spiner related issue on helmchart ui
1. Fix spinner size on upload modal 2. Make the spinner into the center when chart detail page is loading
This commit is contained in:
parent
9bcf33212d
commit
0e8e3304ab
@ -15,11 +15,9 @@
|
|||||||
(click)="downloadChart()">{{'HELM_CHART.DOWNLOAD' | translate}}</button>
|
(click)="downloadChart()">{{'HELM_CHART.DOWNLOAD' | translate}}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-loading" *ngIf="loading">
|
<span *ngIf="loading" class="spinner spinner-lg detail-loading">
|
||||||
<span class="spinner">
|
Loading...
|
||||||
Loading...
|
</span>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="!loading && isChartExist">
|
<div *ngIf="!loading && isChartExist">
|
||||||
<clr-tabs>
|
<clr-tabs>
|
||||||
<clr-tab>
|
<clr-tab>
|
||||||
|
@ -13,8 +13,9 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right:0;
|
right: 0;
|
||||||
bottom:0;
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
width: 108px !important;
|
width: 108px !important;
|
||||||
height: 108px !important;
|
height: 108px !important;
|
||||||
}
|
}
|
@ -69,9 +69,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="loading" [ngClass]="{'central-block-loading': isFirstPage, 'central-block-loading-more': !isFirstPage}">
|
<div *ngIf="loading">
|
||||||
<span class="vertical-helper"></span>
|
<span class="vertical-helper"></span>
|
||||||
<div class="spinner"></div>
|
<span class="spinner"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true">
|
<clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true">
|
||||||
@ -89,11 +89,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<button type="submit" class="btn btn-secondary" [disabled]="isUploading">
|
<button type="submit" class="btn btn-secondary" [disabled]="isUploading">
|
||||||
<span *ngIf="!isUploading">{{'HELM_CHART.UPLOAD' | translate}}</span>
|
<span>{{'HELM_CHART.UPLOAD' | translate}}</span>
|
||||||
<span *ngIf="isUploading" class="spinner spinner-inline">
|
|
||||||
Loading...
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
|
<span *ngIf="isUploading" class="spinner spinner-inline">
|
||||||
|
Loading...
|
||||||
|
</span>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</clr-modal>
|
</clr-modal>
|
||||||
|
@ -60,9 +60,3 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinner {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
@ -106,9 +106,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="loading" [ngClass]="{'central-block-loading': isFirstPage, 'central-block-loading-more': !isFirstPage}">
|
<div *ngIf="loading">
|
||||||
<span class="vertical-helper"></span>
|
<span class="vertical-helper"></span>
|
||||||
<div class="spinner"></div>
|
<span class="spinner"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true">
|
<clr-modal [(clrModalOpen)]="isUploadModalOpen" [clrModalStaticBackdrop]="true">
|
||||||
@ -126,11 +126,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<button type="submit" class="btn btn-secondary" [disabled]="isUploading">
|
<button type="submit" class="btn btn-secondary" [disabled]="isUploading">
|
||||||
<span *ngIf="!isUploading">{{'HELM_CHART.UPLOAD' | translate}}</span>
|
<span>{{'HELM_CHART.UPLOAD' | translate}}</span>
|
||||||
<span *ngIf="isUploading" class="spinner spinner-inline">
|
|
||||||
Loading...
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
|
<span *ngIf="isUploading" class="spinner spinner-inline">
|
||||||
|
Loading...
|
||||||
|
</span>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</clr-modal>
|
</clr-modal>
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
@import "../../mixin";
|
||||||
|
|
||||||
.title-container {
|
.title-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
.chart-name-span {
|
.chart-name-span {
|
||||||
@ -14,10 +16,7 @@
|
|||||||
.toolbar {
|
.toolbar {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.rightPos {
|
.rightPos {
|
||||||
position: absolute;
|
@include grid-left-top-pos;
|
||||||
z-index: 100;
|
|
||||||
right: 35px;
|
|
||||||
margin-top: 4px;
|
|
||||||
.filter-divider {
|
.filter-divider {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
@ -88,9 +87,3 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinner {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user