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="col-auto">
|
||||
<div class="col">
|
||||
<mat-icon *ngIf="isDraft" class="draft-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">{{ dataset.label }}</h4>
|
||||
<p>{{ dataset.description }}</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
h4 {
|
||||
display: inline;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
|
@ -1,34 +1,40 @@
|
|||
.explore-dataset-info {
|
||||
background-color: #f6f6f6;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
// .explore-dataset-info {
|
||||
// background-color: #f6f6f6;
|
||||
// padding: 8px 15px;
|
||||
// }
|
||||
|
||||
.explore-dataset-info p {
|
||||
margin-bottom: 0px;
|
||||
color: rgb(37, 35, 140);
|
||||
font-weight: 600;
|
||||
}
|
||||
// .explore-dataset-info p {
|
||||
// margin-bottom: 0px;
|
||||
// color: rgb(37, 35, 140);
|
||||
// font-weight: 600;
|
||||
// }
|
||||
|
||||
.template-name {
|
||||
padding-left: 0px;
|
||||
border: 1px solid rgb(218, 227, 243);
|
||||
color: rgb(43, 104, 209);
|
||||
background-color: rgb(236, 241, 249);
|
||||
border-radius: 10em;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
width: 25em;
|
||||
height: 1.8em;
|
||||
margin-top: 15px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
// .template-name {
|
||||
// padding-left: 0px;
|
||||
// border: 1px solid rgb(218, 227, 243);
|
||||
// color: rgb(43, 104, 209);
|
||||
// background-color: rgb(236, 241, 249);
|
||||
// border-radius: 10em;
|
||||
// justify-content: center;
|
||||
// text-transform: uppercase;
|
||||
// display: flex;
|
||||
// width: 25em;
|
||||
// height: 1.8em;
|
||||
// margin-top: 15px;
|
||||
// font-size: 13px;
|
||||
// font-weight: 500;
|
||||
// }
|
||||
|
||||
.draft-bookmark {
|
||||
color: #e7e6e6;
|
||||
}
|
||||
// .draft-bookmark {
|
||||
// color: #e7e6e6;
|
||||
// display: inline;
|
||||
// }
|
||||
|
||||
.finalized-bookmark {
|
||||
color: #92d050;
|
||||
}
|
||||
// .finalized-bookmark {
|
||||
// color: #92d050;
|
||||
// display: inline;
|
||||
// }
|
||||
|
||||
// h4 {
|
||||
// display: inline;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,25 +1,60 @@
|
|||
text-center {
|
||||
text-align: center
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-image {
|
||||
background: url('/assets/images/public-dmps-bg.png') no-repeat;
|
||||
background-size: cover;
|
||||
margin-top: 70px;
|
||||
min-height: 15em;
|
||||
position: relative;
|
||||
background: url("/assets/images/public-dmps-bg.png") no-repeat;
|
||||
background-size: cover;
|
||||
margin-top: 70px;
|
||||
min-height: 15em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-text-container {
|
||||
background: rgba(255,255,255,0.7);
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding-left: 5em;
|
||||
padding-right: 10em;
|
||||
padding-top: 2em;
|
||||
padding-bottom: 2em;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding-left: 5em;
|
||||
padding-right: 10em;
|
||||
padding-top: 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<mat-icon>lock</mat-icon>
|
||||
</div>
|
||||
|
|
@ -32,4 +69,4 @@
|
|||
<mat-icon>more_horiz</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider *ngIf="showDivider"></mat-divider>
|
||||
<mat-divider *ngIf="showDivider"></mat-divider> -->
|
||||
|
|
|
|||
|
|
@ -1,38 +1,78 @@
|
|||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
// .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 {
|
||||
color: #e7e6e6;
|
||||
color: #e7e6e6;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.finalized-bookmark {
|
||||
color: #92d050;
|
||||
color: #92d050;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
h4 span {
|
||||
|
|
|
|||
Loading…
Reference in New Issue