Improve DMP Overview's Grant Styling

This commit is contained in:
George Kalampokis 2020-03-03 11:20:27 +02:00
parent 8a4afade34
commit faa32a9c44
5 changed files with 52 additions and 7 deletions

View File

@ -149,20 +149,27 @@
</div> </div>
<div class="col-md-3 col-lg-3"> <div class="col-md-3 col-lg-3">
<div class="grant-item"> <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> <span class="ml-2 pt-2" (click)="grantClicked(dmp.grant.id)">{{ dmp.grant.abbreviation }}</span>
</div> </div>
<p class="card-subtitle mt-3 mb-1 ml-3 mr-3">{{ dmp.grant.label }}</p> <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 }} {{ '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> <mat-icon class="mr-2">open_in_new</mat-icon>
{{ 'GRANT-EDITOR.ACTIONS.VISIT-WEBSITE' | translate }} {{ 'GRANT-EDITOR.ACTIONS.VISIT-WEBSITE' | translate }}
</a> </a>

View File

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

View File

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

View File

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

View File

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