From 1911670ea35e3c263490b0ee1fbd76b660009049 Mon Sep 17 00:00:00 2001 From: apapachristou Date: Wed, 30 Oct 2019 18:15:16 +0200 Subject: [PATCH] Styles listings and filter colors --- .../criteria/dataset-criteria.component.scss | 3 +- .../listing/dataset-listing.component.scss | 9 +- .../dataset-listing-item.component.html | 106 +++++++++--------- .../dataset-listing-item.component.scss | 9 ++ .../criteria/dmp-criteria.component.scss | 36 +++--- .../dmp-listing-item.component.html | 93 +++++++-------- .../dmp-listing-item.component.scss | 4 + .../explore-dataset-filters.component.scss | 36 +++--- ...xplore-dataset-listing-item.component.html | 71 +++++++----- ...xplore-dataset-listing-item.component.scss | 4 + .../explore-dmp-filters.component.scss | 36 +++--- .../explore-dmp-listing-item.component.html | 60 +++++----- .../explore-dmp-listing-item.component.scss | 38 ++++++- .../criteria/grant-criteria.component.scss | 48 ++++---- dmp-frontend/src/styles.scss | 26 ++--- 15 files changed, 341 insertions(+), 238 deletions(-) diff --git a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss index 28c634a3a..1dcdc4636 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss +++ b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss @@ -3,7 +3,8 @@ } .category-title { - color: #089dbb; + color: black; + // color: #089dbb; margin-top: 8px; margin-bottom: 12px; } diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss index 98ca3d541..04841d537 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss +++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss @@ -57,12 +57,15 @@ } ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { - border-color: #00b29f; + border-color: #777777; + // border-color: #00b29f; } ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle { - color: #00b29f; - background-color: #00b29f; + color: #777777; + background-color: #777777; + // color: #00b29f; + // background-color: #00b29f; } .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html index a570407e1..da72a5cb5 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html +++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html @@ -3,73 +3,79 @@
-

{{ dataset.grantAbbreviation }}

- +

{{ dataset.grantAbbreviation }}

+ +
-
+
bookmark bookmark -

- {{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}: {{ dataset.label }}

-

{{ dataset.label }}

-
-
-
-

{{dataset.description}}

-
-
-
-
- - - storage - -

{{ dataset.dmp }}

- -
- -
+
+
+
+

+ {{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}: {{ dataset.label }}

+

{{ dataset.label }}

+
+
- - work_outline - -

{{ dataset.grant }}

+
+

{{dataset.description}}

+
-
+
+
+ + + storage + +

{{ dataset.dmp }}

+ +
-
- - assignment - -
-
{{ dataset.profile }}
+
+
+ + work_outline + +

{{ dataset.grant }}

+
+
+ +
+ + assignment + +
+
{{ dataset.profile }}
+
+
+ +
+

{{'DATASET-LISTING.COLUMNS.LAST-EDITED' | translate}} {{ dataset.modified | date: "shortDate"}}

+

{{'DATASET-LISTING.COLUMNS.FINALIZED' | translate}} {{ dataset.finalizedAt | date: "shortDate"}}

+
- -
-

{{'DATASET-LISTING.COLUMNS.LAST-EDITED' | translate}} {{ dataset.modified | date: "shortDate"}}

-

{{'DATASET-LISTING.COLUMNS.FINALIZED' | translate}} {{ dataset.finalizedAt | date: "shortDate"}}

-
+
{{ dataset.dmp }}
+

{{ dataset.grant }}

+
+
+
+

{{ dataset.profile }}

+
+
-->
diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss index ca5168c19..72e315e7e 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss +++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss @@ -51,6 +51,7 @@ h4 > span { .about-item .title { margin: 2px 10px; + // text-transform: uppercase; } .about-item p { @@ -67,3 +68,11 @@ p { .storage :hover { color: #00b29f; } + +.draft-bookmark { + color: #e7e6e6; +} + +.finalized-bookmark { + color: #08bd63; +} diff --git a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss index 18df2a5f4..17d0636d7 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss +++ b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss @@ -22,7 +22,8 @@ } .category-title { - color: #089dbb; + color: black; + // color: #089dbb; margin-top: 8px; margin-bottom: 12px; } @@ -51,21 +52,21 @@ color: #adadad; } -::ng-deep .mat-checkbox-inner-container { - background: white; -} +// ::ng-deep .mat-checkbox-inner-container { +// background: white; +// } -::ng-deep .mat-focused .mat-form-field-label { - color: #00b29f !important; -} +// ::ng-deep .mat-focused .mat-form-field-label { +// color: #00b29f !important; +// } -::ng-deep.mat-form-field-underline { - background-color: #adadad; -} +// ::ng-deep.mat-form-field-underline { +// background-color: #adadad; +// } -::ng-deep.mat-form-field-ripple { - background-color: #00b29f !important; -} +// ::ng-deep.mat-form-field-ripple { +// background-color: #00b29f !important; +// } // ::ng-deep .mat-checkbox { // background-color: #f6f6f6 !important; @@ -98,12 +99,15 @@ } ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { - border-color: #00b29f; + border-color: #777777; + // border-color: #00b29f; } ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle { - color: #00b29f; - background-color: #00b29f; + color: #777777; + background-color: #777777; + // color: #00b29f; + // background-color: #00b29f; } .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html index 231dce63e..07a9a11b0 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html +++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html @@ -26,8 +26,7 @@
-
- +
lock_open @@ -39,53 +38,57 @@ radio_button_checked
-
-

- {{ 'TYPES.DMP.DRAFT' | translate }}: {{dmp.label}} -

-

{{dmp.label}}

-
- -
-
-
-

{{dmp.description}}

-
-
-
-
- - settings - -

{{roleDisplay(dmp.users).toUpperCase()}}

-
-
- - - storage - -

{{dmp.datasets.length}}

- -
-
- assignment -
-
{{profile.label}}
+
+
+ +
+

+ {{ 'TYPES.DMP.DRAFT' | translate }}: {{dmp.label}} +

+

{{dmp.label}}

+
+ +
+
+
+

{{dmp.description}}

+
+
+
+
+ + settings + +

{{roleDisplay(dmp.users).toUpperCase()}}

+
+
+ + + storage + +

{{dmp.datasets.length}}

+ +
+
+ assignment +
+
{{profile.label}}
+
+
+
+

{{'DMP-PROFILE-LISTING.COLUMNS.LAST-EDITED' | translate}} {{dmp.modifiedTime | date: "shortDate"}}

+

{{'TYPES.DMP.FINALISED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}

+

{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.publishedAt | date: "shortDate"}}

+
-
-

{{'DMP-PROFILE-LISTING.COLUMNS.LAST-EDITED' | translate}} {{dmp.modifiedTime | date: "shortDate"}}

-

{{'TYPES.DMP.FINALISED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}

-

{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.publishedAt | date: "shortDate"}}

-
- + group +
+
{{user.name}}
+
+
-->
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss index c6b05382b..7d71dac05 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss +++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss @@ -82,3 +82,7 @@ p { color: #08bd63; // color: #92d050; } + +.description { + margin-bottom: 0.4em; +} diff --git a/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.scss b/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.scss index 1bab477e4..b3f5e80d5 100644 --- a/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.scss +++ b/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.scss @@ -13,7 +13,8 @@ } .category-title { - color: #089dbb; + color: black; + // color: #089dbb; margin-top: 8px; margin-bottom: 12px; } @@ -42,21 +43,21 @@ color: #adadad; } -::ng-deep .mat-checkbox-inner-container { - background: white; -} +// ::ng-deep .mat-checkbox-inner-container { +// background: white; +// } -::ng-deep .mat-focused .mat-form-field-label { - color: #00b29f !important; -} +// ::ng-deep .mat-focused .mat-form-field-label { +// color: #00b29f !important; +// } -::ng-deep.mat-form-field-underline { - background-color: #adadad; -} +// ::ng-deep.mat-form-field-underline { +// background-color: #adadad; +// } -::ng-deep.mat-form-field-ripple { - background-color: #00b29f !important; -} +// ::ng-deep.mat-form-field-ripple { +// background-color: #00b29f !important; +// } // ::ng-deep .mat-checkbox { // background-color: #f6f6f6 !important; @@ -89,12 +90,15 @@ } ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { - border-color: #00b29f; + border-color: #777777; + // border-color: #00b29f; } ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle { - color: #00b29f; - background-color: #00b29f; + color: #777777; + background-color: #777777; + // color: #00b29f; + // background-color: #00b29f; } .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { diff --git a/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html index 76bd50560..903822e55 100644 --- a/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html +++ b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html @@ -11,39 +11,52 @@
+
+ bookmark +
+
+
+
+

{{ dataset.label }}

+
+
+
+
+

{{dataset.description}}

+
+
+
+
+
+ storage +

{{ dataset.dmp }}

+
+
+
+
+ work_outline +

{{ dataset.grant }}

+
+
+
+ assignment +
+
{{ dataset.profile }}
+
+
+
+

{{'DATASET-LISTING.COLUMNS.PUBLISHED' | translate}} {{dataset.dmpPublishedAt | date: "shortDate"}}

+
+
+
+
+ + - - - storage -

{{dmp.datasets.length}}

- -
- assignment -
-
{{profile.label}}
+
+
+ +
-
-

{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}

+
+
+
+

{{dmp.label}}

+
+
+
+
+

{{dmp.description}}

+
+
+
+
+ + + + storage +

{{dmp.datasets.length}}

+
+
+ assignment +
+
{{profile.label}}
+
+
+
+

{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}

+
+
diff --git a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss index d12cfff41..53f7173c0 100644 --- a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss +++ b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss @@ -46,12 +46,44 @@ color: #aaaaaa; } +.custom-published-icon { + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #08bd6342; + margin-top: 3px; +} + .published-icon { - padding-top: 1px; color: #08bd63; + font-size: 12px; + margin-left: 4px; + padding-bottom: 7px; + // padding-top: 2px; + // padding-left: 4px; // color: #92d050; } +.outer-circle { + background: #08bd6342; + border-radius: 50%; + width: 20px; + height: 20px; + position: relative; + margin-top: 3px; +} + +.inner-circle { + position: absolute; + background: #08bd63; + border-radius: 50%; + height: 10px; + width: 10px; + top: 50%; + left: 50%; + margin: -5px 0px 0px -5px; +} + h4 { display: inline; padding-left: 1em; @@ -66,6 +98,10 @@ p { color: #333333; } +.description { + margin-bottom: 0.4em; +} + // .explore-dmp-listing-item { // margin-top: 2em; // margin-bottom: 2em; diff --git a/dmp-frontend/src/app/ui/grant/listing/criteria/grant-criteria.component.scss b/dmp-frontend/src/app/ui/grant/listing/criteria/grant-criteria.component.scss index c2156e6b9..107230090 100644 --- a/dmp-frontend/src/app/ui/grant/listing/criteria/grant-criteria.component.scss +++ b/dmp-frontend/src/app/ui/grant/listing/criteria/grant-criteria.component.scss @@ -27,7 +27,8 @@ } .category-title { - color: #089dbb; + color: black; + // color: #089dbb; margin-top: 8px; margin-bottom: 12px; } @@ -56,26 +57,26 @@ color: #adadad; } - ::ng-deep .mat-checkbox-inner-container { - background: white; - } - - ::ng-deep .mat-focused .mat-form-field-label { - color: #00b29f !important; - } - - ::ng-deep.mat-form-field-underline { - background-color: #adadad; - } - - ::ng-deep.mat-form-field-ripple { - background-color: #00b29f !important; - } - -// ::ng-deep .mat-checkbox { -// background-color: #f6f6f6 !important; +// ::ng-deep .mat-checkbox-inner-container { +// background: white; // } +// ::ng-deep .mat-focused .mat-form-field-label { +// color: #00b29f !important; +// } + +// ::ng-deep.mat-form-field-underline { +// background-color: #adadad; +// } + +// ::ng-deep.mat-form-field-ripple { +// background-color: #00b29f !important; +// } + + ::ng-deep .mat-checkbox { + background-color: #f6f6f6 !important; + } + ::ng-deep .mat-checkbox .mat-checkbox-frame { border: 1px solid #aaaaaa; } @@ -103,12 +104,15 @@ } ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { - border-color: #00b29f; + border-color: #777777; + // border-color: #00b29f; } ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle { - color: #00b29f; - background-color: #00b29f; + color: #777777; + background-color: #777777; + // color: #00b29f; + // background-color: #00b29f; } .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss index 5af92cd10..affbc2410 100644 --- a/dmp-frontend/src/styles.scss +++ b/dmp-frontend/src/styles.scss @@ -123,20 +123,20 @@ margin-bottom: 0px; } - .draft-bookmark { - color: #e7e6e6; - display: inline; - position: absolute; - padding-top: 3px; - } + // .draft-bookmark { + // color: #e7e6e6; + // display: inline; + // position: absolute; + // padding-top: 3px; + // } - .finalized-bookmark { - color: #08bd63; - // color: #92d050; - display: inline; - position: absolute; - padding-top: 3px; - } + // .finalized-bookmark { + // color: #08bd63; + // // color: #92d050; + // display: inline; + // position: absolute; + // padding-top: 3px; + // } h4 span { color: #089dbb;