Idea / feature-request: settings in columns

[herr rilke]

hallo @bernhard

I love the “settings” and use them extensively.

What I think would be great is if you could arrange them in columns like other fields. Because you often don't need the entire space / width underneath the fields.
... so maybe there is hope... 🙂

best

[bernhard]

Hey @herr rilke I agree that would be nice to have but there are no plans so far to add this (unless someone sponsors it). The problem is that once I added this I'm quite sure the next request is to also support "showIf" and that would make the whole undertaking more complex, as I'd basically have to re-build the whole PW page edit interface...

If you want to improve the UI you can either create dedicated fields and set columnWidth settings for them or you could create your own custom inputfield, which is not too hard and has the benefit that you have a new skill that you can use outside of RPB as well.

Technically it is already possible as the "settingsTable" is just a shortcut. But unfortunately there are no docs about how RockFields work and I need to work on RockCommerce docs first.

[herr rilke]

oh, even more ... 😄 

In Contao CMS you can define styles in a central place, which you can then easily select and assign in different places.

that's really great  😉 ... just in case....

define:

 

select:

[bernhard]

@herr rilke you can already do something similar from the API in RPB. See the docs here: https://www.baumrock.com/en/processwire/modules/rockpagebuilder/docs/settings/#adding-default-settings

[bernhard]

PS: Actually what I really want to implement one day is to make it easy to add RockFields anywhere on the page edit. So for example you could place a checkbox for "center headline" directly below the headline text inputfield. That would also make it easy to build your very own settings UI with just regular HTML.

[herr rilke]

5 minutes ago, bernhard said:

you can already do something similar from the API in RPB. See the docs here: https://www.baumrock.com/en/processwire/modules/rockpagebuilder/docs/settings/#adding-default-settings

oh YEEEEESSS!
that is a good starting point!

i missed that, thinking it is to define defalut VALUES - but that makes a lot of sense.

will use it for sure, thanks for pointing out!

[herr rilke]

7 minutes ago, bernhard said:

Actually what I really want to implement one day is to make it easy to add RockFields anywhere on the page edit. So for example you could place a checkbox for "center headline" directly below the headline text inputfield. That would also make it easy to build your very own settings UI with just regular HTML.

that is ALSO a very helpful idea!

i.e. i have a setting to align the heading - but the heading field is way up in the form. so it would be much easier to tick some boxes directly underneath!

 

[Klenkes]

@herr rilke Practically the first thing I did was to change the display of the settings through adding my own CSS.

Load your own CSS to the backend and try:

.rpb-settings table tbody     {display:grid; grid-template-columns: repeat(6, 1fr);}
.rpb-settings table tbody td  {display:block;}

Looks something like this:

CSS is sometimes better than a whole lotta change to code!

[herr rilke]

@Klenkes - that's really really clever! Thank you very much for sharing!

So I created a module that does nothing but load an additional admin.css.
and because my settings can be so different in size, I rebuilt the CSS a bit.

/* Stile für die settings-Tabelle der RockPageBuilder-Blocks*/

.rpb-settings .uk-table tbody {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; 
}

.uk-table tbody .rpb-setting {
    display: flex;
    flex-direction: column; /* Zellen in einer Spalte platzieren */
    flex: 1 1 200px;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #ddd;
}

/* Stile für die `<td>`-Zellen */
.uk-table tbody .rpb-setting td:first-child {
    font-weight: bold;
    margin-bottom: 8px;
}

.uk-table tbody .rpb-setting td:last-child {
    flex-grow: 1;
}

/* Abstände für kleine Bildschirme reduzieren */
@media (max-width: 600px) {
    .uk-table tbody {
        flex-direction: column;
        gap: 8px; 
    }

    .uk-table tbody .rpb-setting {
        padding: 4px; /* Kleinere Innenabstände */
        margin-bottom: 4px; /* Reduzierter Abstand nach unten */
        flex: 1;
    }

    .uk-table tbody .rpb-setting td:first-child {
        margin-bottom: 4px; /* Weniger Abstand zwischen den Zellen */
    }
}

[bernhard]

That's a very cool idea @Klenkes thx for helping me out!!

If you guys need any additional classes to make styling easier, please let me know! We could add row numbers or settings name to each row etc.

[herr rilke]

And if it were possible to give an id / class not only to the settings but also to the (associated) fields, you could move them under the corresponding fields using JavaScript if necessary (hopefully 🙂 )