Web: Hackathon List Page Update

[PixelantDesign]

User Story

As a builder in a hackathon, I want an explanation of what Gitcoin hackathon is all about and info on why I should join.

As a hackathon sponsor, when I look at the hackathons landing page, I want to know how I can participate as a sponsor.

Why Is this Needed

Hackathon List Page

https://gitcoin.co/hackathon-list/

• Add a few lines describing Gitcoin Hackathon’s (top)
• Add contact Scott section
• Nice to have: Add small sponsor logos under each hackathon, Add one liner about each hackathon
• Need a design on how to add/edit the one liner.

[willsputra]

draft

[PixelantDesign]

Looking great! We probably don't need Explore Hackathons - since this is the page to explore! What do you think @connoroday @frankchen07 - changes based on our last discussion

cc @walidmujahid let me know if you're interested in taking this to the finish line! We're aiming for a weekish on this one.

[owocki]

0_o looks really good

On Wed, Jul 15, 2020 at 8:16 AM Pixelant [e-mail] wrote:

Looking great! We probably don't need Explore Hackathons - since this is
the page to explore! What do you think @connoroday
https://github.com/connoroday @frankchen07
https://github.com/frankchen07 - changes based on our last discussion

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/gitcoinco/web/issues/7096#issuecomment-658795003, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AAD5PCLT4CWO3TZSQF7EP4TR3W24XANCNFSM4OZACLCQ
.

--

@owocki http://www.twitter.com/owocki

---

gitcoin is live and has generated over $5mm for Open Source Software - see
our results https://gitcoin.co/results

[PixelantDesign]

We will need to add a field in admin to capture the one line description for each hackathon and a field to enter in which sponsors are part of the hackathon so that icons populate here.

[willsputra]

Happening Now tab:

Completed tab:

[developerfred]

@willsputra how would the mobile on this page look?

[willsputra]

what do you think of having the cards in one column? if we keep the image and text side by side, on mobile the image is super squished...

[walidmujahid]

Looking great! We probably don't need Explore Hackathons - since this is the page to explore! What do you think @connoroday @frankchen07 - changes based on our last discussion

cc @walidmujahid let me know if you're interested in taking this to the finish line! We're aiming for a weekish on this one.

@PixelantDesign I would of course be interested taking this to the finish line. I assume that I just update the currently open PR for this page https://github.com/gitcoinco/web/pull/6297 ? And are the decided upon designs available in Figma?

[willsputra]

@walidmujahid thanks for doing this! figma file:
https://www.figma.com/file/5Fx1wNhOYCNUcqRWDyIBar/Gitcoin-Hackathon-List?node-id=0%3A1

[frankchen07]

Does look real nice. I like it. Agree that "become a sponsor" up top is nice and clean, and it just feels organized, uses existing tab and card structures we already have 👍

[PixelantDesign]

yes! @walidmujahid let us know if you have any questions! Excited about this one!

[octavioamu]

Looking great @willsputra just one addition related to other PR, on the completed cards can we add the "showcase" link?

[walidmujahid]

@PixelantDesign Just to confirm, this design removes only the featured section from https://github.com/gitcoinco/web/issues/6211, but keeps the tribes and workshops sections?

[PixelantDesign]

Hi @walidmujahid This is the latest design

• [ ] make the top header span across the page
• [ ] Contact Sales section that was on the right side, is now below and CTA is Become a Sponsor linking to the same form.
• [ ] Remove Tribes section
• [ ] Remove Workshops (can we save this and use on another section of the integrated view?)
• [ ] Update overall buttons so there is a primary and secondary focus (filled, vs stroke)
• [ ] on the hackathon card, add space for a few lines of text that gitcoin admin can enter in manually using an Edit button.
• [ ] add small sponsor logos to each hackathon (18x18)

Happening Now tab:

• [ ] When hackathon is completed - show projects and showcase buttons

Completed tab:

Let us know if you have questions!

[walidmujahid]

• Remove Workshops (can we save this and use on another section of the integrated view?)

@PixelantDesign I will update https://github.com/gitcoinco/web/pull/6297 with these changes then. The Workshop models and templating from https://github.com/gitcoinco/web/pull/6297 can be used in another tab in the integrated view.

I could work on that after or someone more available can. For the templating of workshops section, perhaps it is viable to update to using vue-bootstrap components, specifically profile avatar component among a few others for the workshop section. I have not looked at the integrated view templating much, however, I have noticed vue-bootstrap compnents and vue js being used more in recent PRs.

[PixelantDesign]

Thanks @walidmujahid looking forward to the updates! would it be possible to have a PR by Friday for Monday deploy?

[walidmujahid]

Using @PixelantDesign checklist, currently task completion:

• [x] make the top header span across the page
• [x] Contact Sales section that was on the right side, is now below and CTA is Become a Sponsor linking to the same form.
• [x] Remove Tribes section
• [x] Remove Workshops
• [x] Update overall buttons so there is a primary and secondary focus
• [x] on the hackathon card, add space for a few lines of text that gitcoin admin can enter in manually using an Edit button.
• [x] add small sponsor logos to each hackathon
• [ ] When hackathon is completed - show projects and showcase buttons

I will upload a demo video a bit later. For the hackathon page front end, here is what it current looks like with updated header and cards:

15 inch screen, Dell Inspiron:

Apple 6/7/8 screen, or genrall 375px width screens:

[walidmujahid]

PR awaiting review of recent changes https://github.com/gitcoinco/web/pull/6297
Demo Video: https://youtu.be/pYi6Ul-Uvc0
I forgot to show it in the video, however, when clicking on the small sponsor avatar in a hackathon card, the sponsor's profile is opened in a new tab.

[PixelantDesign]

Amazing! Thanks @walidmujahid !

[willsputra]

thank you @walidmujahid !

[walidmujahid]

My pleasure @PixelantDesign @willsputra

Some minor updates have been pushed to the PR to solve som econflicts with recent changes and to introduce fixes based on feedback: https://github.com/gitcoinco/web/pull/6297#issuecomment-665164995

However, nothing major has changed on the front end. After recent updates, the main thing different is that the showcase button does not appear automatically in the hackathon card, rather, it has to be enabled on a hackathon once it is finished - feature introduced by @zoek1 here in https://github.com/gitcoinco/web/pull/7087