Build - Front End of 'No Bounties' Placeholder on Gitcoin Profile Page #2508

willsputra · 2018-10-22T15:50:00Z

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

The text was updated successfully, but these errors were encountered:

owocki · 2018-10-22T20:04:38Z

@PixelantDesign r u ok if i bounty this?

kuhnchris · 2018-10-23T10:43:33Z

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

web/app/dashboard/templates/profiles/profile.html

Line 124 in d6e81dc

over here.

-Chris

thelostone-mc · 2018-10-23T11:54:06Z

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

kuhnchris · 2018-10-23T12:20:03Z

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

willsputra · 2018-10-23T15:08:40Z

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

kuhnchris · 2018-10-23T16:36:10Z

Nice, you wanted something like this?

kuhnchris · 2018-10-23T16:58:11Z

anything else you'd like to have there?

thelostone-mc · 2018-10-23T17:10:42Z

@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 · 2018-10-23T17:20:58Z

@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 · 2018-10-23T17:31:42Z

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 · 2018-10-23T21:54:59Z

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 · 2018-10-23T22:01:09Z

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 · 2018-10-23T22:03:56Z

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 · 2018-10-24T18:23:12Z

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 · 2018-10-24T19:39:56Z

@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 · 2018-10-24T19:54:07Z

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 · 2018-10-25T02:28:03Z

@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 · 2018-10-25T07:38:30Z

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 · 2018-10-25T14:43:28Z

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

kuhnchris · 2018-10-25T15:22:55Z

Added, preparing a PR.

PixelantDesign · 2018-10-27T11:17:01Z

Awesome!

gitcoinbot · 2018-10-28T08:41:31Z

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 · 2018-10-28T17:48:59Z

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 · 2018-10-28T18:47:36Z

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 · 2018-10-30T05:09:12Z

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 · 2018-10-30T16:41:39Z

@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.

Issue #2508 Build - Front End of 'No Bounties' Placeholder on Gitcoin…

owocki · 2018-11-05T19:40:24Z

@PixelantDesign wanna pay out?

gitcoinbot · 2018-11-08T15:36:12Z

⚡️ 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 · 2018-11-08T16:01:07Z

Thanks @PixelantDesign

gitcoinbot · 2018-11-08T18:27:52Z

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

willsputra mentioned this issue Oct 22, 2018

As a user, I want to see a 'no bounties' placeholder on the profile page. #2247

Closed

thelostone-mc added easy-pickings This is an easy issue for the community. frontend This needs frontend expertise. Hacktoberfest labels Oct 23, 2018

kuhnchris mentioned this issue Oct 25, 2018

Issue #2508 Build - Front End of 'No Bounties' Placeholder on Gitcoin… #2530

Merged

3 tasks

owocki closed this as completed in #2530 Nov 5, 2018

owocki added a commit that referenced this issue Nov 5, 2018

Merge pull request #2530 from kuhnchris/2508

e5d0b3c

Issue #2508 Build - Front End of 'No Bounties' Placeholder on Gitcoin…

willsputra mentioned this issue Nov 9, 2018

Implement "My Grants" Page - Frontend #2019

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Build - Front End of 'No Bounties' Placeholder on Gitcoin Profile Page #2508

Build - Front End of 'No Bounties' Placeholder on Gitcoin Profile Page #2508

willsputra commented Oct 22, 2018 •

edited by PixelantDesign

Loading

owocki commented Oct 22, 2018

kuhnchris commented Oct 23, 2018

thelostone-mc commented Oct 23, 2018

kuhnchris commented Oct 23, 2018

willsputra commented Oct 23, 2018

kuhnchris commented Oct 23, 2018

kuhnchris commented Oct 23, 2018

thelostone-mc commented Oct 23, 2018

willsputra commented Oct 23, 2018

kuhnchris commented Oct 23, 2018

kuhnchris commented Oct 23, 2018 •

edited

Loading

thelostone-mc commented Oct 23, 2018

kuhnchris commented Oct 23, 2018

kuhnchris commented Oct 24, 2018

PixelantDesign commented Oct 24, 2018 •

edited

Loading

kuhnchris commented Oct 24, 2018

willsputra commented Oct 25, 2018 •

edited

Loading

kuhnchris commented Oct 25, 2018

willsputra commented Oct 25, 2018

kuhnchris commented Oct 25, 2018

PixelantDesign commented Oct 27, 2018

gitcoinbot commented Oct 28, 2018

gitcoinbot commented Oct 28, 2018

gitcoinbot commented Oct 28, 2018

gitcoinbot commented Oct 30, 2018 •

edited

Loading

frankchen07 commented Oct 30, 2018

owocki commented Nov 5, 2018

gitcoinbot commented Nov 8, 2018

kuhnchris commented Nov 8, 2018

gitcoinbot commented Nov 8, 2018

Build - Front End of 'No Bounties' Placeholder on Gitcoin Profile Page #2508

Build - Front End of 'No Bounties' Placeholder on Gitcoin Profile Page #2508

Comments

willsputra commented Oct 22, 2018 • edited by PixelantDesign Loading

User Story

Why Is this Needed

Description

Definition of Done

Additional Information

owocki commented Oct 22, 2018

kuhnchris commented Oct 23, 2018

thelostone-mc commented Oct 23, 2018

kuhnchris commented Oct 23, 2018

willsputra commented Oct 23, 2018

kuhnchris commented Oct 23, 2018

kuhnchris commented Oct 23, 2018

thelostone-mc commented Oct 23, 2018

willsputra commented Oct 23, 2018

kuhnchris commented Oct 23, 2018

kuhnchris commented Oct 23, 2018 • edited Loading

thelostone-mc commented Oct 23, 2018

kuhnchris commented Oct 23, 2018

kuhnchris commented Oct 24, 2018

PixelantDesign commented Oct 24, 2018 • edited Loading

kuhnchris commented Oct 24, 2018

willsputra commented Oct 25, 2018 • edited Loading

kuhnchris commented Oct 25, 2018

willsputra commented Oct 25, 2018

kuhnchris commented Oct 25, 2018

PixelantDesign commented Oct 27, 2018

gitcoinbot commented Oct 28, 2018

gitcoinbot commented Oct 28, 2018

gitcoinbot commented Oct 28, 2018

gitcoinbot commented Oct 30, 2018 • edited Loading

frankchen07 commented Oct 30, 2018

owocki commented Nov 5, 2018

gitcoinbot commented Nov 8, 2018

kuhnchris commented Nov 8, 2018

gitcoinbot commented Nov 8, 2018

willsputra commented Oct 22, 2018 •

edited by PixelantDesign

Loading

kuhnchris commented Oct 23, 2018 •

edited

Loading

PixelantDesign commented Oct 24, 2018 •

edited

Loading

willsputra commented Oct 25, 2018 •

edited

Loading

gitcoinbot commented Oct 30, 2018 •

edited

Loading