Apply the new style to the filters in the "Public Dataset Descriptions" page. (Ticket #78)

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

@@ -29,6 +29,32 @@
   margin-left: auto !important;
 }
 
+::ng-deep .mat-ripple-element {
+  background-color: #2e74b649 !important;
+}
+
+::ng-deep .mat-radio-container {
+  border-radius: 1em;
+  background: white;
+}
+
+::ng-deep .mat-radio-button .mat-radio-outer-circle {
+  border: 1px solid #aaaaaa;
+}
+
+::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+  border-color: #2e75b6;
+}
+
+::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
+  color: #2e75b6;
+  background-color: #2e75b6;
+}
+
+.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
+  background-color: #2e74b649;
+}
+
 // .mat-table {
 //   margin: 24px;
 // }

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

@@ -46,29 +46,3 @@ h4 {
   padding-top: 7px;
   color: #aaaaaa;
 }
-
-::ng-deep .mat-ripple-element {
-  background-color: #2e74b649 !important;
-}
-
-::ng-deep .mat-radio-container {
-  border-radius: 1em;
-  background: white;
-}
-
-::ng-deep .mat-radio-button .mat-radio-outer-circle {
-  border: 1px solid #aaaaaa;
-}
-
-::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
-  border-color: #2e75b6;
-}
-
-::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
-  color: #2e75b6;
-  background-color: #2e75b6;
-}
-
-.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
-  background-color: #2e74b649;
-}

dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html

@@ -7,7 +7,7 @@
 <div class="explore-dmp-content">
 	<div class="container-fluid">
 		<div class="card">
-			<div class="card-header card-header-blue d-flex">
+			<div class="card-header card-header-plain d-flex">
 				<div class="card-desc d-flex flex-column justify-content-center">
 					<h4 class="card-title">{{'DASHBOARD.DATASETS' | translate}}</h4>
 					<p class="card-category">{{'DATASET-LISTING.SUBTITLE' | translate}}</p>

dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss

@@ -1,25 +1,60 @@
 text-center {
-	text-align: center
+  text-align: center;
 }
 
 .header-image {
-	background: url('/assets/images/public-datasets-bg.png') no-repeat;
+  background: url("/assets/images/public-datasets-bg.png") no-repeat;
-	background-size: cover;
+  background-size: cover;
-	margin-top: 70px;
+  margin-top: 70px;
-	min-height: 15em;
+  min-height: 15em;
-	position: relative;
+  position: relative;
 }
 
 .header-text-container {
-	background: rgba(255,255,255,0.7);
+  background: rgba(255, 255, 255, 0.7);
-	position: absolute;
+  position: absolute;
-	bottom: 0px;
+  bottom: 0px;
-	padding-left: 5em;
+  padding-left: 5em;
-	padding-right: 10em;
+  padding-right: 10em;
-	padding-top: 2em;
+  padding-top: 2em;
-	padding-bottom: 2em;
+  padding-bottom: 2em;
 }
 
 .explore-dmp-content {
-	padding: 30px 15px;
+  padding: 30px 15px;
+}
+
+::ng-deep .mat-paginator {
+  margin-top: 1em;
+}
+
+::ng-deep .mat-paginator-container {
+  flex-direction: row-reverse !important;
+  justify-content: space-between !important;
+  background-color: #f6f6f6;
+  height: 30px;
+  min-height: 30px !important;
+}
+
+::ng-deep .mat-paginator-page-size {
+  height: 43px;
+}
+
+::ng-deep .mat-icon-button {
+  height: 30px !important;
+  font-size: 12px !important;
+}
+
+::ng-deep .mat-paginator-range-label {
+  margin: 15px 32px 0 24px !important;
+}
+
+::ng-deep .mat-paginator-range-actions {
+  width: 55% !important;
+  min-height: 43px !important;
+  justify-content: space-between;
+}
+
+::ng-deep .mat-paginator-navigation-previous {
+  margin-left: auto !important;
 }

dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts

@@ -31,7 +31,7 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
 	}
 
 	ngOnInit() {
-
+		this.refresh();
 	}
 
 	refresh() {
@@ -64,4 +64,4 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
 		// }
 		return defaultCriteria;
 	}
-}
+}

dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.html

