GITC-102: Hackathons landing page (developers) refresh #9304

gdixon · 2021-07-19T11:40:17Z

Description

This PR implements the hackathons landing page refresh.

build design that includes:

hackathon landing page header & footer CTAs for exploring & becoming a sponsor
hackathons explorer preview (lead-in to CTA)
hackathon positive results from developers (testimonials)
hackathon landing page CTA to read instructions on how to get started (happyfox)
responsive views

Refers/Fixes

Fixes: GITC-102
Fixes: GITC-232

Testing

Tested locally

thelostone-mc · 2021-07-19T14:23:16Z

app/app/templates/shared/hackathon-list.html

+                          <div class="mt-3 font-smaller-2">
+                            <div class="mb-1 text-grey-400">Sponsored by</div>
+                            {% for sponsor in event.sponsor_profiles|slice:":6" %}
+                              <a href="{{ sponsor.absolute_url }}" target="_blank"><img class="rounded-circle my-1 mr-1" style="width:36px;" src="{{ sponsor.avatar_url }}" /></a>


worth adding noopener/noreferrer ?

We could do, but these are internal links - they're pointing to the sponsors profile (this code is unchanged from the original hackathon-list.html page)

thelostone-mc

LGTM but left one minor comments

zlsgh

Looks really good! I pulled it and tested locally too. I think it's good to move forward. We need to make sure the content at the HappyFox link is updated before we deploy (https://support.gitcoin.co/kb/article/81-hackathons-how-it-works)

owocki · 2021-07-19T21:09:36Z

some feedback. some is about design, some about implmenetation

current hackathon landing page has a big giant 'contact sales' at top but this one doesnt. why is it so buried below the fold?
is the testimonials module meant to just have 1 sad lonely testimonial from cryptomental or is it meant to have many u can scroll thru? why doesnt cryptomental have a pic?
i get a 500 when i click to any hackathon https://stage.gitcoin.co/hackathon/sovrython/onboard

gdixon · 2021-07-19T22:06:30Z

why doesnt cryptomental have a pic?

