gamification/: Redesign the webpage

The redesigned webpages provides a enhanced
UI/UX design to web-page with additional
functionality of searching the contributors.

Closes coala#260

community/urls.py

@@ -11,7 +11,7 @@
 from gci.feeds import LatestTasksFeed as gci_tasks_rss
 from ci_build.view_log import BuildLogsView
 from data.views import ContributorsListView
-from gamification.views import index as gamification_index
+from gamification.views import GamificationResults
 from meta_review.views import ContributorsMetaReview
 from inactive_issues.inactive_issues_scraper import inactive_issues_json
 from openhub.views import index as openhub_index
@@ -193,7 +193,7 @@ def get_organization():
         distill_file='static/unassigned-issues.json',
     ),
     distill_url(
-        r'gamification/$', gamification_index,
+        r'gamification/$', GamificationResults.as_view(),
         name='community-gamification',
         distill_func=get_index,
         distill_file='gamification/index.html',

gamification/tests/test_views.py

@@ -25,4 +25,4 @@ def test_view_uses_correct_template(self):
     def test_all_contributors_on_template(self):
         resp = self.client.get(reverse('community-gamification'))
         self.assertEqual(resp.status_code, 200)
-        self.assertTrue(len(resp.context['participants']) == 10)
+        self.assertTrue(len(resp.context['gamification_results']) == 10)

gamification/views.py

@@ -1,10 +1,79 @@
-from django.shortcuts import render
+import json
 
-from gamification.models import Participant
+from django.views.generic import TemplateView
 
+from community.views import get_header_and_footer
+from gamification.models import Participant, Level, Badge
 
-def index(request):
-    Participant.objects.filter(username__startswith='testuser').delete()
+
+class GamificationResults(TemplateView):
+    template_name = 'gamification.html'
     participants = Participant.objects.all()
-    args = {'participants': participants}
-    return render(request, 'gamification.html', args)
+
+    def get_users_username(self, users):
+        """
+        :param users: A Queryset, with a field username
+        :return: A list of usernames
+        """
+        usernames = list()
+        for user in users:
+            usernames.append(user.username)
+        return usernames
+
+    def group_participants_by_score(self):
+        """
+        Divide the participants according to their scores. For example, if
+        there are 10 contributors who have different scores and there are
+        possibly 4 ranges i.e. score_gt 80, score_between (70,80),
+        score_between (60,70) and score_lt 60. So, divide them and put them
+        in their respective lists.
+        :return: A Dict, with key as score_range and value a list of
+        contributors username
+        """
+        scores = set()
+        for contrib in self.participants:
+            scores.add(contrib.score)
+
+        scores = list(scores)
+        scores.sort()
+
+        try:
+            min_score, max_score = scores[0], scores[-1]
+        except IndexError:
+            return dict()
+
+        difference_bw_groups_score = int(max_score/5)
+        score_ranges = [
+            min_score + i * difference_bw_groups_score for i in range(6)
+        ]
+        score_ranges[-1] += max_score % 5
+
+        grouped_participants = dict()
+        for index, score in enumerate(score_ranges[1:]):
+            begin_score, end_score = score_ranges[index], score
+
+            filtered_participants = self.participants.filter(
+                score__range=[begin_score, end_score]
+            )
+
+            if begin_score == min_score:
+                grp_lvl = f'<{end_score}'
+            elif end_score < max_score:
+                grp_lvl = f'>={begin_score} and <{end_score}'
+            else:
+                grp_lvl = f'>={begin_score}'
+
+            grouped_participants[grp_lvl] = json.dumps(
+                self.get_users_username(filtered_participants)
+            )
+        return grouped_participants
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context = get_header_and_footer(context)
+        context['gamification_results'] = self.participants
+        context['levels'] = Level.objects.all()
+        context['badges'] = Badge.objects.all()
+        context['grouped_participants'] = self.group_participants_by_score()
+
+        return context

static/css/gamification.css

@@ -0,0 +1,165 @@
+.badge-filter {
+    width: 150px;
+}
+
+.bottom-center {
+    position: absolute;
+    width: 100px;
+    bottom: 2%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.clear-filters {
+    cursor: pointer;
+}
+
+.gamifier-details {
+    max-width: 79%;
+    display: flex;
+}
+
+.gamifier-details-part-1,
+.gamifier-details-part-2,
+.gamifier-details-part-3 {
+    max-width: 44%;
+    max-height: 80%;
+    padding: 10px 5px;
+}
+
+.gamifier-card {
+    width: 100%;
+    min-height: 380px;
+}
+
+.gamifier-image {
+    width: 20%;
+}
+
+.gamifier-image img{
+    width: 90%;
+    margin-right: 0;
+    margin-left: 1%;
+    min-width: 100px;
+
+}
+
+.github-icon {
+    color: white;
+    background-color: black;
+    border-radius: 100px;
+}
+
+.gitlab-icon {
+    color: #e33834;
+    border-radius: 100px;
+}
+
+.filter-btn {
+    width: 250px;
+    margin-top: 3%;
+    margin-left: 3%;
+    z-index: 0;
+}
+
+.filter-btn .btn-large {
+    border-radius: 100px;
+}
+
+.filter-btn .btn {
+    text-transform: none;
+    border-radius: 100px;
+    box-shadow: 0 0 25px 2px black;
+}
+
+.filters-option {
+    margin: 3% auto auto;
+    display: none;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+.filter-select-fields {
+    width: 50%;
+    min-width: 350px;
+    box-shadow: 0 0 15px 2px black;
+    border-radius: 20px;
+}
+
+.level-filter {
+    width: 145px;
+}
+
+.no-contribs-found {
+    display: none;
+    justify-content: center;
+}
+
+.no-contribs-found h5 {
+    margin: 0;
+}
+
+.score-filter {
+    width: 175px;
+}
+
+.social-icons {
+    font-size: 1.5em;
+}
+
+@media only screen and (max-width: 890px){
+
+    .gamifier-card {
+        max-width: 100%;
+        width: auto;
+        margin: 10px;
+    }
+
+    .gamifier-details {
+        max-width: 100%;
+        padding: 0 10px;
+    }
+
+    .gamifier-image {
+        margin: auto;
+        width: 35%;
+    }
+
+    .bottom-center {
+        bottom: 2%;
+    }
+
+    @media only screen and (max-width: 526px){
+
+        .gamifier-details-part-3 {
+            display: none;
+        }
+
+        .gamifier-details-part-1,
+        .gamifier-details-part-2 {
+            max-width: 50%;
+        }
+
+        .gamifier-image {
+            width: 50%;
+        }
+
+    }
+}
+
+@-webkit-keyframes fade-in {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+}
+
+@keyframes fade-in {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+}
+
+.fade-in {
+    -webkit-animation-name: fade-in;
+    animation-name: fade-in;
+}

static/js/contributors.js

@@ -35,8 +35,12 @@ $(document).ready(function(){
         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 search_by_login = $(
+              '.contributor-card[login^=' + searched_keyword +']'
+            );
+            var search_by_name = $(
+              '.contributor-card[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 ){