No Code Attached Yet
avatar bato3
bato3
9 Nov 2021

What needs to be fixed

In articles, menu, ... (I don't check others) on Options tabs lg layout is one column. In previous versions (probably before bootstrap 5 / grid) it was 3 columns

image
Left: Joomla 4.0.4; Right: Joomla beta5-dev (approx 1 years older, bootstrap 4)

Why this should be fixed

Tradition xD

Waste of space in width, the page stretches a lot.

How would you fix it

I see, that form rows has only class control-group. They should have also span-2-inline class.

Also to .control-group should be add flex-direction: column;

 .form-grid .span-2-inline {
  grid-column:var(--span-2)
 }
.form-grid .span-2 {
 grid-column:1/var(--span-2)
}

I see, that is defined:

.form-grid > * {
    grid-column: 1/-1;
}
.form-grid {
    --span-3: span 3;
    --span-4: span 4;
    --span-5: span 5;
    grid-template-columns: repeat(6,1fr);
}
 .form-grid {
  --span-2:span 2;
  --span-3:span 2;
  --span-4:span 2;
  --span-5:span 2;
  grid-template-columns:repeat(2,1fr)
 }
}
@media (min-width:1400px) {
 .form-grid {
  --span-3:span 3;
  --span-4:span 4;
  --span-5:span 5;
  grid-template-columns:repeat(6,1fr)
 }

But I can't see where --span-n variables are used.

Side Effects expected

avatar bato3 bato3 - open - 9 Nov 2021
avatar joomla-cms-bot joomla-cms-bot - change - 9 Nov 2021
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 9 Nov 2021
avatar brianteeman
brianteeman - comment - 9 Nov 2021

The columns were removed deliberately. The pr were they were removed explains the reason

avatar bato3
bato3 - comment - 10 Nov 2021

@brianteeman I suspect you are talking about this #25891 (comment). You didn't give a specific pr, so I chose the one that suited me best.

The whole problem with a single column layout is that it is not usable on large screens. #31810 (comment) I understand, that one column improves (keyboard) follow, but:

  • almost all users use mouse to work with forms and most users selects text in input to correct it, so work with input and select is painfully. On large screens, the distances that the mouse has to cover become large.
  • I would like to remind you that the human eye can effectively read a column that is 60-80 characters wide. Currently, the help hints are too wide.

Another issue is that at some point a decision was made to change the column wrapping to vertical: #27141. This solution improves the UX flow, but breaks other things that lead to the need to implement a single-column layout ...

I think it can be solved better, especially with Bootstrap 5.1 and CSS Grid.

By introducing extra parameters to the field definition, you can define that a given item may occupy more than 1 cell. (multiple width, height). You should add a few more controls, for example: Combine <img alt = "" /> witch "decorative image" checbox. But most important should be group, who allow nested groupings (+ fields).

regularlabs writes that he created his own control as nested grouping field sets.
I believe Joomla should support nested grouping as standard.

A quick test where I added extra grouping.
image
As you can see, additional logical grouping of form fields solves many standard problems. And if we count the average number of characters in the tooltip, we can estimate whether the cell should be additionally enlarged vertically.

The use of wide fields would require more attention: The developer should check if there are no empty fields and, for example, change the order or extend the previous field as well.

Summary

I believe that for widths less than 900px (half of the standard screen) we should keep the current single-column layout, and for larger ones: restore the columns. This will lead to more form items being visible.
As a last resort, you can add max-width for the entire page (especially for 2k+ screens), but then you lose a lot of your work space...

avatar brianteeman
brianteeman - comment - 10 Nov 2021

almost all users use mouse

Doesn't mean that its ok to create a non-accessible solution

Currently, the help hints are too wide.

agreed

I believe that for widths less than 900px (half of the standard screen) we should keep the current single-column layout, and for larger ones: restore the columns. This will lead to more form items being visible.

If you an resolve the numerous problems with the multiple column layout then go for it. I doubt anyone will object to a working solution.

I note that you haven't addressed the problem of multiple fields using the showon attribute

avatar bato3
bato3 - comment - 10 Nov 2021

Doesn't mean that its ok to create a non-accessible solution

I don't understand how the horizontal navigation leads to an inaccessible solution.

And the use of broad forms makes such a solution less accessible to healthy people. (Why do you want to discriminate against them?)

Additional logical grouping of fields solves a lot of problems.

I note that you haven't addressed the problem of multiple fields using the showon attribute

Perhaps we may need to replace shown with disabled child. Or maybe it is enough to use the full-width field. It will definitely require a change in the rules for designing forms. You can't fix everything automatically.

Unfortunately, I don't know enough about Joomla, so I would need some examples of where there are issues. (Some extensions for testing)

avatar brianteeman
brianteeman - comment - 10 Nov 2021

And the use of broad forms makes such a solution less accessible to healthy people. (Why do you want to discriminate against them?)

and that's me out of here.

avatar bato3
bato3 - comment - 10 Nov 2021

Did we understand each other well? I write that the use of columns in a form makes it more accessible to "healthy" people.

(Sorry, my knowledge of English is on the google-translate level, so I might mix something up at some point. )

avatar richard67
richard67 - comment - 13 Nov 2021

You mix up disabled with unhealthy.

And you say that doing something for disabled people means discriminate the not disabled people.

Let‘s say you have a train station which is not accessible for people with wheel chairs, and now that shall be changed by building a lift. This lift will need space, and that will mean there will be less space to walk around for people who do not need a wheel chair. What you say is that building that lift means to discriminate people who can walk. In fact that’s not true because it means less discrimination for those who need a wheel chair so at the end both kinds of people have more equal possibilities in that train station.

Calling Accessibility a discrimination for non disabled people is either really a problem with translation or understanding the word discrimination, or if not then it is a kind of thinking which in my opinion is not acceptable.

avatar richard67
richard67 - comment - 13 Nov 2021

P.S.: Nobody keeps you from using a 3rd party backend template which fits better to your needs.

avatar RickR2H
RickR2H - comment - 14 Nov 2021

Backend CMS can be overridden by the user.css in the admin template. I know there is a initiative to create a CSS override to make everything in the backend smaller. Maybe this is something the are willing to add too. https://github.com/TheStyleGuyzTeam/J4Atum-user-css

avatar bato3
bato3 - comment - 18 Nov 2021

I have no contact with people with disabilities, but please correct me if I am wrong or forgot something.

  • blind people: They kept telling me that screen readers need a correct HTML structure, which in principle I propose to correct by grouping form elements
  • visually impaired: with appropriate magnification, the system becomes one-column
  • people with paresis using keyboards: the order of the fields is not changed (A flow problem is indicated elsewhere, but I have proposed a solution.)
  • people with paresis who use mice: Whoops... They have longer distances to cover (OK, this argument can be exaggerated.)
  • people with paresis controlling eyesight: Whoops... There are fewer elements on the screen

Are there people who are distracted by the excess of information / elements on the website? I mean in the administration panel. It's hard for me to believe that such people will want to administer the site.

@richard67 Let me improve your elevator example a bit. I see it as: the construction of an elevator, when right next to it there is a standard-compliant ramp for wheelchairs. And the escalator. And not at the train station, but to the gym: the treadmill section.

I could have missed something, but to dismiss this suggestion for the sake of the disabled is very far-reaching.

avatar brianteeman
brianteeman - comment - 18 Nov 2021

If you an resolve the numerous problems with the multiple column layout then go for it. I doubt anyone will object to a working solution.

I note that you haven't addressed the problem of multiple fields using the showon attribute

avatar Quy
Quy - comment - 11 Feb 2022

Related #27672

avatar brianteeman
brianteeman - comment - 5 Aug 2022

This really should be closed.

avatar alikon alikon - change - 5 Aug 2022
Status New Closed
Closed_Date 0000-00-00 00:00:00 2022-08-05 08:31:49
Closed_By alikon
avatar alikon alikon - close - 5 Aug 2022

Add a Comment

Login with GitHub to post a comment