From c8844fba088636fd4ccce67da595628415e09b2a Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Tue, 14 May 2019 13:17:33 +0300
Subject: [PATCH] Ticket: -Dataset Template chip should be one line (no wrap)
 with a fixed width. In hover the full text should be displayed.

---
 .../dataset-listing-item.component.html        |  2 +-
 .../dataset-listing-item.component.scss        |  1 +
 .../dmp-listing-item.component.html            |  2 +-
 .../dmp-listing-item.component.scss            |  1 +
 .../explore-dmp-listing-item.component.html    |  4 ++--
 .../explore-dmp-listing-item.component.scss    |  1 +
 dmp-frontend/src/styles.scss                   | 18 +++++++++++++++---
 7 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
index c46ac716c..ac10fbf41 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
@@ -32,7 +32,7 @@
 
 				<mat-icon class="gray-icon pt-2">assignment</mat-icon>
 				<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>
diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
index 106c863eb..a3687c77a 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
@@ -29,6 +29,7 @@ h4 {
 
 .about-item {
   display: flex;
+  flex-wrap: wrap;
 }
 
 .about-item .length {
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
index c737bbd90..3057be6f7 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
@@ -45,7 +45,7 @@
 
 				<mat-icon class="gray-icon pt-2">assignment</mat-icon>
 				<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>
 				<p>Published {{dmp.creationTime | date: "shortDate"}}</p>
 			</div>
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
index 54ff403a2..e57862178 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
@@ -12,6 +12,7 @@
 
 .about-item {
   display: flex;
+  flex-wrap: wrap;
 }
 
 .about-item .length {
diff --git a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
index 66094960f..fb792db7f 100644
--- a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
@@ -2,7 +2,7 @@
 	<div class="col" (click)="itemClicked()">
 		<div class="row">
 			<div class="col-12 gray-container container-header">
-				{{dmp.projectabbreviation}}
+				{{dmp.projectAbbreviation}}
 			</div>
 		</div>
 		<div class="row">
@@ -26,7 +26,7 @@
 
 				<mat-icon class="gray-icon pt-2">assignment</mat-icon>
 				<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>
 				<p>Published {{dmp.creationTime | date: "shortDate"}}</p>
 			</div>
diff --git a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss
index 241ffa1b7..44b984514 100644
--- a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss
@@ -12,6 +12,7 @@
 
 .about-item {
   display: flex;
+  flex-wrap: wrap;
 }
 
 .about-item .length {
diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss
index a65b352e5..2680dea9e 100644
--- a/dmp-frontend/src/styles.scss
+++ b/dmp-frontend/src/styles.scss
@@ -58,7 +58,11 @@ $theme: mat-light-theme($primary, $accent);
     background-color: rgb(70, 135, 230);
     color: #fff;
     text-transform: uppercase;
-    font-weight: 500;
+	font-weight: 500;
+	max-width: 160px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
   }
 
   .bordered-chip {
@@ -68,7 +72,11 @@ $theme: mat-light-theme($primary, $accent);
     background-color: rgb(236, 241, 249);
     color: rgb(68, 114, 196);
     text-transform: uppercase;
-    font-weight: 500;
+	font-weight: 500;
+	max-width: 160px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
   }
 
   .squared-chip {
@@ -76,7 +84,11 @@ $theme: mat-light-theme($primary, $accent);
     border: 0.1em solid rgb(236, 241, 249);
     border-radius: 0.5em;
     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 {