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.
This commit is contained in:
Mia ZHOU 2018-07-31 10:51:42 +08:00
parent 4dadff070b
commit 1af3bcd93d
3 changed files with 26 additions and 7 deletions

View File

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

View File

@ -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>

View File

@ -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;