Improve DMP Overview's Grant Styling
This commit is contained in:
parent
8a4afade34
commit
faa32a9c44
|
|
@ -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>
|
||||
<button mat-flat-button class="show-more" (click)="grantClicked(dmp.grant.id)">
|
||||
<!-- <mat-icon class="mr-2">expand_more</mat-icon> -->
|
||||
<div class="row desc-container" *ngIf="dmp.grant.description">
|
||||
<p #desc class="ml-3 mr-3 desc" [ngClass]="{'desc-expanded': expand}">{{ dmp.grant.description }}</p>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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]);
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue