Web: Code - /pitch pages

[owocki]

Why

Because there's good ideas out there, and the community needs to know about them.

Because there's bad ideas out there, and the community needs to help the pitcher evolve them.

What

First page

Page that lives at ideas/new. Page has a web form

• Email
• Name
• Github username
• Summarize your idea (short text input)
• Tell us more (long markdown input)
• What are you looking for? radio input (select all that apply)
  * capital
  * builders
  * designers
  * customers
• What are do you have already? radio input (select all that apply)
  * capital
  * builders
  * designers
  * customers

When it's submitted,

• an email goes to settings.CONTACT_EMAIL
• the data is stored in the DB as a new object Pitch
• slackbot posts to community-general on gitcoin slack with the title of the idea and a link to it

Second Page

This page lives at ideas/title-url-encoded and is the 'view' page for the idea. It will display the same information as the form, and it will also give the end user the ability to upvote / comment on the idea. one upvote per ip address.

Third Page

This page is the index page of all of the ideas, and it lives at `ideas/

Designs

https://github.com/gitcoinco/web/issues/198

gitcoin-ideas.zip

Bounty

• Code the frontend (HTML/CSS/JS) for the above three pages (must support tablet + mobile + desktop views)
• Code the backend (DB models) for the above three pages too.
• PR back to the web repo.

[gitcoinbot]

__This issue now has a funding of 0.22 ETH (193.79 USD) attached to it.__

• If you would like to work on this issue you can claim it here.
• If you've completed this issue and want to claim the bounty you can do so here
• Questions? Get help on the Gitcoin Slack
• $8583.94 more Funded OSS Work Available at: https://gitcoin.co/explorer

[mkosowsk]

This could be very interesting... I would like to throw my hat in the ring for working on this tentatively 👌

@owocki what is your timeframe when you would like to have this done by?

[owocki]

@mkosowsk i just put '1 month' as the expiration for the bounty... so ideally we'd be aiming for a merge into master within the next 3 weeks. i think that having a bounty hunter who is commited to seeing it across the finish line is more important than someone who is gonna start RIGHT NOW

[mkosowsk]

@owocki I will see this through, I bet @vs77bb's life on it 👍 👍 👍

[mkosowsk]

Will post a plan of attack by EOD Saturday, very excited to take this one on!

[mkosowsk]

@PixelantDesign I am very excited to start work on this ticket by tonight 👍

Please let me know if there's some additional direction you'd like to provide. Thanks!

[PixelantDesign]

hey @mkosowsk can you sync with @KennethAshley on the form styles he has been implementing?

[mkosowsk]

Will do! 👍

[KennethAshley]

Yea ive been working on the forms. let me know what you need.

@PixelantDesign these designs are bomb. Would of loved to be the one working on this ahaha.

[PixelantDesign]

@KennethAshley I actually didn't design these! Seth did!

[mkosowsk]

I've blocked out a lot of my weekend to work on this, so hope to deliver on these great designs!

@KennethAshley does https://github.com/gitcoinco/web/pull/514 have the latest and greatest on forms for Gitcoin?

[mkosowsk]

@KennethAshley I am forking from your repo to do work on this guy for forms. As I will be building extensively off your work, it's only right I send over part of the bounty if/when my PR is accepted.

Does .1 ETH sound like a fair amount to you considering this bounty is .22 ETH? Thanks! 👍

[KennethAshley]

@mkosowsk Dude yea! Whatever you want to send over! Thanks!

[KennethAshley]

@mkosowsk also yes, #514 has the latest and greatest!

[mkosowsk]

@KennethAshley I walked through your commits and learned a thing or two... including status code 204 which I had never used before!

Just sent over that .1 ETH because talk is cheap 😂 thanks for your help! 👍🏻

[mkosowsk]

First pass on the idea-modal.png design!

This image is from a 1336x768 resolution, will work on making it responsive for tablet and mobile at a later time 👍🏻

@sethmcleod and @PixelantDesign, here are some thoughts I had as I was building this out.

1. My first thought was should submitting a project idea be a modal or not... I opted for not using a modal as I was using a lot of inspiration from the submit_bounty.html from @KennethAshley's https://github.com/gitcoinco/web/pull/514

I think it would be more internally consistent to not use a modal here as well, especially considering that it doesn't seem to me that Gitcoin is using modals much elsewhere.

1. In that same vein, I opted to use one field for "Full Name" as opposed to splitting it into two fields for "First name" and "Last name" also per submit_bounty.html from https://github.com/gitcoinco/web/pull/514

I personally am more of a fan of using "Full name" instead of splitting it as "First name" and "Last name" can be a bit confusing to the international crowd... sometimes you see these fields written out as "First/Given name" and "Last/Family name" but then at that point I think you're better off using the cleaner "Full name" and being done with it

1. Which fields are required for this form? All of them? 🤔

2. In the original design, radio buttons are used for the "What are you looking for?" and "What do you have already?" fields but I think checkboxes are more suited for these options. Checkboxes allow easy selection/deselection and I feel are better suited when selecting none/one/many options. Radio buttons are a better fit for when selecting one option, like how we do in Explorer for Status of "Open", "Work Started", "Work Submitted", etc. I'm happy to discuss this further and am definitely open to feedback 👍🏻

3. Last but not least, I opted for a button styling for the "Submit" also from submit_bounty.html from https://github.com/gitcoinco/web/pull/514 which is a blue block instead of a red one with rounded corners. I'm fine with either but think it would be best to standardize 👍🏻

Once these are squared away, here is my plan of attack:

1. Do major damage first on the idea-list and then the idea-view front-end
2. Code the backend (DB models) for the three pages (seems like these are relatively straightforward, I anticipate this to be painless... famous last words? 😂)
3. Make the three pages responsive
4. Open PR :)
   Been a lot of fun working on this!

[owocki]

so excited for this to get into PR stage :)

[mkosowsk]

@owocki great! Will have another update by end of this Sunday (3/11) where I will have some major damage done.

I will have PR out before the following Sunday (3/18) come hell or high water 💪🏻would like to have PR out before the 18th but been getting slammed at work 😤

[sethmcleod]

This is looking great @mkosowsk! So much fun to see these designs come to life :)

To answer some of your comments:

1. I agree with this. Perhaps we can do some refactoring later and utilize modals throughout the app.

2. This makes sense. I had those split up because sometimes it's nice to have a reference for the first name, for example: Hi Seth, welcome back to Gitcoin! just doesn't feel the same level of personality if my last name was included.

3. As far as I know all fields are required.

4. I completely overlooked that. You're right, we should have used checkboxes there instead of radios!

5. Looks good to me! Perhaps we can update this once we finish defining UI guidelines and consistent form/button styles cc @PixelantDesign

[mkosowsk]

@sethmcleod thanks for the feedback and also for providing the excellent designs, really a pleasure to work with! 👍

To point #1, I'm not married to having Full Name vs. First Name and Last Name but if we do decided to keep Full Name I think we could split the full name on the first space to have a bit of personality.

So 'Mitch Kosowski' would become 'Hi Mitch, welcome back to Gitcoin!'

Names like 'Anne Marie Smith' don't work as good tho -> 'Hi Anne, welcome back to Gitcoin!' doesn't work if she's used to be calling Anne Marie...

Anywhoo, I think the most important thing is to be consistent across the platform so as #514 is merged into default now I will roll with Full Name for the time being. Happy to discuss further at a later date like when this PR's 👍 thanks!

[vs77bb]

@mkosowsk 😍🙂

[mkosowsk]

@PixelantDesign, @sethmcleod, @owocki, et al.,

The idea-view.png view uses Disqus for commenting which I am on board with but wanted to confirm that jived with the vision for Gitcoin 👍

If we use Disqus, looks like there's an npm package at https://github.com/rcurrier666/node-disqus but it seems to more popular route is just using a Universal Embed Code via https://help.disqus.com/customer/portal/articles/472097-universal-embed-code

I haven't used Disqus before but it looks fairly intuitive... definitely open to feedback on the approach :)

[mkosowsk]

Quick update, was working on list view over the weekend but don't quite have this at a ready state to show off with a screen shot. I am following the design but also using a bit of inspiration from the Explorer page 👍

I am taking Friday off to do some errands but also to take this to a PR (or at least WIP PR) :)

[thelostone-mc]

@mkosowsk @PixelantDesign Are we sticking to disqus ? It kinda looks out of place
( I'm talking on long run )

[mkosowsk]

@thelostone-mc I think Disqus looks somewhat out of place but I'm not sure of a better alternative 🤔

[thelostone-mc]

I've heard decent things about https://posativ.org/isso/
It's lightweight and got a shitty UI -> cause they expect you to customize it for your own site (that's exactly how it was pitched to me :P
( let's stick to Disqus to avoid any confusion, but yeah just wanted to check )

[johan718]

Keep up the good work @mkosowsk!

[owocki]

thanks for the update @mkosowsk

[mkosowsk]

First pass on ideas-list:

Some thoughts to follow tomorrow morning, my brain is leaking out my ears at the moment so I need to take a breather 😂

Edited in comments on some chocies:

1. Both "Add Idea" and "Load More" buttons are square vs. rounded from the design following the styling from #514. I don't have a personal preference one way or the other but do think it's good to be consistent.
2. For img src for comments and likes I used "https://gitcoin.co/static/v2/images/comment.092f558598ed.svg" (used elsewhere) and "fa fa-heart", respectively. It looks like Disqus might take care of this for us so will revisit shortly.
3. For the buttons of "Capital", "Designer", "Builder", "Customer" I reused styling from the Explorer b̶e̶c̶a̶u̶s̶e̶ ̶I̶ ̶a̶m̶ ̶l̶a̶z̶y̶ in order to be consistent across the site.
4. I didn't implement the person icon that's shown in the bottom left corner because I think it will be taken care of by Disqus.

[thelostone-mc]

@mkosowsk Do you have a PR open ?
I could pull it in and help with the review whenever you need me to ^_^

[mkosowsk]

@thelostone-mc Sure, I always appreciate your help! 👍🏻👍🏻👍🏻 I will have a WIP PR open within the next 16 hours... want to spend a bit more time on it today :)

Some things I'd like to cover in that time in order of priority:

1. Disqus integration for the ideas/new page and possibly for the ideas/list page... I did the front-end for ideas/list without Disqus and it looks like that may have been a mistake! Looks like Disqus could have handled a lot there.
2. Yanking out the extensive and hideous inline styling I've done for this and dropping it into ideas.css in app/assets/v2/css. Possibly making a folder to hold this 🤔I was waiting a bit on the discussion for SCSS compilation to see where this styling should but it looks like this solution is appropriate for now
3. Code the models for each of the 3 pages

My goal for today is to accomplish items 0-2, the following is future work:

1. Make the views responsive for mobile/tablet. Hello Bootstrap!
2. Have an email go to settings.CONTACT_EMAIL
3. Have Slackbot post to community-general on Gitcoin slack with the title of the idea and a link to it

I'd have liked to have a lot more done at this time but I've been a bit time-constrained with personal things and work as well as building out fresh views taking a lot more time than I expected... I'm used to tweaking established designs and didn't budget enough time for starting greenfield!

I am editing my previous comment now to explain the rationale for some decisions and then will start cracking 😀

[thelostone-mc]

Haha looks like you've got it all planned out ! Sounds good to me ^_^

[owocki]

excited for the PR -- looks like this is really coming together

[mkosowsk]

@owocki WIP PR is here if you've got some cycles :D

https://github.com/gitcoinco/web/pull/647

[owocki]

commenting on PR now

[mkosowsk]

Quick update, will address WIP PR feedback (thanks @owocki and @thelostone-mc 👍 ) this weekend and open the legit PR by end-of-day Sunday. Thanks!

[mkosowsk]

@owocki and @thelostone-mc et al, thanks for your guidance but I'm stopping work on this issue. Unfortunately my work has super ramped up recently and I just don't have the dev cycles to see this ticket through to fruition in the coming weeks. In hindsight I should have picked up something easier to digest for my first ticket on the Gitcoin project! My apologies on the bait-and-switch :(

To whomever picks this up, feel free to use any or all parts of https://github.com/gitcoinco/web/pull/647 as a base if need be. Good luck!

[kziemianek]

I can take it :raised_hand:

[gitcoinbot]

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

---

__Work has been started__.

1. @kziemianek

   has committed to working on this project to be completed 1 month ago.

[kziemianek]

Does the counter next to heart icon in top right corner reflect recommends count in disqus thread?

[owocki]

Does the counter next to heart icon in top right corner reflect recommends count in disqus thread?

yes!

[gitcoinbot]

@kziemianek are you still working on this issue?

[gitcoinbot]

@kziemianek are you still working on this issue?

• [x] warning 1 (3 days)
• [ ] warning 2 (6 days)
• [ ] auto removal (10 days)

[thelostone-mc]

@kziemianek you mind leaving a comment here for the bot 😅

cc @mbeacom The inactivity period check -> as of now we check only if a comment has been posted by the hunter as a sign of activity right? (and not a referenced PR )

[gitcoinbot]

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

---

@kziemianek has been removed for inactivity and the issue has been returned to an ‘Open’ Status. Let us know if you believe this has been done in error!

• [x] warning (3 days)
• [x] auto removal (6 days)

[kziemianek]

@owocki sorry, i cannot submit my work as described in #883

[owocki]

ahh its bc the issue is expired. ill cancel the issue now and tip ya out when the PR is merged

[gitcoinbot]

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

---

__The funding of 0.22 ETH (148.67 USD @ $675.77/ETH) attached to this issue has been approved & issued.__

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