Improve DMP Overview's Grant Styling

dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html

@@ -149,20 +149,27 @@
 					</div>
 					<div class="col-md-3 col-lg-3">
 						<div class="grant-item">
-							<div class="gray-container container-header">
+							<h6 class="grant-title">{{'DMP-OVERVIEW.GRANT' | translate}}</h6>
+							<div *ngIf="dmp.grant.abbreviation" class="gray-container container-header">
 								<span class="ml-2 pt-2" (click)="grantClicked(dmp.grant.id)">{{ dmp.grant.abbreviation }}</span>
 							</div>
 							<p class="card-subtitle mt-3 mb-1 ml-3 mr-3">{{ dmp.grant.label }}</p>
-							<p class="mb-1 ml-3 mr-3">{{ dmp.grant.startDate | date: "shortDate" }} - {{ dmp.grant.endDate | date: "shortDate" }}</p>
+							<p *ngIf="dmp.grant.startDate && dmp.grant.endDate" class="mb-1 ml-3 mr-3">{{ dmp.grant.startDate | date: "shortDate" }} - {{ dmp.grant.endDate | date: "shortDate" }}</p>
 
 
-							<p class="ml-3 mr-3 desc">{{ dmp.grant.description }}</p>
+							<div class="row desc-container" *ngIf="dmp.grant.description">
-							<button mat-flat-button class="show-more" (click)="grantClicked(dmp.grant.id)">
+								<p #desc class="ml-3 mr-3 desc" [ngClass]="{'desc-expanded': expand}">{{ dmp.grant.description }}</p>
-								<!-- <mat-icon class="mr-2">expand_more</mat-icon> -->
+								<button *ngIf="checkOverflow(desc)" mat-flat-button class="show-more col-12" (click)="expandDesc()"> <!-- (click)="grantClicked(dmp.grant.id)"> -->
+									<mat-icon class="mr-2">{{!expand ? 'expand_more' : 'expand_less'}}</mat-icon>
+									{{ (!expand ? 'GENERAL.ACTIONS.SHOW-MORE' : 'GENERAL.ACTIONS.SHOW-LESS') | translate }}
+								</button>
+							</div>
+							<!-- <button mat-flat-button class="show-more" (click)="grantClicked(dmp.grant.id)">
+								<mat-icon class="mr-2">expand_more</mat-icon>
 								{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
-							</button>
+							</button> -->
 
-							<a mat-raised-button class="visit-website" href="{{dmp.grant.uri}}" target="_blank">
+							<a *ngIf="dmp.grant.uri" mat-raised-button class="visit-website" href="{{dmp.grant.uri}}" target="_blank">
 								<mat-icon class="mr-2">open_in_new</mat-icon>
 								{{ 'GRANT-EDITOR.ACTIONS.VISIT-WEBSITE' | translate }}
 							</a>

dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss

@@ -66,6 +66,16 @@
   text-transform: uppercase;
 }
 
+.grant-title {
+  width: 65px;
+  color: #089dbb;
+  background-color: white;
+  padding: 0px 10px;
+  margin-top: -16px;
+  cursor: default;
+  text-transform: uppercase;
+}
+
 .collaborators {
 	display: flex;
 	flex-direction: column;
@@ -205,6 +215,10 @@ h4 span {
   text-transform: uppercase;
 }
 
+.desc-container {
+	margin: 0px;
+}
+
 .desc {
   position: relative;
   overflow: hidden;
@@ -215,6 +229,12 @@ h4 span {
   cursor: default;
 }
 
+.desc-expanded {
+	overflow: visible !important;
+	height: auto !important;
+	position: inherit;
+}
+
 .desc:after {
   content: "";
   text-align: right;

dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts

@@ -37,6 +37,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 	hasPublishButton: boolean = true;
 	breadCrumbs: Observable<BreadcrumbItem[]> = observableOf();
 	isUserOwner: boolean;
+	expand = false;
 
 	constructor(
 		private route: ActivatedRoute,
@@ -134,6 +135,19 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 		// this.router.navigate(['/grants/edit/' + grantId]);
 	}
 
+	expandDesc() {
+		this.expand = !this.expand;
+	}
+
+	checkOverflow (element) {
+		if (this.expand || (element.offsetHeight < element.scrollHeight ||
+			element.offsetWidth < element.scrollWidth)) {
+		  return true;
+		} else {
+		  return false;
+		}
+	  }
+
 	datasetClicked(datasetId: String) {
 		if (this.isPublicView) {
 			this.router.navigate(['/datasets/publicEdit/' + datasetId]);

dmp-frontend/src/assets/i18n/en.json

@@ -77,6 +77,7 @@
 		"ACTIONS": {
 			"VIEW-ALL": "View All",
 			"SHOW-MORE": "Show more",
+			"SHOW-LESS": "Show less",
 			"LOG-IN": "Log in"
 		},
 		"PREPOSITIONS": {
@@ -513,6 +514,7 @@
 		}
 	},
 	"DMP-OVERVIEW": {
+		"GRANT": "Grant",
 		"RESEARCHERS": "Researchers",
 		"COLLABORATORS": "Collaborators",
 		"TOOLTIP": {

dmp-frontend/src/assets/i18n/es.json

@@ -77,6 +77,7 @@
 		"ACTIONS": {
 			"VIEW-ALL": "Ver todo",
 			"SHOW-MORE": "Mostrar más",
+			"SHOW-LESS": "Show less",
 			"LOG-IN": "Iniciar sesión"
 		},
 		"PREPOSITIONS": {
@@ -511,6 +512,7 @@
 		}
 	},
 	"DMP-OVERVIEW": {
+		"GRANT": "Grant",
 		"RESEARCHERS": "Investigadores",
 		"COLLABORATORS": "Colaboradores",
 		"TOOLTIP": {