-
Notifications
You must be signed in to change notification settings - Fork 3.7k
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
Responsive toolbar #416
Comments
Hey @SammyM, can you elaborate a bit, guiding us on your expectations on this? How do you think CKEditor should behave when it comes to responsive design? |
I mean, we know there’s work to be done, and we have plans for it, but I would love to hear your expectations, because it may point us to things we didn't take in consideration so far. |
Well, I am sure these are minor things that I wouldn't be worried about. Most of the elements act really well already |
I proposed 2 improvements to the UI: Responsive in–balloon formsThis feature is on review now. (WIP) Dynamic items grouping for overflowed toolbarsThe PoC can be found in the PR but it's not finished yet. Why not a scrollable toolbar instead?It sounded like a great plan and at first. In fact, I tried to implement a scrollable toolbar. Like when it overflows, the scrollbar appears and it is possible to reach the rest of the items easily (at least on mobile). But my PoC failed because of the following reasons:
I figured we'd need a massive refactoring to deal with these issues that we cannot afford ATM. |
Feature: Improved responsiveness of the media form view in narrow viewports (see ckeditor/ckeditor5#416).
Feature: Introduced the ck-media-phone RWD mixin that outputs a @media query. Improved responsiveness of media embed, link, and image form views in narrow viewports (see ckeditor/ckeditor5#416).
Feature: Improved responsiveness of the text alternative view in narrow viewports (see ckeditor/ckeditor5#416).
Feature: Improved responsiveness of the form and actions views in narrow viewports (see ckeditor/ckeditor5#416).
Feature: Improved responsiveness of the forms in narrow viewports (see #416).
The first part of the changes mentioned by @oleq in #416 (comment) are merged: We still need your feedback on the "(WIP) Dynamic items grouping for overflowed toolbars" part though. |
It's about time to focus this issue. Issue with balloons out of view have been fixed with #1299, the only outstanding problem is the toolbar responsiveness, and let's track it in this issue. |
Internal: Created a "three vertical dots" icon for the toolbar grouping feature (see ckeditor/ckeditor5#416).
Other: Adjusted toolbar styles to allow automatic items grouping (see ckeditor/ckeditor5#416).
Feature: Implemented the `getResizeObserver()` helper that offers an entry to the native `ResizeObserver` API (see ckeditor/ckeditor5#416).
Feature: Implemented automatic items grouping in the `ToolbarView` component. Closes ckeditor/ckeditor5#416. BREAKING CHANGE: The internal structure of the component has changed. Toolbar items are no longer direct descendants of the toolbar in DOM, which may affect some integrations (mainly CSS selectors if adjustments were made to the styles).
Feature: Enabled automatic items grouping in the main editor toolbar when there is not enough space to display them in a single row (see ckeditor/ckeditor5#416).
Feature: Enabled automatic items grouping in the main editor toolbar when there is not enough space to display them in a single row (see ckeditor/ckeditor5#416).
@nusagates Please leave a 👍 in #5586. |
Is this a bug report or feature request?
🆕 Feature request
💻 Version of CKEditor
CKEditor v5 @ 12.4.0
📋 Steps to reproduce
Currently the toolbar gets a little ugly in narrow viewports. Namely it flows into two, disorganized lines.
Example below:
A solution for this would be to collapse overflowing buttons.
If you'd like to see this feature implemented, add 👍 to this post.
The text was updated successfully, but these errors were encountered: