Make active CLR rounds togglable

gitcoinco · Dec 1, 2020 · 7fd0ae0 · 7fd0ae0
1 parent 83521cc
commit 7fd0ae0
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 38 deletions.
diff --git a/app/assets/v2/js/grants/index.js b/app/assets/v2/js/grants/index.js
@@ -160,6 +160,7 @@ if (document.getElementById('grants-showcase')) {
       grants: [],
       grant: {},
       page: 1,
+      show_active_clrs: true,
       collectionsPage: 1,
       limit: 6,
       sort: sort,

diff --git a/app/grants/templates/grants/shared/active_clr_round.html b/app/grants/templates/grants/shared/active_clr_round.html
@@ -1,43 +1,52 @@
 <div class="container-fluid grants-container">
   <div class="container">
-    {% for active_round in active_rounds %}
-      <a
-        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 %}"
-        class="d-block text-decoration-none position-relative my-3 text-white"
-      >
-        <div class="position-absolute w-100 h-100"
-          style="top: 0; right: 0; z-index: 5;
-          {% if active_round.logo %}
-          background:  url('{{ active_round.logo.url }}') no-repeat center;
-          {% endif %}
-          background-color: #0044e088;"
-        >
-        </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 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 my-auto">
-              {% 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 }}
+    <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="/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 %}"
+            class="d-block text-decoration-none position-relative my-3 text-white"
+          >
+            <div class="position-absolute w-100 h-100"
+              style="top: 0; right: 0; z-index: 5;
+              {% if active_round.logo %}
+              background:  url('{{ active_round.logo.url }}') no-repeat center;
               {% endif %}
-              <br />
-              <small class="font-body font-weight-semibold">
-                {{active_round.start_date | date:'m/Y'}} - {{active_round.end_date | date:'m/Y'}}
-              </small>
-            </h5>
-          </div>
-          <p class="my-auto font-weight-semibold">${{ active_round.total_pot }}</p>
-        </div>
-      </a>
-    {% endfor %}
+              background-color: #0044e088;"
+            >
+            </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 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 my-auto">
+                  {% 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 class="font-body font-weight-semibold">
+                    {{active_round.start_date | date:'m/Y'}} - {{active_round.end_date | date:'m/Y'}}
+                  </small>
+                </h5>
+              </div>
+              <p class="my-auto font-weight-semibold">${{ active_round.total_pot }}</p>
+            </div>
+          </a>
+        {% endfor %}
+      </div>
+    </b-collapse>
   </div>
 </div>