Add a share solution button #122

rishipurwar1 · 2021-10-05T14:53:02Z

Describe the Feature
Your task is to add a share solution button on the solution detail page so that users can share their solutions to the different social networking websites easily.

Design Inspirations:
https://www.uidesigndaily.com/posts/sketch-share-modal-pop-up-day-1118
https://www.uidesigndaily.com/posts/sketch-share-post-social-day-913
https://www.uidesigndaily.com/posts/studio-share-pop-up-link-day-947
https://www.uidesigndaily.com/posts/photoshop-social-share-media-card-day-192

If anyone wants to work on this issue, let me know in the comment section.

yash-blmnm · 2021-10-05T16:58:38Z

@rishipurwar1 Hi I am new to open source contribution, but I have 5years of experience working with Frontend Frameworks. I would like to work on this issue with some help. Thanks.

rishipurwar1 · 2021-10-05T17:02:00Z

@yash-blmnm Assigned to you!

yash-blmnm · 2021-10-08T18:50:24Z

@rishipurwar1 I am unable to push the code to remote. Getting the error, 403 Forbidden.

yash-blmnm · 2021-10-08T19:01:01Z

I have added the Share Icon adjacent to Github URL and website URL.
It opens a small container consisting of social icons with sharing URLs.
The icons transform and scale up on hover.
On clicking the social icons, a blank tab opens redirecting to the share window.
The container closes on clicking outside.
Attached are the images

rishipurwar1 · 2021-10-09T02:46:12Z

Hey @yash-blmnm
Great Job
but Is it possible for you to convert it into a modal like this?
https://www.uidesigndaily.com/posts/sketch-share-post-social-day-913
I think the above looks much better and remove this google + icon and change it to LinkedIn and also add Reddit and discord button and place a Twitter icon in the first place and then discord.

And you also need to add a default intent.
For the Twitter share icon, you can do something like this: https://twitter.com/intent/tweet?text=Hello%20world, you just need to replace the text query dynamically.
For more detail on tweet intent: https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview

text query could be:

**Hello Everyone!
I've just completed the "Random Quote Generator" CODINGSPACE Challenge.

Here's a link to my solution: https://www.codingspace.codes/solution/h1lgfjk1i7kiYmRA4MtA

Any feedback and suggestions on how I can improve are very welcome!**

rishipurwar1 · 2021-10-09T02:48:34Z

You need to break this task down, first work on building this modal and then show me how it looks then proceed further.

If you need any help, feel free to ping me.

yash-blmnm · 2021-10-09T18:48:41Z

@rishipurwar1
I have built a sample modal for the share icons. Please share your thoughts

Also, is there any other social platform needed to be added to the list?

rishipurwar1 · 2021-10-10T02:28:39Z

@rishipurwar1 I have built a sample modal for the share icons. Please share your thoughts

Also, is there any other social platform needed to be added to the list?

Great Job!
Looks really good to me

Here is my feedback:

Add Reddit icon
In the copy link section, you need to put the link of the codingspace solution, not the website link.
Change the background color to some dark to match our dark theme. (see other models on our website for reference i.e when we download a challenge)
Add hover effect on icons(You can change the border color to purple, similar to this profile border.

- [ ] When someone clicks on the copy to clipboard button, it should show link copied(but this task is completely optional if you have time then only do this task)

and Can we use "Share your solution" instead of "Share solution"? What sounds good to you?

Overall it looks great.

rishipurwar1 · 2021-10-13T12:30:50Z

@yash-blmnm any updates on this?

purnima176108 · 2021-10-14T07:09:27Z

Is there anything that needs to be solved regarding the share solution button?

imps1001 · 2021-10-14T07:44:12Z

@rishipurwar1 I want to work on this. I have been working on web development for 2 years, but this is my first time for open source contribution. I would like to do this task.

rishipurwar1 · 2021-10-14T09:36:23Z

@rishipurwar1 I have built a sample modal for the share icons. Please share your thoughts

Also, is there any other social platform needed to be added to the list?

Great Job! Looks really good to me

Here is my feedback:

Add Reddit icon

In the copy link section, you need to put the link of the codingspace solution, not the website link.

Change the background color to some dark to match our dark theme. (see other models on our website for reference i.e when we download a challenge)

Add hover effect on icons(You can change the border color to purple, similar to this profile border.

When someone clicks on the copy to clipboard button, it should show link copied(but this task is completely optional if you have time then only do this task)
and Can we use "Share your solution" instead of "Share solution"? What sounds good to you?

Overall it looks great.

@yash-blmnm have you fixed the above issues?

rishipurwar1 · 2021-10-14T09:37:04Z

Is there anything that needs to be solved regarding the share solution button?

@yash-blmnm already working on this one.
You can pick a different issue.

yash-blmnm · 2021-10-16T13:40:41Z

@rishipurwar1 Almost completed with the solution. I Will update tonight.

rishipurwar1 · 2021-10-16T15:35:30Z

ok

yash-blmnm · 2021-10-16T20:43:09Z

Hi @rishipurwar1 Please review if these changes are okay.

One more varient for hover

rishipurwar1 · 2021-10-17T04:25:47Z

Really looks good to me.

Just to confirm Is it vertically and horizontally centered?
And one more thing what happens when you click on these social icons like Twitter. Ideally, these buttons should have default intent. For example, the Twitter button should have a default tweet embedded in a button, so, when you click on Twitter, it opens a Twitter website and has a default tweet on it something like this

Hello Everyone!
I've just completed the "Random Quote Generator" CODINGSPACE Challenge.

Here's a link to my solution: https://www.codingspace.codes/solution/h1lgfjk1i7kiYmRA4MtA

Any feedback and suggestions on how I can improve are very welcome!

You can check this random quote generator, you'll get the idea: https://quotegeneratorapp.netlify.app/

And after making the above changes, please make a PR for this, but only commit those files in which you made changes.

rishipurwar1 · 2021-10-17T04:27:39Z

If you need any help in embedding default text in these buttons, please do let me know. This feature is going to be an important feature for the users.

rishipurwar1 · 2021-10-17T04:46:54Z

You can make use of this package: https://www.npmjs.com/package/react-share but this package doesn't include a discord button. I think we can make this thing without using this package, just need to think a little bit.

yash-blmnm · 2021-10-17T20:37:13Z

@rishipurwar1
Just to confirm Is it vertically and horizontally centered?

Yes I have aligned them using flex and justified using `space-between. so the addition or removal of icons doesn't impact the design.
On clicking any icon, the users are taken to the respective sharing pages.
Eg.

If you need any help in embedding default text in these buttons, please do let me know. This feature is going to be an important feature for the users.

Yes, I am able to redirect to the Linkedin Sharing page, and Url is embedded, but the summary is not getting embedded. The URL I am using is https://www.linkedin.com/sharing/share-offsite?url=${url}&summary=${text}
How to add a Link for the Discord share Icon?

yash-blmnm · 2021-10-17T20:38:52Z

@rishipurwar1 Should we also provide a text box for the users to edit the summary/text before they select any sharing options?
Just a suggestion from the user's point of view.

rishipurwar1 · 2021-10-18T05:02:12Z

but the summary is not getting embedded. The URL

Please check this StackOverflow post: https://stackoverflow.com/questions/10713542/how-to-make-a-custom-linkedin-share-button
May help you

rishipurwar1 · 2021-10-18T05:41:16Z

How to add a Link for the Discord share Icon?

I don't think we have a way to do that. Any ideas what we can do instead of this?

rishipurwar1 · 2021-10-18T05:41:33Z

and is facebook one working fine?

rishipurwar1 · 2021-10-18T05:43:10Z

@rishipurwar1 Should we also provide a text box for the users to edit the summary/text before they select any sharing options? Just a suggestion from the user's point of view.

Good Idea!
Where do you want to place this text box?

yash-blmnm · 2021-10-18T18:24:22Z

For Linkedin, I followed the StackOverflow post, yet it is not displaying the title or summary as expected. I think it is expected behavior.
Also in react-share code, they have used only the URL in LinkedIn Share Button
https://github.com/nygardk/react-share/blob/master/src/LineShareButton.ts
Linkedin title / description doesnt work? nygardk/react-share#184
Discord - Could we add the invite link here?
Facebook is working fine i.e the test is displayed in Facebook
Please find a sample Text box to edit summary

rishipurwar1 · 2021-10-18T18:30:33Z

Yes! we can add the discord invite link for now
and the text summary looks good. Can we add this text box below the copy link?
Is it possible to add a link to a particular channel of our discord server i.e share-your-solutions?
and please test your changes on different screen sizes.

@rishipurwar1 Should we also provide a text box for the users to edit the summary/text before they select any sharing options? Just a suggestion from the user's point of view.

Good Idea! Where do you want to place this text box?

Yes! we can add the discord invite link for now
Is it possible to add a link to a particular channel of our discord server i.e share-your-solutions?

rishipurwar1 · 2021-10-18T18:30:50Z

Please find a sample Text box to edit summary

and the text summary looks good. Can we add this text box below the copy link?
and please test your changes on different screen sizes.

yash-blmnm · 2021-10-21T18:27:57Z

Adding Text summary below Copy Link. Also, as you could see, made the modal responsive.

Discord Link - I have not used Discord before, but I could see from the documentation that we could create invite links to private channels.
https://discord.com/moderation/360060481813-103:-Basic-Channel-Setup

rishipurwar1 · 2021-10-22T02:27:33Z

Adding Text summary below Copy Link. Also, as you could see, made the modal responsive.

Discord Link - I have not used Discord before, but I could see from the documentation that we could create invite links to private channels.
https://discord.com/moderation/360060481813-103:-Basic-Channel-Setup

Looks really good!

For now! Add a discord invite link because we want users to share their solutions on public channels not on private channels.
and make a pr to the development branch and only commit those files in which you made changes.

rishipurwar1 · 2021-10-25T04:01:33Z

@yash-blmnm any updates on this?

yash-blmnm · 2021-10-27T01:42:30Z

Hi @rishipurwar1 I compiled all my changes. But I am still unable to push to remote.

rishipurwar1 · 2021-10-27T02:47:35Z

Can you please share a screenshot of the error message?

…

On Wed, Oct 27, 2021, 07:12 yash-blmnm ***@***.***> wrote: Hi @rishipurwar1 <https://github.com/rishipurwar1> I compiled all my changes. But I am still unable to push to remote. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#122 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANTEVEBGXWP5H3JUALZ2PFDUI5KJFANCNFSM5FL4T76A> .

yash-blmnm · 2021-10-27T19:56:22Z

@rishipurwar1 any updates regarding this?

rishipurwar1 · 2021-11-02T11:47:18Z

Hello @yash-blmnm sorry for the late reply
I think you're directly pushing the changes on my repo.
Have you forked my repo?

yash-blmnm · 2021-11-02T17:10:43Z

No, I am using one cloned using SSH.

…

On Tue, Nov 2, 2021 at 5:17 PM Rishi Purwar ***@***.***> wrote: Hello @yash-blmnm <https://github.com/yash-blmnm> sorry for the late reply I think you're directly pushing the changes on the repo. Have you forked my repo? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#122 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGRCY2742IJJOPKSQNSF3Y3UJ7FVBANCNFSM5FL4T76A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

rishipurwar1 · 2021-11-03T03:34:07Z

No, I am using one cloned using SSH.
…
On Tue, Nov 2, 2021 at 5:17 PM Rishi Purwar @.***> wrote: Hello @yash-blmnm https://github.com/yash-blmnm sorry for the late reply I think you're directly pushing the changes on the repo. Have you forked my repo? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#122 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGRCY2742IJJOPKSQNSF3Y3UJ7FVBANCNFSM5FL4T76A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

First, create a fork of my repo and then clone the forked repo! it should work.

rishipurwar1 added enhancement New feature or request good first issue Good for newcomers hacktoberfest labels Oct 5, 2021

rishipurwar1 assigned yash-blmnm Oct 5, 2021

rishipurwar1 closed this as not planned Won't fix, can't repro, duplicate, stale Dec 25, 2022

Add a share solution button #122

Add a share solution button #122

Comments

rishipurwar1 commented Oct 5, 2021 • edited Loading

yash-blmnm commented Oct 5, 2021

rishipurwar1 commented Oct 5, 2021

yash-blmnm commented Oct 8, 2021

yash-blmnm commented Oct 8, 2021

rishipurwar1 commented Oct 9, 2021 • edited Loading

rishipurwar1 commented Oct 9, 2021

yash-blmnm commented Oct 9, 2021

rishipurwar1 commented Oct 10, 2021 • edited Loading

rishipurwar1 commented Oct 13, 2021

purnima176108 commented Oct 14, 2021

imps1001 commented Oct 14, 2021

rishipurwar1 commented Oct 14, 2021

rishipurwar1 commented Oct 14, 2021

yash-blmnm commented Oct 16, 2021

rishipurwar1 commented Oct 16, 2021

yash-blmnm commented Oct 16, 2021

rishipurwar1 commented Oct 17, 2021

rishipurwar1 commented Oct 17, 2021

rishipurwar1 commented Oct 17, 2021

yash-blmnm commented Oct 17, 2021

yash-blmnm commented Oct 17, 2021

rishipurwar1 commented Oct 18, 2021

rishipurwar1 commented Oct 18, 2021 • edited Loading

rishipurwar1 commented Oct 18, 2021 • edited Loading

rishipurwar1 commented Oct 18, 2021

yash-blmnm commented Oct 18, 2021

rishipurwar1 commented Oct 18, 2021

rishipurwar1 commented Oct 18, 2021

yash-blmnm commented Oct 21, 2021

rishipurwar1 commented Oct 22, 2021

rishipurwar1 commented Oct 25, 2021

yash-blmnm commented Oct 27, 2021

rishipurwar1 commented Oct 27, 2021 via email

yash-blmnm commented Oct 27, 2021 • edited Loading

rishipurwar1 commented Nov 2, 2021 • edited Loading

yash-blmnm commented Nov 2, 2021 via email

rishipurwar1 commented Nov 3, 2021

rishipurwar1 commented Oct 5, 2021 •

edited

Loading

rishipurwar1 commented Oct 9, 2021 •

edited

Loading

rishipurwar1 commented Oct 10, 2021 •

edited

Loading

rishipurwar1 commented Oct 18, 2021 •

edited

Loading

rishipurwar1 commented Oct 18, 2021 •

edited

Loading

yash-blmnm commented Oct 27, 2021 •

edited

Loading

rishipurwar1 commented Nov 2, 2021 •

edited

Loading