User tests: Successful: Unsuccessful:
Pull Request for Issue #25891 .
Adds some utility classes that can be applied using the parentclass
attribute. These classes set width and layout of fields...
span-1 (16.6% width - single column)
span-2 (33.3% width - single column)
span-3 (50% width - single column)
span-4 (66.6% width - single column)
span-5 (83.3 width - single column)
span-6 (default - full width - single column)
For the option of displaying fields inline / in a row we have...
span-1-inline (16.6% width - inline)
span-2-inline (33.3% width - inline)
span-3-inline (50% width - inline)
span-4-inline (66.6% width - inline)
span-5-inline (83.3% width - inline)
Offset layout
offset-1 (16.6% offset)
offset-2 (33.3% offset)
offset-3 (50% offset)
offset-4 (66.6% offset)
offset-5 (83.3% offset)
Field orientation
stack (stack label on top of field)
See examples below....
Note: This can be partly tested via browser tools by adding the classes to the control-group
div of a field. Otherwise simply edit xml using the class attribute..
<field
name="article_layout"
type="componentlayout"
label="JFIELD_ALT_LAYOUT_LABEL"
class="form-select"
useglobal="true"
extension="com_content"
view="article"
parentclass="span-4 stack"
/>
Yes
Status | New | ⇒ | Pending |
Category | ⇒ | Administration com_content com_messages com_users Templates (admin) NPM Change Layout Libraries |
I guess it is more readable as display
I recommend you remove the display
attribute. As it just complicates things. It is an anti-pattern.
In your example these would all do the same. I don't see how that makes things clearer or more readable:
class="form-select"
display="span-4 stack"
class="form-select span-4"
display="stack"
class="form-select stack"
display="span-4"
class="form-select span-4 stack"
display="form-select span-4 stack"
class="span-4 stack"
display="form-select"
class="stack"
display="form-select span-4"
class="span-4"
display="form-select stack"
Labels |
Added:
NPM Resource Changed
?
|
Category | Administration com_content com_messages com_users Templates (admin) NPM Change Layout Libraries | ⇒ | Administration com_content com_messages com_users Templates (admin) NPM Change Layout |
Title |
|
A fair point. I have removed the display attribute in favour of applying these classes via the existing class atribute. Title and description have been updated.
I think this seems logical. Kinda prefer the grid layout to #31810 as well - seems more native/intuitive. I guess what's left is to work through core now and figure out where we do/don't want the column based layouts. Like I still think article options are better with the inline fields overall. Obviously plugins we don't want it etc.
Like I still think article options are better with the inline fields overall.
Might be better visually but they dont work as shown by multiple issues
Status | Pending | ⇒ | Fixed in Code Base |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-02-17 18:39:23 |
Closed_By | ⇒ | wilsonge |
Might be better visually but they dont work as shown by multiple issues
I mean it's unclear to me whether grid will have the same issues as we have in (showon i guess would have the same issues - but things like the calendar form field I'd hope wouldn't)
Saved me a lot of work for testing which I've scheduled for next weekend ;-)
I will try to test if it solved issue when we use subform
Now someone has to do the work and add classes here and there to the fields so that the backend looks nice again. E.g. for Cassiopeia's template style options I'd think the "span-2-inline stack" should be fine.
@ciar4n
Sorry I am totally lost. Take the menu module edit for example #31810 (comment)
My question is here #31810 (comment)
If I add the new classes to control-group, I can reduce the length of the input or select field, but not at all if I do for each field in the xml. Also these new classes don't seem to be useful to create multiple columns.
I guess I need examples that work.
@wilsonge @brianteeman @ciar4n @richard67 Hello, you know I hope I appreciate you all. But now I do not agree with what you are doing. The backend of Joomla! 4 has now been in place for a few months. And I believe that it was finally accepted by the users.
You cannot leave the backend primarily displayed on a column. This makes using Joomla very painful. If google translate does its job well, I understand that you are going to put the display back to three columns. I sincerely hope so, with all my heart. You shouldn't make using Joomla even more difficult for new or small users. The media manager is already difficult to use beyond 12 images. Don't make the entire backend difficult to view on a computer screen. Thank you very much for your work.
Cyrille
I've already mentioned above that there is some work to do now: #32422 (comment)
display
attribute is confusing, because after the display
you want to write block
. Yes, in general, and parentclass
is also not clear about which parent we are talking about. I suggest using the controlclass
attribute, we know that in the full sense of the control is just <div class= "control-group"/>
note
field and the spacer
field will be full-width.note
and spacer
fields, only between them will be distributed in 2-3 columns. This will allow you not to create a garbage can from the fields. And of course the ability to use the controlclass
attribute.These classes are designed to work on individual fields rather than a collective of fields (fieldset). I guess technically they can be extended to work on the fieldset, presuming there is a need for it?
Ok it Can be cool to use columns via fieldset more simple to use for basic ux
It Can be very simple 2 columns mode only
These classes are designed to work on individual fields rather than a collective of fields (fieldset). I guess technically they can be extended to work on the fieldset, presuming there is a need for it?
@ciar4n As you can see, user @micker mixed up the parent for this attribute. Therefore, the field attribute should be more precise in the name, for example, ContainerClass, CaseClass, ControlClass.
Thank you for your work.
What is the reason for a new
display
attribute, when all it does is add it to the class?Why not just use the ready-to-use class attribute?
So instead of this:
Simply do: