From 037125002370212b4915cd72240b7de1ae34f9a1 Mon Sep 17 00:00:00 2001 From: James Koster Date: Tue, 5 Dec 2023 12:39:56 +0000 Subject: [PATCH 1/6] Header --- packages/edit-site/src/components/page/header.js | 2 +- packages/edit-site/src/components/page/style.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/page/header.js b/packages/edit-site/src/components/page/header.js index 06de80c25685b..5ace6168696e6 100644 --- a/packages/edit-site/src/components/page/header.js +++ b/packages/edit-site/src/components/page/header.js @@ -19,7 +19,7 @@ export default function Header( { title, subTitle, actions } ) { { title } diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss index 8da7df8e0385b..72ecbb4e2b7d7 100644 --- a/packages/edit-site/src/components/page/style.scss +++ b/packages/edit-site/src/components/page/style.scss @@ -12,8 +12,8 @@ } .edit-site-page-header { - padding: 0 $grid-unit-40; - min-height: $header-height; + padding: $grid-unit-20 $grid-unit-40; + min-height: $grid-unit * 9; border-bottom: 1px solid $gray-100; background: $white; position: sticky; From 4e3153f74b82788ef1b146c8f46127d418c20971 Mon Sep 17 00:00:00 2001 From: James Koster Date: Tue, 5 Dec 2023 13:23:21 +0000 Subject: [PATCH 2/6] General styling --- packages/dataviews/src/dataviews.js | 7 ++-- packages/dataviews/src/style.scss | 36 +++++++++++++++---- packages/dataviews/src/view-table.js | 1 + .../src/components/page-pages/style.scss | 4 ++- .../edit-site/src/components/page/header.js | 1 + 5 files changed, 39 insertions(+), 10 deletions(-) diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js index b75155e8fddf0..61b6ddede4ef9 100644 --- a/packages/dataviews/src/dataviews.js +++ b/packages/dataviews/src/dataviews.js @@ -40,8 +40,11 @@ export default function DataViews( { }, [ fields ] ); return (
- - + + { search && ( div { @@ -10,13 +9,18 @@ } } +.dataviews__filters-view-actions { + padding: $grid-unit-15 $grid-unit-40; +} + .dataviews-pagination { margin-top: auto; position: sticky; bottom: 0; background-color: $white; - padding: $grid-unit-20 0; - border-top: $border-width solid $gray-200; + padding: $grid-unit-15 $grid-unit-40; + border-top: $border-width solid $gray-100; + color: $gray-700; } .dataviews-filters-options { @@ -29,9 +33,12 @@ border-color: inherit; border-collapse: collapse; position: relative; + color: $gray-700; a { text-decoration: none; + color: $gray-900; + font-weight: 500; } th { text-align: left; @@ -42,6 +49,7 @@ td, th { padding: $grid-unit-15; + min-width: 160px; &[data-field-id="actions"] { text-align: right; } @@ -49,6 +57,16 @@ tr { border-bottom: 1px solid $gray-100; + td:first-child, + th:first-child { + padding-left: $grid-unit-40; + } + + td:last-child, + th:last-child { + padding-right: $grid-unit-40; + } + &:last-child { border-bottom: 0; } @@ -59,9 +77,12 @@ } th { position: sticky; - top: - #{$grid-unit-40}; // Offset the container padding - background-color: $white; - box-shadow: inset 0 -#{$border-width} 0 $gray-200; + top: -1px; + background-color: lighten($gray-100,4%); + box-shadow: inset 0 -#{$border-width} 0 $gray-100; + border-top: 1px solid $gray-100; + padding-top: $grid-unit-05; + padding-bottom: $grid-unit-05; } } } @@ -69,6 +90,7 @@ .dataviews-grid-view { margin-bottom: $grid-unit-30; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + padding: 0 $grid-unit-40; @include break-xlarge() { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 8b6422b4be11a..49fff5c5cc0bd 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -122,6 +122,7 @@ function HeaderMenu( { dataView, header } ) { iconPosition="right" text={ text } style={ { padding: 0 } } + size="compact" /> } > diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss index fde960ca1a72c..933fdadb8d070 100644 --- a/packages/edit-site/src/components/page-pages/style.scss +++ b/packages/edit-site/src/components/page-pages/style.scss @@ -1,3 +1,5 @@ .edit-site-page-pages__featured-image { - border-radius: $radius-block-ui; + border-radius: $grid-unit-05; + width: $grid-unit-40; + height: $grid-unit-40; } diff --git a/packages/edit-site/src/components/page/header.js b/packages/edit-site/src/components/page/header.js index 5ace6168696e6..274fd395a16f1 100644 --- a/packages/edit-site/src/components/page/header.js +++ b/packages/edit-site/src/components/page/header.js @@ -20,6 +20,7 @@ export default function Header( { title, subTitle, actions } ) { { title } From a2631410f1873ba2c3236e62393bfa7e375ede4b Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 7 Dec 2023 10:14:38 +0200 Subject: [PATCH 3/6] fix linting issues --- packages/dataviews/src/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index e683eec13b9b7..d3f52d613d528 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -77,8 +77,8 @@ } th { position: sticky; - top: -1px; - background-color: lighten($gray-100,4%); + top: -1px; + background-color: lighten($gray-100, 4%); box-shadow: inset 0 -#{$border-width} 0 $gray-100; border-top: 1px solid $gray-100; padding-top: $grid-unit-05; From ebcb6979b88c30c014e53f2dd1dba26aa715b43b Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 7 Dec 2023 10:42:26 +0000 Subject: [PATCH 4/6] Loading & no results padding --- packages/dataviews/src/style.scss | 5 +++++ packages/dataviews/src/view-table.js | 12 ++++++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index d3f52d613d528..5e9d7bbf8976c 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -152,3 +152,8 @@ .dataviews-action-modal { z-index: z-index(".dataviews-action-modal"); } + +.dataviews-no-results, +.dataviews-loading { + padding: 0 $grid-unit-40; +} diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index 49fff5c5cc0bd..fab4e8566c99f 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -543,7 +543,11 @@ function ViewTable( { const hasRows = !! rows?.length; if ( isLoading ) { // TODO:Add spinner or progress bar.. - return

{ __( 'Loading' ) }

; + return ( +
+

{ __( 'Loading' ) }

+
+ ); } return (
@@ -607,7 +611,11 @@ function ViewTable( { ) } - { ! hasRows &&

{ __( 'no results' ) }

} + { ! hasRows && ( +
+

{ __( 'No results' ) }

+
+ ) }
); } From 881eb8bc097f85b7d03e1034f2d2babfd66365a1 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 7 Dec 2023 11:13:17 +0000 Subject: [PATCH 5/6] List view --- packages/dataviews/src/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 73644c443c8ac..30b793ae82267 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -150,9 +150,14 @@ } .dataviews-list-view { + margin-top: 0; + li { border-bottom: $border-width solid $gray-100; margin: 0; + &:first-child { + border-top: $border-width solid $gray-100; + } &:last-child { border-bottom: 0; } From 906bcd63c0223f377261c038478c51e7e73589bb Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 7 Dec 2023 12:21:34 +0000 Subject: [PATCH 6/6] List view margin --- packages/dataviews/src/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 30b793ae82267..ab6c052e3a898 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -150,7 +150,7 @@ } .dataviews-list-view { - margin-top: 0; + margin: 0; li { border-bottom: $border-width solid $gray-100;