Jump to content

Idea / feature-request: settings in columns


herr rilke
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:

911221092_Clipboard1.thumb.jpg.3a3e15c8831f36843b7ae9d84cc459ae.jpg

 

select:

376290053_Clipboard2.thumb.jpg.114bbc8d7304ab41b3b5a636b040131f.jpg

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

@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:

image.png.e05ef3b050e594653fc2c53269947a51.png

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

  • Thanks 1
Link to comment
Share on other sites

@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 */
    }
}

image.thumb.png.5a6b3de65907d12b9553c299a7a3fee3.png

Link to comment
Share on other sites

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 🙂 )

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...