Hackathon List Page Update

PixelantDesign commented 4 years ago

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 commented 4 years ago

draft

hackathon-list

PixelantDesign commented 4 years ago

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 commented 4 years ago

0_o looks really good

On Wed, Jul 15, 2020 at 8:16 AM Pixelant notifications@github.com 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 commented 4 years ago

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 commented 4 years ago

Happening Now tab:

Completed tab:

developerfred commented 4 years ago

@willsputra how would the mobile on this page look?

willsputra commented 4 years ago

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

responsive

walidmujahid commented 4 years ago

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 commented 4 years ago

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

frankchen07 commented 4 years ago

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 commented 4 years ago

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

octavioamu commented 4 years ago

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

walidmujahid commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

walidmujahid commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Amazing! Thanks @walidmujahid !

willsputra commented 4 years ago

thank you @walidmujahid !

walidmujahid commented 4 years ago

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

gitcoinco / web

Hackathon List Page Update #7096

User Story

Why Is this Needed