From 1af3bcd93def6fc80208e9a0fa7b57b90d1d5592 Mon Sep 17 00:00:00 2001
From: Mia ZHOU <meinaz@vmware.com>
Date: Tue, 31 Jul 2018 10:51:42 +0800
Subject: [PATCH] Fix Repositories card view title displayed wrong

Problem Description:

In the card view of repositories, if the title is long, it can not show all the text.

Fix:

Add css

    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap:break-word;
    white-space: nowrap

in mixin files, and tooltip to show all the text.
---
 src/ui_ng/lib/src/_mixin.scss                 | 20 +++++++++++++++++++
 .../repository-gridview.component.html        |  2 +-
 .../repository-gridview.component.scss        | 11 +++++-----
 3 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 src/ui_ng/lib/src/_mixin.scss

diff --git a/src/ui_ng/lib/src/_mixin.scss b/src/ui_ng/lib/src/_mixin.scss
new file mode 100644
index 000000000..9d09c26c2
--- /dev/null
+++ b/src/ui_ng/lib/src/_mixin.scss
@@ -0,0 +1,20 @@
+@mixin text-overflow 
+{ 
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-wrap:break-word;
+    white-space: nowrap
+}
+
+
+@mixin text-overflow-param($width) { 
+    width: $width; 
+    @include text-overflow;
+}
+
+@mixin grid-left-top-pos{
+    position: absolute;
+    z-index: 100;
+    right: 35px;
+    margin-top: 4px;
+}
\ No newline at end of file
diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html
index 2a1d33a9c..d560ee176 100644
--- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html
+++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html
@@ -55,7 +55,7 @@
                     <div [ngClass]="{'card-media-block': true, 'wrap': !withAdmiral }">
                         <img *ngIf="withAdmiral" [src]="getImgLink(item)"/>
                         <div class="card-media-description">
-                            <span class="card-media-title">{{item.name}}</span>
+                            <span class="card-media-title" [title]="item.name">{{item.name}}</span>
                             <p class="card-media-text">{{registryUrl}}</p>
                         </div>
                     </div>
diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.scss b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.scss
index aa1f51b2b..07aeccd3b 100644
--- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.scss
+++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.scss
@@ -1,8 +1,7 @@
+@import '../mixin';
+
 .rightPos{
-    position: absolute;
-    z-index: 100;
-    right: 35px;
-    margin-top: 4px;
+    @include grid-left-top-pos;
 }
 
 .toolbar {
@@ -13,7 +12,7 @@
     display: inline-block;
     height: 16px;
     width: 2px;
-    background-color: #cccccc;
+    background-color: #ccc;
     padding-top: 12px;
     padding-bottom: 12px;
     position: relative;
@@ -41,8 +40,8 @@
 }
 
 .card-media-title {
-    overflow: hidden;
     height: 24px;
+    @include text-overflow;
 }
 .card-media-text {
     overflow: hidden;