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

Styles: Public Dmps Listing

This commit is contained in:
apapachristou 2019-05-09 18:22:09 +03:00
parent c265e5e2fa
commit 1b340ac1f7
8 changed files with 211 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -0,0 +1,4 @@
h4 {
display: inline;
padding-left: 1em;
}

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

@ -22,4 +22,4 @@ text-center {
.explore-dmp-content {
padding: 30px 15px;
}
}

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

@ -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;
// }

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

@ -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;
}

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

@ -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> -->

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

@ -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;
// }
// }

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

@ -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 {