We're pulling that image from http://stage.gitcoin.co/dynamic/avatar/cryptomental - for some reason the dynamic end-point on staging is failing and I've not had chance to dig into why yet (its likely because we don't have s3 connected and all of this data was copied from production without any of the assets).

This works on both my local and on production (https://gitcoin.co/dynamic/avatar/cryptomental/) - I can have a look to get it going again tomorrow.

i get a 500 when i click to any hackathon https://stage.gitcoin.co/hackathon/sovrython/onboard

Ahhh, sorry about that, I hadn't ran the migrations - that should work now -- please note that I've placed the JSONstore manually to reflect the state of production, so some hackathons won't be present on staging.

PixelantDesign

Lookin' good!

Header
I'm noticing extra space between
Hey Hackers, go build cool stuff and Build a bunch of cool stuff, learn new tech, support the open source ecosystem, and earn cash and prizes!. Consider removing extra space. See mission page header spacing.

Sponsor Hackathon
Want to become a sponsor or run an exclusive hackathon on Gitcoin?
This feels like a system alert (less of a promotion), as it follows our system alert design.

How to Get Started
Could we consider switching the How to get started section and the Get the latest on Gitcoin email newsletter section?

Email Newsletter
Email newsletter section, when I entered my email, I didn't receive a confirmation message (see mission page newsletter module).

cc @willsputra

willsputra · 2021-07-20T12:45:33Z

current hackathon landing page has a big giant 'contact sales' at top but this one doesnt. why is it so buried below the fold?

Sponsor Hackathon
Want to become a sponsor or run an exclusive hackathon on Gitcoin?
This feels like a system alert (less of a promotion), as it follows our system alert design.

Since this page is more optimised for hackers, we want explore hackathons to be the primary CTA. We also wanted to provide a bit more context for funders that they can either be a sponsor or run exclusive hacks with us.

We can update the design to make it more obvious tho (and not clash with our system design) as below cc @PixelantDesign
@gdixon would it be difficult to change the sponsor section design to this?

I'm noticing extra space between
Hey Hackers, go build cool stuff and Build a bunch of cool stuff, learn new tech, support the open source ecosystem, and earn cash and prizes!. Consider removing extra space. See mission page header spacing.

Email Newsletter
Email newsletter section, when I entered my email, I didn't receive a confirmation message (see mission page newsletter module).

agree with these.

How to Get Started
Could we consider switching the How to get started section and the Get the latest on Gitcoin email newsletter section?

I'd still prefer putting the How to get started at the bottom so new users understand the what > why > how

A couple more questions:

Are we building the new Prizes field? We talked about having a new field for prizes in USD that admins can enter manually.
For the floating bubbles, I understand we went with hackathon logos due to performance reasons. Would there be alternative ways to display org logos instead, say maybe pulling all org logos that are hackathon sponsors instead of pulling from leaderboard?
Because the purpose of the bubbles is to inform "hey here's a lot of big-name projects you can work with" (for hackers) and "hey here are other big-name projects that have run hackathons with us, so don't miss out" (for sponsors), it'd be better to have recognisable org logos. But if the effort or performance hit is too big, this is fine for now 🙂

…nd hack-list indentation

gdixon · 2021-07-21T19:44:27Z

We can update the design to make it more obvious tho (and not clash with our system design)

This is resolved in b2e2acd

I'm noticing extra space between

Hey Hackers, go build cool stuff and Build a bunch of cool stuff, learn new tech, support the open source ecosystem, and earn cash and prizes!. Consider removing extra space. See mission page header spacing.

This is resolved in 3f09665

Email newsletter section, when I entered my email, I didn't receive a confirmation message (see mission page newsletter module).

Nice catch @PixelantDesign - thats now resolved in b2e2acd

A couple more questions:

Are we building the new Prizes field? We talked about having a new field for prizes in USD that admins can enter manually.

Yes, that will be picked up when it is filled in the backend, the data on staging was a duplicate of whats on production, and the field won't be available until this PR is deployed.

For the floating bubbles, I understand we went with hackathon logos due to performance reasons. Would there be alternative ways to display org logos instead, say maybe pulling all org logos that are hackathon sponsors instead of pulling from leaderboard?

Yes, let's split this out into a separate ticket, we will have to have a think about how we curate that list to ensure all sponsors are highlighted fairly.

chibie

lgtm!

…s-refresh

gkimbwala · 2021-07-22T16:57:38Z

This looks pretty good to me. There is a minor detail that catches my eye. I am not sure why the "join Now" buttons and "prizes" label on the current hackathons are two different colors. A little confused by that but other than that it looks good.

gdixon · 2021-07-22T17:13:34Z

This looks pretty good to me. There is a minor detail that catches my eye. I am not sure why the "join Now" buttons and "prizes" label on the current hackathons are two different colors. A little confused by that but other than that it looks good.

This state shows when the hackathon event has reached an end but before the page cache has been regenerated (which would move the event in to the completed tab).

In the old design those buttons were removed, but because that would leave a lot of empty space, I opted to disable them instead. If someone from the team was to go in to the _admin panel, they would be able to trigger the cache to be regenerated manually (or we can wait for the cron to trigger the refresh (it runs once every 3 hours)).

So this state is rare, but it does handle an edge-case (you cannot join a hackathon after it has ended).

gkimbwala · 2021-07-22T17:18:34Z

This looks pretty good to me. There is a minor detail that catches my eye. I am not sure why the "join Now" buttons and "prizes" label on the current hackathons are two different colors. A little confused by that but other than that it looks good.

This state shows when the hackathon event has reached an end but before the page cache has been regenerated (which would move the event in to the completed tab).

In the old design those buttons were removed, but because that would leave a lot of empty space, I opted to disable them instead. If someone from the team was to go in to the _admin panel, they would be able to trigger the cache to be regenerated manually (or we can wait for the cron to trigger the refresh (it runs once every 3 hours)).

So this state is rare, but it does handle an edge-case (you cannot join a hackathon after it has ended).

Got it! Then it looks good to me.

octavioamu · 2021-07-23T20:33:37Z

app/retail/templates/about.html

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
+    <script src="{% static "v2/js/lib/svgator_player.js" %}"></script>
+    <script src="{% static "v2/js/bubbles.js" %}"></script>


octavioamu · 2021-07-23T20:34:23Z

app/dashboard/views.py

    tabs = [
        ('current', 'happening now', num_current),
        ('upcoming', 'upcoming', num_upcoming),
        ('finished', 'completed', num_finished),
    ]

+    # shuffle the sponsors
+    random.shuffle(sponsors)


gdixon requested review from chibie, frankchen07, octavioamu, PixelantDesign, thelostone-mc and zlsgh as code owners July 19, 2021 11:40

GITC-102: Hackathons landing page (developers) refresh

11da59a

gdixon force-pushed the GITC-102--hackathons-refresh branch from db951d0 to 11da59a Compare July 19, 2021 11:49

thelostone-mc reviewed Jul 19, 2021

View reviewed changes

thelostone-mc approved these changes Jul 19, 2021

View reviewed changes

zlsgh approved these changes Jul 19, 2021

View reviewed changes

PixelantDesign reviewed Jul 20, 2021

View reviewed changes

gdixon added 2 commits July 20, 2021 13:20

GITC-102: Tightens up spacing in the header and adjust top-hacks viewbox

3f09665

Merge remote-tracking branch 'origin' into GITC-102--hackathons-refresh

41c3b49

GITC-102: Updates the sponsor cta, fixes mautic error/success state a…

b2e2acd

…nd hack-list indentation

gdixon added 2 commits July 21, 2021 22:11

GITC-232: Replace hackathon bubbles with sponsor avatars

6e91eb0

GITC-102: fixes > 6 sponsors circle positioning

f625c8c

chibie approved these changes Jul 21, 2021

View reviewed changes

gdixon added 2 commits July 22, 2021 13:37

Merge remote-tracking branch 'origin/master' into GITC-102--hackathon…

d66a590

…s-refresh

GITC-102: Fixes isort issues

6435b9a

gdixon force-pushed the GITC-102--hackathons-refresh branch from 2804b25 to 6435b9a Compare July 22, 2021 12:41

octavioamu reviewed Jul 23, 2021

View reviewed changes

octavioamu approved these changes Jul 23, 2021

View reviewed changes

gdixon merged commit 4776e34 into master Jul 26, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GITC-102: Hackathons landing page (developers) refresh #9304

GITC-102: Hackathons landing page (developers) refresh #9304

gdixon commented Jul 19, 2021 •

edited

Loading

thelostone-mc Jul 19, 2021

gdixon Jul 19, 2021

thelostone-mc left a comment

zlsgh left a comment •

edited

Loading

owocki commented Jul 19, 2021

gdixon commented Jul 19, 2021

PixelantDesign left a comment

willsputra commented Jul 20, 2021 •

edited

Loading

gdixon commented Jul 21, 2021

chibie left a comment

gkimbwala commented Jul 22, 2021

gdixon commented Jul 22, 2021

gkimbwala commented Jul 22, 2021

octavioamu Jul 23, 2021

octavioamu Jul 23, 2021

GITC-102: Hackathons landing page (developers) refresh #9304

GITC-102: Hackathons landing page (developers) refresh #9304

Conversation

gdixon commented Jul 19, 2021 • edited Loading

Description

Refers/Fixes

Testing

thelostone-mc Jul 19, 2021

Choose a reason for hiding this comment

gdixon Jul 19, 2021

Choose a reason for hiding this comment

thelostone-mc left a comment

Choose a reason for hiding this comment

zlsgh left a comment • edited Loading

Choose a reason for hiding this comment

owocki commented Jul 19, 2021

gdixon commented Jul 19, 2021

PixelantDesign left a comment

Choose a reason for hiding this comment

willsputra commented Jul 20, 2021 • edited Loading

gdixon commented Jul 21, 2021

chibie left a comment

Choose a reason for hiding this comment

gkimbwala commented Jul 22, 2021

gdixon commented Jul 22, 2021

gkimbwala commented Jul 22, 2021

octavioamu Jul 23, 2021

Choose a reason for hiding this comment

octavioamu Jul 23, 2021

Choose a reason for hiding this comment

gdixon commented Jul 19, 2021 •

edited

Loading

zlsgh left a comment •

edited

Loading

willsputra commented Jul 20, 2021 •

edited

Loading