@@ -1,4 +1,66 @@
-<mat-accordion #facetAccordion="matAccordion" [multi]="true" class="facet-search-component">
+<div class="filters">
+	<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
+	<div class="row" style="justify-content: center;">
+
+		<mat-form-field class="col-11 search">
+			<input matInput placeholder="{{'CRITERIA.PROJECTS.LIKE'| translate}}" name="dmpCriteriaName"
+				[(ngModel)]="facetCriteria.like" (ngModelChange)="controlModified()">
+			<mat-icon matSuffix class="style-icon">search</mat-icon>
+			<app-multiple-auto-complete [(ngModel)]="facetCriteria.tags" (ngModelChange)="controlModified()"
+				placeholder="{{'CRITERIA.DATA-SETS.TAGS' | translate}}" [configuration]="tagsAutoCompleteConfiguration">
+			</app-multiple-auto-complete>
+		</mat-form-field>
+
+		<div class="col-10 gray-container">
+			<h6 class="category-title">{{ 'FACET-SEARCH.PROJECT-STATUS.TITLE' | translate }}</h6>
+			<mat-list-item>
+				<mat-radio-button value="0" (change)="projectStatusChanged($event)">
+					{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button>
+			</mat-list-item>
+			<mat-list-item>
+				<mat-radio-button value="1" (change)="projectStatusChanged($event)">
+					{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button>
+			</mat-list-item>
+		</div>
+
+		<div class="col-10 gray-container">
+			<h6 class="category-title">{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}</h6>
+			<mat-form-field>
+				<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-PROJECTS' | translate }}"
+					[configuration]="projectAutoCompleteConfiguration"
+					(optionSelected)="onProjectOptionSelected($event)" (optionRemoved)="onProjectOptionRemoved($event)">
+				</app-multiple-auto-complete>
+				<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
+			</mat-form-field>
+		</div>
+
+		<div class="col-10 gray-container">
+			<h6 class="category-title">{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}</h6>
+			<mat-form-field>
+				<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-SPEC' | translate }}"
+					[configuration]="profileAutoCompleteConfiguration"
+					(optionSelected)="onProfileOptionSelected($event)" (optionRemoved)="onProfileOptionRemoved($event)">
+				</app-multiple-auto-complete>
+				<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
+			</mat-form-field>
+		</div>
+
+		<div class="col-10 gray-container">
+			<h6 class="category-title">{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}</h6>
+			<mat-form-field>
+				<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate }}"
+					[configuration]="organizationAutoCompleteConfiguration"
+					(optionSelected)="onOrganizationOptionSelected($event)"
+					(optionRemoved)="onOrganizationOptionRemoved($event)">
+				</app-multiple-auto-complete>
+				<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
+			</mat-form-field>
+		</div>
+	</div>
+</div>
+
+
+<!-- <mat-accordion #facetAccordion="matAccordion" [multi]="true" class="facet-search-component">
 	<mat-expansion-panel>
 		<mat-expansion-panel-header>
 			<mat-panel-title>
@@ -62,4 +124,4 @@
 		 [displayTitleFunc]="displayDmpOrganisationsLabel" [displayValueFunc]="displayDmpOrganisationsValue">
 		</app-explore-dataset-filter-item-component>
 	</mat-expansion-panel>
-</mat-accordion>
+</mat-accordion> -->

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

@@ -1,9 +1,102 @@
 .facet-search-component {
-	.mat-form-field {
+  .mat-form-field {
-		width: 100%;
+    width: 100%;
-	}
+  }
 
-	.tags-chips {
+  .tags-chips {
-		padding: 0px;
+    padding: 0px;
-	}
+  }
+}
+
+.search ::ng-deep.mat-form-field-infix {
+  margin-left: 1em;
+}
+
+.category-title {
+  color: #2e75b6;
+  margin-top: 8px;
+  margin-bottom: 12px;
+}
+
+.import {
+  margin: 10px;
+  padding: 0px;
+}
+
+.filters {
+  border: 1px solid #e4e4e4;
+  border-radius: 5px;
+}
+
+.filters-title {
+  width: 90px;
+  color: #2e75b6;
+  background-color: white;
+  padding: 0px 20px;
+  margin-top: -10px;
+  margin-left: 20px;
+  text-transform: uppercase;
+}
+
+.style-icon {
+  color: #adadad;
+}
+
+::ng-deep .mat-checkbox-inner-container {
+  background: white;
+}
+
+::ng-deep .mat-focused .mat-form-field-label {
+  color: #2e75b6 !important;
+}
+
+::ng-deep.mat-form-field-underline {
+  background-color: #adadad !important;
+}
+
+::ng-deep.mat-form-field-ripple {
+  background-color: #2e75b6 !important;
+}
+
+// ::ng-deep .mat-checkbox {
+//   background-color: #f6f6f6 !important;
+// }
+
+::ng-deep .mat-checkbox .mat-checkbox-frame {
+  border: 1px solid #aaaaaa;
+}
+
+::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,
+.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
+.mat-accent .mat-pseudo-checkbox-checked,
+.mat-accent .mat-pseudo-checkbox-indeterminate,
+.mat-pseudo-checkbox-checked,
+.mat-pseudo-checkbox-indeterminate {
+  background-color: #2e75b6;
+}
+
+::ng-deep .mat-ripple-element {
+  background-color: #2e74b649 !important;
+}
+
+::ng-deep .mat-radio-container {
+  border-radius: 1em;
+  background: white;
+}
+
+::ng-deep .mat-radio-button .mat-radio-outer-circle {
+  border: 1px solid #aaaaaa;
+}
+
+::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+  border-color: #2e75b6;
+}
+
+::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
+  color: #2e75b6;
+  background-color: #2e75b6;
+}
+
+.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
+  background-color: #2e74b649;
 }

dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.ts

@@ -17,6 +17,11 @@ import { ProjectService } from '../../../core/services/project/project.service';
 import { RequestItem } from '../../../core/query/request-item';
 import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
 import { AuthService } from '../../../core/services/auth/auth.service';
+import { MultipleAutoCompleteConfiguration } from '../../../library/auto-complete/multiple/multiple-auto-complete-configuration';
+import { DmpService } from '../../../core/services/dmp/dmp.service';
+import { OrganisationCriteria } from '../../../core/query/organisation/organisation-criteria';
+import { OrganisationService } from '../../../core/services/organisation/organisation.service';
+import { OrganizationModel } from '../../../core/model/organisation/organization';
 
 @Component({
 	selector: 'app-explore-dataset-filters-component',
@@ -35,6 +40,7 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
 	dmpOrganisations: Observable<ExternalSourceItemModel[]>;
 	projectOptions: Observable<ProjectListingModel[]>;
 	projectStateOptions: Observable<any[]>;
+	filteringOrganisationsAsync = false;
 	@ViewChild('facetAccordion') accordion: MatAccordion;
 
 	displayProjectStateValue = (option) => option['value'];
@@ -56,9 +62,38 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
 		titleFn: (item) => item['name']
 	};
 
+	projectAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
+		filterFn: this.filterProject.bind(this),
+		initialItems: (excludedItems: any[]) =>
+			this.filterProject('')
+				.map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
+		displayFn: (item) => item['label'],
+		titleFn: (item) => item['label']
+	}
+
+	profileAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
+		filterFn: this.filterProfile.bind(this),
+		initialItems: (excludedItems: any[]) =>
+			this.getProfiles()
+				.map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
+		displayFn: (item) => item['label'],
+		titleFn: (item) => item['label']
+	};
+
+	organizationAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
+		filterFn: this.filterOrganisation.bind(this),
+		initialItems: (excludedItems: any[]) =>
+			this.getOrganisations()
+				.map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
+		displayFn: (item) => item['name'],
+		titleFn: (item) => item['name']
+	}
+
 	constructor(
 		public activatedRoute: ActivatedRoute,
 		public projectService: ProjectService,
+		public dmpService: DmpService,
+		public organisationService: OrganisationService,
 		public languageService: TranslateService,
 		public datasetProfileService: DatasetService,
 		public externalSourcesService: ExternalSourcesService,
@@ -82,13 +117,14 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
 	}
 
 	public projectStatusChanged(event) {
-		this.facetCriteria.projectStatus = event.option.value.value;
+		this.facetCriteria.projectStatus = event.value;
-		if (!event.option.selected) {
+		if (!event.source.checked) {
 			this.facetCriteria.projectStatus = null;
 			this.projects = Observable.of([]);
 			this.facetCriteria.projects = [];
 		}
-		if (event.option.selected) {
+		// if (event.option.selected) {
+		if (event.source.checked) {
 			// const projectCriteria = new ProjectCriteria();
 			// projectCriteria.projectStateType = this.facetCriteria.projectStatus;
 			//projectCriteria['length'] = 10;
@@ -132,11 +168,24 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
 		this.facetCriteriaChange.emit(this.facetCriteria);
 	}
 
+	getProfiles() {
+		return this.datasetProfileService.getDatasetProfiles();
+	}
+
 	removeProfile(profile) {
 		this.facetCriteria.datasetProfile.splice(this.facetCriteria.datasetProfile.indexOf(profile), 1);
 		this.facetCriteriaChange.emit(this.facetCriteria);
 	}
 
+	getOrganisations() {
+		const fields: Array<string> = new Array<string>();
+		fields.push('asc');
+		const dataTableRequest: DataTableRequest<OrganisationCriteria> = new DataTableRequest(0, null, { fields: fields });
+		dataTableRequest.criteria = new OrganisationCriteria();
+		dataTableRequest.criteria.labelLike = '';
+		return this.organisationService.searchPublicOrganisations(dataTableRequest).map(x => x.data);
+	}
+
 	public dmpOrganisationChanged(event: any) {
 		const eventValue = event.option.value.id;
 		if (event.option.selected) { this.facetCriteria.dmpOrganisations.push(eventValue); }
@@ -181,6 +230,48 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
 		this.facetCriteriaChange.emit(this.facetCriteria);
 	}
 
+	onProjectOptionSelected(items: ProjectListingModel[]) {
+		this.facetCriteria.projects.splice(0);
+		this.facetCriteria.projects.push(...items.map(x => x.id));
+		this.facetCriteriaChange.emit(this.facetCriteria);
+	}
+
+	onProjectOptionRemoved(item: ProjectListingModel) {
+		const index = this.facetCriteria.projects.indexOf(item.id);
+		if (index >= 0) {
+			this.facetCriteria.projects.splice(index, 1);
+			this.facetCriteriaChange.emit(this.facetCriteria);
+		}
+	}
+
+	onProfileOptionSelected(items: DatasetProfileModel[]) {
+		this.facetCriteria.datasetProfile.splice(0);
+		this.facetCriteria.datasetProfile.push(...items.map(x => x.id));
+		this.facetCriteriaChange.emit(this.facetCriteria);
+	}
+
+	onProfileOptionRemoved(item: DatasetProfileModel) {
+		const index = this.facetCriteria.datasetProfile.indexOf(item.id);
+		if (index >= 0) {
+			this.facetCriteria.datasetProfile.splice(index, 1);
+			this.facetCriteriaChange.emit(this.facetCriteria);
+		}
+	}
+
+	onOrganizationOptionSelected(items: OrganizationModel[]) {
+		this.facetCriteria.dmpOrganisations.splice(0);
+		this.facetCriteria.dmpOrganisations.push(...items.map(x => x.id));
+		this.facetCriteriaChange.emit(this.facetCriteria);
+	}
+
+	onOrganizationOptionRemoved(item: OrganizationModel) {
+		const index = this.facetCriteria.dmpOrganisations.indexOf(item.id);
+		if (index >= 0) {
+			this.facetCriteria.dmpOrganisations.splice(index, 1);
+			this.facetCriteriaChange.emit(this.facetCriteria);
+		}
+	}
+
 	filterTags(value: string): Observable<ExternalSourceItemModel[]> {
 		this.filteredTags = undefined;
 		this.filteringTagsAsync = true;
@@ -193,7 +284,35 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
 		// 	this.filteredTags = items;
 		// 	this.filteringTagsAsync = false;
 		// });
+	}
 
+	filterProject(query: string) {
+		const fields: Array<string> = new Array<string>();
+		fields.push('asc');
+		const projectRequestItem: DataTableRequest<ProjectCriteria> = new DataTableRequest(0, null, { fields: fields });
+		projectRequestItem.criteria = new ProjectCriteria();
+		projectRequestItem.criteria.like = query;
+		return this.projectService.getPublicPaged(projectRequestItem).map(x => x.data);
+	}
 
+	filterProfile(query: string) {
+		const fields: Array<string> = new Array<string>();
+		fields.push('asc');
+		const profileRequestItem: DataTableRequest<ExploreDatasetCriteriaModel> = new DataTableRequest(0, null, { fields: fields });
+		profileRequestItem.criteria = new ExploreDatasetCriteriaModel();
+		profileRequestItem.criteria.like = query;
+
+		return this.dmpService.getPublicPaged(profileRequestItem).map(x => x.data);
+	}
+
+	filterOrganisation(value: string) {
+		this.filteringOrganisationsAsync = true;
+		const fields: Array<string> = new Array<string>();
+		fields.push('asc');
+		const dataTableRequest: DataTableRequest<OrganisationCriteria> = new DataTableRequest(0, null, { fields: fields });
+		dataTableRequest.criteria = new OrganisationCriteria();
+		dataTableRequest.criteria.labelLike = value;
+
+		return this.organisationService.searchPublicOrganisations(dataTableRequest).map(x => x.data);
 	}
 }

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

@@ -1,19 +1,50 @@
-<div class="explore-dataset-listing-item row" (click)="itemClicked()">
+<div class="listing-item" (click)="itemClicked()">
-	<div class="col-auto">
-		<mat-icon *ngIf="draft" class="draft-bookmark">bookmark</mat-icon>
-		<mat-icon *ngIf="!draft" class="finalized-bookmark">bookmark</mat-icon>
-	</div>
 	<div class="col">
-		<h4>{{ dataset.label }}</h4>
+		<div class="row">
-		<p>{{ dataset.description }}</p>
+			<div class="col-12 gray-container container-header">
-		<div class="explore-dataset-info">
+				<!-- <p></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">
+				<mat-icon *ngIf="isDraft" class="draft-bookmark">bookmark</mat-icon>
+				<mat-icon *ngIf="!isDraft" class="finalized-bookmark">bookmark</mat-icon>
+				<h4 *ngIf="isDraft"><span>DRAFT:</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-12 about-item">
+				<mat-icon class="gray-icon pt-2">storage</mat-icon>
+				<h4 class="mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
+
+				<mat-icon class="gray-icon pt-2">work_outline</mat-icon>
+				<h4 class="mt-2 ml-1 mr-3 p-1">{{ dataset.project }}</h4>
+
+				<mat-icon 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>
+		<!-- <div class="info">
 			<h6>{{ dataset.dmp }}</h6>
 			<p>{{ dataset.project }}</p>
 		</div>
-		<div class="template-name"><p>{{ dataset.profile }}</p></div>
+		<div class="row" style="margin-left: 0px !important">
+			<div class="chip">
+				<p>{{ dataset.profile }}</p>
+			</div>
+		</div> -->
 	</div>
-	<!-- <div class="col-auto">
-		<mat-icon>more_horiz</mat-icon>
-	</div> -->
 </div>
-<mat-divider *ngIf="showDivider"></mat-divider>
+<!-- <mat-divider *ngIf="showDivider"></mat-divider> -->

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

@@ -1,3 +1,52 @@
+.gray-container {
+  letter-spacing: 5px;
+  color: #aaaaaa;
+}
+
+.container-header {
+  display: flex;
+  align-items: baseline;
+  margin-top: 0px;
+  text-transform: uppercase;
+}
+
+.container-header p {
+  letter-spacing: 5px;
+  color: #aaaaaa;
+  padding: 5px 30px;
+  margin-bottom: 0px;
+}
+
+h4 {
+  display: inline;
+  padding-left: 1em;
+}
+
+.title h4 {
+  padding-left: 30px;
+  line-height: 2em;
+}
+
+.about-item {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.about-item .length {
+  color: rgb(70, 135, 240);
+}
+
+.about-item .title {
+  margin: 2px 10px;
+}
+
+.about-item p {
+  margin-left: auto;
+  margin-bottom: 0px;
+  padding-top: 7px;
+  color: #aaaaaa;
+}
+
 // .explore-dataset-info {
 //   background-color: #f6f6f6;
 //   padding: 8px 15px;

dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.ts

@@ -12,13 +12,13 @@ export class ExploreDatasetListingItemComponent implements OnInit {
 	@Input() showDivider: boolean = true;
 	@Output() onClick: EventEmitter<DatasetListingModel> = new EventEmitter();
 
-	draft: boolean;
+	isDraft: boolean;
 
 	constructor() { }
 
 	ngOnInit() {
-		if (this.dataset.status == 0) { this.draft = true }
+		if (this.dataset.status == 0) { this.isDraft = true }
-		else { this.draft = false }
+		else { this.isDraft = false }
 	}
 
 	itemClicked() {

dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html

@@ -7,7 +7,7 @@
 <div class="explore-dmp-content">
 	<div class="container-fluid">
 		<div class="card">
-			<div class="card-header card-header-blue d-flex">
+			<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-LISTING.TITLE' | translate}}</h4>
 					<p class="card-category">{{'DMP-LISTING.SUBTITLE' | translate}}</p>