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

Styles: Dataset Listing

This commit is contained in:
apapachristou 2019-05-09 16:57:00 +03:00
parent 05fe3e57b8
commit c265e5e2fa
5 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,4 +1,4 @@
<div class="listing-item row" (click)="itemClicked()"> <div class="listing-item" (click)="itemClicked()">
<div class="col-auto"> <div class="col-auto">
<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>

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

@ -67,9 +67,9 @@
background-color: #2e75b6 !important; background-color: #2e75b6 !important;
} }
::ng-deep .mat-checkbox { // ::ng-deep .mat-checkbox {
background-color: #f6f6f6 !important; // background-color: #f6f6f6 !important;
} // }
::ng-deep .mat-checkbox .mat-checkbox-frame { ::ng-deep .mat-checkbox .mat-checkbox-frame {
border: 1px solid #aaaaaa; border: 1px solid #aaaaaa;

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

@ -29,13 +29,12 @@
margin-left: auto !important; margin-left: auto !important;
} }
.top-paginator ::ng-deep .mat-paginator-navigation-previous { .top-paginator ::ng-deep .mat-paginator-navigation-previous {
display: none !important; display: none !important;
} }
.top-paginator ::ng-deep .mat-paginator-navigation-next { .top-paginator ::ng-deep .mat-paginator-navigation-next {
display: none !important; display: none !important;
} }
// .bot-paginator { // .bot-paginator {

53
dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.scss
View File

@ -3,45 +3,45 @@
padding-bottom: 5px; padding-bottom: 5px;
width: 100%; width: 100%;
} }
mat-card { mat-card {
padding-bottom: 0px; padding-bottom: 0px;
} }
.hidden { .hidden {
display: none; display: none;
} }
.uploadButton { .uploadButton {
float: right; float: right;
} }
} }
.search ::ng-deep.mat-form-field-infix { .search ::ng-deep.mat-form-field-infix {
margin-left: 1em; margin-left: 1em;
} }
.filter-category { .filter-category {
background-color: #f6f6f6; background-color: #f6f6f6;
margin: 5px 0px; margin: 5px 0px;
} }
.category-title { .category-title {
color: #2e75b6; color: #2e75b6;
margin-top: 8px; margin-top: 8px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.import { .import {
margin: 10px; margin: 10px;
padding: 0px; padding: 0px;
} }
.filters { .filters {
border: 1px solid #e4e4e4; border: 1px solid #e4e4e4;
border-radius: 5px; border-radius: 5px;
} }
.filters-title { .filters-title {
width: 90px; width: 90px;
color: #2e75b6; color: #2e75b6;
@ -51,35 +51,35 @@
margin-left: 20px; margin-left: 20px;
text-transform: uppercase; text-transform: uppercase;
} }
.style-icon { .style-icon {
color: #adadad; color: #adadad;
} }
::ng-deep .mat-checkbox-inner-container { ::ng-deep .mat-checkbox-inner-container {
background: white; background: white;
} }
::ng-deep .mat-focused .mat-form-field-label { ::ng-deep .mat-focused .mat-form-field-label {
color: #2e75b6 !important; color: #2e75b6 !important;
} }
::ng-deep.mat-form-field-underline { ::ng-deep.mat-form-field-underline {
background-color: #adadad !important; background-color: #adadad !important;
} }
::ng-deep.mat-form-field-ripple { ::ng-deep.mat-form-field-ripple {
background-color: #2e75b6 !important; background-color: #2e75b6 !important;
} }
::ng-deep .mat-checkbox { // ::ng-deep .mat-checkbox {
background-color: #f6f6f6 !important; // background-color: #f6f6f6 !important;
} // }
::ng-deep .mat-checkbox .mat-checkbox-frame { ::ng-deep .mat-checkbox .mat-checkbox-frame {
border: 1px solid #aaaaaa; border: 1px solid #aaaaaa;
} }
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-checked,
@ -88,30 +88,29 @@
.mat-pseudo-checkbox-indeterminate { .mat-pseudo-checkbox-indeterminate {
background-color: #2e75b6; background-color: #2e75b6;
} }
::ng-deep .mat-ripple-element { ::ng-deep .mat-ripple-element {
background-color: #2e74b649 !important; background-color: #2e74b649 !important;
} }
::ng-deep .mat-radio-container { ::ng-deep .mat-radio-container {
border-radius: 1em; border-radius: 1em;
background: white; background: white;
} }
::ng-deep .mat-radio-button .mat-radio-outer-circle { ::ng-deep .mat-radio-button .mat-radio-outer-circle {
border: 1px solid #aaaaaa; border: 1px solid #aaaaaa;
} }
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
border-color: #2e75b6; border-color: #2e75b6;
} }
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle { ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
color: #2e75b6; color: #2e75b6;
background-color: #2e75b6; background-color: #2e75b6;
} }
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: #2e74b649; background-color: #2e74b649;
} }