Web: CODE - new Mission page

[owocki]

User Story

CODE the new mission page design

Why Is this Needed

Mission page is outdated

Summary:

Description

Type:
Feature

Current Behavior

Old mission page

Expected Behavior

Take this page ( https://www.figma.com/proto/sqaqM0ebATZU48xUei5RVX/Gitcoin-Landing-Page-_Mission?node-id=179%3A3&scaling=min-zoom ) and code it.

• Must be responsive + look good on major browsers
• Pls dont add in the dynamic voting functionality. We can add that in a v2

Definition of Done

See above

Data Requirements

None

Additional Information

Please only bid on this task if you can get a PR together in 3-4 days.

[octavioamu]

@owocki left my comments on the design file.

[thelostone-mc]

@sebastiantf when you take this up! delete the current mission HTML + css and start fresh as this is big change !
This would ensure we have no dead code ^_^ (and you know the rest -> use bootstrap + existing classes as much as possible )

[gitcoinbot]

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

---

__This issue now has a funding of 1.0 ETH (413.78 USD @ $413.78/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 Chat
  
  
  • $463,263.64 more funded OSS Work available on the Gitcoin Issue Explorer
  
  

[nightwolf3]

Hello
I applied for the task and can get it done in around 4 days tops, I forgot to mention that in my comment sorry

[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 266 years, 2 months from now.
Please review their action plans below:

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

I would take the provided design and code it using HTML, and the bootstrap CSS framework.
2) molecula451 has applied to start work _(Funders only: approve worker | reject worker)_.

Been working on this one. Shall have a PR by next week
3) walidmujahid has been approved to start work.

I would be interested in taking this. I can get it done in about 4 days. I'll implement the Missions v1 and mobile_v1 designs. I do have questions on what the Empathy is. I understand that dynamic voting will not be implemented until v2, but what is empathy and what is purpose behind the voting? Also in the mobile_v1 design, I see that, under the 'We Value' section, the list of thing is reduced to Collaboration, Empathy, and Stress Reducers. Is that how it should be, or is it it supposed to be a horizontal scroll on smaller touch devices? And if horizontal scroll, then should it be made clear UX-wise that it is a horizontal scroll? My final questions for now are: In regards to avatars in the second section, I assume they are the founders. Should they link to the founder profiles? If yes, what the profile links of each? Should any information be displayed when hovering over an avatar?
4) vbstreetz has applied to start work _(Funders only: approve worker | reject worker)_.

I did work on Gitcoin's dark mode theme.
I can deliver this by end of this weekend.
5) nightwolf3 has applied to start work _(Funders only: approve worker | reject worker)_.

Hello
I would love the opportunity to work on the new mission page and make it more responsive as well as approachable and stylish

Learn more on the Gitcoin Issue Details page.

[owocki]

it was a tough decision but i approved @walidmujahid to work on the task. i have more frontend spliciing tasks tho; DM me on gitcoin chat for details, everyone else!

@walidmujahid

I would be interested in taking this. I can get it done in about 4 days. I'll implement the Missions v1 and mobile_v1 designs. I do have questions on what the Empathy is. I understand that dynamic voting will not be implemented until v2, but what is empathy and what is purpose behind the voting?

lets push thse to v2 pls!

Also in the mobile_v1 design, I see that, under the 'We Value' section, the list of thing is reduced to Collaboration, Empathy, and Stress Reducers.

no pls include them all, and have them just unfurl down

Is that how it should be, or is it it supposed to be a horizontal scroll on smaller touch devices? And if horizontal scroll, then should it be made clear UX-wise that it is a horizontal scroll?

My final questions for now are: In regards to avatars in the second section, I assume they are the founders. Should they link to the founder profiles?

no links pls

[walidmujahid]

Understood.

[walidmujahid]

@owocki A few more questions:

Where should Statistics, Add Value, and Search Values link to?
Should I just add disabled to the Vote button on Empathy for visual and cursor?

no pls include them all, and have them just unfurl down

Just to be sure, I must ask. By 'unfurl down', do you mean that it should visually be ordered with Collaboration, Empathy, and Stress Reducers at the beginning, but the rest would 'wrap' into rows below that?

[walidmujahid]

An update:

Incomplete demo/video of progress: https://youtu.be/lFJTCs-lsw8

Draft pr opened: https://github.com/gitcoinco/web/pull/7341

I will do my best to complete this by today, however, I may need more time, I will give another update again around 20:00 EST today.

@owocki A few more questions:

Where should Statistics, Add Value, and Search Values link to?
Should I just add disabled to the Vote button on Empathy for visual and cursor?

no pls include them all, and have them just unfurl down

Just to be sure, I must ask. By 'unfurl down', do you mean that it should visually be ordered with Collaboration, Empathy, and Stress Reducers at the beginning, but the rest would 'wrap' into rows below that?

@thelostone-mc perhaps you might have an answer for where the buttons should link to?

[owocki]

wow; demo looks amazing / promising!

Where should Statistics, Add Value, and Search Values link to?
Should I just add disabled to the Vote button on Empathy for visual and cursor?

Just disable them and add a tooltip title that says "Coming Soon"

[walidmujahid]

Just disable them and add a tooltip title that says "Coming Soon"

Understood.

[owocki]

just pulled down the PR. top half LGTM; can you code the 2nd half of the page @walidmujahid

[walidmujahid]

just pulled down the PR. top half LGTM; can you code the 2nd half of the page @walidmujahid

@owocki The whole page isn't fully complete. What is LGTM?

[nightwolf3]

just pulled down the PR. top half LGTM; can you code the 2nd half of the page @walidmujahid

@owocki The whole page isn't fully complete. What is LGTM?

It means Looks good to me bro. Good job so far btw!

[walidmujahid]

I hoped to have a good update by now (~20:00 EST), however, things had come up and it now seems I will be working into the night. I hope to have a better update soon, though.

[owocki]

ok no worries; send us an update tomo am

[walidmujahid]

@owocki

PR opened for review: https://github.com/gitcoinco/web/pull/7341

New demo video - whole page: https://youtu.be/ym2WfDp70A4

[gitcoinbot]

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

---

__Work for 1.0 ETH (377.65 USD @ $377.65/ETH) has been submitted by__:

---

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Chat
• $766,207.95 more funded OSS Work available on the Gitcoin Issue Explorer