Merge pull request #5056 from gitcoinco/hackathon-onboard

Hackathon onboard

app/app/urls.py

@@ -157,6 +157,7 @@
 
     # Hackathons / special events
     path('hackathon/<str:hackathon>/', dashboard.views.hackathon, name='hackathon'),
+    path('hackathon/onboard/<str:hackathon>/', dashboard.views.hackathon_onboard, name='hackathon_onboard'),
     path('hackathon/', dashboard.views.hackathon, name='hackathon_idx'),
     path('hackathon-list/', dashboard.views.get_hackathons, name='get_hackathons'),
 

app/assets/v2/css/base.css

@@ -347,6 +347,15 @@ p a {
   color: #25e899;
 }
 
+.link-current {
+  color: currentColor;
+}
+
+.link-current:hover {
+  color: currentColor;
+  text-decoration: none;
+}
+
 .cta-green {
   background-color: var(--gc-green);
   text-align: center;

app/assets/v2/js/base.js

@@ -280,37 +280,28 @@ const sendPersonal = (persona) => {
     $('#persona_modal').bootstrapModal('hide');
     const urls = [
       {
-        url: document.location.href,
-        redirect: '/onboard/funder'
-      },
-      {
-        url: '/bounties/funder',
-        redirect: '/onboard/funder'
-      },
-      {
-        url: '/contributor',
-        redirect: '/onboard/contributor'
+        url: '/hackathon/onboard'
       }
     ];
 
-    const checkUrl = (arr, val) => {
+    const checkUrlRedirect = (arr, val) => {
       return arr.some(arrObj => {
         if (val.indexOf(arrObj.url) >= 0) {
-          return true;
+          return false;
         }
-        return false;
+        return true;
       });
     };
 
     if (response.persona === 'persona_is_funder') {
-      if (checkUrl(urls, document.location.href)) {
+      if (checkUrlRedirect(urls, document.location.href)) {
         window.location = '/onboard/funder';
       } else {
         return _alert(gettext('Thanks, you can read the guide <a href="/how/funder">here.</a>'), 'info');
       }
 
     } else if (response.persona === 'persona_is_hunter') {
-      if (checkUrl(urls, document.location.href)) {
+      if (checkUrlRedirect(urls, document.location.href)) {
         window.location = '/onboard/contributor';
       } else {
         return _alert(gettext('Thanks, you can read the guide <a href="/how/contributor">here.</a>'), 'info');

app/dashboard/templates/addinterest.html

@@ -41,13 +41,22 @@ <h5 class="font-subheader">{% trans "Non-Disclosure Agreement" %}</h5>
             </div>
           {% endif %}
           <div>
+            {% if bounty.event %}
+              <p class="alert-danger p-2">
+                This bounty is part of hackathon, please read the <a href="{% url 'hackathon_onboard' bounty.event.slug %}" target="_blank">rules to participate</a> before you continue.
+              </p>
+            {% endif %}
             <label for="issue_message">
-              <span>
-                {% trans "Provide an action plan and any initial questions you have for this ticket." %} <br>
+              <p>
+                {% trans "Provide an action plan and any initial questions you have for this ticket." %}
+                {% if bounty.event %}
+                  {% trans "Include gitcoin team members usernames and project repo url, if you have one." %}
+                {% endif %}
+                <br>
                 <span class="font-smaller-4">
                   ({% trans "Your response will be reflected in a comment on the Github issue." %})
                 </span>
-              </span>
+              </p>
             </label>
             <textarea id="issue_message" class="form__input"></textarea>
           </div>

app/dashboard/templates/dashboard/hackathon_onboard.html

@@ -0,0 +1,117 @@
+{% comment %}
+  Copyright (C) 2018 Gitcoin Core
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program. If not, see <http://www.gnu.org/licenses/>.
+{% endcomment %}
+
+{% load i18n static %}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {% include 'shared/head.html' %}
+    {% include 'shared/cards.html' %}
+    <style>
+      .onboard-banner {
+        background: {% firstof hackathon.background_color or 'white' %};
+        color: {% firstof hackathon.text_color or 'black' %};
+      }
+    </style>
+  </head>
+  <body class="interior {{active}} g-font-muli">
+    {% include 'shared/tag_manager_2.html' %}
+    <div class="container-fluid header dash">
+      {% include 'shared/top_nav.html' with class='d-md-flex' %}
+      {% include 'shared/nav.html' %}
+      <div class="onboard-banner text-center p-4">
+          {% firstof hackathon.logo_svg or hackathon.logo as logo %}
+          {% if logo %}
+            <img class="" width="364" src="{{MEDIA_URL}}{{logo}}"/>
+          {% else %}
+            <div class=" d-flex align-items-center justify-content-around font-bigger-4 text-center text-white">
+              {{ hackathon.name }}
+            </div>
+          {% endif %}
+        <h1>{{hackathon.name}} Guide</h1>
+        {{ hackathon.start_date|date:"M j, Y" }} - {{ hackathon.end_date|date:"M j, Y" }}
+
+      </div>
+    </div>
+
+    <div class="container">
+
+      {% if hackathon.end_date|timesince >= "1 min" %}
+        <p class="p-3 mt-3 alert-warning">This hackathon event had ended at {{hackathon.end_date}}, please check the <a href="{% url 'get_hackathons' %}">ongoing hackathons</a>.</p>
+      {% endif %}
+      <div class="row py-5">
+        <div class="col-12">
+          <div class="mb-4">
+            <h2>How the hackathon works?</h2>
+            <p>Our hackathon is formed by many prizes from diferent open source organisations, you can <a href="{% url 'hackathon' hackathon.slug %}#bounties">check the prizes</a> </p>
+          </div>
+
+          <div class="mb-4">
+            <h2>How to participate?</h2>
+            {% if not github_handle %}
+              <p>First of all you need to connect to gitcoin with your github account. </p>
+              <a class="btn btn-gc-purple my-3" href="{% url 'social:begin' 'github' %}?next={{ request.get_full_path }}"
+                onclick="dataLayer.push({'event': 'login'});">
+                <i class="fab fa-github"></i>
+                <span>{% trans "Login with github" %}</span>
+              </a>
+            {% endif %}
+            <ul class="list-group mt-4">
+              <li class="list-group-item"><a target="_blank" href="https://discord.gg/TxRKTn8">Join Discord</a> - You will able to get updates from our sponsors prizes and find help.</li>
+              <li class="list-group-item"><a target="_blank" href="https://github.com/gitcoinco/{{hackathon.slug}}-teams">Create or Join a team</a> - To participate in <b>{{hackathon.name}}</b> we recommend you to have a team, but you can do it alone also.</li>
+              <li class="list-group-item"><a href="#startSubmit" data-toggle="modal">Start/Submit Work via Gitcoin</a> - Follow this guide to understand how Gitcoin works.</li>
+            </ul>
+
+          </div>
+          <!-- Modal -->
+          <div class="modal fade" id="startSubmit" tabindex="-1" role="dialog" aria-labelledby="startSubmitLabel" aria-hidden="true">
+            <div class="modal-dialog modal-lg" role="document">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h5 class="modal-title" id="startSubmitLabel">Start/Submit Work via Gitcoin</h5>
+                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </div>
+                <div class="modal-body">
+                  <p>When your team is formed and you know the prizes you want to compete for you can <b>“Start Work”</b> through Gitcoin using the button on the prize page.</p>
+                  <img class="mw-100 my-3" src="https://i1.wp.com/gitcoin.co/blog/wp-content/uploads/2019/07/Screen-Shot-2019-07-30-at-5.28.09-PM.png?w=2082&ssl=1" alt="">
+                  <p>Then, when your project is completed and you have submitted a pull request or set up a repository with your code and deliverables, it’s time to submit work! Submitting work allows judges to review see your work along with other submissions, and helps them pay you and your teammates out directly. Submit your work by clicking the <b>“Submit Work”</b> button on the prize page, right where the <b>“Start Work”</b> button was before (shown above). Note that you should have already clicked <b>“Start Work”</b> earlier for the <b>“Submit Work”</b> button to appear. Be sure to include your teammates Gitcoin addresses in your project’s readme/front page so that judges can pay them out, too.</p>
+                  <p>And that’s it! Your submission will be reviewed by judges and, if you are the winning submission, you and your teammates will be paid the prize amount in cryptocurrency directly to the ETH address associated with your Gitcoin profile.</p>
+                </div>
+                <div class="modal-footer">
+                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <h2>Ready?</h2>
+            <p>Now lets go create something amazing, remember you have time until <b>{{hackathon.end_date}}</b> </p>
+            <p>
+              <a class="btn btn-lg btn-gc-pink" href="{% url 'hackathon' hackathon.slug %}">Start Hacking</a>
+            </p>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    {% include 'shared/analytics.html' %}
+    {% include 'shared/footer_scripts.html' %}
+    {% include 'shared/footer.html' %}
+    {% include 'shared/messages.html' %}
+  </body>

app/dashboard/templates/dashboard/hackathons.html

@@ -66,6 +66,12 @@ <h5 class="card-title"><a href="{% url 'hackathon' hackathon.slug %}">{{ hackath
               <div class="small">
                 Ends: <time class="" datetime="{{ hackathon.end_date|date:'c' }}" title="{{ hackathon.end_date }}">{{ hackathon.end_date|date:"m/d/Y" }}</time>
               </div>
+              <div class="text-center mt-3">
+                {% if hackathon.end_date|timesince <= "1 min" %}
+                  <a href="{% url 'hackathon_onboard' hackathon.slug %}" class="btn btn-gc-blue">Join</a>
+                {% endif %}
+                <a href="{% url 'hackathon' hackathon.slug %}" class="btn btn-gc-blue">Prizes</a>
+              </div>
             </div>
           </div>
         </div>

app/dashboard/templates/dashboard/index.html

@@ -56,6 +56,11 @@
           </span>
         </div>
         {% include 'shared/hackathon_sponsors.html' %}
+        {% if hackathon.end_date|timesince <= "1 min" %}
+          <div class="col">
+            <a href="{% url 'hackathon_onboard' hackathon.slug %}" class="link-current font-bigger-2 underline"> How to Participate</a>
+          </div>
+        {% endif %}
       </div>
     {% else %}
       {% include 'dashboard/ftux.html' %}

app/dashboard/views.py

@@ -2885,6 +2885,20 @@ def hackathon(request, hackathon=''):
     return TemplateResponse(request, 'dashboard/index.html', params)
 
 
+def hackathon_onboard(request, hackathon=''):
+
+    try:
+        hackathon_event = HackathonEvent.objects.filter(slug__iexact=hackathon).latest('id')
+    except HackathonEvent.DoesNotExist:
+        hackathon_event = HackathonEvent.objects.last()
+    params = {
+        'active': 'hackathon_onboard',
+        'title': 'Hackathon Onboard',
+        'hackathon': hackathon_event,
+    }
+    return TemplateResponse(request, 'dashboard/hackathon_onboard.html', params)
+
+
 def get_hackathons(request):
     """Handle rendering all Hackathons."""