Skip to content

Commit 4776e34

Browse files
gdixongdixon
authored
GITC-102: Hackathons landing page (developers) refresh (#9304)
* GITC-102: Hackathons landing page (developers) refresh * GITC-102: Tightens up spacing in the header and adjust top-hacks viewbox * GITC-102: Updates the sponsor cta, fixes mautic error/success state and hack-list indentation * GITC-232: Replace hackathon bubbles with sponsor avatars * GITC-102: fixes > 6 sponsors circle positioning * GITC-102: Fixes isort issues
1 parent f8ede14 commit 4776e34

15 files changed

Lines changed: 882 additions & 272 deletions

File tree

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

Lines changed: 274 additions & 75 deletions
Large diffs are not rendered by default.

‎app/assets/v2/images/twitter_cards/tw_hackathon-list.png‎

120 KB
Loading

‎app/assets/v2/js/bubbles.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
// configure the bubbles
3+
const SCROLL_SPEED = 0.3;
4+
const NOISE_SPEED = 0.004;
5+
const NOISE_AMOUNT = 5;
6+
const CANVAS_WIDTH = 2800;
7+
const bubblesEl = document.querySelector('.bubbles');
8+
const bubbleSpecs = [
9+
{ s: .6, x: 1134, y: 45 },
10+
{ s: .6, x: 1620, y: 271 },
11+
{ s: .6, x: 1761, y: 372 },
12+
{ s: .6, x: 2499, y: 79 },
13+
{ s: .6, x: 2704, y: 334 },
14+
{ s: .6, x: 2271, y: 356 },
15+
{ s: .6, x: 795, y: 226 },
16+
{ s: .6, x: 276, y: 256 },
17+
{ s: .6, x: 1210, y: 365 },
18+
{ s: .6, x: 444, y: 193 },
19+
{ s: .6, x: 2545, y: 387 },
20+
{ s: .8, x: 1303, y: 193 },
21+
{ s: .8, x: 907, y: 88 },
22+
{ s: .8, x: 633, y: 320 },
23+
{ s: .8, x: 323, y: 60 },
24+
{ s: .8, x: 129, y: 357 },
25+
{ s: .8, x: 1440, y: 342 },
26+
{ s: .8, x: 1929, y: 293 },
27+
{ s: .8, x: 2135, y: 198 },
28+
{ s: .8, x: 2276, y: 82 },
29+
{ s: .8, x: 2654, y: 182 },
30+
{ s: .8, x: 2783, y: 60 },
31+
{ x: 1519, y: 118 },
32+
{ x: 1071, y: 233 },
33+
{ x: 1773, y: 148 },
34+
{ x: 2098, y: 385 },
35+
{ x: 2423, y: 244 },
36+
{ x: 901, y: 385 },
37+
{ x: 624, y: 111 },
38+
{ x: 75, y: 103 },
39+
{ x: 413, y: 367 },
40+
{ x: 2895, y: 271 },
41+
{ x: 1990, y: 75 }
42+
];
43+
44+
class Bubbles {
45+
constructor(specs) {
46+
this.bubbles = [];
47+
48+
specs.forEach((spec, index) => {
49+
this.bubbles.push(new Bubble(index, spec));
50+
});
51+
52+
requestAnimationFrame(this.update.bind(this));
53+
bubblesEl.style.opacity = 1;
54+
}
55+
56+
update() {
57+
this.bubbles.forEach(bubble => bubble.update());
58+
this.raf = requestAnimationFrame(this.update.bind(this));
59+
}
60+
}
61+
62+
class Bubble {
63+
constructor(index, {
64+
x,
65+
y,
66+
s = 1
67+
}) {
68+
this.index = index;
69+
this.x = x;
70+
this.y = y;
71+
this.scale = s;
72+
73+
this.noiseSeedX = Math.floor(Math.random() * 64000);
74+
this.noiseSeedY = Math.floor(Math.random() * 64000);
75+
this.el = bubblesEl.children[index];
76+
if (!this.el) {
77+
return;
78+
}
79+
80+
this.el.classList.add(`logo${this.index + 1}`);
81+
}
82+
83+
update() {
84+
if (!this.el) {
85+
return;
86+
}
87+
this.noiseSeedX += NOISE_SPEED;
88+
this.noiseSeedY += NOISE_SPEED;
89+
let randomX = noise.simplex2(this.noiseSeedX, 0);
90+
let randomY = noise.simplex2(this.noiseSeedY, 0);
91+
92+
this.x -= SCROLL_SPEED;
93+
this.xWithNoise = this.x + (randomX * NOISE_AMOUNT);
94+
this.yWithNoise = this.y + (randomY * NOISE_AMOUNT);
95+
96+
if (this.x < -200) {
97+
this.x = CANVAS_WIDTH;
98+
}
99+
100+
this.el.style.transform = `translate(${this.xWithNoise}px, ${this.yWithNoise}px) scale(${this.scale})`;
101+
}
102+
}
103+
104+
noise.seed(Math.floor(Math.random() * 64000));
105+
106+
// init the bubbles
107+
const bubbles = new Bubbles(bubbleSpecs);
108+
});

‎app/assets/v2/js/pages/hackathon-list.js‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,48 @@
1-
$(document).ready(function() {
2-
$(document).on('click', '#tabs a', function(e) {
3-
e.preventDefault();
4-
let target = $(this).data('href');
1+
document.addEventListener('DOMContentLoaded', () => {
52

6-
$('.hackathons-list').addClass('hidden');
7-
$('.nav-link').removeClass('active');
8-
$('.nav-link').css('font-weight', '');
9-
$(this).addClass('active');
10-
$(this).css('font-weight', '700');
3+
const tabs = document.querySelectorAll('.hackathon-tabs a');
4+
const hacks = document.querySelectorAll('.hackathon-list');
115

6+
const loadTab = (target) => {
7+
let hiddenRows = false;
128

13-
$('.hackathon-list').addClass('hidden');
14-
$('.hackathon-list.' + target).removeClass('hidden');
9+
const hack = document.querySelector('.hackathon-list.' + target);
10+
const rows = document.querySelectorAll('.hackathon-list.' + target + ' > .row');
11+
const more = document.querySelector('.hackathon-list.' + target + ' > .view-more');
1512

16-
$('html,body').animate({
17-
scrollTop: '+=1px'
13+
tabs.forEach((t) => t.classList.remove('active'));
14+
document.querySelector('.nav-link[data-href="' + target + '"]').classList.add('active');
15+
16+
hacks.forEach((hack) => hack.classList.add('hidden'));
17+
hack.classList.remove('hidden');
18+
19+
rows.forEach((row, indx) => {
20+
if (indx > 1 && more.classList.contains('d-none')) {
21+
hiddenRows = true;
22+
row.classList.add('d-none');
23+
}
24+
});
25+
26+
if (hiddenRows && more) {
27+
const newMore = more.cloneNode(true);
28+
29+
more.parentNode.replaceChild(newMore, more);
30+
newMore.classList.add('d-block');
31+
newMore.classList.remove('d-none');
32+
newMore.addEventListener('click', () => {
33+
newMore.classList.add('d-none');
34+
newMore.classList.remove('d-block');
35+
rows.forEach((hack) => hack.classList.remove('d-none'));
36+
});
37+
}
38+
};
39+
40+
tabs.forEach((tab) => {
41+
tab.addEventListener('click', (e) => {
42+
e.preventDefault();
43+
loadTab(e.target.dataset.href);
1844
});
1945
});
46+
47+
loadTab(document.default_tab);
2048
});

‎app/assets/v2/scss/gc-utilities.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,10 @@
8282
background-color: $gc-grey-100;
8383
}
8484

85+
.bg-violet-100 {
86+
background-color: $gc-violet-100;
87+
}
88+
8589
.bg-violet-300 {
8690
background-color: $gc-violet-300;
8791
}
@@ -90,6 +94,10 @@
9094
background-color: $gc-violet-400;
9195
}
9296

97+
.bg-teal-300 {
98+
background-color: $gc-teal-300;
99+
}
100+
93101
.bg-pink-300 {
94102
background-color: $gc-pink-300;
95103
}

‎app/assets/v2/scss/gitcoin.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -555,7 +555,7 @@
555555
}
556556

557557
.nav-tabs .nav-line {
558-
color: #6F3FF5;
558+
color: $gc-grey-500;
559559
border-width: 0px 0px 3px 0;
560560
}
561561
.nav-tabs .nav-line.active {

‎app/dashboard/gas_views.py‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -246,11 +246,16 @@ def gas_history_view(request):
246246
events = JSONStore.objects.get(key='hackathons', view='hackathons').data[1]
247247
default_tab = 'current'
248248

249+
num_current = len([ele for ele in events if ele['type'] == 'current'])
250+
num_upcoming = len([ele for ele in events if ele['type'] == 'upcoming'])
251+
num_finished = len([ele for ele in events if ele['type'] == 'finished'])
252+
249253
tabs = [
250-
('current', 'happening now'),
251-
('upcoming', 'upcoming'),
252-
('finished', 'completed'),
254+
('current', 'happening now', num_current),
255+
('upcoming', 'upcoming', num_upcoming),
256+
('finished', 'completed', num_finished),
253257
]
258+
254259
context = {
255260
'title': _('Live Ethereum (ETH) Gas History'),
256261
'card_desc': _('See and comment on the Ethereum (ETH) Gas - Hourly History Graph'),
@@ -262,6 +267,7 @@ def gas_history_view(request):
262267
'granularity_options': granularity_options,
263268
'events': events,
264269
'tabs': tabs,
270+
'types': ['current', 'upcoming', 'finished'],
265271
'default_tab': default_tab
266272
}
267273
return TemplateResponse(request, 'gas_history.html', context)

‎app/dashboard/migrations/0184_hackathonevent_total_prize.py‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Generated by Django 2.2.24 on 2021-07-17 03:53
2+
3+
from django.db import migrations, models
4+
5+
6+
class Migration(migrations.Migration):
7+
8+
dependencies = [
9+
('dashboard', '0183_auto_20210701_1339'),
10+
]
11+
12+
operations = [
13+
migrations.AddField(
14+
model_name='hackathonevent',
15+
name='total_prize',
16+
field=models.CharField(blank=True, help_text='extra text to display next the event dates on the hackathon list page', max_length=255, null=True),
17+
),
18+
]

‎app/dashboard/models.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5055,6 +5055,7 @@ class HackathonEvent(SuperModel):
50555055
chat_channel_id = models.CharField(max_length=255, blank=True, null=True)
50565056
use_circle = models.BooleanField(help_text=_('Use circle for the Hackathon'), default=False)
50575057
visible = models.BooleanField(help_text=_('Can this HackathonEvent be seeing on /hackathons ?'), default=True)
5058+
total_prize = models.CharField(max_length=255, null=True, blank=True, help_text='extra text to display next the event dates on the hackathon list page')
50585059

50595060
default_channels = ArrayField(models.CharField(max_length=255), blank=True, default=list)
50605061
objects = HackathonEventQuerySet.as_manager()

‎app/dashboard/templates/dashboard/hackathon/hackathons.html‎

Lines changed: 310 additions & 67 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)