-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Data views]: Update icons and design tweaks #55391
Conversation
Size Change: -7 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
a6793a7
to
c4392fd
Compare
It's sticky if the list is bigger than the container. You meant in general in the bottom? |
Yes. It would be nice to avoid the buttons jumping around as you navigate, and sticking the pagination row to the bottom of the frame would eliminate that. |
@ntsekouras I think we can remove the Rows per page option from the pagination row. It's not an affordance folks generally interact with frequently, so having it permanently visible in the table footer feels overly emphasised. It's only two clicks away in the main View menu which seems adequate. Would it make sense to do this here or separately? |
cc33429
to
8d04537
Compare
@@ -1,6 +1,16 @@ | |||
.dataviews-wrapper { | |||
width: 100%; | |||
min-height: calc(100% - 60px); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The 60px is not part of the data views component, so it seems it's not something we should be applying to .dataviews-wrapper
instead maybe it should apply to the current usage of DataViews in the page-pages
component.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good call. Actually it seem I had this change before the overflow
rule. It seems the calc
is not needed any more.
@@ -1,6 +1,16 @@ | |||
.dataviews-wrapper { | |||
width: 100%; | |||
min-height: calc(100% - 60px); | |||
overflow: auto; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Was this one necessary?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think so, yes. Without it, if the list is bigger than the frame's height, it will still scroll but not get the right padding applied to this container and results in having the pagination at the bottom without it. I'm not sure if I could use a better css rule..
This is not from this PR, but will push a fix for this here. I just have to wrap it with |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍
Flaky tests detected in 14767da. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6690355211
|
What?
Part of: #55095
This PR:
We can also add in this PR any other design tweaks we want in order to close the linked issue for now.
Screen.Recording.2023-10-30.at.10.04.52.AM.mov