Styles: Project Listing, Adds: Link on public dataset item, Fixes: Colors
This commit is contained in:
apapachristou
parent
0f89b75e61
commit
b13bbdb670
|
|
@ -7,7 +7,7 @@
|
|||
<p class="card-category">{{'DATASET-LISTING.SUBTITLE' | translate}}</p>
|
||||
</div>
|
||||
<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}}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
|
|||
}
|
||||
|
||||
rowClicked(dataset: DatasetListingModel) {
|
||||
//this.router.navigate(['/datasets/editPublic/' + dataset.id]);
|
||||
this.router.navigate(['/datasets/publicEdit/' + dataset.id]);
|
||||
}
|
||||
|
||||
onCriteriaChange(event: ExploreDatasetCriteriaModel) {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<mat-icon>lock</mat-icon>
|
||||
</div>
|
||||
|
|
@ -17,4 +47,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider *ngIf="showDivider"></mat-divider>
|
||||
<mat-divider *ngIf="showDivider"></mat-divider> -->
|
||||
|
|
|
|||
|
|
@ -1,38 +1,42 @@
|
|||
.project-listing-item {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
cursor: pointer;
|
||||
|
||||
.title {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
color: rgb(93, 125, 173);
|
||||
}
|
||||
|
||||
.gray-icon {
|
||||
color: rgb(191, 191, 191);
|
||||
}
|
||||
|
||||
.project-chip {
|
||||
padding: 0.1em 1em;
|
||||
border: 0.1em solid rgb(236, 241, 249);
|
||||
border-radius: 10em;
|
||||
background-color: rgb(236, 241, 249);
|
||||
color: rgb(68, 114, 196);
|
||||
}
|
||||
|
||||
.project-squared-chip {
|
||||
padding: 0.1em 1em;
|
||||
border: 0.1em solid rgb(236, 241, 249);
|
||||
border-radius: 0.5em;
|
||||
background-color: rgb(246, 246, 246);
|
||||
color: rgb(127, 127, 127);
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.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;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.about-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<div class="main-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">{{languageResolverService.getBy('listingTitle') | translate}}</h4>
|
||||
<p class="card-category">{{'PROJECT-LISTING.SUBTITLE' | translate}}</p>
|
||||
</div>
|
||||
<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}}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -21,14 +21,14 @@
|
|||
<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>
|
||||
</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 class="main-content">
|
||||
<div class="container-fluid">
|
||||
<h3>{{languageResolverService.getBy('listingTitle') | translate}}</h3>
|
||||
|
|
|
|||
Loading…
Reference in New Issue