Web: Build - Front End of 'No Bounties' Placeholder on Gitcoin Profile Page

[willsputra]

User Story

Why Is this Needed

Summary: Currently there is no placeholder to tell that a user has no associated bounties on the Profile page, and the rendering looks odd.

Description

This task is to build the front-end of the 'no bounties' placeholder on the Profile Page

Definition of Done

• [ ] Review the attached mockups and Gitcoin's contribution guidelines and front-end guidelines.
• [ ] When a user goes to a Profile with no associated bounties, it should display the 'Grow Open Source' tree, an explanation, and three links.
• [ ] Go to Issue Explorer should link to Issue Explorer.
• [ ] Go to Leaderboard should link to Leaderboard.
• [ ] Join our Slack should link to Gitcoin Slack page.
• [ ] PR is reviewed and merge ready.
  

  Additional Information

Please review with a core team member @PixelantDesign @willsputra @owocki

This Issue is Reserved for spiegeleixxl

[owocki]

@PixelantDesign r u ok if i bounty this?

[kuhnchris]

Hmm basically you guys want to create an additional template placeholder if contibutes <= 0 to show either an additional reusable page template (with the Grow tree) or simply put that styled html right in there. A hard look at the source reveals that this should be https://github.com/gitcoinco/web/blob/d6e81dc4c8cad12df12392f7861ccc12669d1649/app/dashboard/templates/profiles/profile.html#L124 over here.

-Chris

[thelostone-mc]

@spiegeleixxl yup you've got that right ! Feel free to have a go at it if you are interested ^_^

[kuhnchris]

FYI there is currently a "No data available" here.

[willsputra]

I've uploaded the three icon svgs here:
https://drive.google.com/open?id=1vGW1cLkuWi7VoOIKtVctcAtixNhzfObA

[kuhnchris]

Nice, you wanted something like this?

[kuhnchris]

anything else you'd like to have there?

[thelostone-mc]

@spiegeleixxl Ah you've got the layout right but the styling and stuff would have to match what @willsputra has shared :)
The sketch files he provided is what we'd want coded up

[willsputra]

@spiegeleixxl Great start! Few comments on the styling:

• Could we make the tree and the 3 icons smaller?
• For the three cards, use the same font size as 'Oops! Looks like this user...' and center-aligned
• The three cards don't need to be that tall (currently lots of whitespace between the text and the button)
• Could we style the buttons according to the mockup? (blue bg, white text)
• Maybe we could remove the 'No data available' text?

Sketch file here if you need it:
https://drive.google.com/open?id=14fJZ4gn-vCqfG92gq0-tplPI1VEJARdZ

Thanks a lot for the speedy work! 🎉

[kuhnchris]

Hi there @thelostone-mc and @willsputra !
OK, I actually tried to use the "existing" CSS themes and avoid creating something new, if you say you want to match that mockup (thanks, I was missing that!) 1:1 then I will simply create new CSS rules - makes it easier for me aswell since including the card.css broke the "Founder" / "Contributor" boxes on top of the page...

@willsputra regarding your points:

• Tree smaller -> sure, 50% no problemo
• Same size, same font, sure, can do.
• So you want to have it compact? Sure
• Button colors - sure, as I said, I tried to match the existing theme, hence the green, but if you say you want it blue, be my guest.
• Removing the "No data available" is a bit harder. Currently it's hardcoded in source like that.

Thanks!
-Chris

[kuhnchris]

Hey ho @willsputra sorry to double post (again). Attached you have a side-by-side compare between the sketch and my version. Any more wishes? Want to have the border around the buttons gone? smaller font?

Thanks!
-Chris

P.S. I took the freedom of correcting "projaect" to "project". ;-)

[thelostone-mc]

Removing the "No data available" is a bit harder. Currently it's hardcoded in source like that.

If i'm not wrong it should work fine if you set this as an empty array and then update the conditional check in profile.html
to check activities|length == 0 show the template you are working on else whatever is already there.
We do length for a diff prop here if you want an example :)

[kuhnchris]

Well, technically, yes, and thanks for pointing it out, I saw that spot already.
I'm only hesitating to change it right now because I do not know if this is a work-around for some other bug, I would need to check the surrounding code to see if it would cause any troubles if that activities array is empty.

Thanks

[kuhnchris]

I didn't really have to check against "|length == 0", it worked without any particular changes to the html template.
But, as I said, we need to check against possible other problems.

