Styles: Public Dmps Listing
This commit is contained in:
apapachristou
parent
c265e5e2fa
commit
1b340ac1f7
|
|
@ -1,9 +1,7 @@
|
||||||
<div class="listing-item" (click)="itemClicked()">
|
<div class="listing-item" (click)="itemClicked()">
|
||||||
<div class="col-auto">
|
<div class="col">
|
||||||
<mat-icon *ngIf="isDraft" class="draft-bookmark">bookmark</mat-icon>
|
<mat-icon *ngIf="isDraft" class="draft-bookmark">bookmark</mat-icon>
|
||||||
<mat-icon *ngIf="!isDraft" class="finalized-bookmark">bookmark</mat-icon>
|
<mat-icon *ngIf="!isDraft" class="finalized-bookmark">bookmark</mat-icon>
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<h4 *ngIf="isDraft"><span>DRAFT:</span> {{ dataset.label }}</h4>
|
<h4 *ngIf="isDraft"><span>DRAFT:</span> {{ dataset.label }}</h4>
|
||||||
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
|
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
|
||||||
<p>{{ dataset.description }}</p>
|
<p>{{ dataset.description }}</p>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
h4 {
|
||||||
|
display: inline;
|
||||||
|
padding-left: 1em;
|
||||||
|
}
|
||||||
|
|
@ -1,34 +1,40 @@
|
||||||
.explore-dataset-info {
|
// .explore-dataset-info {
|
||||||
background-color: #f6f6f6;
|
// background-color: #f6f6f6;
|
||||||
padding: 8px 15px;
|
// padding: 8px 15px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.explore-dataset-info p {
|
// .explore-dataset-info p {
|
||||||
margin-bottom: 0px;
|
// margin-bottom: 0px;
|
||||||
color: rgb(37, 35, 140);
|
// color: rgb(37, 35, 140);
|
||||||
font-weight: 600;
|
// font-weight: 600;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.template-name {
|
// .template-name {
|
||||||
padding-left: 0px;
|
// padding-left: 0px;
|
||||||
border: 1px solid rgb(218, 227, 243);
|
// border: 1px solid rgb(218, 227, 243);
|
||||||
color: rgb(43, 104, 209);
|
// color: rgb(43, 104, 209);
|
||||||
background-color: rgb(236, 241, 249);
|
// background-color: rgb(236, 241, 249);
|
||||||
border-radius: 10em;
|
// border-radius: 10em;
|
||||||
justify-content: center;
|
// justify-content: center;
|
||||||
text-transform: uppercase;
|
// text-transform: uppercase;
|
||||||
display: flex;
|
// display: flex;
|
||||||
width: 25em;
|
// width: 25em;
|
||||||
height: 1.8em;
|
// height: 1.8em;
|
||||||
margin-top: 15px;
|
// margin-top: 15px;
|
||||||
font-size: 13px;
|
// font-size: 13px;
|
||||||
font-weight: 500;
|
// font-weight: 500;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.draft-bookmark {
|
// .draft-bookmark {
|
||||||
color: #e7e6e6;
|
// color: #e7e6e6;
|
||||||
}
|
// display: inline;
|
||||||
|
// }
|
||||||
|
|
||||||
.finalized-bookmark {
|
// .finalized-bookmark {
|
||||||
color: #92d050;
|
// color: #92d050;
|
||||||
}
|
// display: inline;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// h4 {
|
||||||
|
// display: inline;
|
||||||
|
// }
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,60 @@
|
||||||
text-center {
|
text-center {
|
||||||
text-align: center
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-image {
|
.header-image {
|
||||||
background: url('/assets/images/public-dmps-bg.png') no-repeat;
|
background: url("/assets/images/public-dmps-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 {
|
.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 {
|
.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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,41 @@
|
||||||
<div class="explore-dmp-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">
|
||||||
|
{{dmp.projectabbreviation}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 about-item">
|
||||||
|
<mat-icon>lock</mat-icon>
|
||||||
|
<h4 class="title">{{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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <div class="explore-dmp-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>
|
||||||
|
|
@ -32,4 +69,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> -->
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,78 @@
|
||||||
.explore-dmp-listing-item {
|
.gray-container {
|
||||||
margin-top: 2em;
|
letter-spacing: 5px;
|
||||||
margin-bottom: 2em;
|
color: #aaaaaa;
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-title {
|
|
||||||
color: rgb(93, 125, 173);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gray-icon {
|
|
||||||
color: rgb(191, 191, 191);
|
|
||||||
}
|
|
||||||
|
|
||||||
.explore-dmp-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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.explore-dmp-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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .explore-dmp-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);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .explore-dmp-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);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .explore-dmp-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;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
|
||||||
|
|
@ -121,11 +121,13 @@ $theme: mat-light-theme($primary, $accent);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
.draft-bookmark {
|
.draft-bookmark {
|
||||||
color: #e7e6e6;
|
color: #e7e6e6;
|
||||||
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.finalized-bookmark {
|
.finalized-bookmark {
|
||||||
color: #92d050;
|
color: #92d050;
|
||||||
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 span {
|
h4 span {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue