Plots2: Optional Image while SignUp

[SidharthBansal]

@jywarren we have sidebar to add image at /profile/edit but we don't have any image upload option at the /signup.
Can we have an optional image upload in the signup?

[jywarren]

Hmm maybe there's an issue with not having a uid to assign yet? We could
have it be a prompt immediately after creating an account, maybe?

On Fri, Dec 14, 2018, 9:57 PM Sidharth Bansal <[email protected]
wrote:

@jywarren https://github.com/jywarren we have sidebar to add image at
/profile/edit but we don't have any image upload option at the /signup.
Can we have an optional image upload in the signup?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311, or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ2SZvC8KLQOmAJXpA0xYN8klR4lnks5u5GUVgaJpZM4ZUihG
.

[SidharthBansal]

@IshaGupta18 may be you will be willing to work on this.
You were asking me to work on an issue.
We can pop up a window may be to ask the user to add profile picture. Or we can show a flash message on the dashboard to add an image. What do you suggest?

[IshaGupta18]

In the sign up modal or sign up page, I think we can add an optional button with a popover. On clicking on that button, they can add a profile picture is the wish to which can be shown in a circular layout in the popover. What do you think?

[SidharthBansal]

That would be best I think.

[IshaGupta18]

Hey I think a collapse would look better because it would be cleaner and won't overlap with other fields. What do you think?

[SidharthBansal]

Can you provide the screenshots for it before working on pr for it?

On Sun, Dec 30, 2018 at 7:27 PM Isha Gupta [e-mail] wrote:

Hey I think a collapse would look better because it would be cleaner and
won't overlap with other fields. What do you think?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-450562484,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQxP-e4tW2p6v1JsjzlBIXSMfD7KEks5u-MZggaJpZM4ZUihG
.

[IshaGupta18]

@SidharthBansal will it be okay if I take some time for this issue, because image uploading and stuff is new to me, so I'll have to figure that out first?

[SidharthBansal]

Sure

[IshaGupta18]

Thanks a ton!

[IshaGupta18]

Hey, I think this one would look better than making a popover or a collapse, because that is just double work for a user who wants to upload a picture, as he would first have to click on the button to get the popover/collapse and then upload. How does it look?

On choosing/dropping an image:

[SidharthBansal]

Hi image upload is already present at the sidebar of profile. We want it
similar for the signup modal. It should be transfered to top. Then it will
be much appreciated.
Thanks Isha.

On Fri, Jan 4, 2019, 6:57 PM Isha Gupta <[email protected] wrote:

Hey, I think this one would look better than making a popover or a
collapse, because that is just double work for a user who wants to upload a
picture, as he would first have to click on the button to get the
popover/collapse and then upload. How does it look?

[image: image]
https://user-images.githubusercontent.com/40794215/50690178-6935b180-1052-11e9-8dba-625a1af9f179.png

On choosing/dropping an image:

[image: image]
https://user-images.githubusercontent.com/40794215/50690205-810d3580-1052-11e9-9187-7dd208cba4d8.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451443112,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQ8CZvYFBYJmeBmlA5YhZ5B8QNHIIks5u_1amgaJpZM4ZUihG
.

[IshaGupta18]

Where exactly at top would you like it?

[SidharthBansal]

At left hand side, I guess

On Fri, Jan 4, 2019, 7:26 PM Isha Gupta <[email protected] wrote:

Where exactly at top would you like it?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451449797,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQ1nHsTxGwIFPLuogofkqrxFrKoX7ks5u_119gaJpZM4ZUihG
.

[IshaGupta18]

But there is no left side in the modal

[IshaGupta18]

And the same form is being rendered on the sign up page and in the modal

[IshaGupta18]

Also, if we look at this way, int his layout, after uploading the image, only that robot captcha is left.. so probably it would be suitable. What do you think?

[SidharthBansal]

I am saying like
Profile_image Providers
Sign_up_form

[IshaGupta18]

Okay, so just below "Sign up to join public lab community" and on the left side of oAuth providers, right?

[SidharthBansal]

Yeah I think that will be the best option. What do you think?

On Sat, Jan 5, 2019 at 2:26 PM Isha Gupta [e-mail] wrote:

Okay, so just below "Sign up to join public lab community" and on the left
side of oAuth providers, right?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451639254,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQ5rfbTjHNfrnQhQE9iP1fLwc2dtJks5vAGingaJpZM4ZUihG
.

[IshaGupta18]

Okay, let me try it and show you a screenshot!

[IshaGupta18]

Something like this?

[SidharthBansal]

Let's create the form at 1 column instead of 2 column then the image will
be adjusted accurately.
Thanks Isha

On Sat, Jan 5, 2019 at 2:38 PM Isha Gupta [e-mail] wrote:

Something like this?

[image: image]
https://user-images.githubusercontent.com/40794215/50722606-85d7f500-10f7-11e9-941b-24a9d14a40f1.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451639884,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQ6MaXezipe_7957uDt1NHHyrVv2fks5vAGuDgaJpZM4ZUihG
.

[IshaGupta18]

Okay let me see, probably I can adjust this image here too properly, I will try it out okay?
Thanks a lot!

[SidharthBansal]

Use emoticons so that the conversation is short for @jywarren to respond.
Use :+1 at the end of comments from next time.
Thanks Isha

On Sat, Jan 5, 2019 at 2:48 PM Isha Gupta [e-mail] wrote:

Okay let me see, probably I can adjust this image here too properly, I
will try it out okay?
Thanks a lot!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451640399,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQ0A6Onw1eEkggwctT-RLkTutShBeks5vAG3kgaJpZM4ZUihG
.

[IshaGupta18]

How's this?

[SidharthBansal]

Providers

image(1st half) Username
Image(2nd half) Email
Password Password Confirmation
Bio Text Area.....
Submit
I was trying to suggest this. Sorry for the misunderstanding. Apologies.

On Sat, Jan 5, 2019 at 3:29 PM Isha Gupta [e-mail] wrote:

How's this?
[image: image]
https://user-images.githubusercontent.com/40794215/50723068-a35c8d00-10fe-11e9-85f4-b4d97707f65b.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451642606,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQ67rpdfKmJFJ6Ie0ukjzUodaTThdks5vAHdxgaJpZM4ZUihG
.

[IshaGupta18]

Oh that's okay, not a problem. How does this look?

[SidharthBansal]

You missed the circular shape image. Let's add a default image there if no
image is uploaded by the user.

On Sat, Jan 5, 2019 at 4:04 PM Isha Gupta [e-mail] wrote:

Oh that's okay, not a problem. How does this look?

[image: image]
https://user-images.githubusercontent.com/40794215/50723417-647d0600-1103-11e9-8552-ea835e1de9dd.png

[image: image]
https://user-images.githubusercontent.com/40794215/50723420-7068c800-1103-11e9-9b44-30e54ffea0ec.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451644554,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQ3FGlGcMCpy9HdzIwDzzrdo_L5V7ks5vAH_SgaJpZM4ZUihG
.

[IshaGupta18]

Is this okay?

[SidharthBansal]

Yeah, let's wait for Jeff to review this before proceeding further.
It looks good to me. Thanks

On Sat, Jan 5, 2019, 4:52 PM Isha Gupta <[email protected] wrote:

Is this okay?

[image: image]
https://user-images.githubusercontent.com/40794215/50723903-35b65e00-110a-11e9-80ac-3f39061e10fa.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451647187,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQ0MVIM9BI221IBfsGIG1Wq7lDEQrks5vAIrcgaJpZM4ZUihG
.

[IshaGupta18]

Okay, Thank you so much! Should I create a PR for wait for @jywarren ?

[SidharthBansal]

Let's wait for Jeff before making PR.

On Sat, Jan 5, 2019, 4:56 PM Isha Gupta <[email protected] wrote:

Okay, Thank you so much! Should I create a PR for wait for @jywarren
https://github.com/jywarren ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451647414,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQ0-GaO4Dqefw4IsGfEiJ9wWrz7JIks5vAIvRgaJpZM4ZUihG
.

[jywarren]

Ooh this looks real nice! A bit more space under the new zone would make it
seem a little less cramped, maybe. And we should confirm how it looks at
different screen widths down to smartphone size! But great work here!

Wait though, one reason we didn't do this originally was because there is
no user record yet so there's nowhere to assign the image to upon upload.
We'll have to think through how we solve this issue before being able to
implement this, I think!

On Sat, Jan 5, 2019, 6:28 AM Sidharth Bansal <[email protected]
wrote:

Let's wait for Jeff before making PR.

On Sat, Jan 5, 2019, 4:56 PM Isha Gupta <[email protected] wrote:

Okay, Thank you so much! Should I create a PR for wait for @jywarren
https://github.com/jywarren ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<https://github.com/publiclab/plots2/issues/4311#issuecomment-451647414
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AUACQ0-GaO4Dqefw4IsGfEiJ9wWrz7JIks5vAIvRgaJpZM4ZUihG

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451647540,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ3SzTUOkFT6PeaU__0rwKQLYccDUks5vAIxOgaJpZM4ZUihG
.

[IshaGupta18]

Sir that is not a problem, this image is just in a form tag and is submitted along with the rest of the information and is displayed at the profile page of the user. Also, this preview is just through js.

[IshaGupta18]

About it being responsive, I am unable to make a gif and show it to you, but it's working just fine on different screen sizes!

[IshaGupta18]

See, is this okay? I hope that your concern was resolved!

[jywarren]

Ah awesome! Thanks and great work! Also no need to say sir! :-)

>

[IshaGupta18]

Thank you :smile: so I am creating a PR now.

[SidharthBansal]

Great

On Sun, Jan 6, 2019, 12:29 AM Isha Gupta <[email protected] wrote:

Thank you 😄 so I am creating a PR now.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451681926,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQ2a6Ezyjj14_VUEMBwE7ASBYinvgks5vAPYlgaJpZM4ZUihG
.

[IshaGupta18]

4538 is my PR for this issue, I am waiting for approval. I hope everything works out! Thanks a lot @SidharthBansal @jywarren

[SidharthBansal]

Can you please confirm that the image is present after successful sign up
on the profile page?
Thanks, I will review tomorrow. Its 1-35 am here. Good night.

On Sun, Jan 6, 2019, 12:54 AM Isha Gupta <[email protected] wrote:

4538 https://github.com/publiclab/plots2/pull/4538 is my PR for this

issue, I am waiting for approval. I hope everything works out! Thanks a lot
@SidharthBansal https://github.com/SidharthBansal @jywarren
https://github.com/jywarren

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451683556,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQ8XVusIWN7knsjlSPICzVBp7DmOmks5vAPvggaJpZM4ZUihG
.

[IshaGupta18]

See, is this okay? I hope that your concern was resolved!

See this... I hope this is okay?

Its 1:35 am here too, Good Night! Thanks a lot!

[SidharthBansal]

I thought that was default image. Sorry for the misunderstanding

It looks great. I will review the code after getting up in the morning.
Sleeping now. Its midnight. You should also sleep.

On Sun, Jan 6, 2019, 1:37 AM Isha Gupta <[email protected] wrote:

[image: image]
https://user-images.githubusercontent.com/40794215/50727020-f2c0ae80-113a-11e9-9403-d1f3cd11c7ee.png

[image: image]
https://user-images.githubusercontent.com/40794215/50727023-ffdd9d80-113a-11e9-9cfe-4f9879317500.png

See, is this okay? I hope that your concern was resolved!

See this... I hope this is okay?

Its 1:35 am here too, Good Night! Thanks a lot!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451686628,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQ-xxi0OLm-XBOfFN7FiiV14WjyYJks5vAQYSgaJpZM4ZUihG
.

[grvsachdeva]

Hi @jywarren @SidharthBansal @IshaGupta18,
I am not that much convinced that we should add profile field to sign up form but if we are then I want to make a suggestion regarding the design.

I guess this image present below is finalized design, but I think, it's looking unorganized a bit as image field is not looking that good with 2 input fields.

I would suggest this design :

Here, we would be keeping the start of form organized and also bio doesn't need that much space 30% of bio field space can be shared with profile image and yes, placing that field left or right can be decided by comparing only.

