rishipurwar1
Add a share solution button
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.
@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 I am unable to push the code to remote. Getting the error, 403 Forbidden.
- 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
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!**
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.
@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 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.
Is there anything that needs to be solved regarding the share solution button?
@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 I have built a sample modal for the share icons. Please share your thoughts
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?
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.
@rishipurwar1 Almost completed with the solution. I Will update tonight.
Hi @rishipurwar1 Please review if these changes are okay.
One more varient for hover
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.
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.
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.
@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?
@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.
- 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
- 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 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?
- 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 https://github.com/nygardk/react-share/issues/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
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?
- 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.
-
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
- 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.