From c5e079da4e7c8beebea316bb70835d62315ee876 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 | 104 +++++++++++++++++ templates/gamification.html | 186 +++++++++++++++++++++++-------- 5 files changed, 261 insertions(+), 54 deletions(-) create mode 100644 static/css/gamification.css diff --git a/community/urls.py b/community/urls.py index 2abc594e..fac01d16 100644 --- a/community/urls.py +++ b/community/urls.py @@ -12,7 +12,7 @@ from twitter.view_twitter import index as twitter_index 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 @@ -200,7 +200,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..4fbf2dbb --- /dev/null +++ b/static/css/gamification.css @@ -0,0 +1,104 @@ +.bottom-center { + position: absolute; + width: 100px; + bottom: 2%; + left: 50%; + transform: translate(-50%, -50%); +} + +.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: 0px; + 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: 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: 890px){ + + .gamifier-card { + max-width: 100%; + width: auto; + margin: 10px; + } + + .gamifier-details { + max-width: 100%; + padding: 0px 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%; + } + + } +} diff --git a/templates/gamification.html b/templates/gamification.html index 48becb65..fa5c261c 100644 --- a/templates/gamification.html +++ b/templates/gamification.html @@ -1,50 +1,146 @@ - - - - - - - - - Newcomers Data - - -

The gamification leaderboard

-

Note: All the datetime is in UTC

-
- - - + + {% endfor %}{# for contributor in gamification_results #} + + +{% endblock %} +