From b8327dcc5e64fee3e513c26cae3201681e3b4315 Mon Sep 17 00:00:00 2001
From: aamustapha <abdulhakeemmustapha@gmail.com>
Date: Tue, 1 Dec 2020 15:43:11 +0100
Subject: [PATCH] Make active CLR rounds togglable

---
 app/assets/v2/js/grants/index.js              |  1 +
 .../grants/shared/active_clr_round.html       | 74 +++++++++++--------
 2 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/app/assets/v2/js/grants/index.js b/app/assets/v2/js/grants/index.js
index 844e614e0bf..3d3be9ee25f 100644
--- a/app/assets/v2/js/grants/index.js
+++ b/app/assets/v2/js/grants/index.js
@@ -154,6 +154,7 @@ if (document.getElementById('grants-showcase')) {
     data: {
       grants: [],
       page: 1,
+      show_active_clrs: true,
       collectionsPage: 1,
       limit: 6,
       sort: 'weighted_shuffle',
diff --git a/app/grants/templates/grants/shared/active_clr_round.html b/app/grants/templates/grants/shared/active_clr_round.html
index b76a8147011..f0030360d15 100644
--- a/app/grants/templates/grants/shared/active_clr_round.html
+++ b/app/grants/templates/grants/shared/active_clr_round.html
@@ -1,35 +1,45 @@
-<div class="container-fluid grants-container">
-  <div class="container">
-    {% for active_round in active_rounds %}
-      <a href="{% if active_round.sub_round_slug %}{% url 'grants:clr_grants' round_num=active_round.round_num sub_round_slug=active_round.sub_round_slug %}{% else %}{% url 'grants:clr_grants' round_num=active_round.round_num %}{% endif %}"
-        class="d-block text-decoration-none position-relative my-3 text-white"
-        style="background: url('{% if active_round.logo %} {{ active_round.logo.url }} {% endif %}') no-repeat center ">
-        <div class="position-absolute"
-          style="top: 0; right: 0; width: 100%; height: 100%; background: #0044e088; z-index: 5;"></div>
-        <div class="d-flex px-4 py-3 justify-content-between position-relative" style="z-index: 10">
-          <div class="d-flex">
-            <div class="bg-white mr-3 p-2 overflow-hidden" style="width: 56px; height: 56px; border-radius: 100px;">
-              <img class="img-responsive" style="width: 100%; height: 100%;"
-                src="/dynamic/avatar/{{ active_round.owner.handle | default:'gitcoinco'}}" />
-            </div>
-            <h5 class="font-weight-bold mb-0">
-              {% if active_round.display_text %}
-                {{ active_round.display_text }}
-              {% elif active_round.customer_name %}
-                {{ active_round.customer_name }} - {{ active_round.round_num }}
-              {% elif active_round.sub_round_slug %}
-                {{ active_round.sub_round_slug|title }} - {{ active_round.round_num }}
-              {% else %}
-                {{ active_round.round_num }}
-              {% endif %}
-              <br />
-              <small>{{active_round.start_date | date:'m/Y'}} - {{active_round.end_date | date:'m/Y'}}</small>
-            </h5>
-          </div>
-          <p>${{ active_round.total_pot }}</p>
+{% load i18n static get_categories_from_list %}
+<div class="container-fluid grants-container"> 
+    <div class="container">
+      <div class="subheading font-weight-bold d-flex justify-content-between" @click="show_active_clrs = !show_active_clrs">
+        <span>{% trans "Active CLR Rounds" as filts %}{{ filts|upper }}</span>
+        <span class=" fa fa-fw fa-chevron-down" v-if="!show_active_clrs"></span>
+        <span class=" fa fa-fw fa-chevron-up" v-if="show_active_clrs"></span>
+      </div>
+      <b-collapse :visible="show_active_clrs" id="active_clrs_collapse" >
+        <div>
+          {% for active_round in active_rounds %}
+            <a href="{% if active_round.sub_round_slug %}{% url 'grants:clr_grants' round_num=active_round.round_num sub_round_slug=active_round.sub_round_slug %}{% else %}{% url 'grants:clr_grants' round_num=active_round.round_num %}{% endif %}"
+              class="d-block text-decoration-none position-relative my-3 text-white"
+              style="background: url('{% if active_round.logo %} {{ active_round.logo.url }} {% endif %}') no-repeat center ">
+              <div class="position-absolute"
+                style="top: 0; right: 0; width: 100%; height: 100%; background: #0044e088; z-index: 5;"></div>
+              <div class="d-flex px-4 py-3 justify-content-between position-relative" style="z-index: 10">
+                <div class="d-flex">
+                  <div class="bg-white mr-3 p-2 overflow-hidden" style="width: 56px; height: 56px; border-radius: 100px;">
+                    <img class="img-responsive" style="width: 100%; height: 100%;"
+                      src="/dynamic/avatar/{{ active_round.owner.handle | default:'gitcoinco'}}" />
+                  </div>
+                  <h5 class="font-weight-bold mb-0">
+                    {% if active_round.display_text %}
+                      {{ active_round.display_text }}
+                    {% elif active_round.customer_name %}
+                      {{ active_round.customer_name }} - {{ active_round.round_num }}
+                    {% elif active_round.sub_round_slug %}
+                      {{ active_round.sub_round_slug|title }} - {{ active_round.round_num }}
+                    {% else %}
+                      {{ active_round.round_num }}
+                    {% endif %}
+                    <br />
+                    <small>{{active_round.start_date | date:'m/Y'}} - {{active_round.end_date | date:'m/Y'}}</small>
+                  </h5>
+                </div>
+                <p>${{ active_round.total_pot }}</p>
 
+              </div>
+            </a>
+          {% endfor %}
         </div>
-      </a>
-    {% endfor %}
-  </div>
+      </b-collapse>
+    </div>
 </div>
\ No newline at end of file