Open mauritsvanrees opened 1 year ago
So in Plone 6.0.5 it looks like this in a customer project:
I can add this scss:
body.plone-toolbar-top .toolbar-label {
display: inline-block;
}
Result:
Nice! But wait, this is very long, and actually too long: we are missing Syndication.
On a standard Plone site, it actually works, but only on the site root or a page: folders usually have too many tabs.
So for starters we may only do this from the largest breakpoint, xxl at 1400:
@include media-breakpoint-up(xxl) {
body.plone-toolbar-top .toolbar-label {
display: inline-block;
}
}
How does it look at 1400 pixels then?
Not so good, we now see that items are flowing over on a second line. They are only really visible when you hover over them, like here with the History tab. Sharing, Rules, and Syndication are not visible, being white on white.
The font size is a bit big, so we have some room there. This is the first size that fits:
@include media-breakpoint-up(xxl) {
body.plone-toolbar-top .toolbar-label {
display: inline-block;
font-size: 0.4rem;
}
}
That is really much too small.
So this is not working!
Some possible solutions:
This is much harder than the few lines of css I had in mind... I will remove myself as assignee. But I hope someone will pick this up.
I would add a "..." icon at the end where to collapse things that does not fit. The problem is the usability.
Another solution could be to remove icons but does not fit if the tabs increases.
I think that the real solution is to have only an hamburger menu that when clicked show a vertical and scrollable menu as we do in mobile.
Anyway, it is a design problem. You can't have a top vertical menu with a variable number of tabs that fits any use case.
I like the toolbar on top instead of on the side, for easier theming. But the labels for the actions (Contents, View, Edit, etc) are not shown. I checked, and until Plone 6 alpha 4 they were still shown. It seems this change was not intentional.
At first glance it seems easy enough to fix with a few lines of css, the labels are there but simply have display:none. Maybe only on breakpoint large or xl and up, to be safe. I can have a go at it.