Skip to content

Commit

Permalink
Update data view layout (#56786)
Browse files Browse the repository at this point in the history 
Co-authored-by: ntsekouras <ntsekouras@outlook.com>
  • Loading branch information
@jameskoster @ntsekouras
jameskoster and ntsekouras authored Dec 7, 2023
1 parent 5067361 commit 23c0de4
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 15 deletions.
7 changes: 5 additions & 2 deletions packages/dataviews/src/dataviews.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,11 @@ export default function DataViews( {
}, [ fields ] );
return (
<div className="dataviews-wrapper">
<VStack spacing={ 4 } justify="flex-start">
<HStack alignment="flex-start">
<VStack spacing={ 0 } justify="flex-start">
<HStack
alignment="flex-start"
className="dataviews__filters-view-actions"
>
<HStack justify="start" wrap>
{ search && (
<Search
Expand Down
46 changes: 39 additions & 7 deletions packages/dataviews/src/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
.dataviews-wrapper {
width: 100%;
height: calc(100% - #{$grid-unit-40} * 2);
height: 100%;
overflow: auto;
padding: $grid-unit-40 $grid-unit-40 0;
box-sizing: border-box;

> div {
min-height: 100%;
}
}

.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 {
Expand All @@ -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;
Expand All @@ -42,13 +49,24 @@
td,
th {
padding: $grid-unit-15;
min-width: 160px;
&[data-field-id="actions"] {
text-align: right;
}
}
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;
}
Expand All @@ -59,16 +77,20 @@
}
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;
}
}
}

.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
Expand Down Expand Up @@ -128,9 +150,14 @@
}

.dataviews-list-view {
margin: 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;
}
Expand Down Expand Up @@ -210,3 +237,8 @@
.dataviews-action-modal {
z-index: z-index(".dataviews-action-modal");
}

.dataviews-no-results,
.dataviews-loading {
padding: 0 $grid-unit-40;
}
13 changes: 11 additions & 2 deletions packages/dataviews/src/view-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ function HeaderMenu( { dataView, header } ) {
iconPosition="right"
text={ text }
style={ { padding: 0 } }
size="compact"
/>
}
>
Expand Down Expand Up @@ -543,7 +544,11 @@ function ViewTable( {
const hasRows = !! rows?.length;
if ( isLoading ) {
// TODO:Add spinner or progress bar..
return <h3>{ __( 'Loading' ) }</h3>;
return (
<div className="dataviews-loading">
<h3>{ __( 'Loading' ) }</h3>
</div>
);
}

const sortValues = { asc: 'ascending', desc: 'descending' };
Expand Down Expand Up @@ -615,7 +620,11 @@ function ViewTable( {
</tbody>
</table>
) }
{ ! hasRows && <p>{ __( 'no results' ) }</p> }
{ ! hasRows && (
<div className="dataviews-no-results">
<p>{ __( 'No results' ) }</p>
</div>
) }
</div>
);
}
Expand Down
4 changes: 3 additions & 1 deletion packages/edit-site/src/components/page-pages/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/page/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ export default function Header( { title, subTitle, actions } ) {
<FlexBlock className="edit-site-page-header__page-title">
<Heading
as="h2"
level={ 4 }
level={ 3 }
weight={ 500 }
className="edit-site-page-header__title"
>
{ title }
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-site/src/components/page/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

1 comment on commit 23c0de4

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 23c0de4.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7128589570
📝 Reported issues:

Please sign in to comment.