data/: Re-design the contributors webpage

Closes coala#258 , coala#240 , coala#231 ,
coala#141 , coala#139 , coala#141 , coala#140

community/urls.py

@@ -11,7 +11,7 @@
 from gci.feeds import LatestTasksFeed as gci_tasks_rss
 from twitter.view_twitter import index as twitter_index
 from log.view_log import index as log_index
-from data.views import index as contributors_index
+from data.views import ContributorsListView
 from gamification.views import index as gamification_index
 from meta_review.views import index as meta_review_index
 from inactive_issues.inactive_issues_scraper import inactive_issues_json
@@ -110,7 +110,7 @@ def get_organization():
         distill_file='log/index.html',
     ),
     distill_url(
-        r'contributors/$', contributors_index,
+        r'contributors/$', ContributorsListView.as_view(),
         name='community-data',
         distill_func=get_index,
         distill_file='contributors/index.html',

data/urls.py

@@ -1,7 +1,7 @@
 from django.conf.urls import url
 
-from . import views
+from .views import ContributorsListView
 
 urlpatterns = [
-    url(r'^$', views.index, name='index'),
+    url(r'^$', ContributorsListView.as_view(), name='index'),
 ]

data/views.py

@@ -1,8 +1,16 @@
+from django.views.generic import TemplateView
+
+from community.views import get_header_and_footer
 from data.models import Contributor
-from django.shortcuts import render
 
 
-def index(request):
-    contributors = Contributor.objects.all()
-    args = {'contributors': contributors}
-    return render(request, 'contributors.html', args)
+class ContributorsListView(TemplateView):
+    template_name = 'contributors.html'
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context = get_header_and_footer(context)
+        contrib_objects = Contributor.objects.all()
+        context['contributors'] = contrib_objects.order_by('-num_commits',
+                                                           'name')
+        return context

static/css/contributors.css

@@ -0,0 +1,64 @@
+.commits,
+.reviews,
+.issues-opened {
+    padding: 0px 5px;
+}
+
+.contributions {
+    margin: 10px;
+}
+
+.contributions p {
+    margin: 0px;
+}
+
+.contributors-cards {
+    display: flex;
+    justify-content: space-evenly;
+    flex-flow: row wrap;
+    margin: 50px;
+}
+
+.contributor-card {
+    background-color: #efefef;
+    box-shadow: 0px 0px 25px 2px black;
+    border-radius: 30px;
+    margin: 0px 15px 20px 15px;
+    width: 220px;
+    border: 5px #c0c5d1 solid;
+}
+
+.contributors-section .fa-close {
+    display: none;
+}
+
+.contributor-details {
+    text-align: center;
+}
+
+.contributor-image img {
+    border-radius: 30px 30px 0px 0px;
+    width: 210px;
+}
+
+.form-fields {
+    margin-top: 3%;
+    width: 40%;
+    min-width: 300px;
+}
+
+.search-results {
+    width: 100%;
+    background-color: transparent;
+    border-radius: 30px;
+    overflow: auto;
+    padding: 0px 20px;
+    max-height: 150px;
+    display: none;
+}
+
+.side-border {
+    border-width: 0px 0px 0px 1px;
+    border-color: darkgray;
+    border-style: solid;
+}

static/js/contributors.js

@@ -0,0 +1,64 @@
+$(document).ready(function(){
+    var search_input = $('#search');
+    var close_icon = $('.contributors-section .fa-close');
+    var results_body = $('.search-results-tbody');
+    var searched_keyword = null;
+
+    function appendChildren(element, username, el_result_value,
+                            hide_all_contributors){
+        var result_td = $('<tr></tr>').text(el_result_value);
+        result_td.id = "td-" + username;
+        if(hide_all_contributors){
+            result_td.on('click', function(){
+                var row_id = result_td.id;
+                var login = row_id.replace('td-', '');
+                $('.contributor-card').css('display', 'none');
+                $('[login=' + login +']').css('display', 'block');
+                $('.search-results').css('display', 'none');
+            });
+        }
+        element.append(result_td);
+    }
+
+    search_input.on('keypress keyup', function(){
+        searched_keyword = search_input.val();
+        if(searched_keyword === ''){
+            $('.search-results').css('display', 'none');
+            close_icon.css('display', 'none');
+        }
+        else {
+            $('.search-results').css('display', 'block');
+            close_icon.css('display', 'block');
+            var search_by_login = $('[login^=' + searched_keyword +']');
+            var search_by_name = $('[name^=' + searched_keyword +']');
+            var results_tbody_tr = $('.search-results-tbody tr');
+            results_tbody_tr.remove();
+            if(search_by_login.length + search_by_name.length === 0 ){
+                appendChildren(results_body, null, 'No results found!', false);
+            }
+            else {
+                var all_results = search_by_login.add(search_by_name);
+                for(var contrib in all_results.get()){
+                    if(all_results[contrib]){
+                        var login = all_results[contrib].getAttribute('login');
+                        var name = all_results[contrib].getAttribute('name');
+                        var result_value = null;
+                        if(name){
+                            result_value = login + " (" + name + ")";
+                        }
+                        else {
+                            result_value = login;
+                        }
+                        appendChildren(results_body, login, result_value, true);
+                    }
+                }
+            }
+        }
+    });
+
+    close_icon.on('click', function(){
+        $('.contributor-card').css('display', 'block');
+        close_icon.css('display', 'none');
+        search_input.val(null);
+    });
+});

templates/contributors.html

@@ -1,40 +1,95 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-    <title>Contributors Data</title>
-  </head>
-  <body>
-    <h1>Details of all the contributors</h1>
-    <ul>
-      {% for contributor in contributors %}
-      <div class="container">
-        <div class="row">
-          <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-              <div class="caption">
-                <p>login: {{ contributor.login }}</p>
-                <p>name: {{ contributor.name }}</p>
-                <p>bio: {{ contributor.bio }}</p>
-                <p>num_commits: {{ contributor.num_commits }}</p>
-                <p>reviews: {{ contributor.reviews }}</p>
-                <p>issues_opened: {{ contributor.issues_opened }}</p>
-                <p>teams:
-                {% for team in contributor.teams.all %}
-                    {{ team.name }}
-                {% endfor %}{# for team in contributor.teams.all #}
-                </p>
-              </div>
-            </div>
-          </div>
+{% extends 'base.html' %}
+{% load staticfiles %}
+{% block title %}
+  Community | Contributors
+{% endblock %}
+
+{% block add_css_files %}
+  <link rel="stylesheet" href="{% static 'css/contributors.css' %}">
+{% endblock %}
+
+{% block add_js_files %}
+  <script src="{% static 'js/contributors.js' %}"></script>
+{% endblock %}
+
+{% block main-content %}
+
+  <div class="web-page-details apply-flex center-content">
+    <h3 style="padding-right: 15px">~</h3>
+    <h3 class="page-name">
+      Our Precious Contributors
+    </h3>
+    <h3 style="padding-left: 15px">~</h3>
+  </div>
+
+  <div class="apply-flex center-content">
+    <p class="container web-page-description">
+      Contributor's who've been putting their hard-work to make {{ org.name }} best of its
+      own. Thanks to all contributors to make {{ org.name }} what is it today.
+    </p>
+  </div>
+
+  <div class="contributors-section apply-flex center-content">
+    <div class="form-fields">
+      <form>
+        <div class="input-field apply-flex center-content search-field">
+          <i class="fa fa-search social-icons"></i>
+          <input id="search" type="search" autocomplete="off" placeholder="Search by username or name" required>
+          <i class="fa fa-close social-icons"></i>
         </div>
+      </form>
+    <div class="apply-flex center-content">
+    </div>
+      <div class="search-results">
+        <table>
+          <thead>
+            <tr>
+              <th>Search Results</th>
+            </tr>
+          </thead>
+          <tbody class="search-results-tbody large-font">
+            <tr>
+              <td>
+                No results found!
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-      <hr>
-      {% endfor %}{# for contributor in contributors #}
-    </ul>
-  </body>
-</html>
+    </div>
+  </div>
+
+  <div class="contributors-cards">
+  {% for contributor in contributors %}
+  <div class="contributor-card" login="{{ contributor.login }}" name="{{ contributor.name }}">
+    <div class="contributor-image">
+      <img src="//github.com/{{ contributor.login }}.png/?size=210">
+    </div>
+    <div class="contributor-details">
+      <a class="bold-font large-font" href="//github.com/{{ contributor.login }}" target="_blank">
+        {% if contributor.name %}
+        {{ contributor.name }}
+        {% else %}
+        {{ contributor.login }}
+        {% endif %}{# if contributor.name #}
+      </a>
+      <div class="apply-flex evenly-spread-content contributions gray-font-color">
+        <div class="commits">
+          <p>{{ contributor.num_commits }}</p>
+          <p class="bold-text">Commits</p>
+        </div>
+        <div class="reviews">
+          <p>{{ contributor.reviews }}</p>
+          <p class="bold-text">Reviews</p>
+        </div>
+        <div class="issues-opened">
+          <p>{{ contributor.issues_opened }}</p>
+          <p class="bold-text">Issues</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endfor %}{# for contributor in contributors #}
+  </div>
+
+{% endblock %}