Also, Signup form should be as less demanding(in terms of number of fields) as possible, otherwise user would be reluctant in signing up.

Thanks!

[grvsachdeva]

I just noticed that PR #4538 is ready so we can keep the above design as a suggestion for the future optimization. Thanks and nice work @IshaGupta18 !

[IshaGupta18]

Thanks a lot @gauravano !

[SidharthBansal]

I think we should take guidance from Jeff about what will look better. We can merge whatsoever looks best to him.
Also Isha can you show us the mobile view?
Thanks Gaurav for the suggestion. Bio field is much more than needed. I agree with you.

[IshaGupta18]

Absolutely! This is how it looks in mobile view

[SidharthBansal]

Great

On Sun, Jan 6, 2019 at 10:16 PM Isha Gupta [e-mail] wrote:

Absolutely! This is how it looks in mobile view
[image: image]
https://user-images.githubusercontent.com/40794215/50739073-b9527680-1200-11e9-9ba0-a0ea8ab55baf.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-451755988,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUACQ3hC2jOynGAu--bN98Rs5bYZFmI2ks5vAihwgaJpZM4ZUihG
.

[jywarren]

Yes let's open a new issue for @gauravano's suggestion! This is looking good; but perhaps we should make the image a bit smaller (even half the size?) -- so it doesn't push content down too much, especially in mobile view? Can you also add an underline to "Choose image" ?

Thank you!

[SidharthBansal]

I agree with Jeff.
Moved to #4538.

[IshaGupta18]

Okay @jywarren ! Should I reduce the size of the image in this one only? Or should I implement the deisgn by @gauravano and do that there?

[jywarren]

let's just make the small change in this one, and we'll
address @gauravano's design in a follow-up. Thank you!

On Tue, Jan 8, 2019 at 12:47 PM Isha Gupta [e-mail] wrote:

Okay @jywarren https://github.com/jywarren ! Should I reduce the size
of the image in this one only? Or should I implement the deisgn by
@gauravano https://github.com/gauravano and do that there?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-452389199,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ_P-lPXQ24Gs3ZP92X8R0ivRqHBNks5vBNmDgaJpZM4ZUihG
.

[IshaGupta18]

Is this better?

[jywarren]

I still think it's a little close to "Choose a Password" - could you add
10px more margin under it? Thanks!

On Tue, Jan 8, 2019 at 12:54 PM Isha Gupta [e-mail] wrote:

Is this better?
[image: image]
https://user-images.githubusercontent.com/40794215/50849243-69a8b200-139c-11e9-8921-d8c6ef872f37.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-452391351,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ7zz1ttFV-pmxmBRbS3SGXHDseJ5ks5vBNsigaJpZM4ZUihG
.

[IshaGupta18]

Yes that's my bad, it's fixed now! I am committing these changes now, will
that be okay, or are any more changes required here? Do let me know if they
are!

On Wed, Jan 9, 2019, 2:35 AM Jeffrey Warren <[email protected] wrote:

I still think it's a little close to "Choose a Password" - could you add
10px more margin under it? Thanks!

On Tue, Jan 8, 2019 at 12:54 PM Isha Gupta [e-mail]
wrote:

Is this better?
[image: image]
<
https://user-images.githubusercontent.com/40794215/50849243-69a8b200-139c-11e9-8921-d8c6ef872f37.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<https://github.com/publiclab/plots2/issues/4311#issuecomment-452391351
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AABfJ7zz1ttFV-pmxmBRbS3SGXHDseJ5ks5vBNsigaJpZM4ZUihG

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4311#issuecomment-452450885,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Am54Z32HGmNDaUEvOJh5M0dWf3uU1arFks5vBQf-gaJpZM4ZUihG
.

[jywarren]

Hi! Thanks! Do you think you could add just 10px more vertical margin where I've highlighted here?

It'll look a little less cramped. Thanks!

[IshaGupta18]

Done sir!

[jywarren]

Could you share one more screenshot, thank you!!!

[IshaGupta18]

Absolutely sit, I should have done that along the way