Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2025-02-27 17:21:58 +01:00
Code Issues Projects Releases Wiki Activity

Fix some layout issue in chart detail page

Browse Source 
Refine the layout in chart detail page.
This commit is contained in:
Mia ZHOU 2018-08-07 12:25:37 +08:00
parent 8c6df84b86
commit 207cf384af
4 changed files with 43 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.html
View File

@ -3,12 +3,11 @@
<p>{{summary.description}}</p> <p>{{summary.description}}</p>
</div> </div>
</div> </div>
<div class="row"> <div class="row content-wrapper">
<div class="col-md-8 md-container"> <div class="col-md-8 md-container">
<div *ngIf="readme" class="md-div" [innerHTML]="readme | markdown"></div> <div *ngIf="readme" class="md-div" [innerHTML]="readme | markdown"></div>
<div *ngIf="!readme">{{'HELM_CHART.NO_README' | translate}}</div> <div *ngIf="!readme">{{'HELM_CHART.NO_README' | translate}}</div>
</div> </div>
<div class="col-md-4 summary-container"> <div class="col-md-4 summary-container">
<div class="col-md-12 content-group"> <div class="col-md-12 content-group">
<div> <div>

12
src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.scss
View File

@ -1,12 +1,13 @@
.content-wrapper {
margin-top:20px;
padding: 0 0 0 15px;
.md-container { .md-container {
margin-top: 15px; border: solid 1px #ddd;
border: solid 1px #DDDDDD;
padding: 3px;
} }
.summary-container { .summary-container {
margin-top: 15px; padding:0;
table { table {
background-color: #F2F2F2; background-color: #F2F2F2;
margin-top: 0.5rem; margin-top: 0.5rem;
@ -24,3 +25,4 @@
word-break: break-all; word-break: break-all;
} }
} }
}

6
src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail.component.html
View File

@ -1,6 +1,5 @@
<div> <div>
<div class="row flex-items-xs-between"> <div class="flex-container">
<div class="col-xs-4">
<div class="title-container"> <div class="title-container">
<div class="chart-name"> <div class="chart-name">
{{chartNameWithVersion | translate}} {{chartNameWithVersion | translate}}
@ -9,8 +8,7 @@
{{roleName | translate}} {{roleName | translate}}
</div> </div>
</div> </div>
</div> <div>
<div class="col-xs-1">
<button class="btn btn-sm btn-secondary" <button class="btn btn-sm btn-secondary"
(click)="downloadChart()">{{'HELM_CHART.DOWNLOAD' | translate}}</button> (click)="downloadChart()">{{'HELM_CHART.DOWNLOAD' | translate}}</button>
</div> </div>

11
src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail.component.scss
View File

@ -14,3 +14,14 @@
.detail-loading { .detail-loading {
@include absolute-center; @include absolute-center;
} }
.flex-container {
display: flex;
-webkit-display:flex;
justify-content: space-between;
.title-container {
display: flex;
align-items:center;
}
}