feat: side round support + banner tweaks + add tooltip

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

@@ -83,7 +83,6 @@ if (document.getElementById('grants-showcase')) {
       grant: {},
       collectionsPage: null,
       cart_data_count: CartData.length(),
-      show_active_clrs: window.localStorage.getItem('show_active_clrs') != 'false',
       network: document.network,
       keyword: document.keyword,
       current_type: document.current_type,
@@ -142,10 +141,6 @@ if (document.getElementById('grants-showcase')) {
           $('.page-styles').last().text('');
         }
       },
-      toggleActiveCLRs: function() {
-        this.show_active_clrs = !this.show_active_clrs;
-        window.localStorage.setItem('show_active_clrs', this.show_active_clrs);
-      },
       setView: function(mode, event) {
         event.preventDefault();
         localStorage.setItem('grants_view', mode);

app/assets/v2/js/grants/landingpage.js

@@ -20,7 +20,6 @@ if (document.getElementById('grants-showcase')) {
       page: 1,
       collectionsPage: null,
       limit: 6,
-      show_active_clrs: window.localStorage.getItem('show_active_clrs') != 'false',
       sort: sort,
       network: document.network,
       keyword: document.keyword,
@@ -85,10 +84,6 @@ if (document.getElementById('grants-showcase')) {
         vm.loadingCollections = false;
 
       },
-      toggleActiveCLRs() {
-        this.show_active_clrs = !this.show_active_clrs;
-        window.localStorage.setItem('show_active_clrs', this.show_active_clrs);
-      },
       scrollEnd: async function(event) {
         const vm = this;
 

app/grants/migrations/0127_auto_20211029_0913.py

@@ -0,0 +1,43 @@
+# Generated by Django 2.2.24 on 2021-10-29 09:13
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('grants', '0126_auto_20211001_0911'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='grantclr',
+            name='banner_bg_hex',
+            field=models.CharField(blank=True, default='#11BC92', help_text='sets the bg color on the banner below the logo', max_length=15, null=True),
+        ),
+        migrations.AddField(
+            model_name='grantclr',
+            name='banner_text',
+            field=models.CharField(blank=True, help_text='text which appears below banner', max_length=50, null=True),
+        ),
+        migrations.AddField(
+            model_name='grantclr',
+            name='banner_text_hex',
+            field=models.CharField(blank=True, default='#FFF', help_text='sets the text color on the banner below the logo', max_length=15, null=True),
+        ),
+        migrations.AddField(
+            model_name='grantclr',
+            name='logo_text_hex',
+            field=models.CharField(blank=True, default='#000000', help_text='sets the text color of the logo', max_length=15, null=True),
+        ),
+        migrations.AddField(
+            model_name='grantclr',
+            name='type',
+            field=models.CharField(choices=[('main', 'Main Round'), ('sponsor', 'Sponsor Round'), ('cause', 'Cause Round')], default='main', help_text='Grant CLR Type', max_length=25),
+        ),
+        migrations.AlterField(
+            model_name='grantclr',
+            name='customer_name',
+            field=models.CharField(blank=True, default='', help_text='used to generate customer_name/round_num/sub_round_slug', max_length=15),
+        ),
+    ]

app/grants/models/grant.py

@@ -26,14 +26,19 @@
 
 class GrantCLR(SuperModel):
 
+    CLR_TYPES = (
+        ('main', 'Main Round'),
+        ('sponsor', 'Sponsor Round'),
+        ('cause', 'Cause Round'),
+    )
     class Meta:
         unique_together = ('customer_name', 'round_num', 'sub_round_slug',)
 
     customer_name = models.CharField(
         max_length=15,
         default='',
         blank=True,
-        help_text="used to genrate customer_name/round_num/sub_round_slug"
+        help_text="used to generate customer_name/round_num/sub_round_slug"
     )
     round_num = models.PositiveIntegerField(
         help_text="CLR Round Number. used to generate customer_name/round_num/sub_round_slug"
@@ -108,6 +113,40 @@ class Meta:
         max_length=500,
         help_text=_('sets the background in CLR banner on the landing page'),
     )
+    type = models.CharField(
+        max_length=25,
+        choices=CLR_TYPES,
+        default='main',
+        help_text="Grant CLR Type"
+    )
+    logo_text_hex= models.CharField(
+        blank=True,
+        null=True,
+        default='#000000',
+        max_length=15,
+        help_text=_("sets the text color of the logo")
+    )
+    banner_bg_hex = models.CharField(
+        blank=True,
+        null=True,
+        default='#11BC92',
+        max_length=15,
+        help_text=_("sets the bg color on the banner below the logo")
+    )
+    banner_text_hex = models.CharField(
+        blank=True,
+        null=True,
+        default='#FFF',
+        max_length=15,
+        help_text=_("sets the text color on the banner below the logo")
+    )
+    banner_text = models.CharField(
+        max_length=50,
+        null=True,
+        blank=True,
+        help_text=_("text which appears below banner")
+    )
+
 
     def __str__(self):
         return f"{self.round_num}"
@@ -817,6 +856,10 @@ def repr(self, user, build_absolute_uri):
 
         grant_tags = serializers.serialize('json', self.tags.all(),fields=['id', 'name'])
 
+        active_round_names= []
+        for active_round in self.in_active_clrs.all():
+            active_round_names.append(active_round.display_text)
+
         return {
                 'id': self.id,
                 'active': self.active,
@@ -877,7 +920,8 @@ def repr(self, user, build_absolute_uri):
                 'admin_message': self.admin_message,
                 'link_to_new_grant': self.link_to_new_grant.url if self.link_to_new_grant else self.link_to_new_grant,
                 'region': {'name':self.region, 'label':self.get_region_display()} if self.region and self.region != 'null' else None,
-                'has_external_funding': self.has_external_funding
+                'has_external_funding': self.has_external_funding,
+                'active_round_names': active_round_names
             }
 
     def favorite(self, user):

app/grants/templates/grants/detail/template-grant-details.html

@@ -317,6 +317,23 @@ <h2>$[[ grant.amount_received_in_round || 0 | round | formatNumber ]]</h2>
             <div v-if="grant?.clr_prediction_curve?.[0]?.[1] > 0" class="col col-4">
               <h2 class="text-secondary">+$[[ grant?.clr_prediction_curve?.[0]?.[1] || 0 | round | formatNumber ]]</h2>
               <span>estimated QF matching</span>
+              <i
+                class="fas fa-info-circle text-grey-400 mx-1 cursor-pointer"
+                id="tooltip-active-rounds"
+              ></i>
+              <b-tooltip target="tooltip-active-rounds" triggers="hover">
+                <div class="text-left p-2" style="min-width: 150px;">
+                  <p>The estimated match from the active matching rounds at this moment in time.
+                    <a href="https://gitcoin.co/blog/gitcoin-grants-quadratic-funding-for-the-world/" rel="noopener noreferrer" target="_blank">Learn more</a>
+                  </p>
+                  <p>
+                    This grant is currently part of [[ grant?.active_round_names.length ]] active matching rounds:
+                    <dl class="mt-0">
+                      <li v-for="round_name in grant.active_round_names">[[round_name]]</li>
+                    </dl>
+                  </p>
+                </div>
+              </b-tooltip>
             </div>
           </div>
         </div>

app/grants/templates/grants/landing/active_clr_round.html

@@ -0,0 +1,25 @@
+{% if has_active_rounds %}
+<div class="container-fluid grants-container">
+  <div class="container">
+    <div class="mx-0 mb-4 text-center text-md-left">
+      <h4 class="font-weight-bold mb-2">Discover Match Pools</h4>
+      <p class="font-subheader">Match pool categories curated by the Gitcoin Dao and community</p>
+    </div>
+
+    <div class="row">
+      {% if active_main_rounds %}
+        {% include 'grants/landing/round_by_type.html' with active_rounds=active_main_rounds %}
+      {% endif %}
+
+      {% if active_cause_rounds %}
+        {% include 'grants/landing/round_by_type.html' with active_rounds=active_cause_rounds %}
+      {% endif %}
+
+      {% if active_sponsor_rounds %}
+        {% include 'grants/landing/round_by_type.html' with active_rounds=active_sponsor_rounds %}
+      {% endif %}
+    </div>
+
+  </div>
+</div>
+{% endif %}

app/grants/templates/grants/landingpage.html → app/grants/templates/grants/landing/index.html

@@ -45,6 +45,17 @@
       align-items: center;
     }
 
+    .active-clr-banner {
+      height: 111px !important;
+    }
+
+    @media (max-width: 991.98px) {
+      .active-clr-banner .round-details p {
+        font-size: 20px;
+      }
+    }
+
+
   </style>
   <style class="page-styles">
     {% if grant_bg.inline_css %}{{grant_bg.inline_css}}{% endif %}
@@ -65,10 +76,10 @@
       {% endif %}
 
         <div id="grants-showcase">
-          {% include 'grants/shared/landing_qf_active.html' %}
+          {% include 'grants/landing/landing_qf_active.html' %}
           <div class="">
             <div v-if="isLandingPage" class="my-5">
-              {% include 'grants/shared/active_clr_round.html'%}
+              {% include 'grants/landing/active_clr_round.html'%}
             </div>
             <div class="mb-5">
               <div class="container">

app/grants/templates/grants/landing/round_by_type.html

@@ -0,0 +1,34 @@
+{% load humanize i18n grants_extra %}
+{% for active_round in active_rounds %}
+<div class="col-12 col-lg-6">
+  <a
+    href="/grants/explorer/?sub_round_slug={{ active_round.sub_round_slug }}&round_num={{ active_round.round_num }}&customer_name={{ active_round.customer_name }}"
+    class="active-clr-banner d-block text-decoration-none position-relative mt-3"
+  >
+    <div class="position-absolute w-100 h-100" style="
+        top: 0;
+        right: 0;
+        {% if active_round.logo %}
+          background:  url('{{ active_round.logo.url }}') no-repeat center;
+        {% endif %}
+      "
+    >
+    </div>
+    <div style="color: {{ active_round.logo_text_hex}}" class="round-details d-flex p-3 justify-content-between position-relative">
+      <p class="pr-5 font-bigger-1">{{ active_round.display_text|upper }}</p>
+
+      <div class="text-right">
+        <p class="mb-0 font-bigger-2 font-weight-light">${{ active_round.total_pot|humanize_short }}</span>
+        <p class="mt-0 text-muted font-smaller-1">available</span>
+      </div>
+    </div>
+  </a>
+
+  <div class="font-body d-flex" style="background-color: {{ active_round.banner_bg_hex }}; height: 45px;">
+    <p class="px-3 my-auto" style="color: {{active_round.banner_text_hex}} ">
+      {{ active_round.banner_text }}
+    </p>
+  </div>
+
+</div>
+{% endfor %}

app/grants/templatetags/grants_extra.py

@@ -75,3 +75,17 @@ def is_favorite(grant, profile):
         return grant.favorite(profile)
 
     return False
+
+
+@register.filter
+def humanize_short(number):
+    try:
+        number = float(number)
+        if number > 1000000:
+            number = str(round(number / 100000)) + 'M'
+        elif number > 1000:
+            number = str(round(number / 1000)) + 'K'
+    except:
+        pass
+
+    return number

app/grants/tests/factories/grant_clr_factory.py

@@ -16,3 +16,5 @@ class Meta:
     start_date = datetime.now()
     end_date = start_date + timedelta(weeks=2)
     is_active = True
+    type='main'
+    banner_text='text which appears below banner'

app/grants/tests/models/factories/grant_clr_factory.py

@@ -18,3 +18,5 @@ class Meta:
     start_date = datetime.now()
     end_date = start_date + timedelta(weeks=2)
     owner = factory.SubFactory(ProfileFactory)
+    type='main'
+    banner_text='text which appears below banner'