Skip to content

[6.0] Subform Grid layout, an alternative for unresponsive Table layout #42347

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

Open
wants to merge 15 commits into
base: 6.0-dev
Choose a base branch
from

Conversation

Fedik
Copy link
Member

@Fedik Fedik commented Nov 15, 2023

Pull Request for Issue #29241.

Summary of Changes

Adds a new layout that rendering subforms fields in Grid (which partially mimic the table look).
Wich make it more responsive.

It is not 1:1 replacement for table, here is no headers and the labels is rendered within the input.
But in most cases should be good for such views.

Testing Instructions

Run npm install
Create subform field somewhere:

<field type="subform" name="subform1" label="subform1" multiple="true" 
layout="joomla.form.field.subform.repeatable-grid">
    <form>
            <field type="text" name="text" label="Text"/>
            <field type="text" name="text2" label="Text2"/>
            <field type="text" name="text3" label="Text3"/>
    </form>
</field>
<field type="subform" name="subform2" label="subform2" multiple="true" groupByFieldset="true"  
layout="joomla.form.field.subform.repeatable-grid">
    <form>
        <fieldset name="set1" label="Set 1">
            <field type="text" name="text" label="Text"/>
        </fieldset>
        <fieldset name="set2" label="Set 1">
            <field type="text" name="text2" label="Text2"/>
            <field type="text" name="text3" label="Text3"/>
        </fieldset>
    </form>
</field>

And check that it looks good on small and normal screens.

Also try edit the Custom field options for List field in backend, with browser width around 1000-1200px

Actual result BEFORE applying this Pull Request

The options input for List field is cutted:

Screenshot 2023-11-12_16-46-40

Expected result AFTER applying this Pull Request

Testing field works.

The options input for List field looks good:
Screenshot 2023-11-12_16-46-16

Link to documentations

Please select:

  • Documentation link for docs.joomla.org: https://docs.joomla.org/Subform_form_field_type
  • No documentation changes for docs.joomla.org needed
  • Pull Request link for manual.joomla.org: TBD
  • No documentation changes for manual.joomla.org needed

Please write your opinions.
Do we need this, do we do it in this way or should be something else. Thanks!

@joomla-cms-bot joomla-cms-bot added Language Change This is for Translators NPM Resource Changed This Pull Request can't be tested by Patchtester PR-5.1-dev RFC Request for Comment labels Nov 15, 2023
@Fedik Fedik added the Feature label Nov 15, 2023
@chmst
Copy link
Contributor

chmst commented Nov 28, 2023

@Fedik tested in an own component and really like it.

My subform in three variants after Patch: repeatable, repeatable-grid and repeatable-table

grafik

 Conflicts:
	build/media_source/templates/site/cassiopeia/scss/blocks/_form.scss
	plugins/fields/subform/params/subform.xml
@Fedik Fedik changed the base branch from 5.1-dev to 5.2-dev March 19, 2024 15:28
@HLeithner HLeithner changed the title [5.x][RFC] Subform Grid layout, an alternative for unresponsive Table layout [5.2] [RFC] Subform Grid layout, an alternative for unresponsive Table layout Apr 24, 2024
@Fedik Fedik changed the title [5.2] [RFC] Subform Grid layout, an alternative for unresponsive Table layout [5.2] Subform Grid layout, an alternative for unresponsive Table layout Apr 28, 2024
@joomla-cms-bot joomla-cms-bot removed the RFC Request for Comment label Apr 28, 2024
@HLeithner
Copy link
Member

This pull request has been automatically rebased to 5.3-dev.

@HLeithner HLeithner changed the base branch from 5.2-dev to 5.3-dev September 2, 2024 08:52
@HLeithner HLeithner changed the title [5.2] Subform Grid layout, an alternative for unresponsive Table layout [5.3] Subform Grid layout, an alternative for unresponsive Table layout Sep 2, 2024
@Hackwar Hackwar removed the PR-5.2-dev label Sep 3, 2024
@chmst chmst added the PBF Pizza, Bugs and Fun label Feb 17, 2025
@degobbis
Copy link
Contributor

degobbis commented Feb 22, 2025

I have tested this item ✅ successfully on 9de6e35

Tested with custom fields and works as expected. Just one more thing, had to use npm ci instead of npm install.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42347.

@HLeithner HLeithner changed the base branch from 5.3-dev to 6.0-dev March 4, 2025 17:21
@HLeithner
Copy link
Member

This pull request has been automatically rebased to 6.0-dev.

@HLeithner HLeithner changed the title [5.3] Subform Grid layout, an alternative for unresponsive Table layout [6.0] Subform Grid layout, an alternative for unresponsive Table layout Mar 4, 2025
@rdeutz rdeutz removed the PR-5.3-dev label Mar 5, 2025
@obuisard
Copy link
Contributor

I have tested this item ✅ successfully on c80752c


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42347.

@obuisard
Copy link
Contributor

Really works nicely

@brianteeman
Copy link
Contributor

Has this been checked for accessibility?

@LadySolveig
Copy link
Contributor

I have tested this item ✅ successfully on c80752c


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42347.

@richard67
Copy link
Member

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/42347.

@joomla-cms-bot joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Aug 23, 2025
@Fedik
Copy link
Member Author

Fedik commented Aug 23, 2025

Has this been checked for accessibility?

It is a regular fields in grid arrangement nothing fancy, what can go wrong? 😉

@brianteeman
Copy link
Contributor

quite a lot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature Language Change This is for Translators NPM Resource Changed This Pull Request can't be tested by Patchtester PBF Pizza, Bugs and Fun PR-6.0-dev RTC This Pull Request is Ready To Commit
Projects
None yet
Development

Successfully merging this pull request may close these issues.