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

Styles: Dmp listing page and some general css changes

This commit is contained in:
apapachristou 2019-05-09 16:30:39 +03:00
parent f0a73cf355
commit 05fe3e57b8
19 changed files with 225 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/core/model/dmp/dmp-listing.ts
View File

@ -3,8 +3,10 @@ import { DmpStatus } from "../../common/enum/dmp-status";
export interface DmpListingModel { export interface DmpListingModel {
id: String; id: String;
label: String; label: String;
description: String;
status: DmpStatus; status: DmpStatus;
project: String; project: String;
projectabbreviation: String;
profile: String; profile: String;
creationTime: String; creationTime: String;
modifiedTime: String; modifiedTime: String;

8
dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
View File

@ -13,7 +13,7 @@
<!-- End of Search Filter --> <!-- End of Search Filter -->
<!-- Status Filter--> <!-- Status Filter-->
<div class="col-10 filter-category" [formGroup]="options"> <div class="col-10 gray-container" [formGroup]="options">
<h6 class="category-title">STATUS</h6> <h6 class="category-title">STATUS</h6>
<mat-list-item><mat-checkbox formControlName="getDrafts">{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}</mat-checkbox></mat-list-item> <mat-list-item><mat-checkbox formControlName="getDrafts">{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}</mat-checkbox></mat-list-item>
<mat-list-item><mat-checkbox formControlName="getFinalized">{{ 'TYPES.DATASET-STATUS.FINALISED' | translate }}</mat-checkbox></mat-list-item> <mat-list-item><mat-checkbox formControlName="getFinalized">{{ 'TYPES.DATASET-STATUS.FINALISED' | translate }}</mat-checkbox></mat-list-item>
@ -21,7 +21,7 @@
</div> </div>
<!-- End of Status Filter--> <!-- End of Status Filter-->
<!-- Related Project Filters --> <!-- Related Project Filters -->
<div class="col-10 filter-category"> <div class="col-10 gray-container">
<h6 class="category-title">{{ 'DMP-RELATED-PROJECT.RELATED-PROJECT' | translate}}</h6> <h6 class="category-title">{{ 'DMP-RELATED-PROJECT.RELATED-PROJECT' | translate}}</h6>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Select Organizations"> <input matInput placeholder="Select Organizations">
@ -35,7 +35,7 @@
<!-- End of Related Projects Filters --> <!-- End of Related Projects Filters -->
<!-- Role Filter --> <!-- Role Filter -->
<div class="col-10 filter-category"> <div class="col-10 gray-container">
<h6 class="category-title">{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</h6> <h6 class="category-title">{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</h6>
<mat-radio-group aria-label="Select an option"> <mat-radio-group aria-label="Select an option">
<mat-list-item> <mat-list-item>
@ -52,7 +52,7 @@
<!-- End of Role Filter --> <!-- End of Role Filter -->
<!-- Related Organization Filter --> <!-- Related Organization Filter -->
<div class="col-10 filter-category"> <div class="col-10 gray-container">
<h6 class="category-title">RELATED ORGANIZATION</h6> <h6 class="category-title">RELATED ORGANIZATION</h6>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Select Organizations"> <input matInput placeholder="Select Organizations">

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

@ -2,11 +2,6 @@
margin-left: 1em; margin-left: 1em;
} }
.filter-category {
background-color: #f6f6f6;
margin: 5px 0px;
}
.category-title { .category-title {
color: #2e75b6; color: #2e75b6;
margin-top: 8px; margin-top: 8px;

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

@ -1,3 +1,34 @@
::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;
}
// .mat-table { // .mat-table {
// margin: 24px; // margin: 24px;
// } // }
@ -35,37 +66,6 @@
// margin-top: 0px; // margin-top: 0px;
// } // }
::ng-deep .mat-paginator { // ::ng-deep .mat-paginator {
margin-top: auto; // margin-top: auto;
} // }
::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;
}

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

@ -1,11 +1,11 @@
<div class="listing-item row" (click)="itemClicked()"> <div class="listing-item row" (click)="itemClicked()">
<div class="col-auto"> <div class="col-auto">
<mat-icon *ngIf="draft" class="draft-bookmark">bookmark</mat-icon> <mat-icon *ngIf="isDraft" class="draft-bookmark">bookmark</mat-icon>
<mat-icon *ngIf="!draft" class="finalized-bookmark">bookmark</mat-icon> <mat-icon *ngIf="!isDraft" class="finalized-bookmark">bookmark</mat-icon>
</div> </div>
<div class="col"> <div class="col">
<h4 *ngIf="draft"><span>DRAFT:</span> {{ dataset.label }}</h4> <h4 *ngIf="isDraft"><span>DRAFT:</span> {{ dataset.label }}</h4>
<h4 *ngIf="!draft">{{ dataset.label }}</h4> <h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
<p>{{ dataset.description }}</p> <p>{{ dataset.description }}</p>
<div class="info"> <div class="info">
<h6>{{ dataset.dmp }}</h6> <h6>{{ dataset.dmp }}</h6>
@ -19,4 +19,4 @@
<mat-icon>more_horiz</mat-icon> <mat-icon>more_horiz</mat-icon>
</div> --> </div> -->
</div> </div>
<mat-divider *ngIf="showDivider"></mat-divider> <!-- <mat-divider *ngIf="showDivider"></mat-divider> -->

6
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts
View File

@ -12,13 +12,13 @@ export class DatasetListingItemComponent implements OnInit {
@Input() showDivider: boolean = true; @Input() showDivider: boolean = true;
@Output() onClick: EventEmitter<DatasetListingModel> = new EventEmitter(); @Output() onClick: EventEmitter<DatasetListingModel> = new EventEmitter();
draft: boolean; isDraft: boolean;
constructor() { } constructor() { }
ngOnInit() { 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() { itemClicked() {

12
dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
View File

@ -13,7 +13,7 @@
<!-- End of Search Filter --> <!-- End of Search Filter -->
<!-- Visibility Filter--> <!-- Visibility Filter-->
<div *ngIf="showProject" class="col-10 filter-category"> <div *ngIf="showProject" class="col-10 gray-container">
<h6 class="category-title">{{ 'TYPES.DMP-VISIBILITY.VISIBILITY' | translate }}</h6> <h6 class="category-title">{{ 'TYPES.DMP-VISIBILITY.VISIBILITY' | translate }}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')"> <mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')">
<mat-list-item><mat-radio-button value="null">{{ 'TYPES.DMP-VISIBILITY.ANY' | translate }}</mat-radio-button></mat-list-item> <mat-list-item><mat-radio-button value="null">{{ 'TYPES.DMP-VISIBILITY.ANY' | translate }}</mat-radio-button></mat-list-item>
@ -24,7 +24,7 @@
<!-- End of Visibility Filter--> <!-- End of Visibility Filter-->
<!-- Related Project Filters --> <!-- Related Project Filters -->
<div *ngIf="showProject" class="col-10 filter-category"> <div *ngIf="showProject" class="col-10 gray-container">
<h6 class="category-title">{{ 'DMP-RELATED-PROJECT.RELATED-PROJECT' | translate}}</h6> <h6 class="category-title">{{ 'DMP-RELATED-PROJECT.RELATED-PROJECT' | translate}}</h6>
<mat-form-field> <mat-form-field>
<app-multiple-auto-complete [formControl]="formGroup.get('projects')" <app-multiple-auto-complete [formControl]="formGroup.get('projects')"
@ -37,7 +37,7 @@
<!-- End of Related Projects Filters --> <!-- End of Related Projects Filters -->
<!-- Collaborators Filter --> <!-- Collaborators Filter -->
<div *ngIf="showProject" class="col-10 filter-category"> <div *ngIf="showProject" class="col-10 gray-container">
<h6 class="category-title">{{ 'DMP-RELATED-COLLABORATOR.RELATED-COLLABORATOR' | translate}}</h6> <h6 class="category-title">{{ 'DMP-RELATED-COLLABORATOR.RELATED-COLLABORATOR' | translate}}</h6>
<mat-form-field> <mat-form-field>
<input matInput placeholder="{{ 'DMP-RELATED-COLLABORATOR.SELECT-COLLABORATORS' | translate }}"> <input matInput placeholder="{{ 'DMP-RELATED-COLLABORATOR.SELECT-COLLABORATORS' | translate }}">
@ -51,7 +51,7 @@
<!-- End of Collaborators Filter --> <!-- End of Collaborators Filter -->
<!-- Role Filter --> <!-- Role Filter -->
<div *ngIf="showProject" class="col-10 filter-category"> <div *ngIf="showProject" class="col-10 gray-container">
<h6 class="category-title">{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</h6> <h6 class="category-title">{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</h6>
<mat-radio-group aria-label="Select an option"> <mat-radio-group aria-label="Select an option">
<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DATASET-ROLE.ANY' | translate }}</mat-radio-button></mat-list-item> <mat-list-item><mat-radio-button value="1">{{ 'TYPES.DATASET-ROLE.ANY' | translate }}</mat-radio-button></mat-list-item>
@ -62,7 +62,7 @@
<!-- End of Role Filter --> <!-- End of Role Filter -->
<!-- Related Organization Filter --> <!-- Related Organization Filter -->
<div *ngIf="showProject" class="col-10 filter-category"> <div *ngIf="showProject" class="col-10 gray-container">
<h6 class="category-title">{{ 'DMP-RELATED-ORGANIZATION.RELATED-ORGANIZATION' | translate }}</h6> <h6 class="category-title">{{ 'DMP-RELATED-ORGANIZATION.RELATED-ORGANIZATION' | translate }}</h6>
<mat-form-field> <mat-form-field>
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" <app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
@ -76,7 +76,7 @@
<!-- Import Button --> <!-- Import Button -->
<div class="col-10 import"> <div class="col-10 import">
<button class="importButton" mat-raised-button color="primary" <button class="importButton lightblue-btn" mat-raised-button color="primary"
(click)="fileSave($event)" type="button col-auto"> (click)="fileSave($event)" type="button col-auto">
{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}} {{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}
</button> </button>

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

@ -21,11 +21,6 @@
margin-left: 1em; margin-left: 1em;
} }
.filter-category {
background-color: #f6f6f6;
margin: 5px 0px;
}
.category-title { .category-title {
color: #2e75b6; color: #2e75b6;
margin-top: 8px; margin-top: 8px;

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

@ -1,13 +1,13 @@
<div class="main-content"> <div class="main-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="card"> <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"> <div class="card-desc d-flex flex-column justify-content-center">
<h4 class="card-title">{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h4> <h4 class="card-title">{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h4>
<p class="card-category">{{'DMP-LISTING.SUBTITLE' | translate}}</p> <p class="card-category">{{'DMP-LISTING.SUBTITLE' | translate}}</p>
</div> </div>
<div class="d-flex align-items-center ml-auto p-2"> <div class="d-flex align-items-center ml-auto p-2">
<button mat-raised-button color="primary" class="text-uppercase" [routerLink]="projectId ? ['/plans/new/project/', projectId] : ['./new'] "> <button mat-raised-button color="primary" class="text-uppercase lightblue-btn" [routerLink]="projectId ? ['/plans/new/project/', projectId] : ['./new'] ">
<mat-icon>add</mat-icon> {{'DMP-LISTING.ACTIONS.NEW' | translate}} <mat-icon>add</mat-icon> {{'DMP-LISTING.ACTIONS.NEW' | translate}}
</button> </button>
</div> </div>
@ -17,11 +17,12 @@
<div class="col-3"> <div class="col-3">
<app-dmp-criteria-component [showProject]="showProject" class="col-auto"></app-dmp-criteria-component> <app-dmp-criteria-component [showProject]="showProject" class="col-auto"></app-dmp-criteria-component>
</div> </div>
<div class="col-9"> <div class="col-9 pt-4">
<div class="row" *ngFor="let item of listingItems; let i = index"> <mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)" class="top-paginator"></mat-paginator>
<app-dmp-listing-item-component class="col-12" [showDivider]="i != (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component> <div *ngFor="let item of listingItems; let i = index">
<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
</div> </div>
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)"></mat-paginator> <mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)" class="mt-2"></mat-paginator>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,7 +1,3 @@
::ng-deep .mat-paginator {
margin-top: auto;
}
::ng-deep .mat-paginator-container { ::ng-deep .mat-paginator-container {
flex-direction: row-reverse !important; flex-direction: row-reverse !important;
justify-content: space-between !important; justify-content: space-between !important;
@ -33,6 +29,23 @@
margin-left: auto !important; margin-left: auto !important;
} }
.top-paginator ::ng-deep .mat-paginator-navigation-previous {
display: none !important;
}
.top-paginator ::ng-deep .mat-paginator-navigation-next {
display: none !important;
}
// .bot-paginator {
// margin-top: auto;
// }
// ::ng-deep .mat-paginator {
// margin-top: auto;
// }
// .listing { // .listing {
// .mat-card { // .mat-card {
// margin: 1em 0; // margin: 1em 0;

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

@ -1,33 +1,10 @@
<div class="listing-item row"> <div class="listing-item">
<div class="col-auto">
<mat-icon>lock</mat-icon>
</div>
<div class="col" (click)="itemClicked()"> <div class="col" (click)="itemClicked()">
<div class="row"> <div class="row">
<h4 class="col-12 title">{{dmp.label}}</h4> <div class="col-12 gray-container container-header">
<h4 class="col-12 project-title">{{dmp.project}}</h4> {{dmp.projectabbreviation}}
</div> <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto" (click)="$event.stopImmediatePropagation();">
<div class="row d-flex align-items-center my-1"> <mat-icon class="more-horiz">more_horiz</mat-icon>
<mat-icon class="col-auto type-icon">storage</mat-icon>
<h4 class="col-auto m-2 p-1">{{dmp.datasets.length}}</h4>
<div class="row" *ngFor="let profile of dmp.associatedProfiles">
<div class="col-auto chip ml-3 mr-5">{{profile.label}}</div>
</div>
</div>
<div class="row d-flex align-items-center my-1">
<mat-icon class="col-auto type-icon">settings</mat-icon>
<h4 class="col-auto m-0 p-0">OWNER</h4>
</div>
<div class="row d-flex align-items-center my-1">
<mat-icon class="col-auto type-icon">group</mat-icon>
<div class="row" *ngFor="let user of dmp.users">
<div class="col-auto dmp-squared-chip mr-2">{{user.name}}</div>
</div>
</div>
</div>
<div class="col-auto">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<mat-icon>more_horiz</mat-icon>
</button> </button>
<mat-menu #actionsMenu="matMenu"> <mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="openShareDialog(dmp.id,dmp.label)"> <button mat-menu-item (click)="openShareDialog(dmp.id,dmp.label)">
@ -45,4 +22,41 @@
</mat-menu> </mat-menu>
</div> </div>
</div> </div>
<mat-divider *ngIf="showDivider"></mat-divider> <div class="row">
<div class="col-12 about-item">
<mat-icon *ngIf="isDraft" class="draft-icon">lock</mat-icon>
<mat-icon *ngIf="!isDraft">lock</mat-icon>
<h4 class="title" *ngIf="isDraft"><span>DRAFT:</span>{{dmp.label}}</h4>
<h4 class="title" *ngIf="!isDraft">{{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-12 about-item">
<mat-icon class="gray-icon pt-2">settings</mat-icon>
<h4 class="mt-2 ml-1 mr-3 p-1">OWNER</h4>
<mat-icon class="gray-icon pt-2">storage</mat-icon>
<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
<mat-icon class="gray-icon pt-2">assignment</mat-icon>
<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
<div class="chip ml-2 mr-2">{{profile.label}}</div>
</div>
<p>Published {{dmp.creationTime | 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> -->
</div>
</div>
<!-- <mat-divider *ngIf="showDivider"></mat-divider> -->

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

@ -0,0 +1,39 @@
.gray-container {
letter-spacing: 5px;
color: #aaaaaa;
}
.container-header {
display: flex;
align-items: baseline;
margin-top: 0px;
text-transform: uppercase;
}
.about-item {
display: flex;
}
.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;
}
.draft-icon {
color: #aaaaaa;
}
.more-horiz {
font-size: 28px;
color: #aaaaaa;
}

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

@ -15,9 +15,13 @@ export class DmpListingItemComponent implements OnInit {
@Input() showDivider: boolean = true; @Input() showDivider: boolean = true;
@Output() onClick: EventEmitter<DmpListingModel> = new EventEmitter(); @Output() onClick: EventEmitter<DmpListingModel> = new EventEmitter();
isDraft: boolean;
constructor(private router: Router, private dialog: MatDialog) { } constructor(private router: Router, private dialog: MatDialog) { }
ngOnInit() { ngOnInit() {
if (this.dmp.status == 0) { this.isDraft = true }
else { this.isDraft = false }
} }
itemClicked() { itemClicked() {

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

@ -8,18 +8,18 @@
<h4 class="col-12 project-title">{{dmp.project}}</h4> <h4 class="col-12 project-title">{{dmp.project}}</h4>
</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 type-icon">storage</mat-icon> <mat-icon class="col-auto gray-icon">storage</mat-icon>
<h4 class="col-auto m-2 p-1">{{dmp.associatedProfiles.length}}</h4> <h4 class="col-auto m-2 p-1">{{dmp.associatedProfiles.length}}</h4>
<div class="row" *ngFor="let profile of dmp.associatedProfiles"> <div class="row" *ngFor="let profile of dmp.associatedProfiles">
<div class="col-auto explore-dmp-chip ml-2">{{profile.label}}</div> <div class="col-auto explore-dmp-chip ml-2">{{profile.label}}</div>
</div> </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 type-icon">settings</mat-icon> <mat-icon class="col-auto gray-icon">settings</mat-icon>
<h4 class="col-auto m-0 p-0">OWNER</h4> <h4 class="col-auto m-0 p-0">OWNER</h4>
</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 type-icon">group</mat-icon> <mat-icon class="col-auto gray-icon">group</mat-icon>
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div> <div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div> <div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div> <div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>

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

@ -11,7 +11,7 @@
color: rgb(93, 125, 173); color: rgb(93, 125, 173);
} }
.type-icon { .gray-icon {
color: rgb(191, 191, 191); color: rgb(191, 191, 191);
} }

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

@ -8,11 +8,11 @@
<h4 class="col-12 project-title">{{project.abbreviation}}</h4> <h4 class="col-12 project-title">{{project.abbreviation}}</h4>
</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 type-icon">desc</mat-icon> <mat-icon class="col-auto gray-icon">desc</mat-icon>
<span class="col-auto m-2 p-1">{{project.description}}</span> <span class="col-auto m-2 p-1">{{project.description}}</span>
</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 type-icon">settings</mat-icon> <mat-icon class="col-auto gray-icon">settings</mat-icon>
<h4 class="col-auto m-2 p-1">{{project.startDate | date:'shortDate'}}</h4> - <h4 class="col-auto m-2 p-1">{{project.endDate | date:'shortDate'}}</h4> <h4 class="col-auto m-2 p-1">{{project.startDate | date:'shortDate'}}</h4> - <h4 class="col-auto m-2 p-1">{{project.endDate | date:'shortDate'}}</h4>
</div> </div>
</div> </div>

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

@ -11,7 +11,7 @@
color: rgb(93, 125, 173); color: rgb(93, 125, 173);
} }
.type-icon { .gray-icon {
color: rgb(191, 191, 191); color: rgb(191, 191, 191);
} }

7
dmp-frontend/src/app/ui/project/listing/project-listing.component.scss
View File

@ -9,9 +9,9 @@
} }
} }
::ng-deep .mat-paginator { // ::ng-deep .mat-paginator {
margin-top: auto; // margin-top: auto;
} // }
::ng-deep .mat-paginator-container { ::ng-deep .mat-paginator-container {
flex-direction: row-reverse !important; flex-direction: row-reverse !important;
@ -43,4 +43,3 @@
::ng-deep .mat-paginator-navigation-previous { ::ng-deep .mat-paginator-navigation-previous {
margin-left: auto !important; margin-left: auto !important;
} }

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

@ -30,10 +30,15 @@ $theme: mat-light-theme($primary, $accent);
color: #111010; color: #111010;
} }
.lightblue-btn {
background-color: rgb(70, 135, 240) !important;
}
.listing-item { .listing-item {
margin-top: 2em; margin-top: 0.5em;
margin-bottom: 2em; padding: 0.5em;
cursor: pointer; cursor: pointer;
border: 3px solid #f2f2f2;
.title { .title {
color: black; color: black;
@ -43,11 +48,20 @@ $theme: mat-light-theme($primary, $accent);
color: rgb(93, 125, 173); color: rgb(93, 125, 173);
} }
.type-icon { .gray-icon {
color: rgb(191, 191, 191); color: rgb(191, 191, 191);
} }
.chip { .chip {
padding: 0.1em 1em;
border-radius: 10em;
background-color: rgb(70, 135, 230);
color: #fff;
text-transform: uppercase;
font-weight: 500;
}
.bordered-chip {
padding: 0.1em 1em; padding: 0.1em 1em;
border: 0.1em solid rgb(218, 227, 243); border: 0.1em solid rgb(218, 227, 243);
border-radius: 10em; border-radius: 10em;
@ -115,7 +129,7 @@ $theme: mat-light-theme($primary, $accent);
} }
h4 span { h4 span {
color: #0070c0; color: #619ce3;
font-weight: 600; font-weight: 600;
} }
} }
@ -130,3 +144,8 @@ $theme: mat-light-theme($primary, $accent);
flex-direction: column; flex-direction: column;
} }
} }
.gray-container {
background: linear-gradient(180deg, #f6f6f6, #fff);
margin: 5px 0px;
}