Panel field width modification

[RWDevelopment]

my modification idea for panel fields 'with' attribute using 'col-md-' class

modification of

<div class="section-content">

by adding 'width' attribute to field

panel/views/fields/layout/sections.php :

<div class="sections">
    <?php foreach ($sections as $section) : ?>
        <section <?= $this->attr(['class' => ['section',  $section->is('collapsible') ? 'collapsible' : '', $section->is('collapsed') ? 'collapsed' : '']]) ?>>
            <div class="section-header">
                <?php if ($section->is('collapsible')) : ?>
                    <button type="button" class="button section-toggle mr-2" title="<?= $this->translate('panel.sections.toggle') ?>" aria-label="<?= $this->translate('panel.sections.toggle') ?>"><?= $this->icon('chevron-up') ?></button>
                <?php endif ?>
                <span class="caption"><?= $this->escape($section->label()) ?></span>
            </div>
            <div class="section-content">
                <div class="row">
                <?php foreach ($fields->getMultiple($section->get('fields', [])) as $field) : ?>
                    <?php if ($field->isVisible()) : ?>
                        <div <?= $this->attr(['class' => [$field->get('width') ? $field->get('width') : 'col-md-12-12']]) ?>>
                            <?php $this->insert('fields.' . $field->type(), ['field' => $field]) ?>
                        </div>
                    <?php endif ?>
                <?php endforeach ?>
                </div>
            </div>
        </section>
    <?php endforeach ?>
</div>

now panel can use 'width' attribute to change field with:
e.g.

 publishDate:
        type: date
        label: '{{page.publishDate}}'
        placeholder: '{{date.noDate}}'
        default: null
        width: col-md-6-12

    unpublishDate:
        type: date
        label: '{{page.unpublishDate}}'
        placeholder: '{{date.noDate}}'
        default: null
        width: col-md-6-12

[sgirard84]

Great idea. That's actually one thing I wished to have.

[giuscris]

Hi @RWDevelopment thank you for sharing your idea. This makes sense to extend customizability of the fields.

I would omit the col-md- part and have only the size.

You can also avoid the ternary operator since you can give $field->get('width', '12-12') a second parameter for the fallback value.

Can you contribute a pull request? I'd be pleased to merge this change.

[sgirard84]

This is how we can achieve this with Flextype

size: 4/12

[RWDevelopment]

done

[giuscris]

Merged!