Makes DMP overview page responsive.
This commit is contained in:
apapachristou
parent
77d2aa317e
commit
72df634132
|
|
@ -1,15 +1,12 @@
|
|||
<div class="main-content">
|
||||
<div class="container-fluid">
|
||||
<div *ngIf="dmp" class="card pb-4">
|
||||
<div class="card-header card-header-plain d-flex">
|
||||
<div class="card-desc d-flex flex-column justify-content-center">
|
||||
<h4 class="card-title">{{ dmp.label }}</h4>
|
||||
<mat-card-subtitle *ngIf="!hasDoi(dmp)">
|
||||
{{ 'DMP-EDITOR.TITLE.SUBTITLE' | translate }}: {{ dmp.doi }}
|
||||
</mat-card-subtitle>
|
||||
</div>
|
||||
<div class="d-flex ml-auto p-2">
|
||||
<div class="row card-header card-header-plain d-flex">
|
||||
<div class="col-12 card-desc d-flex flex-column justify-content-center">
|
||||
<div class="row">
|
||||
|
||||
<div class="col d-flex align-items-center flex-wrap-nowrap">
|
||||
<h4 class="card-title">{{ dmp.label }}</h4>
|
||||
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon" (click)="$event.stopImmediatePropagation();">
|
||||
<mat-icon class="more-horiz">more_horiz</mat-icon>
|
||||
</button>
|
||||
|
|
@ -27,20 +24,22 @@
|
|||
<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
|
||||
<button *ngIf="isDraftDmp(dmp)" mat-raised-button color="primary" (click)="editClicked(dmp)" class="lightblue-btn ml-2">
|
||||
<div class="col-auto d-flex flex-wrap p-2">
|
||||
<button *ngIf="isDraftDmp(dmp)" mat-raised-button color="primary" (click)="editClicked(dmp)" class="lightblue-btn mt-2 ml-2">
|
||||
<mat-icon>edit</mat-icon> {{ 'DMP-LISTING.ACTIONS.EDIT' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button [matMenuTriggerFor]="exportMenu" color="primary" class="lightblue-btn export-btn ml-2">
|
||||
<button mat-raised-button [matMenuTriggerFor]="exportMenu" color="primary" class="lightblue-btn export-btn mt-2 ml-2">
|
||||
{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }} <mat-icon>arrow_drop_down</mat-icon>
|
||||
</button>
|
||||
<button *ngIf="showPublishButton(dmp)" mat-raised-button (click)="publish(dmp.id)" class="lightblue-btn ml-2">
|
||||
<button *ngIf="showPublishButton(dmp)" mat-raised-button (click)="publish(dmp.id)" class="lightblue-btn mt-2 ml-2">
|
||||
<mat-icon>public</mat-icon> {{ 'DMP-LISTING.ACTIONS.PUBLISH' | translate }}
|
||||
</button>
|
||||
<button *ngIf="isDraftDmp(dmp)" mat-raised-button color="primary" (click)="finalize(dmp)" class="lightblue-btn ml-2">
|
||||
<button *ngIf="isDraftDmp(dmp)" mat-raised-button color="primary" (click)="finalize(dmp)" class="lightblue-btn mt-2 ml-2">
|
||||
<mat-icon>done_all</mat-icon> {{ 'DMP-LISTING.ACTIONS.FINALIZE' | translate }}
|
||||
</button>
|
||||
<button *ngIf="hasDoi(dmp) && isFinalizedDmp(dmp) && !this.isPublicView" mat-raised-button color="primary" (click)="getDoi(dmp)" class="lightblue-btn ml-2">
|
||||
<button *ngIf="hasDoi(dmp) && isFinalizedDmp(dmp) && !this.isPublicView" mat-raised-button color="primary" (click)="getDoi(dmp)" class="lightblue-btn mt-2 ml-2">
|
||||
<mat-icon>archive</mat-icon> {{ 'DMP-LISTING.ACTIONS.GETDOI' | translate }}
|
||||
</button>
|
||||
|
||||
|
|
@ -64,16 +63,26 @@
|
|||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row ml-2">
|
||||
<div class="row">
|
||||
<mat-card-subtitle class="col" *ngIf="!hasDoi(dmp)">
|
||||
{{ 'DMP-EDITOR.TITLE.SUBTITLE' | translate }}: {{ dmp.doi }}
|
||||
</mat-card-subtitle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-lg-9">
|
||||
<div class="row">
|
||||
<div class="col-6 dmp-info">
|
||||
<div class="col-sm-12 col-md-6 ml-3 dmp-info">
|
||||
<p class="card-subtitle">{{ dmp.label }}</p>
|
||||
<p>{{ dmp.description }}</p>
|
||||
<div class="row total-info">
|
||||
<div class="col-12 d-flex flex-row">
|
||||
</div>
|
||||
<div class="col-12 d-flex flex-row flex-wrap ml-3">
|
||||
<div class="d-flex">
|
||||
<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.LEVEL-OF-ACCESS' | translate}}" class="gray-icon pt-2">settings</mat-icon>
|
||||
<p class="mt-2 ml-1 mr-3 p-1">{{ roleDisplay(dmp.users) }}</p>
|
||||
</div>
|
||||
|
||||
<div class="datasets-counter" *ngIf="!isPublishedDMP(dmp)">
|
||||
<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2" (click)="datasetsClicked(dmp.id)">storage
|
||||
|
|
@ -84,21 +93,25 @@
|
|||
{{'NAV-BAR.DATASETS' | translate}}</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2" *ngIf="isPublishedDMP(dmp)">storage</mat-icon>
|
||||
<p class="mt-2 ml-1 p-1" *ngIf="isPublishedDMP(dmp)">{{ dmp.datasets.length }}</p>
|
||||
<p class="mt-2 mr-3 p-1" *ngIf="isPublishedDMP(dmp)">{{'NAV-BAR.DATASETS' | translate}}</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
|
||||
<p class="mt-2 ml-1 p-1">{{ dmp.associatedProfiles.length }}</p>
|
||||
<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.TEMPLATES' | translate }}</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<mat-icon matTooltip="{{'DMP-OVERVIEW.RESEARCHERS' | translate}}" class="gray-icon pt-2">person</mat-icon>
|
||||
<p class="mt-2 ml-1 p-1">{{ dmp.researchers.length }}</p>
|
||||
<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.RESEARCHERS' | translate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div *ngFor="let dataset of dmp.datasets; let i=index" class="col-md-4">
|
||||
<div *ngIf="i < 9" class="dataset-card" (click)="datasetClicked(dataset.id)">
|
||||
|
|
@ -148,4 +161,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue