Merge pull request #5544 from zhoumeina/pr/refine_chart_detail_layout

Fix some layout issue in chart detail page
goharbor · Aug 7, 2018 · 72ffa48 · 72ffa48
2 parents 1f39bb4 + 207cf38
commit 72ffa48
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 33 deletions.
diff --git a/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.html b/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.html
@@ -3,12 +3,11 @@
         <p>{{summary.description}}</p>
     </div>
 </div>
-<div class="row">
+<div class="row content-wrapper">
     <div class="col-md-8 md-container">
         <div *ngIf="readme" class="md-div" [innerHTML]="readme | markdown"></div>
         <div *ngIf="!readme">{{'HELM_CHART.NO_README' | translate}}</div>
     </div>
-
     <div class="col-md-4 summary-container">
         <div class="col-md-12 content-group">
             <div>

diff --git a/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.scss b/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail-summary.component.scss
@@ -1,26 +1,28 @@
-.md-container {
-    margin-top: 15px;
-    border: solid 1px #DDDDDD;
-    padding: 3px;
-}
+.content-wrapper {
+    margin-top:20px;
+    padding: 0 0 0 15px;
 
-.summary-container {
-    margin-top: 15px;
-
-    table {
-        background-color: #F2F2F2;
-        margin-top: 0.5rem;
-    }
-
-    .content-group {
-        margin-bottom: 30px;
+    .md-container {
+        border: solid 1px #ddd;
     }
 
-    .content-icon {
-        margin-right: 6px;
-    }
-
-    .text-wrapper {
-        word-break: break-all;
+    .summary-container {
+        padding:0;
+        table {
+            background-color: #F2F2F2;
+            margin-top: 0.5rem;
+        }
+
+        .content-group {
+            margin-bottom: 30px;
+        }
+
+        .content-icon {
+            margin-right: 6px;
+        }
+
+        .text-wrapper {
+            word-break: break-all;
+        }
     }
 }
diff --git a/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail.component.html b/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail.component.html
@@ -1,16 +1,14 @@
 <div>
-    <div class="row flex-items-xs-between">
-        <div class="col-xs-4">
-            <div class="title-container">
-                <div class="chart-name">
-                    {{chartNameWithVersion | translate}}
-                </div>
-                <div>
-                    {{roleName | translate}}
-                </div>
+    <div class="flex-container">
+        <div class="title-container">
+            <div class="chart-name">
+                {{chartNameWithVersion | translate}}
+            </div>
+            <div>
+                {{roleName | translate}}
             </div>
         </div>
-        <div class="col-xs-1">
+        <div>
             <button class="btn btn-sm btn-secondary"
             (click)="downloadChart()">{{'HELM_CHART.DOWNLOAD' | translate}}</button>
         </div>

diff --git a/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail.component.scss b/src/ui_ng/lib/src/helm-chart/chart-detail/chart-detail.component.scss
@@ -13,4 +13,15 @@
 
 .detail-loading {
     @include absolute-center;
+}
+
+.flex-container {
+    display: flex;
+    -webkit-display:flex;
+    justify-content: space-between;
+
+    .title-container {
+        display: flex;
+        align-items:center;
+    }
 }