From 0c4c818acd4cd16a3b7fbbde8a029ff5cde954fb Mon Sep 17 00:00:00 2001 From: apapachristou Date: Thu, 26 Sep 2019 18:08:04 +0300 Subject: [PATCH] Fixes responsiveness issues when using the app within a mobile phone. (Issue #178) --- .../listing/dataset-listing.component.html | 17 ++++++----- .../listing/dataset-listing.component.scss | 16 +++++++++- .../dataset-listing-item.component.html | 24 ++++++++++----- .../dataset-listing-item.component.scss | 4 --- .../ui/dmp/listing/dmp-listing.component.html | 18 ++++++----- .../ui/dmp/listing/dmp-listing.component.scss | 16 +++++++++- .../dmp-listing-item.component.html | 30 ++++++++++++------- .../explore-dataset-listing.component.html | 14 +++++---- .../explore-dataset-listing.component.scss | 16 +++++++++- ...xplore-dataset-listing-item.component.html | 22 +++++++++----- .../explore-dmp-listing.component.html | 10 +++---- .../explore-dmp-listing.component.scss | 16 +++++++++- .../explore-dmp-listing-item.component.html | 15 ++++++---- .../explore-dmp-listing-item.component.scss | 10 +++++++ 14 files changed, 166 insertions(+), 62 deletions(-) diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html index e92a69879..fca09e794 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html +++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html @@ -1,28 +1,31 @@
-
+

{{'DASHBOARD.DATASETS' | translate}} {{titlePrefix}}

-
+
-
-
+
+
-
+
- +
+
+
+
+
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 bcd3a0235..98ca3d541 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 @@ -1,3 +1,16 @@ +@import "node_modules/bootstrap/scss/functions"; +@import "node_modules/bootstrap/scss/variables"; +@import "node_modules/bootstrap/scss/mixins/_breakpoints"; + +@include media-breakpoint-down(sm) { + .lightblue-btn { + font-size: 12px; + } + ::ng-deep .mat-paginator-container { + height: auto !important; + } +} + ::ng-deep .mat-paginator-container { flex-direction: row-reverse !important; justify-content: space-between !important; @@ -20,7 +33,8 @@ } ::ng-deep .mat-paginator-range-actions { - width: 55% !important; + width: auto !important; + min-width: 55% !important; min-height: 43px !important; justify-content: space-between; } 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 f750d5108..ac7bb310b 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 @@ -28,26 +28,34 @@
-
-
- +
+
+ storage -

{{ dataset.dmp }}

+

{{ dataset.dmp }}

+
+
- +
+
+ work_outline -

{{ dataset.grant }}

+

{{ dataset.grant }}

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

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

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

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 21a58f334..d812c7bd4 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 @@ -40,10 +40,6 @@ h4 > span { flex-wrap: wrap; } -.links { - display: flex; -} - .links :hover { color: #00b29f; } diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html index 5793ec346..b93090db7 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html +++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html @@ -1,30 +1,34 @@
-
+

{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}

-
- -
-
-
+
+
-
+
+
+
+
+
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss index b3f82ac86..4def11f1b 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss +++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss @@ -1,3 +1,16 @@ +@import "node_modules/bootstrap/scss/functions"; +@import "node_modules/bootstrap/scss/variables"; +@import "node_modules/bootstrap/scss/mixins/_breakpoints"; + +@include media-breakpoint-down(sm) { + .lightblue-btn { + font-size: 12px; + } + ::ng-deep .mat-paginator-container { + height: auto !important; + } +} + ::ng-deep .mat-paginator-container { flex-direction: row-reverse !important; justify-content: space-between !important; @@ -20,7 +33,8 @@ } ::ng-deep .mat-paginator-range-actions { - width: 55% !important; + width: auto !important; + min-width: 55% !important; min-height: 43px !important; justify-content: space-between; } 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 e0ff36982..acffde993 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,9 @@
-
-
+
+ +
lock_open @@ -37,10 +38,14 @@ radio_button_checked -

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

-

{{dmp.label}}

+
+

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

+

{{dmp.label}}

+
+
@@ -48,12 +53,13 @@
-
+
settings

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

- +
+
storage @@ -61,16 +67,20 @@

{{dmp.datasets.length}}

- - assignment -
+
+
+ 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"}}

+
-
-
- +
+
+
diff --git a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.scss b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.scss index 13d6d81db..d56c694f6 100644 --- a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.scss +++ b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.scss @@ -1,3 +1,16 @@ +@import "node_modules/bootstrap/scss/functions"; +@import "node_modules/bootstrap/scss/variables"; +@import "node_modules/bootstrap/scss/mixins/_breakpoints"; + +@include media-breakpoint-down(sm) { + .lightblue-btn { + font-size: 12px; + } + ::ng-deep .mat-paginator-container { + height: auto !important; + } +} + text-center { text-align: center; } @@ -54,7 +67,8 @@ text-center { } ::ng-deep .mat-paginator-range-actions { - width: 55% !important; + width: auto !important; + min-width: 55% !important; min-height: 43px !important; justify-content: space-between; } diff --git a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html index 905d71de2..6e8179f19 100644 --- a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html +++ b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html @@ -5,10 +5,12 @@ {{dmp.grantAbbreviation}}
-
-
+
+
radio_button_checked -

{{dmp.label}}

+
+
+

{{dmp.label}}

@@ -17,17 +19,20 @@
-
+
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 0ee1f4e12..134e0fecd 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 @@ -52,6 +52,16 @@ // color: #92d050; } +h4 { + display: inline; + padding-left: 1em; + line-height: 1.7em; +} + +h4 > span { + text-transform: uppercase; +} + // .explore-dmp-listing-item { // margin-top: 2em; // margin-bottom: 2em;