Want any more changes or shall I provide a (WIP) PR?

-Chris

[PixelantDesign]

@willsputra what do you think? Text color looks very light, otherwise looks pretty good to me. Chris could you double check the color? Could you also provide a screenshot in responsive view?

cc @thelostone-mc

[kuhnchris]

Depends on what you mean by "responsive view", I took the color from the sketch, but don't nail me down on that, I never used that tool before...
Side by side compare:

Alternatively you can take a look at it at http://kuhnchris.eu:8000/profile/SpiegelEiXXL-WGJ-Creations (if redis doesn't kick me in the balls again)

[willsputra]

@spiegeleixxl Looks great! A couple changes then I think we could proceed with a PR:
• Let's use #666666 for the text color
• For mobile view, could we change the cards to one column? Desktop view can still be three columns.

Thanks a lot! :)

[kuhnchris]

Hey there @willsputra - thanks for the quick response - attached you see the changes I made regarding your requests:

Adapted font color:

Columns when too small:

Thanks!
-Chris

[willsputra]

@spiegeleixxl yes! let's add a bit of vertical margins between the cards, and you can go ahead with the PR :)

[kuhnchris]

Added, preparing a PR.

[PixelantDesign]

Awesome!

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__This issue now has a funding of 0.34 ETH (69.51 USD @ $204.44/ETH) attached to it.__

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  
  
  
  • Want to chip in? Add your own contribution here.
  
  
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  
  
  • $61,880.16 more funded OSS Work available on the Gitcoin Issue Explorer
  
  

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Workers have applied to start work__.

These users each claimed they can complete the work by 2 months, 4 weeks from now.
Please review their action plans below:

1) spiegeleixxl has applied to start work _(Funders only: approve worker | reject worker)_.

As discussed on GitHub, pending actions to complete this bounty.

Learn more on the Gitcoin Issue Details page.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Workers have applied to start work__.

These users each claimed they can complete the work by 2 months, 4 weeks from now.
Please review their action plans below:

1) spiegeleixxl has applied to start work _(Funders only: approve worker | reject worker)_.

As discussed on GitHub, pending actions to complete this bounty.

Learn more on the Gitcoin Issue Details page.

2) abhi1851 has applied to start work _(Funders only: approve worker | reject worker)_.

I will reframe some CSS and use Html and javascript for dynamic update of the site

Learn more on the Gitcoin Issue Details page.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work has been started__.

These users each claimed they can complete the work by 1 month, 1 week ago.
Please review their action plans below:

1) kuhnchris has been approved to start work.

As discussed on GitHub, pending actions to complete this bounty.

Learn more on the Gitcoin Issue Details page.

2) abhi1851 has applied to start work _(Funders only: approve worker | reject worker)_.

I will reframe some CSS and use Html and javascript for dynamic update of the site

Learn more on the Gitcoin Issue Details page.

3) ashikmeerankutty has applied to start work _(Funders only: approve worker | reject worker)_.

First, create a wireframe of the page, Design the page, Fix all the bugs and responsiveness. That's all :-)

Learn more on the Gitcoin Issue Details page.

4) nithinghosh has applied to start work _(Funders only: approve worker | reject worker)_.

I have a good experience in HTML,css and js so i think i can easily do it.

Learn more on the Gitcoin Issue Details page.

[frankchen07]

@PixelantDesign - it looks like people are applying to start work, but work has already been started by @kuhnchris and is on the way to being completed.

[owocki]

@PixelantDesign wanna pay out?

[gitcoinbot]

⚡️ A tip worth 0.23000 ETH (49.82 USD @ $216.6/ETH) has been granted to @kuhnchris for this issue from @PixelantDesign. ⚡️

The sender had the following public comments:

Thanks for your help on the placeholder!

Nice work @kuhnchris! Your tip has automatically been deposited in the ETH address we have on file.

• $57071.63 in Funded OSS Work Available at: https://gitcoin.co/explorer
• Incentivize contributions to your repo: Send a Tip or Fund a PR
• No Email? Get help on the Gitcoin Slack

[kuhnchris]

Thanks @PixelantDesign

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__The funding of 0.34 ETH (72.71 USD @ $213.84/ETH) attached to this issue has been approved & issued.__

• Learn more on the Gitcoin Issue Details page
  
  
  
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  
  
  • $56,850.59 more funded OSS Work available on the Gitcoin Issue Explorer