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

Styles: Project Listing, Adds: Link on public dataset item, Fixes: Colors

This commit is contained in:
apapachristou 2019-05-15 11:55:53 +03:00
parent 0f89b75e61
commit b13bbdb670
5 changed files with 79 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
<p class="card-category">{{'DATASET-LISTING.SUBTITLE' | translate}}</p> <p class="card-category">{{'DATASET-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]="['/datasets/new']"> <button mat-raised-button color="primary" class="text-uppercase lightblue-btn" [routerLink]="['/datasets/new']">
<mat-icon>add</mat-icon> {{'DATASET-LISTING.ACTIONS.NEW' | translate}} <mat-icon>add</mat-icon> {{'DATASET-LISTING.ACTIONS.NEW' | translate}}
</button> </button>
</div> </div>

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

@ -48,7 +48,7 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
} }
rowClicked(dataset: DatasetListingModel) { rowClicked(dataset: DatasetListingModel) {
//this.router.navigate(['/datasets/editPublic/' + dataset.id]); this.router.navigate(['/datasets/publicEdit/' + dataset.id]);
} }
onCriteriaChange(event: ExploreDatasetCriteriaModel) { onCriteriaChange(event: ExploreDatasetCriteriaModel) {

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

@ -1,4 +1,34 @@
<div class="project-listing-item row" (click)="itemClicked()"> <div class="listing-item">
<div class="col" (click)="itemClicked()">
<div class="row">
<div class="col-12 gray-container container-header">
<p>{{project.abbreviation}}</p>
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<mat-icon class="draft-icon">lock</mat-icon>
<h4 class="title">{{project.label}}</h4>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="mt-1 mb-2">{{project.description}}</p>
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<mat-icon class="gray-icon pt-2">calendar_today</mat-icon>
<h4 class="mt-2 ml-1 mr-3 p-1">{{project.startDate | date:'shortDate'}} - {{project.endDate | date:'shortDate'}}</h4>
</div>
</div>
</div>
</div>
<!-- <mat-divider *ngIf="showDivider"></mat-divider> -->
<!-- <div class="project-listing-item row" (click)="itemClicked()">
<div class="col-auto"> <div class="col-auto">
<mat-icon>lock</mat-icon> <mat-icon>lock</mat-icon>
</div> </div>
@ -17,4 +47,4 @@
</div> </div>
</div> </div>
</div> </div>
<mat-divider *ngIf="showDivider"></mat-divider> <mat-divider *ngIf="showDivider"></mat-divider> -->

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

@ -1,38 +1,42 @@
.project-listing-item { .gray-container {
margin-top: 2em; letter-spacing: 5px;
margin-bottom: 2em; color: #aaaaaa;
cursor: pointer; }
.title { .container-header {
color: black; display: flex;
} align-items: baseline;
margin-top: 0px;
.project-title { text-transform: uppercase;
color: rgb(93, 125, 173); }
}
.container-header p {
.gray-icon { letter-spacing: 5px;
color: rgb(191, 191, 191); color: #aaaaaa;
} margin-bottom: 0px;
}
.project-chip {
padding: 0.1em 1em; .about-item {
border: 0.1em solid rgb(236, 241, 249); display: flex;
border-radius: 10em; flex-wrap: wrap;
background-color: rgb(236, 241, 249); }
color: rgb(68, 114, 196);
} .about-item .title {
margin: 2px 10px;
.project-squared-chip { }
padding: 0.1em 1em;
border: 0.1em solid rgb(236, 241, 249); .about-item p {
border-radius: 0.5em; margin-left: auto;
background-color: rgb(246, 246, 246); margin-bottom: 0px;
color: rgb(127, 127, 127); padding-top: 7px;
} color: #aaaaaa;
}
mat-icon {
width: auto; .draft-icon {
height: auto; color: #aaaaaa;
} }
.more-horiz {
font-size: 28px;
color: #aaaaaa;
} }

8
dmp-frontend/src/app/ui/project/listing/project-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">{{languageResolverService.getBy('listingTitle') | translate}}</h4> <h4 class="card-title">{{languageResolverService.getBy('listingTitle') | translate}}</h4>
<p class="card-category">{{'PROJECT-LISTING.SUBTITLE' | translate}}</p> <p class="card-category">{{'PROJECT-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]="['./new']"> <button mat-raised-button color="primary" class="text-uppercase lightblue-btn" [routerLink]="['./new']">
<mat-icon>add</mat-icon> {{'PROJECT-LISTING.ACTIONS.NEW' | translate}} <mat-icon>add</mat-icon> {{'PROJECT-LISTING.ACTIONS.NEW' | translate}}
</button> </button>
</div> </div>
@ -21,14 +21,14 @@
<div class="row" *ngFor="let item of listingItems; let i = index"> <div class="row" *ngFor="let item of listingItems; let i = index">
<app-project-listing-item-component class="col-12" [showDivider]="i !== (listingItems.length - 1)" [project]="item" (onClick)="rowClicked($event)"></app-project-listing-item-component> <app-project-listing-item-component class="col-12" [showDivider]="i !== (listingItems.length - 1)" [project]="item" (onClick)="rowClicked($event)"></app-project-listing-item-component>
</div> </div>
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator> <mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" class="mt-2"></mat-paginator>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- <!--
<div class="main-content"> <div class="main-content">
<div class="container-fluid"> <div class="container-fluid">
<h3>{{languageResolverService.getBy('listingTitle') | translate}}</h3> <h3>{{languageResolverService.getBy('listingTitle') | translate}}</h3>