add upcoming feature and tags gitcoinco#6870

app/assets/v2/css/town_square.css

@@ -1366,3 +1366,23 @@ body.green.offer_view .announce {
   margin-bottom: 2px;
   margin-top: 2px;
 }
+
+.tag-hackathon{
+  background-color: rgb(247, 241, 252);
+  color: rgb(146, 66, 195);
+  padding: 4px;
+  display: inline-block;
+}
+
+.tag-workshop{
+  background-color: rgb(239, 250, 249);
+  color: rgb(59, 169, 153);
+  padding: 4px;
+
+}
+
+.tag-grants{
+  background-color: rgb(240, 240, 245);
+  color: rgb(22, 14, 93);
+  padding: 4px;
+}

app/townsquare/templates/townsquare/index.html

@@ -47,13 +47,13 @@
         text-transform: none;
         border-radius: 5px 5px 0 0;
       }
-      
+
       .box-hackathons {
         background: #ffff;
         border-bottom: 1px solid #ddd;
         border-radius: 0 0 5px 5px;
       }
-      
+
       .box-hackathons .card {
         border: none;
       }
@@ -79,7 +79,7 @@
       .box-hackathons-townsquare .card-body .font-weight-semibold {
         margin: 0;
       }
-      
+
       .box-hackathons .view-all {
         padding: 0px 0px 0px 20px;
         font-weight: 700;
@@ -197,13 +197,17 @@
               {% if SHOW_DRESSING %}
 
                 {% include 'townsquare/shared/tribe.html' %}
-               
+
 
                 {% if hackathon_tabs|length %}
                   <div class="townsquare_block-header box-collapse  mt-1" data-target="hackathons">
-                    Gitcoin Hackathons
+                    Happining Now
                   </div>
                   {% include 'townsquare/shared/hackathons.html' %}
+                  <div class="townsquare_block-header  mt-1" data-target="hackathons">
+                    Upcoming
+                  </div>
+                  {% include 'townsquare/shared/upcoming.html' %}
                 {% endif %}
 
                 {% include 'townsquare/shared/reflink.html' %}

app/townsquare/templates/townsquare/shared/hackathons.html

@@ -21,10 +21,10 @@ <h5 class="font-subheader font-weight-semibold">
                         </a>
                     </h5>
                     <div class="font-smaller-2">
-                        <span class>From</span>
+                      <span class="tag-hackathon">Hackathon</span>
                         <time class="font-weight-bold"
                             datetime="{{ hackathon.start_date|date:'c' }}">{{ hackathon.start|date:"m/d/Y" }}</time>
-                        <span>To</span>
+                        <span>-</span>
                         <time class="font-weight-bold"
                             datetime="{{ hackathon.end_date|date:'c' }}">{{ hackathon.end|date:"m/d/Y" }}</time>
                     </div>
@@ -39,5 +39,4 @@ <h5 class="font-subheader font-weight-semibold">
             </div>
         </div>
     {% endfor %}
-    <a href="https://gitcoin.co/hackathon-list/" class="view-all">View all ></a>
 </div>

app/townsquare/templates/townsquare/shared/upcoming.html

@@ -0,0 +1,43 @@
+<div id="upcoming-events" class="mb-4">
+  {% for hackathon in upcoming_events|slice:":5" %}
+  <div class="box-hackathons-townsquare">
+      <div class="card flex-row" id="{{hackathon.slug}}">
+          <div class="card-header">
+              {% firstof hackathon.logo_svg or hackathon.logo as logo %}
+              {% if logo %}
+              <img class="hackathon-card-logo" src="{{MEDIA_URL}}{{logo}}" alt="Hackathon logo" />
+              {% else %}
+              <div class="hackathon-card-logo text-center px-3 font-caption">
+                  <a href="{% url 'hackathon_onboard' hackathon.slug %}">  {{ hackathon.title }} </a>
+              </div>
+              {% endif %}
+          </div>
+
+          <div class="card-body">
+              <h5 class="font-subheader font-weight-semibold">
+                  <a href="{% url 'hackathon' hackathon.slug %}" class="text-black" target="_blank"
+                      rel="noopener noreferrer">
+                      {{ hackathon.title }}
+                  </a>
+              </h5>
+              <div class="font-smaller-2">
+                <span class="tag-hackathon">Hackathon</span>
+                  <time class="font-weight-bold"
+                      datetime="{{ hackathon.start_date|date:'c' }}">{{ hackathon.start|date:"m/d/Y" }}</time>
+                  <span>-</span>
+                  <time class="font-weight-bold"
+                      datetime="{{ hackathon.end_date|date:'c' }}">{{ hackathon.end|date:"m/d/Y" }}</time>
+              </div>
+              <div class="mt-1 hackathon-actions">
+                  {% if hackathon.end|timesince <= "1 min" %}
+                  <a href="{% url 'hackathon_onboard' hackathon.slug %}">
+                      Join Hackathon >
+                  </a>
+                  {% endif %}
+              </div>
+          </div>
+      </div>
+  </div>
+  {% endfor %}
+  <a href="https://gitcoin.co/hackathon-list/" class="view-all">View more events</a>
+</div>

app/townsquare/views.py

@@ -176,6 +176,7 @@ def get_sidebar_tabs(request):
     start_date = timezone.now() + timezone.timedelta(days=10)
     end_date = timezone.now() - timezone.timedelta(days=7)
     hackathons = HackathonEvent.objects.filter(start_date__lt=start_date, end_date__gt=end_date, visible=True)
+    upcoming = HackathonEvent.objects.upcoming().filter(start_date__lt=start_date, end_date__gt=end_date, visible=True).order_by('start_date'),
     if hackathons.count():
         for hackathon in hackathons:
             connect = {
@@ -188,7 +189,17 @@ def get_sidebar_tabs(request):
                 'helper_text': f'Go to {hackathon.name} Townsquare.',
             }
             hackathon_tabs = [connect] + hackathon_tabs
-
+    if upcoming.count():
+        for hackathon in hackathons:
+            connect = {
+                'title': hackathon.name,
+                'logo': hackathon.logo,
+                'start': hackathon.start_date,
+                'end': hackathon.end_date,
+                'slug': f'hackathon:{hackathon.pk}',
+                'url_slug': hackathon.slug,
+            }
+            upcoming_events = [connect] + upcoming_events
 
     # set tab
     if request.COOKIES.get('tab'):