-
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
Update Templates table layout #57930
Conversation
Size Change: +111 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
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, thanks!
All of the following are almost certainly separate, but mentioning it just as I observe it: we need to be smarter about the column widths, and probably employ percentages (ideally percentages combined with min-widths if possible), so that you can scale the viewport down further before it starts requiring horizontal scroll. Specifically here fore Templates, it seems the title column is very wide, and I wonder if the description should not be a separate column, but rather helper text below the title, making for taller rows but fewer columns. Finally, this may be related to the separate preview thumbnail work that's going on, but the table looks indented from the left. |
Yup I think this could be the way to go, it would improve the mobile experience too. It's not currently possible to combine fields into cells this way, but we also need it for #56976 cc @oandregal since we were chatting about this yesterday. |
The concern with "merging fields" into a single cell is what to do with operations such as editing, for example. Right now, cell-field is 1:1 relationship.
It should be doable to do this, though still a bit more complex than a 1:1 case. Because the fields are declared as "special" (they are the "media field" and the "primary field"), dataviews would know how to tell them apart and provide the adequate editing affordances for both. In any case, I think we should have a basic editing experience in place before exploring "merging fields". |
If a field is editable then the value would need to be wrapped in an interactive element like a Alternatively we might say that merged fields cannot be edited inline. Users can always edit via secondary actions (#55101). |
We'd have to have a "merge fields API" for this. If we simply use the
For this, we could just say a field is not editable ( |
What?
Improve the overall layout of the Manage templates table.
Why?
This is best described in video, here's the current templates table:
before.mp4
And here's this PR:
after.mp4
Changes / fixes include:
How?
The
white-space: nowrap
+width: 1%
trick is applied to table cells so that they 'hug' their contents. On larger screens amin-width
is applied to stop columns appearing too dense on right-hand side of the table.A wrapper was added to the table markup (making use of an existing div) which is then used to facilitate horizontal scrolling.
Testing Instructions
Follow-ups