Show preview in poll builder

AI-generated summary

A feature request has been made to add a preview to the poll builder, allowing users to see what the actual poll will look like. tgxworld posted a screenshot of the current poll builder and suggested this feature as a good starting task.

Before work begins, sam requested a visual mockup due to space constraints. tgxworld assured that the modal can be expanded on desktop, with the preview hidden on mobile. The display code for the preview will be reused from the composer, as confirmed by tgxworld in response to codinghorror.

CvX has taken on the task and presented two layout options: vertical and horizontal. The horizontal layout allows more options to be displayed above the fold, while the vertical layout preserves the original minimal layout. eviltrout and codinghorror prefer the horizontal layout, citing the prevalence of widescreen desktops and laptops.

This is currently how our poll builder looks like and I felt that it’ll be great if we can show a preview of what the actual poll will look like within the builder.

Not a must have for us but a good to have here so I’m tagging it pr-welcome. Probably a good #starter-task as well.

13 Likes

Space is really tight here, before anyone starts working on this, please post a visual mockup!

3 Likes

The modal is actually quite small so we can afford to expand it on desktop. Just like the composer, we’ll probably have to hide the preview on mobile.

5 Likes

Will we be able to re-use the display code here? :thinking:

Yup it’ll reuse the same cook processor as the preview.

2 Likes

Calling dibs on this one! :slightly_smiling_face:

I’m not sure which layout is better:

vertical or horizontal

Vertical one preserves the original, minimal layout of this modal, but the horizontal one allows displaying more options above the fold. :thinking:

12 Likes

I prefer the horizontal one myself, although I do think they both look nice!

5 Likes

Horizontal is perfect, most desktop / laptops are widescreen these days. :heart_eyes:

4 Likes