Less CSS required

I thought Joomla! 4 use scss ?

Might be me doing something wrong but something isnt right with the switcher now

Before

After

@brianteeman Do you know of any reason why the switcher has a sr-only class on the label and then adds a second visible 'label' in the form of a legend within the field control? It seems strange and at odds with all other fields.

Switcher html...

<div class="control-group">
  <div class="control-label sr-only">
    <label id="jform_featured-lbl" for="jform_featured">
      Featured
    </label>
  </div>
  <div class="controls">
    <fieldset id="jform_featured">
      <legend class="switcher__legend">
        Featured
      </legend>
      <div class="switcher">
        <input type="radio" id="jform_featured0" name="jform[featured]" value="0">    <label for="jform_featured0">No</label>         <input type="radio" id="jform_featured1" name="jform[featured]" value="1" checked="checked" class="active">   <label for="jform_featured1">Yes</label>    <span class="toggle-outside"><span class="toggle-inside"></span></span>
      </div>
    </fieldset> 
  </div>
</div>

Yes. It was the only way to achieve the correct accessibility. But without checking the original pr I don't remember more than that

Does that mean only the switcher has the correct accessible html? If so then we can probably close this until all other fields are brought up to speed. Considering the switcher html, this PR would be quite different.

switcher is a fieldset and a fieldset requires a legend

@ciar4n - The switcher is like this because you can't associate a label with multiple inputs...only a single input. The only other form fields I can think of that may need checking are checkbox/radio....but only when using multiple.

Ok thank you. I'm guessing we can't just move the sr-only class from the label to the legend?

I think it's being used incorrectly so that the .control-label doesn't take up any space.

Instead the .sr-only should be moved to the <label> and a d-none class be added to the parent <div>

give me two seconds to check that. my memory is failing me but there must have been a reason I did it that way

changing the sr-only to being on the legend instead of the label seems to be ok. not sure I understand the d-none comment

@brianteeman Form fields in Joomla have a label to the left of the field (220px in width or somthing). This isn't the case with the switcher. Instead it's to the right hand side.
So to hide that 200px gap to the left of the switcher, they've used sr-only on <div class="control-label sr-only">.

my brain isnt in gear sorry.

The label to the right is the label for the value of the radio = eg yes/no
the field label and legend are to the left

why I chose to hide the label and not the the legend is something I dont remember and looking at the original pr doesnt help me

corrected last comment

I've moved the sr-only from the legend to the label which fixes the switcher style issue.

Just to mention, any field in a multi column layout, displays in a vertical format regardless of the space available to it. This was always the case.

Instead the .sr-only should be moved to the  and a d-none class be added to the parent 

I read that a little fast. I'll look in to this later.

the switcher changes look good to me now

I have tested this item ✅ successfully on ad91d27

I have tested this item ✅ successfully on ad91d27

Perfect on a Macbook Pro.
Can't see the last error mentioned by @Quy in Indexing options. But again it's tested on a MacBook.

More display issues. Firefox 72.0.2 Windows 10

@Quy should be ok now

I have tested this item ✅ successfully on 0fc2363

I have tested this item ✅ successfully on 0fc2363

RTC

There is a top/bottom padding with the label. Is that OK?

AFTER:

BEFORE:

@Quy I have reduced the label padding...

Minor change so can probably remain RTC

Switcher needs to be adjusted too.

@Quy Ty. Switcher updated.

There is less vertical spacing between the fields.

BEFORE:

AFTER:

@Quy updated

Looks good!! Thank you.

Anyone tested rtl ?

There is extra padding on the first field.

Anyone tested rtl ?

Yes, looks fine.

There is extra padding on the first field.

@Quy Top margin removed.

I have tested this item ✅ successfully on e476392

Works fine here but one question:

@ciar4n
Is it possible to also correct the Global Configuration Text Filters tab in reduced window width (LTR and RTL)? Or shall we postpone this to another PR (if even possible)?

Outside the scope of this PR but as a quick fix I have added the table-responsive class to the table which basically adds a horizontal scroll on smaller screens. This area is in a table which will always be an issue on smaller screens. Maybe something like #13769 could be applied if the horizontal scroll is not sufficient (separate pr).

We have a PR for the permissions already see #27670

@ciar4n
Better, but not enough indeed. specially for the dropdowns.
may I suggest a change?

add

#page-filters .custom-select {
	width: auto;
}

in administrator/templates/atum/scss/blocks/_form.scss
towards the end of the file.
npm

Before patch

After patch

@infograf768 I'll leave it for a separate PR. As mentioned there is a PR for the permissions already. This PR is for the field control-group. The permissions is not even in a control-group.

This proposal above does not concerns Permissions, but the Text Filters.
#27670 concerns only Permissions... and works well for that.

I have tested both Permissions PR and this PR.
They are Ok for what they do.
Will make a new PR for Text Filters after they are merged.
In the mean while, I merge this one as it solves many issues.

Tks.

Thank you for the tests!