Advanced instructions / instruction steps

[Jimmi08]

Motivation

Better look and readable

Proposed Solution

Make instruction steps like hero plugin works... each step with icon, image, title, description, order...

[Moc]

This will probably require quite a rewrite: separate fields for each step (with each their own image perhaps?)...
Not sure if I'll do this. A lot of styling is already possible using ordered and unordered lists and using CSS to style it.

[Jimmi08]

No, in fact it needs just one field as json and method and a bit javascript/ajax... like you are adding values for userextended list field.
Or limitation for max number of steps and than it is easier, because I am not friend with ajax.
You have field instructions and this field could be steps.
:) Just talking

[Moc]

@Jimmi08 I've been playing around with this, but I'm not satisfied so far. Please update to the latest files and enable devmode pref ( "Display options tab").

I am not happy with the user experience as the new instruction fields take up way too much space to my liking. I also need to add something like a button to add new rows. This requires some JS knowledge that I don't have atm.

I am heavily considering leaving the instruction field as it was. I think there's plenty of styling possibilities using CSS. Some examples:

• https://css-tricks.com/list-style-recipes/#aa-custom-text-counters
• https://codepen.io/BurmesePotato/pen/qBbqpNB (really like this one).
• https://freefrontend.com/css-lists/

The downside is that there is no time or image for each individual instruction step possible... Hmm, not sure yet what to do. As that feature would be nice.