Merge pull request #5437 from zhoumeina/pr/fix_cardview_title

Fix Repositories card view title displayed wrong

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;
+}

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>

src/ui_ng/lib/src/repository-gridview/repository-gridview.component.scss

@@ -1,8 +1,7 @@
+@import '../mixin';
+
 .rightPos{
-    position: absolute;
+    @include grid-left-top-pos;
-    z-index: 100;
-    right: 35px;
-    margin-top: 4px;
 }
 
 .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;