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

Css merge files, dataset listing fixing style

This commit is contained in:
apapachristou 2019-05-08 16:29:52 +03:00
parent 4902906fbc
commit e387ed152c
9 changed files with 229 additions and 176 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

@ -13,7 +13,7 @@
</div>
</div>
<div class="card-body table-responsive">
<div class="dmp-listing row">
<div class="listing row">
<div class="col-3">
<app-dataset-criteria-component></app-dataset-criteria-component>
</div>

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

@ -1,43 +1,36 @@
@import "../../dmp/listing/dmp-listing.component.scss";
// .mat-table {
// margin: 24px;
// }
.mat-table {
margin: 24px;
}
// .mat-fab-bottom-right {
// float: right;
// z-index: 5;
// }
.mat-fab-bottom-right {
// top: auto !important;
// right: 20px !important;
// bottom: 10px !important;
// left: auto !important;
// position: fixed !important;
float: right;
z-index: 5;
}
// .full-width {
// width: 100%;
// }
.full-width {
width: 100%;
}
// .mat-card {
// margin: 16px 0;
// }
.mat-card {
margin: 16px 0;
}
// .mat-row {
// cursor: pointer;
// }
.mat-row {
cursor: pointer;
}
mat-row:hover {
background-color: lightgray;
}
// mat-row:hover {
// background-color: lightgray;
// }
// mat-row:nth-child(even){
// background-color:red;
// }
mat-row:nth-child(odd) {
background-color: #eef0fb;
}
// mat-row:nth-child(odd) {
// background-color: #eef0fb;
// }
h3 {
margin-top: 0px;
}
// h3 {
// margin-top: 0px;
// }

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

@ -1,16 +1,19 @@
<div class="dataset-listing-item row" (click)="itemClicked()">
<div class="listing-item row" (click)="itemClicked()">
<div class="col-auto">
<mat-icon *ngIf="draft" class="draft-bookmark">bookmark</mat-icon>
<mat-icon *ngIf="!draft" class="finalized-bookmark">bookmark</mat-icon>
</div>
<div class="col">
<h4>{{ dataset.label }}</h4>
<h4 *ngIf="draft"><span>DRAFT:</span> {{ dataset.label }}</h4>
<h4 *ngIf="!draft">{{ dataset.label }}</h4>
<p>{{ dataset.description }}</p>
<div class="dataset-info">
<div class="info">
<h6>{{ dataset.dmp }}</h6>
<p>{{ dataset.project }}</p>
</div>
<div class="template-name"><p>{{ dataset.profile }}</p></div>
<div class="row" style="margin-left: 0px !important">
<div class="chip"><p>{{ dataset.profile }}</p></div>
</div>
</div>
<!-- <div class="col-auto">
<mat-icon>more_horiz</mat-icon>

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

@ -1,36 +0,0 @@
@import "../../../dmp/listing/listing-item/dmp-listing-item.component.scss";
.dataset-info {
background-color: #f6f6f6;
padding: 8px 15px;
}
.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;
}
.draft-bookmark {
color: #e7e6e6;
}
.finalized-bookmark {
color: #92d050;
}

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

@ -13,14 +13,13 @@
</div>
</div>
<div class="card-body table-responsive">
<div class="dmp-listing row">
<div class="listing row">
<div class="col-3">
<app-dmp-criteria-component [showProject]="showProject" class="col-auto"></app-dmp-criteria-component>
</div>
<div class="col-9">
<div class="row" *ngFor="let item of listingItems; let last = last">
<app-dmp-listing-item-component *ngIf="!last" class="col-12" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
<app-dmp-listing-item-component *ngIf="last" class="col-12" [showDivider]="false" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
<div class="row" *ngFor="let item of listingItems; let i = index">
<app-dmp-listing-item-component class="col-12" [showDivider]="i != (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
</div>
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
</div>

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

