From 0bde2e1517d240d6cfb3bae8f53a5bd5042135d3 Mon Sep 17 00:00:00 2001 From: kvgarg Date: Sat, 15 Jun 2019 00:43:04 +0530 Subject: [PATCH] gamification/: Redesign the webpage The redesigned webpages provides a enhanced UI/UX design to web-page with additional functionality of searching the contributors. Closes https://github.com/coala/community/issues/260 --- community/urls.py | 4 +- gamification/tests/test_views.py | 2 +- gamification/views.py | 19 +++- static/css/gamification.css | 71 ++++++++++++ templates/gamification.html | 186 +++++++++++++++++++++++-------- 5 files changed, 226 insertions(+), 56 deletions(-) create mode 100644 static/css/gamification.css diff --git a/community/urls.py b/community/urls.py index da4fd519..105d38f1 100644 --- a/community/urls.py +++ b/community/urls.py @@ -12,7 +12,7 @@ from twitter.view_twitter import index as twitter_index from log.view_log import index as log_index 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 @@ -206,7 +206,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', diff --git a/gamification/tests/test_views.py b/gamification/tests/test_views.py index 64e270c7..fa7a1a22 100644 --- a/gamification/tests/test_views.py +++ b/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) diff --git a/gamification/views.py b/gamification/views.py index 25b14243..821c7fd2 100644 --- a/gamification/views.py +++ b/gamification/views.py @@ -1,10 +1,17 @@ -from django.shortcuts import render +from django.views.generic import TemplateView +from django.db.models import Q +from community.views import get_header_and_footer from gamification.models import Participant -def index(request): - Participant.objects.filter(username__startswith='testuser').delete() - participants = Participant.objects.all() - args = {'participants': participants} - return render(request, 'gamification.html', args) +class GamificationResults(TemplateView): + template_name = 'gamification.html' + + def get_context_data(self, **kwargs): + context = super().get_context_data(**kwargs) + context = get_header_and_footer(context) + participants = Participant.objects.all().exclude( + Q(username__startswith='testuser')) + context['gamification_results'] = participants + return context diff --git a/static/css/gamification.css b/static/css/gamification.css new file mode 100644 index 00000000..f297d7b3 --- /dev/null +++ b/static/css/gamification.css @@ -0,0 +1,71 @@ +.bottom-center { + position: absolute; + bottom: 2%; + left: 50%; + transform: translate(-50%, -50%); +} + +.contributor-details-part-1, +.contributor-details-part-2, +.contributor-details-part-3 { + width: 25%; + max-height: 80%; + overflow: auto; + overflow-wrap: break-word; +} + +.contributor-details-part-3 { + padding-left: 5px; + border-left: 1px #37474f solid; +} + +.gamifier-card { + width: 100%; + min-height: 380px; +} + +.github-icon { + color: white; + background-color: black; + border-radius: 100px; +} + +.gitlab-icon { + color: #e33834; + border-radius: 100px; +} + +.filter-btn { + width: 107px; + margin-top: 3%; + margin-left: 3%; +} + +.filter-btn .btn { + text-transform: none; + border-radius: 100px; + box-shadow: 0px 0px 25px 2px black; +} + +.social-icons { + font-size: 1.5em; +} + +@media only screen and (max-width: 1107px){ + .contributor-details-part-2 { + width: 29%; + } + .contributor-details-part-3 { + display: none; + } + @media only screen and (max-width: 693px){ + .contributor-details-part-1, + .contributor-details-part-2 { + width: 31%; + } + + .bottom-center { + bottom: -57%; + } + } +} diff --git a/templates/gamification.html b/templates/gamification.html index 48becb65..1f2e4d40 100644 --- a/templates/gamification.html +++ b/templates/gamification.html @@ -1,50 +1,142 @@ - - - - - - - - - Newcomers Data - - -

The gamification leaderboard

-

Note: All the datetime is in UTC

-
- - - + + {% if contributor.activities.all|slice:"1:4" %} +
+ {% for activity in contributor.activities.all|slice:"1:4" %} + + {{ forloop.counter|add:1 }}. {{ activity.name }}, performed-on: {{ activity.performed_at }} + + {% endfor %}{# for activity in contributor.activities.all|slice:"1:4" #} +
+ {% endif %}{# if contributor.activities.all|slice:"1:4" #} + {% if contributor.activities.all|slice:"4:7" %} +
+ {% for activity in contributor.activities.all|slice:"4:7" %} + + {{ forloop.counter|add:4 }}. {{ activity.name }}, performed-on: {{ activity.performed_at }} + + {% endfor %}{# for activity in contributor.activities.all|slice:"4:7" #} +
+ {% endif %}{# if contributor.activities.all|slice:"4:7" #} + + {% endfor %}{# for contributor in gamification_results #} + + +{% endblock %} +