Ability to use custom percentages for Flows widgets

[Piedone]

So instead of just being able to select set percentages here:

You could also specify a custom percentage, understanding that the eventual rendering depends on the theme, but still have a general UI for that (like a textbox there). And then the widget by default would be rendered with a corresponding class, like widget-[percentage] like today with widget-50.

[sebastienros]

These are not actual percentages. They are just fixed constants, as strings, that can be mapped in a css grid. If it was "a", "b", "c" it would work the same. It just generates a class like "size-50" (or "size-a") and then a css can map "size-50" to "col-6". So in the end, with bootstrap which uses 12 cols by default, it's like providing "3. 4. 6, 8, 9, 12" cols options.

Another option would be to list the size in columns, from 1 to 12. And also make it a setting in case the theme uses a different number.

Overall I like the current list of choices.

[sebastienros]

Had not read your comment, just the title and the picture ;) So yes you get it, but I don't see the point of typing a custom number to get a custom class. The other feature (and PR) that provides a way to set a custom class would be sufficient.

[ns8482e]

@Piedone It's just how FlowMetadata implemented out-of-the-box and provided default css implementation.

However its extensible enough that you can override according to your needs.

e.g. You can override shape FlowMetadata_Edit in Admin Template or FlowMetadata.Edit.cshtml in your admin theme to include additional percentages if you want and provide corresponding frontend templates and css classes

[sebastienros]

@ns8482e That could deserve a documentation article.

[ns8482e]

@sebastienros sure I'll create one

[remesq]

Just a note that I did this earlier today for my own purposes by copying over FlowPart.cshtml to the ~/Views folder of my theme and modifying it thusly:

. . . 
//widgetContent.Classes.Add("widget-size-" + flowMetadata.Size);
if (flowMetadata.Size == 50)
{
    widgetContent.Classes.Add("col-xs-12 col-sm-6");
}
    else if (flowMetadata.Size == 100)
{
    widgetContent.Classes.Add("col-xs-12");
}
. . .

[Piedone]

I know about these :). We've also added a feature for custom classes: https://github.com/Lombiq/Helpful-Extensions#flows-helpful-extensions This is about making the specific scenario simpler.

[jptissot]

Shouldn't we simply allow this part to be managed in flow part settings? Allow the admin to add a bunch of key value pairs. The key being the text that displays in the flow editor. The value being the class output in the flow.

[Piedone]

Simply being able to add classes like in the linked modules makes this generic but less user-friendly. Having a percentage selector like now is user-friendly, adding a custom percentage value, I think, is still that.

[ns8482e]

@sebastienros @Piedone I have created a article on Flows that gives some insight on how to customize or enhance out of the box functionality https://github.com/surevelox/OrchardCore-Power-Tips/blob/master/Flows.md

[deanmarcussen]

awesome @ns8482e great article. liking the use of grid too ;)

[Piedone]

Cool article!

[ns8482e]

awesome @ns8482e great article. liking the use of grid too ;)

Yes grid works well with Flow.

[sebastienros]

@ns8482e Can you create a PR for the documentation?

[robsrip]

Thank you @Piedone and @ns8482e. I work with graphic designers that couldn't imagine not being able to use a 5/7 column split and this thread and your github pages helped me immensely.

I really like the AdditonalStylingPart extension, that's super handy and much cleaner than having a field attached to each content item. Makes it more of a hidden power user feature instead of a what goes in this field question every time a content administrator is trying to add an html widget.

[Piedone]

Cheers!

[agriffard]

/cc @sebastienros @dafergu2 @kdubious

[kdubious]

I suppose there are a ton of extra things a theme builder using Bootstrap (any framework, but Bootstrap for example) would want access to.

Responsive column layout is an obvious example, and it would be great to simple “activate” a Bootstrap feature that works with Flow. How about applying ‘nav’ / ‘navbar’ to Menus. Button styles. Cards.

I’m about to go down this path. I don’t know much about the inner workings of Orchard Core, yet. But have time / resources available to push this in a smart direction. What do you think about trying to contain TailwindsCSS or Bootstrap logic in some internal code? Or better to create an external module for this?