Adding a preview button

[niravasher]

Please describe the problem (or idea)

What happened just before the problem occurred? Or what problem could this idea solve?

A preview button which can show what a user is publishing.

Please show us where to look.

index.html page inside examples

What's your PublicLab.org username?

niravasher

Browser, version, and operating system

windows 10

Many bugs are related to these -- please help us track it down and reproduce what you're seeing!

This is how the preview div looks like after pressing preview button. The user can see what he has changed as compared to its previous note. Is the design right? Should I change the frontend in anyways?

---

@publiclab/community-reps

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

[niravasher]

This issue is just for @publiclab/community-reps.

[grvsachdeva]

@publiclab/community-reps

[niravasher]

Hey @jywarren @ebarry @gauravano @SidharthBansal please have a look at it once

[jywarren]

This looks really interesting - a cool idea! I have some questions and suggestions. First, is this a mockup or did you produce some code you could share?

Second, perhaps we ought to stick to Bootstrap styles (https://getbootstrap.com/docs/3.3/), or to roughly mirror the kind of layout shown at PublicLab.org? It could be a little bit more minimal.

Third, what is the diff run against? What a cool idea to show a diff!

[niravasher]

Hello! Good evening, The code goes this way

1. Initial value of all fields inside the preview area is "" which gets stored in valueOne, value input by the user is stored in valueTwo, and finally comparison of valueOne and valueTwo gives different colors according to the library. On pressing the preview button again after editing any value, i put the value of valueTwo into valueOne and take the input by the user in valueTwo and compare both once again. I am using local storage to store everything.

2. I can make the colors more minimal but the layout can't be similar to that shown at PublicLab.org because there is a header section to the specific field and its value below it. I don't have much experience with bootstrap but will try to implement it

3. two values are being compared which are updated when user edits , the task is to bring the two values together and update them correctly, rest all the magic is done by the library itself. @jywarren

[niravasher]

Modifications done,font and color minimization , addition of bootstrap hence the page is responsive. Please suggest me further changes @gauravano @jywarren @ebarry @SidharthBansal