feat: New Box Hackathon Feature on Townsquare (#6898)

* add: Feature Hackathon on townsquare #6870 * add: click on name hackathon #6870 * fixed: design features on hackthon box #6870 * re-indent Co-authored-by: Aditya Anand M C <[email protected]>
gitcoinco · Jun 25, 2020 · de3cad7 · de3cad7
1 parent 0e4eeb3
commit de3cad7
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 3 deletions.
diff --git a/app/assets/v2/css/town_square.css b/app/assets/v2/css/town_square.css
@@ -906,6 +906,7 @@ body.green.offer_view .announce {
 .townsquare_block-header.closed::after {
   content: "^"
 }
+
 #status .btn-group-toggle .btn-radio {
   background-color: var(--badge-blue-bg);
   color: var(--badge-blue-text);

diff --git a/app/retail/templates/emails/assets/css/activity_stream.css b/app/retail/templates/emails/assets/css/activity_stream.css
@@ -2,8 +2,9 @@
   cursor: pointer;
   font-size: 12px;
   padding: 3px;
-  background-color: #ecf0f4;
+  background-color: #fff;
   border: 0px solid;
+  color: #3d23fc;
 }
 
 .dark-mode #reflink {

diff --git a/app/townsquare/templates/townsquare/index.html b/app/townsquare/templates/townsquare/index.html
@@ -28,6 +28,63 @@
     <link rel="stylesheet" href="{% static "v2/css/activity_stream.css" %}">
     <link rel="stylesheet" href="{% static "v2/css/tag.css" %}">
     <link rel="stylesheet" href="{% static "v2/css/theme_switcher.css" %}">
+    <style>
+      img.hackathon-card-logo{
+        max-height: 5rem;
+        max-width: 5rem;
+        border-radius: .3rem;
+        background: rgb(25, 0, 63);
+      }
+
+      .hackathon-card-logo a {
+        color: #000000;
+      }
+
+      .townsquare_block-header.box-collapse {
+        background: #fff;
+        padding: 10px;
+        border-bottom: 1px solid #ddd;
+        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;
+      }
+
+      .box-hackathons .card-header {
+        border-bottom: none;
+        background-color: transparent;
+      }
+
+      .box-hackathons-townsquare .hackathon-actions {
+        font-weight: 700;
+        margin: 0;
+      }
+
+      .box-hackathons-townsquare .card-body {
+        padding: 11px 0;
+      }
+
+      .box-hackathons-townsquare .card-body .font-smaller-2 {
+        color: #666666;
+      }
+
+      .box-hackathons-townsquare .card-body .font-weight-semibold {
+        margin: 0;
+      }
+
+      .box-hackathons .view-all {
+        padding: 0px 0px 0px 20px;
+        font-weight: 700;
+      }
+    </style>
     <script src="{% static "v2/js/theme_switcher.js" %}"></script> <!-- needs to be in the head section -->
   </head>
 
@@ -140,6 +197,15 @@
               {% 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
+                  </div>
+                  {% include 'townsquare/shared/hackathons.html' %}
+                {% endif %}
+
                 {% include 'townsquare/shared/reflink.html' %}
 
                 <div class="townsquare_block-header text-left my-4 mt-sm-0 mb-sm-2" data-target="actions">

diff --git a/app/townsquare/templates/townsquare/shared/hackathons.html b/app/townsquare/templates/townsquare/shared/hackathons.html
@@ -0,0 +1,44 @@
+<div id="hackathons" class="mb-4 box-hackathons">
+  {% for hackathon in hackathon_tabs|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>From</span>
+            <time class="font-weight-bold" datetime="{{ hackathon.start_date|date:'c' }}">
+              {{ hackathon.start|date:"m/d/Y" }}
+            </time>
+            <span>To</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 all ></a>
+</div>
diff --git a/app/townsquare/templates/townsquare/shared/reflink.html b/app/townsquare/templates/townsquare/shared/reflink.html
@@ -1,6 +1,6 @@
                 {% if REFER_LINK %}
-                  <div class="townsquare_block-header text-left mb-1 mt-0" data-target="reflink_container">
-                    Ref Link <i data-toggle="tooltip" data-html="true" class="fas fa-info-circle mr-3" title="
+                  <div class="townsquare_block-header box-collapse text-left mb-1 mt-0" data-target="reflink_container">
+                    Ref A Friend! <i data-toggle="tooltip" data-html="true" class="fas fa-info-circle mr-3" title="
                     <strong>
                       Gitcoin is better with friends!
                     </strong> - 

diff --git a/app/townsquare/views.py b/app/townsquare/views.py
@@ -180,6 +180,9 @@ def get_sidebar_tabs(request):
         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,
                 'helper_text': f'Go to {hackathon.name} Townsquare.',