Styles listings and filter colors
This commit is contained in:
parent
70008f3c22
commit
1911670ea3
|
@ -3,7 +3,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-title {
|
.category-title {
|
||||||
color: #089dbb;
|
color: black;
|
||||||
|
// color: #089dbb;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -57,12 +57,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
|
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
|
||||||
border-color: #00b29f;
|
border-color: #777777;
|
||||||
|
// border-color: #00b29f;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
|
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
|
||||||
color: #00b29f;
|
color: #777777;
|
||||||
background-color: #00b29f;
|
background-color: #777777;
|
||||||
|
// color: #00b29f;
|
||||||
|
// background-color: #00b29f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
|
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
|
||||||
|
|
|
@ -3,73 +3,79 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 gray-container container-header">
|
<div class="col-12 gray-container container-header">
|
||||||
<p (click)="$event.stopImmediatePropagation(); grantClicked(dataset)">{{ dataset.grantAbbreviation }}</p>
|
<p (click)="$event.stopImmediatePropagation();">{{ dataset.grantAbbreviation }}</p>
|
||||||
<!-- <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto"
|
<!-- <p (click)="$event.stopImmediatePropagation(); grantClicked(dataset)">{{ dataset.grantAbbreviation }}</p> -->
|
||||||
(click)="$event.stopImmediatePropagation();">
|
<!-- <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto" (click)="$event.stopImmediatePropagation();">
|
||||||
<mat-icon class="more-horiz">more_horiz</mat-icon>
|
<mat-icon class="more-horiz">more_horiz</mat-icon>
|
||||||
</button> -->
|
</button> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 title">
|
<div class="col-auto">
|
||||||
<mat-icon *ngIf="isDraft" matTooltip="{{'DATASET-LISTING.TOOLTIP.DATASET-STATUS.DRAFT' | translate}}" class="draft-bookmark">
|
<mat-icon *ngIf="isDraft" matTooltip="{{'DATASET-LISTING.TOOLTIP.DATASET-STATUS.DRAFT' | translate}}" class="draft-bookmark">
|
||||||
bookmark
|
bookmark
|
||||||
</mat-icon>
|
</mat-icon>
|
||||||
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-LISTING.TOOLTIP.DATASET-STATUS.FINALIZED' | translate}}" class="finalized-bookmark">
|
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-LISTING.TOOLTIP.DATASET-STATUS.FINALIZED' | translate}}" class="finalized-bookmark">
|
||||||
bookmark
|
bookmark
|
||||||
</mat-icon>
|
</mat-icon>
|
||||||
<h4 *ngIf="isDraft">
|
|
||||||
<span>{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
|
|
||||||
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col">
|
||||||
<div class="row">
|
<div class="row d-flex flex-wrap">
|
||||||
<div class="col-12">
|
<div class="col pl-0">
|
||||||
<p class="mt-1 mb-2">{{dataset.description}}</p>
|
<h4 class="title pl-0" *ngIf="isDraft">
|
||||||
</div>
|
<span>{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
|
||||||
</div>
|
<h4 class="title pl-0" *ngIf="!isDraft">{{ dataset.label }}</h4>
|
||||||
<div class="row">
|
</div>
|
||||||
<div class="col-auto about-item">
|
</div>
|
||||||
<a class="row storage" [routerLink]="['/plans/edit/' + dataset.dmpId]">
|
|
||||||
<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">
|
|
||||||
storage
|
|
||||||
</mat-icon>
|
|
||||||
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-auto about-item">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">
|
<div class="col-12 pl-0">
|
||||||
work_outline
|
<p class="mt-1 mb-2">{{dataset.description}}</p>
|
||||||
</mat-icon>
|
</div>
|
||||||
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row">
|
||||||
|
<div class="col-auto about-item pl-0">
|
||||||
|
<a class="row storage" [routerLink]="['/plans/edit/' + dataset.dmpId]">
|
||||||
|
<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">
|
||||||
|
storage
|
||||||
|
</mat-icon>
|
||||||
|
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-auto about-item">
|
<div class="col-auto about-item pl-0">
|
||||||
<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">
|
<div class="row">
|
||||||
assignment
|
<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">
|
||||||
</mat-icon>
|
work_outline
|
||||||
<div class="pt-1">
|
</mat-icon>
|
||||||
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
|
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-auto about-item pl-0">
|
||||||
|
<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">
|
||||||
|
assignment
|
||||||
|
</mat-icon>
|
||||||
|
<div class="pt-1">
|
||||||
|
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-auto about-item ml-auto">
|
||||||
|
<p *ngIf="isDraft">{{'DATASET-LISTING.COLUMNS.LAST-EDITED' | translate}} {{ dataset.modified | date: "shortDate"}}</p>
|
||||||
|
<p *ngIf="!isDraft">{{'DATASET-LISTING.COLUMNS.FINALIZED' | translate}} {{ dataset.finalizedAt | date: "shortDate"}}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 about-item">
|
|
||||||
<p *ngIf="isDraft">{{'DATASET-LISTING.COLUMNS.LAST-EDITED' | translate}} {{ dataset.modified | date: "shortDate"}}</p>
|
|
||||||
<p *ngIf="!isDraft">{{'DATASET-LISTING.COLUMNS.FINALIZED' | translate}} {{ dataset.finalizedAt | date: "shortDate"}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="info">
|
<!-- <div class="info">
|
||||||
<h6>{{ dataset.dmp }}</h6>
|
<h6>{{ dataset.dmp }}</h6>
|
||||||
<p>{{ dataset.grant }}</p>
|
<p>{{ dataset.grant }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" style="margin-left: 0px !important">
|
<div class="row" style="margin-left: 0px !important">
|
||||||
<div class="chip">
|
<div class="chip">
|
||||||
<p>{{ dataset.profile }}</p>
|
<p>{{ dataset.profile }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -51,6 +51,7 @@ h4 > span {
|
||||||
|
|
||||||
.about-item .title {
|
.about-item .title {
|
||||||
margin: 2px 10px;
|
margin: 2px 10px;
|
||||||
|
// text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-item p {
|
.about-item p {
|
||||||
|
@ -67,3 +68,11 @@ p {
|
||||||
.storage :hover {
|
.storage :hover {
|
||||||
color: #00b29f;
|
color: #00b29f;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.draft-bookmark {
|
||||||
|
color: #e7e6e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finalized-bookmark {
|
||||||
|
color: #08bd63;
|
||||||
|
}
|
||||||
|
|
|
@ -22,7 +22,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-title {
|
.category-title {
|
||||||
color: #089dbb;
|
color: black;
|
||||||
|
// color: #089dbb;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
@ -51,21 +52,21 @@
|
||||||
color: #adadad;
|
color: #adadad;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-checkbox-inner-container {
|
// ::ng-deep .mat-checkbox-inner-container {
|
||||||
background: white;
|
// background: white;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::ng-deep .mat-focused .mat-form-field-label {
|
// ::ng-deep .mat-focused .mat-form-field-label {
|
||||||
color: #00b29f !important;
|
// color: #00b29f !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::ng-deep.mat-form-field-underline {
|
// ::ng-deep.mat-form-field-underline {
|
||||||
background-color: #adadad;
|
// background-color: #adadad;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::ng-deep.mat-form-field-ripple {
|
// ::ng-deep.mat-form-field-ripple {
|
||||||
background-color: #00b29f !important;
|
// background-color: #00b29f !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// ::ng-deep .mat-checkbox {
|
// ::ng-deep .mat-checkbox {
|
||||||
// background-color: #f6f6f6 !important;
|
// background-color: #f6f6f6 !important;
|
||||||
|
@ -98,12 +99,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
|
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
|
||||||
border-color: #00b29f;
|
border-color: #777777;
|
||||||
|
// border-color: #00b29f;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
|
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
|
||||||
color: #00b29f;
|
color: #777777;
|
||||||
background-color: #00b29f;
|
background-color: #777777;
|
||||||
|
// color: #00b29f;
|
||||||
|
// background-color: #00b29f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
|
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
|
||||||
|
|
|
@ -26,8 +26,7 @@
|
||||||
</mat-menu>
|
</mat-menu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row d-flex flex-wrap">
|
<div class="row">
|
||||||
<!-- <div class="col-12 d-flex flex-wrap"> -->
|
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<mat-icon *ngIf="isDraft" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.DRAFT' | translate}}" class="draft-icon">
|
<mat-icon *ngIf="isDraft" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.DRAFT' | translate}}" class="draft-icon">
|
||||||
lock_open
|
lock_open
|
||||||
|
@ -39,53 +38,57 @@
|
||||||
radio_button_checked
|
radio_button_checked
|
||||||
</mat-icon>
|
</mat-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="col pl-0">
|
<div class="col">
|
||||||
<h4 class="title pl-0" *ngIf="isDraft">
|
<div class="row d-flex flex-wrap">
|
||||||
<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{dmp.label}}
|
<!-- <div class="col-12 d-flex flex-wrap"> -->
|
||||||
</h4>
|
<div class="col pl-0">
|
||||||
<h4 class="title pl-0" *ngIf="!isDraft">{{dmp.label}}</h4>
|
<h4 class="title pl-0" *ngIf="isDraft">
|
||||||
</div>
|
<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{dmp.label}}
|
||||||
<!-- </div> -->
|
</h4>
|
||||||
</div>
|
<h4 class="title pl-0" *ngIf="!isDraft">{{dmp.label}}</h4>
|
||||||
<div class="row">
|
</div>
|
||||||
<div class="col-12">
|
<!-- </div> -->
|
||||||
<p class="mt-1 mb-2">{{dmp.description}}</p>
|
</div>
|
||||||
</div>
|
<div class="row">
|
||||||
</div>
|
<div class="col-12 pl-0">
|
||||||
<div class="row">
|
<p class="mt-1 description">{{dmp.description}}</p>
|
||||||
<div class="col-auto about-item">
|
</div>
|
||||||
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.LEVEL-OF-ACCESS' | translate}}">
|
</div>
|
||||||
settings
|
<div class="row">
|
||||||
</mat-icon>
|
<div class="col-auto about-item pl-0">
|
||||||
<h4 class="mt-1 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4>
|
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.LEVEL-OF-ACCESS' | translate}}">
|
||||||
</div>
|
settings
|
||||||
<div class="col-auto about-item">
|
</mat-icon>
|
||||||
<a class="datasets-counter" [routerLink]="['/plans/edit/' + dmp.id]" [queryParams]="{ tab: 'datasetDescriptions' }">
|
<h4 class="mt-1 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4>
|
||||||
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}">
|
</div>
|
||||||
storage
|
<div class="col-auto about-item">
|
||||||
</mat-icon>
|
<a class="datasets-counter" [routerLink]="['/plans/edit/' + dmp.id]" [queryParams]="{ tab: 'datasetDescriptions' }">
|
||||||
<h4 class="mt-1 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
|
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}">
|
||||||
</a>
|
storage
|
||||||
</div>
|
</mat-icon>
|
||||||
<div class="col-auto about-item pt-2">
|
<h4 class="mt-1 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
|
||||||
<mat-icon class="gray-icon" matTooltip="{{'DMP-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}">assignment</mat-icon>
|
</a>
|
||||||
<div *ngFor="let profile of dmp.associatedProfiles" class="pb-1">
|
</div>
|
||||||
<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
|
<div class="col-auto about-item pt-2 pl-0">
|
||||||
|
<mat-icon class="gray-icon" matTooltip="{{'DMP-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}">assignment</mat-icon>
|
||||||
|
<div *ngFor="let profile of dmp.associatedProfiles" class="pb-1">
|
||||||
|
<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto about-item ml-auto">
|
||||||
|
<p *ngIf="isDraft">{{'DMP-PROFILE-LISTING.COLUMNS.LAST-EDITED' | translate}} {{dmp.modifiedTime | date: "shortDate"}}</p>
|
||||||
|
<p *ngIf="isFinalized && !isPublished">{{'TYPES.DMP.FINALISED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
|
||||||
|
<p *ngIf="isPublished">{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.publishedAt | date: "shortDate"}}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 about-item">
|
|
||||||
<p *ngIf="isDraft">{{'DMP-PROFILE-LISTING.COLUMNS.LAST-EDITED' | translate}} {{dmp.modifiedTime | date: "shortDate"}}</p>
|
|
||||||
<p *ngIf="isFinalized && !isPublished">{{'TYPES.DMP.FINALISED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
|
|
||||||
<p *ngIf="isPublished">{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.publishedAt | date: "shortDate"}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div class="row d-flex align-items-center my-1">
|
<!-- <div class="row d-flex align-items-center my-1">
|
||||||
<mat-icon class="col-auto gray-icon">group</mat-icon>
|
<mat-icon class="col-auto gray-icon">group</mat-icon>
|
||||||
<div class="row" *ngFor="let user of dmp.users">
|
<div class="row" *ngFor="let user of dmp.users">
|
||||||
<div class="col-auto squared-chip mr-2">{{user.name}}</div>
|
<div class="col-auto squared-chip mr-2">{{user.name}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -82,3 +82,7 @@ p {
|
||||||
color: #08bd63;
|
color: #08bd63;
|
||||||
// color: #92d050;
|
// color: #92d050;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin-bottom: 0.4em;
|
||||||
|
}
|
||||||
|
|
|
@ -13,7 +13,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-title {
|
.category-title {
|
||||||
color: #089dbb;
|
color: black;
|
||||||
|
// color: #089dbb;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
@ -42,21 +43,21 @@
|
||||||
color: #adadad;
|
color: #adadad;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-checkbox-inner-container {
|
// ::ng-deep .mat-checkbox-inner-container {
|
||||||
background: white;
|
// background: white;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::ng-deep .mat-focused .mat-form-field-label {
|
// ::ng-deep .mat-focused .mat-form-field-label {
|
||||||
color: #00b29f !important;
|
// color: #00b29f !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::ng-deep.mat-form-field-underline {
|
// ::ng-deep.mat-form-field-underline {
|
||||||
background-color: #adadad;
|
// background-color: #adadad;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::ng-deep.mat-form-field-ripple {
|
// ::ng-deep.mat-form-field-ripple {
|
||||||
background-color: #00b29f !important;
|
// background-color: #00b29f !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// ::ng-deep .mat-checkbox {
|
// ::ng-deep .mat-checkbox {
|
||||||
// background-color: #f6f6f6 !important;
|
// background-color: #f6f6f6 !important;
|
||||||
|
@ -89,12 +90,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
|
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
|
||||||
border-color: #00b29f;
|
border-color: #777777;
|
||||||
|
// border-color: #00b29f;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
|
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
|
||||||
color: #00b29f;
|
color: #777777;
|
||||||
background-color: #00b29f;
|
background-color: #777777;
|
||||||
|
// color: #00b29f;
|
||||||
|
// background-color: #00b29f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
|
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
|
||||||
|
|
|
@ -11,39 +11,52 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
<div class="col-auto">
|
||||||
|
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.FINALIZED' | translate}}" class="finalized-bookmark">bookmark</mat-icon>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="row d-flex flex-wrap">
|
||||||
|
<div class="col pl-0">
|
||||||
|
<h4 class="title pl-0" *ngIf="!isDraft">{{ dataset.label }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col pl-0">
|
||||||
|
<p class="mt-1 mb-2">{{dataset.description}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-auto about-item pl-0">
|
||||||
|
<div class="row">
|
||||||
|
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">storage</mat-icon>
|
||||||
|
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto about-item pl-0">
|
||||||
|
<div class="row">
|
||||||
|
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">work_outline</mat-icon>
|
||||||
|
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto about-item pl-0">
|
||||||
|
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
|
||||||
|
<div class="pt-1">
|
||||||
|
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col about-item ml-auto">
|
||||||
|
<p>{{'DATASET-LISTING.COLUMNS.PUBLISHED' | translate}} {{dataset.dmpPublishedAt | date: "shortDate"}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="row">
|
||||||
<div class="col-12 title">
|
<div class="col-12 title">
|
||||||
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.FINALIZED' | translate}}" class="finalized-bookmark">bookmark</mat-icon>
|
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.FINALIZED' | translate}}" class="finalized-bookmark">bookmark</mat-icon>
|
||||||
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
|
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="row">
|
|
||||||
<div class="col-12">
|
|
||||||
<p class="mt-1 mb-2">{{dataset.description}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-auto about-item">
|
|
||||||
<div class="row">
|
|
||||||
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">storage</mat-icon>
|
|
||||||
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto about-item">
|
|
||||||
<div class="row">
|
|
||||||
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">work_outline</mat-icon>
|
|
||||||
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto about-item">
|
|
||||||
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
|
|
||||||
<div class="pt-1">
|
|
||||||
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 about-item">
|
|
||||||
<p>{{'DATASET-LISTING.COLUMNS.PUBLISHED' | translate}} {{dataset.dmpPublishedAt | date: "shortDate"}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="info">
|
<!-- <div class="info">
|
||||||
<h6>{{ dataset.dmp }}</h6>
|
<h6>{{ dataset.dmp }}</h6>
|
||||||
<p>{{ dataset.grant }}</p>
|
<p>{{ dataset.grant }}</p>
|
||||||
|
|
|
@ -53,6 +53,10 @@ p {
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.finalized-bookmark {
|
||||||
|
color: #08bd63;
|
||||||
|
}
|
||||||
|
|
||||||
// .explore-dataset-info {
|
// .explore-dataset-info {
|
||||||
// background-color: #f6f6f6;
|
// background-color: #f6f6f6;
|
||||||
// padding: 8px 15px;
|
// padding: 8px 15px;
|
||||||
|
|
|
@ -13,7 +13,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-title {
|
.category-title {
|
||||||
color: #089dbb;
|
color: black;
|
||||||
|
// color: #089dbb;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
@ -42,21 +43,21 @@
|
||||||
color: #adadad;
|
color: #adadad;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-checkbox-inner-container {
|
// ::ng-deep .mat-checkbox-inner-container {
|
||||||
background: white;
|
// background: white;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::ng-deep .mat-focused .mat-form-field-label {
|
// ::ng-deep .mat-focused .mat-form-field-label {
|
||||||
color: #00b29f !important;
|
// color: #00b29f !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::ng-deep.mat-form-field-underline {
|
// ::ng-deep.mat-form-field-underline {
|
||||||
background-color: #adadad;
|
// background-color: #adadad;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::ng-deep.mat-form-field-ripple {
|
// ::ng-deep.mat-form-field-ripple {
|
||||||
background-color: #00b29f !important;
|
// background-color: #00b29f !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// ::ng-deep .mat-checkbox {
|
// ::ng-deep .mat-checkbox {
|
||||||
// background-color: #f6f6f6 !important;
|
// background-color: #f6f6f6 !important;
|
||||||
|
@ -89,12 +90,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
|
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
|
||||||
border-color: #00b29f;
|
border-color: #777777;
|
||||||
|
// border-color: #00b29f;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
|
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
|
||||||
color: #00b29f;
|
color: #777777;
|
||||||
background-color: #00b29f;
|
background-color: #777777;
|
||||||
|
// color: #00b29f;
|
||||||
|
// background-color: #00b29f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
|
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
|
||||||
|
|
|
@ -6,35 +6,43 @@
|
||||||
{{dmp.grantAbbreviation}}
|
{{dmp.grantAbbreviation}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row d-flex flex-wrap">
|
<div class="row">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">radio_button_checked</mat-icon>
|
<div class="outer-circle">
|
||||||
</div>
|
<div class="inner-circle" matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}"></div>
|
||||||
<div class="col pl-0">
|
|
||||||
<h4 class="title pl-0">{{dmp.label}}</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12">
|
|
||||||
<p class="mt-1 mb-2">{{dmp.description}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-auto about-item">
|
|
||||||
<!-- <mat-icon class="gray-icon pt-2">settings</mat-icon> -->
|
|
||||||
<!-- <h4 class="mt-2 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4> -->
|
|
||||||
|
|
||||||
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2">storage</mat-icon>
|
|
||||||
<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto about-item">
|
|
||||||
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
|
|
||||||
<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
|
|
||||||
<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">fiber_manual_record</mat-icon> -->
|
||||||
|
<!-- <mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">radio_button_checked</mat-icon> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 about-item">
|
<div class="col">
|
||||||
<p>{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
|
<div class="row d-flex flex-wrap">
|
||||||
|
<div class="col pl-0">
|
||||||
|
<h4 class="title pl-0">{{dmp.label}}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-auto pl-0">
|
||||||
|
<p class="mt-1 description">{{dmp.description}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-auto about-item pl-0">
|
||||||
|
<!-- <mat-icon class="gray-icon pt-2">settings</mat-icon> -->
|
||||||
|
<!-- <h4 class="mt-2 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4> -->
|
||||||
|
|
||||||
|
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2">storage</mat-icon>
|
||||||
|
<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto about-item">
|
||||||
|
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
|
||||||
|
<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
|
||||||
|
<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto about-item ml-auto">
|
||||||
|
<p>{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -46,12 +46,44 @@
|
||||||
color: #aaaaaa;
|
color: #aaaaaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-published-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #08bd6342;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
.published-icon {
|
.published-icon {
|
||||||
padding-top: 1px;
|
|
||||||
color: #08bd63;
|
color: #08bd63;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 4px;
|
||||||
|
padding-bottom: 7px;
|
||||||
|
// padding-top: 2px;
|
||||||
|
// padding-left: 4px;
|
||||||
// color: #92d050;
|
// color: #92d050;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.outer-circle {
|
||||||
|
background: #08bd6342;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-circle {
|
||||||
|
position: absolute;
|
||||||
|
background: #08bd63;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -5px 0px 0px -5px;
|
||||||
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
display: inline;
|
display: inline;
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
|
@ -66,6 +98,10 @@ p {
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin-bottom: 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
// .explore-dmp-listing-item {
|
// .explore-dmp-listing-item {
|
||||||
// margin-top: 2em;
|
// margin-top: 2em;
|
||||||
// margin-bottom: 2em;
|
// margin-bottom: 2em;
|
||||||
|
|
|
@ -27,7 +27,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-title {
|
.category-title {
|
||||||
color: #089dbb;
|
color: black;
|
||||||
|
// color: #089dbb;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
@ -56,26 +57,26 @@
|
||||||
color: #adadad;
|
color: #adadad;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-checkbox-inner-container {
|
// ::ng-deep .mat-checkbox-inner-container {
|
||||||
background: white;
|
// background: white;
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .mat-focused .mat-form-field-label {
|
|
||||||
color: #00b29f !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep.mat-form-field-underline {
|
|
||||||
background-color: #adadad;
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep.mat-form-field-ripple {
|
|
||||||
background-color: #00b29f !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ::ng-deep .mat-checkbox {
|
|
||||||
// background-color: #f6f6f6 !important;
|
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
// ::ng-deep .mat-focused .mat-form-field-label {
|
||||||
|
// color: #00b29f !important;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// ::ng-deep.mat-form-field-underline {
|
||||||
|
// background-color: #adadad;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// ::ng-deep.mat-form-field-ripple {
|
||||||
|
// background-color: #00b29f !important;
|
||||||
|
// }
|
||||||
|
|
||||||
|
::ng-deep .mat-checkbox {
|
||||||
|
background-color: #f6f6f6 !important;
|
||||||
|
}
|
||||||
|
|
||||||
::ng-deep .mat-checkbox .mat-checkbox-frame {
|
::ng-deep .mat-checkbox .mat-checkbox-frame {
|
||||||
border: 1px solid #aaaaaa;
|
border: 1px solid #aaaaaa;
|
||||||
}
|
}
|
||||||
|
@ -103,12 +104,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
|
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
|
||||||
border-color: #00b29f;
|
border-color: #777777;
|
||||||
|
// border-color: #00b29f;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
|
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
|
||||||
color: #00b29f;
|
color: #777777;
|
||||||
background-color: #00b29f;
|
background-color: #777777;
|
||||||
|
// color: #00b29f;
|
||||||
|
// background-color: #00b29f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
|
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
|
||||||
|
|
|
@ -123,20 +123,20 @@
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.draft-bookmark {
|
// .draft-bookmark {
|
||||||
color: #e7e6e6;
|
// color: #e7e6e6;
|
||||||
display: inline;
|
// display: inline;
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
padding-top: 3px;
|
// padding-top: 3px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.finalized-bookmark {
|
// .finalized-bookmark {
|
||||||
color: #08bd63;
|
// color: #08bd63;
|
||||||
// color: #92d050;
|
// // color: #92d050;
|
||||||
display: inline;
|
// display: inline;
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
padding-top: 3px;
|
// padding-top: 3px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
h4 span {
|
h4 span {
|
||||||
color: #089dbb;
|
color: #089dbb;
|
||||||
|
|
Loading…
Reference in New Issue