Skip to content

Commit 55e45f8

Browse files
octavioamuoctavioamu
authored
Merge pull request #7981 from gitcoinco/abdul/fix/make-active-clrs-collapsible
Make active CLR rounds togglable
2 parents b413bde + bb21c03 commit 55e45f8

2 files changed

Lines changed: 55 additions & 41 deletions

File tree

‎app/assets/v2/js/grants/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,7 @@ if (document.getElementById('grants-showcase')) {
162162
page: 1,
163163
collectionsPage: 1,
164164
limit: 6,
165+
show_active_clrs: window.localStorage.getItem('show_active_clrs') != 'false',
165166
sort: sort,
166167
network: document.network,
167168
keyword: document.keyword,
@@ -191,6 +192,10 @@ if (document.getElementById('grants-showcase')) {
191192
numGrants
192193
},
193194
methods: {
195+
toggleActiveCLRs(){
196+
this.show_active_clrs = !this.show_active_clrs
197+
window.localStorage.setItem('show_active_clrs', this.show_active_clrs)
198+
},
194199
setView: function(mode, event) {
195200
event.preventDefault();
196201
localStorage.setItem('grants_view', mode);

‎app/grants/templates/grants/shared/active_clr_round.html‎

Lines changed: 50 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,57 @@
1-
{% load humanize %}
1+
{% load humanize i18n %}
22
<div class="container-fluid grants-container">
33
<div class="container">
4-
<div class="row">
5-
{% for active_round in active_rounds %}
6-
<div class="col-12 col-lg-6">
7-
<a
8-
href="/grants/clr{% if active_round.customer_name %}/{{ active_round.customer_name }}{% endif %}{% if active_round.round_num %}/{{ active_round.round_num }}{% endif %}{% if active_round.sub_round_slug %}/{{ active_round.sub_round_slug }}{% endif %}"
9-
class="d-block text-decoration-none position-relative my-3 text-white"
10-
>
11-
<div class="position-absolute w-100 h-100"
12-
style="top: 0; right: 0; z-index: 5;
13-
{% if active_round.logo %}
14-
background: url('{{ active_round.logo.url }}') no-repeat center;
15-
{% endif %}
16-
background-color: #0044e088;"
4+
<div class="subheading font-weight-bold d-flex justify-content-between" @click="toggleActiveCLRs">
5+
<span>{% trans "Active CLR Rounds" as filts %}{{ filts|upper }}</span>
6+
<span class=" fa fa-fw fa-chevron-down" v-if="!show_active_clrs"></span>
7+
<span class=" fa fa-fw fa-chevron-up" v-if="show_active_clrs"></span>
8+
</div>
9+
<b-collapse :visible="show_active_clrs" id="active_clrs_collapse" >
10+
11+
<div class="row">
12+
{% for active_round in active_rounds %}
13+
<div class="col-12 col-lg-6">
14+
<a
15+
href="/grants/clr{% if active_round.customer_name %}/{{ active_round.customer_name }}{% endif %}{% if active_round.round_num %}/{{ active_round.round_num }}{% endif %}{% if active_round.sub_round_slug %}/{{ active_round.sub_round_slug }}{% endif %}"
16+
class="d-block text-decoration-none position-relative my-3 text-white"
1717
>
18-
</div>
19-
<div class="d-flex px-4 py-3 justify-content-between position-relative" style="z-index: 10">
20-
<div class="d-flex">
21-
<div class="bg-white mr-3 overflow-hidden" style="width: 56px; height: 56px; border-radius: 100px;">
22-
<img class="img-responsive" style="width: 100%; height: 100%;"
23-
src="/dynamic/avatar/{{ active_round.owner.handle | default:'gitcoinco'}}" />
18+
<div class="position-absolute w-100 h-100"
19+
style="top: 0; right: 0; z-index: 5;
20+
{% if active_round.logo %}
21+
background: url('{{ active_round.logo.url }}') no-repeat center;
22+
{% endif %}
23+
background-color: #0044e088;"
24+
>
25+
</div>
26+
<div class="d-flex px-4 py-3 justify-content-between position-relative" style="z-index: 10">
27+
<div class="d-flex">
28+
<div class="bg-white mr-3 overflow-hidden" style="width: 56px; height: 56px; border-radius: 100px;">
29+
<img class="img-responsive" style="width: 100%; height: 100%;"
30+
src="/dynamic/avatar/{{ active_round.owner.handle | default:'gitcoinco'}}" />
31+
</div>
32+
<h5 class="font-weight-bold my-auto">
33+
{% if active_round.display_text %}
34+
{{ active_round.display_text|upper }}
35+
{% elif active_round.customer_name %}
36+
{{ active_round.customer_name|upper }} - {{ active_round.round_num }}
37+
{% elif active_round.sub_round_slug %}
38+
{{ active_round.sub_round_slug|upper }} - {{ active_round.round_num }}
39+
{% else %}
40+
{{ active_round.round_num }}
41+
{% endif %}
42+
<br />
43+
<small class="font-body font-weight-semibold">
44+
{{active_round.start_date | date:'m/Y'}} - {{active_round.end_date | date:'m/Y'}}
45+
</small>
46+
</h5>
2447
</div>
25-
<h5 class="font-weight-bold my-auto">
26-
{% if active_round.display_text %}
27-
{{ active_round.display_text|upper }}
28-
{% elif active_round.customer_name %}
29-
{{ active_round.customer_name|upper }} - {{ active_round.round_num }}
30-
{% elif active_round.sub_round_slug %}
31-
{{ active_round.sub_round_slug|upper }} - {{ active_round.round_num }}
32-
{% else %}
33-
{{ active_round.round_num }}
34-
{% endif %}
35-
<br />
36-
<small class="font-body font-weight-semibold">
37-
{{active_round.start_date | date:'m/Y'}} - {{active_round.end_date | date:'m/Y'}}
38-
</small>
39-
</h5>
48+
<p class="my-auto font-weight-semibold">${{ active_round.total_pot|floatformat:"0"|intcomma }}</p>
4049
</div>
41-
<p class="my-auto font-weight-semibold">${{ active_round.total_pot|floatformat:"0"|intcomma }}</p>
42-
</div>
43-
</a>
44-
</div>
45-
{% endfor %}
46-
</div>
50+
</a>
51+
</div>
52+
{% endfor %}
53+
</div>
54+
</b-collapse>
55+
4756
</div>
4857
</div>

0 commit comments

Comments
 (0)