MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Styles listings and filter colors

This commit is contained in:
apapachristou 2019-10-30 18:15:16 +02:00
parent 70008f3c22
commit 1911670ea3
15 changed files with 341 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss
View File

@ -3,7 +3,8 @@
}
.category-title {
color: #089dbb;
color: black;
// color: #089dbb;
margin-top: 8px;
margin-bottom: 12px;
}

9
dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
View File

@ -57,12 +57,15 @@
}
::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 {
color: #00b29f;
background-color: #00b29f;
color: #777777;
background-color: #777777;
// color: #00b29f;
// background-color: #00b29f;
}
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {

106
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
View File

@ -3,73 +3,79 @@
<div class="col">
<div class="row">
<div class="col-12 gray-container container-header">
<p (click)="$event.stopImmediatePropagation(); grantClicked(dataset)">{{ dataset.grantAbbreviation }}</p>
<!-- <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto"
(click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button> -->
<p (click)="$event.stopImmediatePropagation();">{{ dataset.grantAbbreviation }}</p>
<!-- <p (click)="$event.stopImmediatePropagation(); grantClicked(dataset)">{{ dataset.grantAbbreviation }}</p> -->
<!-- <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto" (click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button> -->
</div>
</div>
<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">
bookmark
</mat-icon>
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-LISTING.TOOLTIP.DATASET-STATUS.FINALIZED' | translate}}" class="finalized-bookmark">
bookmark
</mat-icon>
<h4 *ngIf="isDraft">
<span>{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
</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">
<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">
<div class="row d-flex flex-wrap">
<div class="col pl-0">
<h4 class="title pl-0" *ngIf="isDraft">
<span>{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
<h4 class="title pl-0" *ngIf="!isDraft">{{ dataset.label }}</h4>
</div>
</div>
<div class="row">
<mat-icon matTooltip="{{'DATASET-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 class="col-12 pl-0">
<p class="mt-1 mb-2">{{dataset.description}}</p>
</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">
<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 class="col-auto about-item pl-0">
<div class="row">
<mat-icon matTooltip="{{'DATASET-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-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 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 class="info">
<h6>{{ dataset.dmp }}</h6>
<p>{{ dataset.grant }}</p>
</div>
<div class="row" style="margin-left: 0px !important">
<div class="chip">
<p>{{ dataset.profile }}</p>
</div>
</div> -->
<h6>{{ dataset.dmp }}</h6>
<p>{{ dataset.grant }}</p>
</div>
<div class="row" style="margin-left: 0px !important">
<div class="chip">
<p>{{ dataset.profile }}</p>
</div>
</div> -->
</div>
</a>
</div>

9
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
View File

@ -51,6 +51,7 @@ h4 > span {
.about-item .title {
margin: 2px 10px;
// text-transform: uppercase;
}
.about-item p {
@ -67,3 +68,11 @@ p {
.storage :hover {
color: #00b29f;
}
.draft-bookmark {
color: #e7e6e6;
}
.finalized-bookmark {
color: #08bd63;
}

36
dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss
View File

@ -22,7 +22,8 @@
}
.category-title {
color: #089dbb;
color: black;
// color: #089dbb;
margin-top: 8px;
margin-bottom: 12px;
}
@ -51,21 +52,21 @@
color: #adadad;
}
::ng-deep .mat-checkbox-inner-container {
background: white;
}
// ::ng-deep .mat-checkbox-inner-container {
// background: white;
// }
::ng-deep .mat-focused .mat-form-field-label {
color: #00b29f !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-underline {
// background-color: #adadad;
// }
::ng-deep.mat-form-field-ripple {
background-color: #00b29f !important;
}
// ::ng-deep.mat-form-field-ripple {
// background-color: #00b29f !important;
// }
// ::ng-deep .mat-checkbox {
// background-color: #f6f6f6 !important;
@ -98,12 +99,15 @@
}
::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 {
color: #00b29f;
background-color: #00b29f;
color: #777777;
background-color: #777777;
// color: #00b29f;
// background-color: #00b29f;
}
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {

93
dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
View File

@ -26,8 +26,7 @@
</mat-menu>
</div>
</div>
<div class="row d-flex flex-wrap">
<!-- <div class="col-12 d-flex flex-wrap"> -->
<div class="row">
<div class="col-auto">
<mat-icon *ngIf="isDraft" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.DRAFT' | translate}}" class="draft-icon">
lock_open
@ -39,53 +38,57 @@
radio_button_checked
</mat-icon>
</div>
<div class="col pl-0">
<h4 class="title pl-0" *ngIf="isDraft">
<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{dmp.label}}
</h4>
<h4 class="title pl-0" *ngIf="!isDraft">{{dmp.label}}</h4>
</div>
<!-- </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" matTooltip="{{'DMP-LISTING.TOOLTIP.LEVEL-OF-ACCESS' | translate}}">
settings
</mat-icon>
<h4 class="mt-1 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4>
</div>
<div class="col-auto about-item">
<a class="datasets-counter" [routerLink]="['/plans/edit/' + dmp.id]" [queryParams]="{ tab: 'datasetDescriptions' }">
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}">
storage
</mat-icon>
<h4 class="mt-1 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
</a>
</div>
<div class="col-auto about-item pt-2">
<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 class="col">
<div class="row d-flex flex-wrap">
<!-- <div class="col-12 d-flex flex-wrap"> -->
<div class="col pl-0">
<h4 class="title pl-0" *ngIf="isDraft">
<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{dmp.label}}
</h4>
<h4 class="title pl-0" *ngIf="!isDraft">{{dmp.label}}</h4>
</div>
<!-- </div> -->
</div>
<div class="row">
<div class="col-12 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" matTooltip="{{'DMP-LISTING.TOOLTIP.LEVEL-OF-ACCESS' | translate}}">
settings
</mat-icon>
<h4 class="mt-1 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4>
</div>
<div class="col-auto about-item">
<a class="datasets-counter" [routerLink]="['/plans/edit/' + dmp.id]" [queryParams]="{ tab: 'datasetDescriptions' }">
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}">
storage
</mat-icon>
<h4 class="mt-1 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
</a>
</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 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 class="row d-flex align-items-center my-1">
<mat-icon class="col-auto gray-icon">group</mat-icon>
<div class="row" *ngFor="let user of dmp.users">
<div class="col-auto squared-chip mr-2">{{user.name}}</div>
</div>
</div> -->
<mat-icon class="col-auto gray-icon">group</mat-icon>
<div class="row" *ngFor="let user of dmp.users">
<div class="col-auto squared-chip mr-2">{{user.name}}</div>
</div>
</div> -->
</div>
</a>
</div>

4
dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
View File

@ -82,3 +82,7 @@ p {
color: #08bd63;
// color: #92d050;
}
.description {
margin-bottom: 0.4em;
}

36
dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.scss
View File

@ -13,7 +13,8 @@
}
.category-title {
color: #089dbb;
color: black;
// color: #089dbb;
margin-top: 8px;
margin-bottom: 12px;
}
@ -42,21 +43,21 @@
color: #adadad;
}
::ng-deep .mat-checkbox-inner-container {
background: white;
}
// ::ng-deep .mat-checkbox-inner-container {
// background: white;
// }
::ng-deep .mat-focused .mat-form-field-label {
color: #00b29f !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-underline {
// background-color: #adadad;
// }
::ng-deep.mat-form-field-ripple {
background-color: #00b29f !important;
}
// ::ng-deep.mat-form-field-ripple {
// background-color: #00b29f !important;
// }
// ::ng-deep .mat-checkbox {
// background-color: #f6f6f6 !important;
@ -89,12 +90,15 @@
}
::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 {
color: #00b29f;
background-color: #00b29f;
color: #777777;
background-color: #777777;
// color: #00b29f;
// background-color: #00b29f;
}
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {

71
dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html
View File

@ -11,39 +11,52 @@
</div>
</div>
<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">
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.FINALIZED' | translate}}" class="finalized-bookmark">bookmark</mat-icon>
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
</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> -->
<!-- <div class="info">
<h6>{{ dataset.dmp }}</h6>
<p>{{ dataset.grant }}</p>

4
dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.scss
View File

@ -53,6 +53,10 @@ p {
color: #333333;
}
.finalized-bookmark {
color: #08bd63;
}
// .explore-dataset-info {
// background-color: #f6f6f6;
// padding: 8px 15px;

36
dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.scss
View File

@ -13,7 +13,8 @@
}
.category-title {
color: #089dbb;
color: black;
// color: #089dbb;
margin-top: 8px;
margin-bottom: 12px;
}
@ -42,21 +43,21 @@
color: #adadad;
}
::ng-deep .mat-checkbox-inner-container {
background: white;
}
// ::ng-deep .mat-checkbox-inner-container {
// background: white;
// }
::ng-deep .mat-focused .mat-form-field-label {
color: #00b29f !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-underline {
// background-color: #adadad;
// }
::ng-deep.mat-form-field-ripple {
background-color: #00b29f !important;
}
// ::ng-deep.mat-form-field-ripple {
// background-color: #00b29f !important;
// }
// ::ng-deep .mat-checkbox {
// background-color: #f6f6f6 !important;
@ -89,12 +90,15 @@
}
::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 {
color: #00b29f;
background-color: #00b29f;
color: #777777;
background-color: #777777;
// color: #00b29f;
// background-color: #00b29f;
}
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {

60
dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
View File

@ -6,35 +6,43 @@
{{dmp.grantAbbreviation}}
</div>
</div>
<div class="row d-flex flex-wrap">
<div class="row">
<div class="col-auto">
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">radio_button_checked</mat-icon>
</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 class="outer-circle">
<div class="inner-circle" matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}"></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 class="col-12 about-item">
<p>{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
<div class="col">
<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>

38
dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss
View File

@ -46,12 +46,44 @@
color: #aaaaaa;
}
.custom-published-icon {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #08bd6342;
margin-top: 3px;
}
.published-icon {
padding-top: 1px;
color: #08bd63;
font-size: 12px;
margin-left: 4px;
padding-bottom: 7px;
// padding-top: 2px;
// padding-left: 4px;
// 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 {
display: inline;
padding-left: 1em;
@ -66,6 +98,10 @@ p {
color: #333333;
}
.description {
margin-bottom: 0.4em;
}
// .explore-dmp-listing-item {
// margin-top: 2em;
// margin-bottom: 2em;

48
dmp-frontend/src/app/ui/grant/listing/criteria/grant-criteria.component.scss
View File

@ -27,7 +27,8 @@
}
.category-title {
color: #089dbb;
color: black;
// color: #089dbb;
margin-top: 8px;
margin-bottom: 12px;
}
@ -56,26 +57,26 @@
color: #adadad;
}
::ng-deep .mat-checkbox-inner-container {
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-checkbox-inner-container {
// 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-checkbox .mat-checkbox-frame {
border: 1px solid #aaaaaa;
}
@ -103,12 +104,15 @@
}
::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 {
color: #00b29f;
background-color: #00b29f;
color: #777777;
background-color: #777777;
// color: #00b29f;
// background-color: #00b29f;
}
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {

26
dmp-frontend/src/styles.scss
View File

@ -123,20 +123,20 @@
margin-bottom: 0px;
}
.draft-bookmark {
color: #e7e6e6;
display: inline;
position: absolute;
padding-top: 3px;
}
// .draft-bookmark {
// color: #e7e6e6;
// display: inline;
// position: absolute;
// padding-top: 3px;
// }
.finalized-bookmark {
color: #08bd63;
// color: #92d050;
display: inline;
position: absolute;
padding-top: 3px;
}
// .finalized-bookmark {
// color: #08bd63;
// // color: #92d050;
// display: inline;
// position: absolute;
// padding-top: 3px;
// }
h4 span {
color: #089dbb;