MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Ticket: -Dataset Template chip should be one line (no wrap) with a fixed width. In hover the full text should be displayed.

This commit is contained in:
apapachristou 2019-05-14 13:17:33 +03:00
parent 55dd9800e9
commit c8844fba08
7 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
View File

@ -32,7 +32,7 @@
<mat-icon class="gray-icon pt-2">assignment</mat-icon> <mat-icon class="gray-icon pt-2">assignment</mat-icon>
<div class="pt-1"> <div class="pt-1">
<div class="chip ml-2 mr-2">{{ dataset.profile }}</div> <div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
</div> </div>
</div> </div>
</div> </div>

1
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
View File

@ -29,6 +29,7 @@ h4 {
.about-item { .about-item {
display: flex; display: flex;
flex-wrap: wrap;
} }
.about-item .length { .about-item .length {

2
dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
View File

@ -45,7 +45,7 @@
<mat-icon class="gray-icon pt-2">assignment</mat-icon> <mat-icon class="gray-icon pt-2">assignment</mat-icon>
<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1"> <div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
<div class="chip ml-2 mr-2">{{profile.label}}</div> <div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
</div> </div>
<p>Published {{dmp.creationTime | date: "shortDate"}}</p> <p>Published {{dmp.creationTime | date: "shortDate"}}</p>
</div> </div>

1
dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
View File

@ -12,6 +12,7 @@
.about-item { .about-item {
display: flex; display: flex;
flex-wrap: wrap;
} }
.about-item .length { .about-item .length {

4
dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
View File

@ -2,7 +2,7 @@
<div class="col" (click)="itemClicked()"> <div class="col" (click)="itemClicked()">
<div class="row"> <div class="row">
<div class="col-12 gray-container container-header"> <div class="col-12 gray-container container-header">
{{dmp.projectabbreviation}} {{dmp.projectAbbreviation}}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -26,7 +26,7 @@
<mat-icon class="gray-icon pt-2">assignment</mat-icon> <mat-icon class="gray-icon pt-2">assignment</mat-icon>
<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1"> <div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
<div class="chip ml-2 mr-2">{{profile.label}}</div> <div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
</div> </div>
<p>Published {{dmp.creationTime | date: "shortDate"}}</p> <p>Published {{dmp.creationTime | date: "shortDate"}}</p>
</div> </div>

1
dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss
View File

@ -12,6 +12,7 @@
.about-item { .about-item {
display: flex; display: flex;
flex-wrap: wrap;
} }
.about-item .length { .about-item .length {

12
dmp-frontend/src/styles.scss
View File

@ -59,6 +59,10 @@ $theme: mat-light-theme($primary, $accent);
color: #fff; color: #fff;
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.bordered-chip { .bordered-chip {
@ -69,6 +73,10 @@ $theme: mat-light-theme($primary, $accent);
color: rgb(68, 114, 196); color: rgb(68, 114, 196);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.squared-chip { .squared-chip {
@ -77,6 +85,10 @@ $theme: mat-light-theme($primary, $accent);
border-radius: 0.5em; border-radius: 0.5em;
background-color: rgb(246, 246, 246); background-color: rgb(246, 246, 246);
color: rgb(127, 127, 127); color: rgb(127, 127, 127);
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
mat-icon { mat-icon {