@ -1,45 +1,45 @@
.dmp-listing {
.mat-card {
margin: 1em 0;
}
// .listing {
// .mat-card {
// margin: 1em 0;
// }
.col-9 {
display: flex;
flex-direction: column;
}
}
// .col-9 {
// display: flex;
// flex-direction: column;
// }
// }
::ng-deep .mat-paginator {
margin-top: auto;
}
// ::ng-deep .mat-paginator {
// margin-top: auto;
// }
::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-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-paginator-page-size {
// height: 43px;
// }
::ng-deep .mat-icon-button {
height: 30px !important;
font-size: 12px !important;
}
// ::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-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-range-actions {
// width: 55% !important;
// min-height: 43px !important;
// justify-content: space-between;
// }
::ng-deep .mat-paginator-navigation-previous {
margin-left: auto !important;
}
// ::ng-deep .mat-paginator-navigation-previous {
// margin-left: auto !important;
// }

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

@ -1,4 +1,4 @@
<div class="dmp-listing-item row">
<div class="listing-item row">
<div class="col-auto">
<mat-icon>lock</mat-icon>
</div>
@ -11,7 +11,7 @@
<mat-icon class="col-auto type-icon">storage</mat-icon>
<h4 class="col-auto m-2 p-1">{{dmp.associatedProfiles.length}}</h4>
<div class="row" *ngFor="let profile of dmp.associatedProfiles">
<div class="col-auto dmp-chip ml-3 mr-5">{{profile.label}}</div>
<div class="col-auto chip ml-3 mr-5">{{profile.label}}</div>
</div>
</div>
<div class="row d-flex align-items-center my-1">
@ -20,12 +20,12 @@
</div>
<div class="row d-flex align-items-center my-1">
<mat-icon class="col-auto type-icon">group</mat-icon>
<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
<div class="col-auto squared-chip mr-2">JOHN DOE</div>
<div class="col-auto squared-chip mr-2">JOHN DOE</div>
<div class="col-auto squared-chip mr-2">JOHN DOE</div>
<div class="col-auto squared-chip mr-2">JOHN DOE</div>
<div class="col-auto squared-chip mr-2">JOHN DOE</div>
<div class="col-auto squared-chip mr-2">JOHN DOE</div>
</div>
</div>
<div class="col-auto">

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

@ -1,42 +0,0 @@
.dmp-listing-item {
margin-top: 2em;
margin-bottom: 2em;
cursor: pointer;
.title {
color: black;
}
.project-title {
color: rgb(93, 125, 173);
}
.type-icon {
color: rgb(191, 191, 191);
}
.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);
}
.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;
}
.mr-5 {
margin-right: 2rem !important;
}
}

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

@ -4,8 +4,8 @@
//Material-Bootstrap configuration
@import "assets/scss/bootstrap-material";
@import '~@angular/material/theming';
@import '~@covalent/core/theming/all-theme';
@import "~@angular/material/theming";
@import "~@covalent/core/theming/all-theme";
@include mat-core();
// Define a theme.
$primary: mat-palette($mat-indigo);
@ -16,16 +16,152 @@ $theme: mat-light-theme($primary, $accent);
// @include covalent-theme($theme);
.snackbar-warning {
background-color: #F39010;
color: #F3EFEF;
background-color: #f39010;
color: #f3efef;
}
.snackbar-success {
background-color: #109204;
color: #F3EFEF;
color: #f3efef;
}
.snackbar-error {
background-color: #CF1407;
background-color: #cf1407;
color: #111010;
}
.listing-item {
margin-top: 2em;
margin-bottom: 2em;
cursor: pointer;
.title {
color: black;
}
.project-title {
color: rgb(93, 125, 173);
}
.type-icon {
color: rgb(191, 191, 191);
}
.chip {
padding: 0.1em 1em;
border: 0.1em solid rgb(218, 227, 243);
border-radius: 10em;
background-color: rgb(236, 241, 249);
color: rgb(68, 114, 196);
text-transform: uppercase;
font-weight: 500;
}
.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;
}
.mr-5 {
margin-right: 2rem !important;
}
.info {
background-color: #f6f6f6;
padding: 8px 15px;
margin-bottom: 15px;
}
.info p {
margin-bottom: 0px;
color: rgb(37, 35, 140);
font-weight: 600;
}
.chip p {
margin-bottom: 0px;
}
// .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;
}
.finalized-bookmark {
color: #92d050;
}
h4 span {
color: #0070c0;
font-weight: 600;
}
}
.listing {
.mat-card {
margin: 1em 0;
}
.col-9 {
display: flex;
flex-direction: column;
}
::ng-deep .mat-paginator {
margin-top: auto;
}
::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;
}
}