Refine helm chart card view

Changes including:

1 chart list view will have icon which from the latest version.

2 Card View will change to the option2 (large icon).

3 version list will also have icons inside the data grid.

src/ui_ng/lib/src/helm-chart/helm-chart.component.html

@@ -51,24 +51,19 @@
         </div>
     </div>
     <div *ngIf="isCardView" class="row card-container">
-        <div *ngFor="let item of charts;" class="col-lg-3 col-md-4 col-sm-6">
+        <div *ngFor="let item of charts;" class="col-lg-2 col-md-5 col-sm-5 col-xs-6">
             <a let i=index; class="card clickable" (click)="onChartClick(item)">
                 <div class="card-header">
-                    <div class="card-media-block wrap">
-                        <div class="card-media-description">
-                            <span class="card-media-title">{{item.name}}</span>
-                            <p class="card-media-text">{{item.home}}</p>
-                        </div>
+                    <div class="card-icon">
+                        <img  class="size-60" [src]="item.icon ?item.icon:chartDefaultIcon"  (error)="getDefaultIcon(item);" />
                     </div>
+                    <div class="card-title">{{item.name}}</div>
                 </div>
-                <div class="card-block">
+                <div class="card-footer">
                     <div class="form-group">
-                        <label>{{'HELM_CHART.VERSIONS' | translate}}</label>
-                        <div>{{item.total_versions}}</div>
-                    </div>
-                    <div class="form-group">
-                            <label>{{'HELM_CHART.CREATED' | translate}}</label>
-                            <div>{{item.Created | date}}</div>
+                        <span class="version-text">{{item.total_versions}}</span>
+                        <label *ngIf="item.total_versions !== 1">{{'HELM_CHART.CHARTVERSIONS' | translate}}</label>
+                        <label *ngIf="item.total_versions === 1">{{'HELM_CHART.VERSION' | translate}}</label>
                     </div>
                 </div>
             </a>

src/ui_ng/lib/src/helm-chart/helm-chart.component.scss

@@ -1,6 +1,12 @@
 @import "../mixin";
-$width:24px;
-$height:$width;
+$size24:24px;
+$size60:60px;
+
+@mixin flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 .chart-tool {
     position: relative;
     .toolbar {
@@ -11,7 +17,7 @@ $height:$width;
                 display: inline-block;
                 height: 16px;
                 width: 2px;
-                background-color: #cccccc;
+                background-color: #ccc;
                 padding-top: 12px;
                 padding-bottom: 12px;
                 position: relative;
@@ -26,32 +32,20 @@ $height:$width;
 .card-container {
     margin-top: 21px;
     .card-header {
-        .card-media-block {
-            .card-media-description {
-                height: 45px;
-                p {
-                    margin-top: 0;
-                }
-                .card-media-title {
-                    overflow: hidden;
-                    height: 24px;
-                }
-                .card-media-text {
-                    overflow: hidden;
-                    height: 21px
-                }
-            }
+        .card-icon {
+           @include flex-center;
+        }
+        .card-title {
+           @include text-overflow;
+           text-align:center;
+           margin:15px;
         }
     }
-    .card-block {
-        margin-top: 24px;
-        min-height: 100px;
-        .form-group {
-            display: flex;
-            label {
-                width: 100px;
-            }
-        }
+    .card-footer {
+        background-color:#d7d7d7;
+         .version-text {
+             font-size:1.1rem;
+         }
     }
 }
 
@@ -62,8 +56,13 @@ $height:$width;
 }
 
 .size-24 {
-    width:$width;
-    height:$height;
+    width:$size24;
+    height:$size24;
+}
+
+.size-60 {
+    height:$size60;
+    max-width:165px;
 }
 
 .margin-right-12 {

src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html

@@ -82,21 +82,21 @@
                         <img [src]="getImgLink(item)"/>
                         <div class="card-media-description">
                             <span class="card-media-title">{{item.name}}</span>
-                            <p class="card-media-text">{{item.home}}</p>
+                            <a class="card-media-text">{{item.home}}</a>
                         </div>
                     </div>
                 </div>
                 <div class="card-block">
                     <div class="form-group">
-                        <label>{{'HELM_CHART.ENGINE' | translate}}</label>
+                        <label class="card-label">{{'HELM_CHART.ENGINE' | translate}}</label>
                         <div>{{item.engine}}</div>
                     </div>
                     <div class="form-group">
-                        <label>{{'HELM_CHART.MAINTAINERS' | translate}}</label>
+                        <label class="card-label">{{'HELM_CHART.MAINTAINERS' | translate}}</label>
                         <div>{{getMaintainerString(item.maintainers)}}</div>
                     </div>
                     <div class="form-group">
-                        <label>{{'HELM_CHART.VERSION' | translate}}</label>
+                        <label class="card-label">{{'HELM_CHART.VERSION' | translate}}</label>
                         <div>{{item.appVersion}}</div>
                     </div>
                 </div>

src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.scss

@@ -42,28 +42,30 @@
                 width: 45px;
             }
             .card-media-description {
+                width:80%;
                 height: 45px;
-                p {
-                    margin-top: 0;
-                }
                 .card-media-title {
                     overflow: hidden;
                     height: 24px;
                 }
                 .card-media-text {
-                    overflow: hidden;
-                    height: 21px
+                    font-size:0.8em;
+                    color:#007cbb;
+                    @include text-overflow;
+                    height: 20px;
                 }
             }
         }
     }
     .card-block {
+        font-size:0.9em;
         margin-top: 24px;
         min-height: 100px;
         .form-group {
             display: flex;
             label {
                 width: 100px;
+                color:#aaa;
             }
         }
         margin-top: 0px;

src/ui_ng/lib/src/shared/shared.const.ts

@@ -91,4 +91,4 @@ export const LabelColor = [
 
 export const RoleMapping = { 'projectAdmin': 'MEMBER.PROJECT_ADMIN', 'developer': 'MEMBER.DEVELOPER', 'guest': 'MEMBER.GUEST' };
 
-export const DefaultHelmIcon = '/static/images/helm-logo.svg';
+export const DefaultHelmIcon = '/static/images/helm-gray.png';