Skip to content

Commit 0bde2e1

Browse files
KVGargKVGarg
committed
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
1 parent f5e7100 commit 0bde2e1

File tree

5 files changed

+226
-56
lines changed

5 files changed

+226
-56
lines changed

‎community/urls.py

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
from twitter.view_twitter import index as twitter_index
1313
from log.view_log import index as log_index
1414
from data.views import ContributorsListView
15-
from gamification.views import index as gamification_index
15+
from gamification.views import GamificationResults
1616
from meta_review.views import ContributorsMetaReview
1717
from inactive_issues.inactive_issues_scraper import inactive_issues_json
1818
from openhub.views import index as openhub_index
@@ -206,7 +206,7 @@ def get_organization():
206206
distill_file='static/unassigned-issues.json',
207207
),
208208
distill_url(
209-
r'gamification/$', gamification_index,
209+
r'gamification/$', GamificationResults.as_view(),
210210
name='community-gamification',
211211
distill_func=get_index,
212212
distill_file='gamification/index.html',

‎gamification/tests/test_views.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,4 @@ def test_view_uses_correct_template(self):
2525
def test_all_contributors_on_template(self):
2626
resp = self.client.get(reverse('community-gamification'))
2727
self.assertEqual(resp.status_code, 200)
28-
self.assertTrue(len(resp.context['participants']) == 10)
28+
self.assertTrue(len(resp.context['gamification_results']) == 10)

‎gamification/views.py

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1-
from django.shortcuts import render
1+
from django.views.generic import TemplateView
2+
from django.db.models import Q
23

4+
from community.views import get_header_and_footer
35
from gamification.models import Participant
46

57

6-
def index(request):
7-
Participant.objects.filter(username__startswith='testuser').delete()
8-
participants = Participant.objects.all()
9-
args = {'participants': participants}
10-
return render(request, 'gamification.html', args)
8+
class GamificationResults(TemplateView):
9+
template_name = 'gamification.html'
10+
11+
def get_context_data(self, **kwargs):
12+
context = super().get_context_data(**kwargs)
13+
context = get_header_and_footer(context)
14+
participants = Participant.objects.all().exclude(
15+
Q(username__startswith='testuser'))
16+
context['gamification_results'] = participants
17+
return context

‎static/css/gamification.css

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
.bottom-center {
2+
position: absolute;
3+
bottom: 2%;
4+
left: 50%;
5+
transform: translate(-50%, -50%);
6+
}
7+
8+
.contributor-details-part-1,
9+
.contributor-details-part-2,
10+
.contributor-details-part-3 {
11+
width: 25%;
12+
max-height: 80%;
13+
overflow: auto;
14+
overflow-wrap: break-word;
15+
}
16+
17+
.contributor-details-part-3 {
18+
padding-left: 5px;
19+
border-left: 1px #37474f solid;
20+
}
21+
22+
.gamifier-card {
23+
width: 100%;
24+
min-height: 380px;
25+
}
26+
27+
.github-icon {
28+
color: white;
29+
background-color: black;
30+
border-radius: 100px;
31+
}
32+
33+
.gitlab-icon {
34+
color: #e33834;
35+
border-radius: 100px;
36+
}
37+
38+
.filter-btn {
39+
width: 107px;
40+
margin-top: 3%;
41+
margin-left: 3%;
42+
}
43+
44+
.filter-btn .btn {
45+
text-transform: none;
46+
border-radius: 100px;
47+
box-shadow: 0px 0px 25px 2px black;
48+
}
49+
50+
.social-icons {
51+
font-size: 1.5em;
52+
}
53+
54+
@media only screen and (max-width: 1107px){
55+
.contributor-details-part-2 {
56+
width: 29%;
57+
}
58+
.contributor-details-part-3 {
59+
display: none;
60+
}
61+
@media only screen and (max-width: 693px){
62+
.contributor-details-part-1,
63+
.contributor-details-part-2 {
64+
width: 31%;
65+
}
66+
67+
.bottom-center {
68+
bottom: -57%;
69+
}
70+
}
71+
}

‎templates/gamification.html

Lines changed: 139 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,142 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<!-- Required meta tags -->
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7-
<!-- Bootstrap CSS -->
8-
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
9-
<title>Newcomers Data</title>
10-
</head>
11-
<body>
12-
<h1>The gamification leaderboard</h1>
13-
<p>Note: All the datetime is in UTC</p>
14-
<hr>
15-
<ul>
16-
{% for participant in participants %}
17-
<div class="container">
18-
<div class="row">
19-
<div class="col-sm-6 col-md-4">
20-
<div class="thumbnail">
21-
<div class="caption">
22-
<p>Username: {{ participant.username }}</p>
23-
<p><a href="//github.com/{{ participant.username }}">
24-
GitHub Profile</a></p>
25-
<p><a href="//gitlab.com/{{ participant.username }}">
26-
GitLab Profile</a></p>
27-
<p><a href="//www.openhub.net/accounts/{{ participant.username }}">OpenHub Profile</a></p>
28-
<p>Score: {{ participant.score }}</p>
29-
<p>Level: {{ participant.level.name }}</p>
30-
<p>Activities Performed:
31-
{% for activity in participant.activities.all %}
32-
<p>{{ forloop.counter }}. {{ activity.name }}, performed_at:
33-
{{ activity.performed_at }} updated_at: {{ activity.updated_at }}
34-
</p>
35-
{% endfor %}{# for activity in participant.activities.all #}
36-
<p>Badges Earned:
37-
{% for badge in participant.badges.all %}
38-
<p>{{ forloop.counter }}.{{ badge.name }}</p>
39-
{% endfor %}{# for badge in participant.badges.all #}
40-
</p>
41-
</div>
42-
</div>
1+
{% extends 'base.html' %}
2+
{% load staticfiles %}
3+
{% block title %}
4+
Community | Gamification Leaderboard
5+
{% endblock %}
6+
7+
{% block add_css_files %}
8+
<link rel="stylesheet" href="{% static 'css/contributors.css' %}">
9+
<link rel="stylesheet" href="{% static 'css/meta-reviewers.css' %}">
10+
<link rel="stylesheet" href="{% static 'css/gamification.css' %}">
11+
{% endblock %}
12+
13+
{% block add_js_files %}
14+
<script src="{% static 'js/contributors.js' %}"></script>
15+
<script src="{% static 'js/gamification.js' %}"></script>
16+
{% endblock %}
17+
18+
{% block main-content %}
19+
20+
<div class="web-page-details apply-flex center-content">
21+
<h3 style="padding-right: 15px">~</h3>
22+
<h3 class="page-name">
23+
Contributors Gamification Leaderboard
24+
</h3>
25+
<h3 style="padding-left: 15px">~</h3>
26+
</div>
27+
28+
<div class="apply-flex center-content">
29+
<p class="container web-page-description">
30+
The leaderboard is based upon the gamification system which automates the
31+
recognition of activities performed by community contributors. Based on activities
32+
performed, various parameters are calculated.
33+
</p>
34+
</div>
35+
36+
<div class="contributors-section apply-flex center-content">
37+
<div class="form-fields">
38+
<form>
39+
<div class="input-field apply-flex center-content search-field">
40+
<i class="fa fa-search social-icons"></i>
41+
<input id="search" type="search" autocomplete="off" placeholder="Search by username or name" required>
42+
<i class="fa fa-close social-icons"></i>
43+
</div>
44+
</form>
45+
<div class="search-results">
46+
<table>
47+
<thead>
48+
<tr>
49+
<th>Search Results</th>
50+
</tr>
51+
</thead>
52+
<tbody class="search-results-tbody large-font">
53+
<tr>
54+
<td>
55+
No results found!
56+
</td>
57+
</tr>
58+
</tbody>
59+
</table>
60+
</div>
61+
</div>
62+
</div>
63+
64+
<div class="contributors-cards column-flex">
65+
{% for contributor in gamification_results %}
66+
<div class="contributor-card meta-reviewer gamifier-card apply-flex" login="{{ contributor.username }}">
67+
<div class="contributor-image meta-reviewer-image">
68+
<img src="//github.com/{{ contributor.username }}.png/?size=210">
69+
<div class="bottom-center large-font bold-text social-links">
70+
<a href="//github.com/{{ contributor.username }}" target="_blank">
71+
<i class="fa fa-github github-icon social-icons" aria-hidden="true"></i>
72+
</a>
73+
<a href="//gitlab.com/{{ contributor.username }}" target="_blank">
74+
<i class="fa fa-gitlab social-icons gitlab-icon" aria-hidden="true"></i>
75+
</a>
76+
<a href="//www.openhub.net/accounts/{{ contributor.username }}" target="_blank" class="social-icons">OH</a>
77+
</div>
78+
</div>
79+
<div class="contributor-details-part-1 column-flex">
80+
<span class="bold-text large-font">
81+
{{ contributor.username }}
82+
</span>
83+
<div class="column-flex large-font gray-font-color">
84+
<span>
85+
<b>Score:</b>
86+
{{ contributor.score }}
87+
</span>
88+
<span>
89+
<b>Level:</b>
90+
{{ contributor.level.name }}
91+
</span>
92+
<div>
93+
{% if contributor.badges.all %}
94+
<b>Badges Earned:</b>
95+
<div class="column-flex">
96+
{% for badge in contributor.badges.all %}
97+
<span>
98+
<b>-></b>
99+
{{ badge.name }}
100+
</span>
101+
{% endfor %}{# for badge in contributor.badges.all #}
43102
</div>
103+
{% else %}{# if contributor.badges.all #}
104+
<span>
105+
<b>No badges earned!<i class="fa fa-frown-o"></i></b>
106+
</span>
107+
{% endif %}{# if contributor.badges.all #}
108+
</div>
109+
<div class="column-flex">
110+
<b>Some Activities permormed:</b>
111+
{% for activity in contributor.activities.all|slice:":1" %}
112+
<span>
113+
<b>{{ forloop.counter }}.</b> {{ activity.name }}, performed-on: {{ activity.performed_at }}
114+
</span>
115+
{% endfor %}{# for activity in contributor.activities.all|slice:":1" #}
44116
</div>
45117
</div>
46-
<hr>
47-
{% endfor %}{# for participant in participants #}
48-
</ul>
49-
</body>
50-
</html>
118+
</div>
119+
{% if contributor.activities.all|slice:"1:4" %}
120+
<div class="contributor-details-part-2 column-flex large-font gray-font-color">
121+
{% for activity in contributor.activities.all|slice:"1:4" %}
122+
<span>
123+
<b>{{ forloop.counter|add:1 }}.</b> {{ activity.name }}, performed-on: {{ activity.performed_at }}
124+
</span>
125+
{% endfor %}{# for activity in contributor.activities.all|slice:"1:4" #}
126+
</div>
127+
{% endif %}{# if contributor.activities.all|slice:"1:4" #}
128+
{% if contributor.activities.all|slice:"4:7" %}
129+
<div class="contributor-details-part-3 column-flex large-font gray-font-color">
130+
{% for activity in contributor.activities.all|slice:"4:7" %}
131+
<span>
132+
<b>{{ forloop.counter|add:4 }}.</b> {{ activity.name }}, performed-on: {{ activity.performed_at }}
133+
</span>
134+
{% endfor %}{# for activity in contributor.activities.all|slice:"4:7" #}
135+
</div>
136+
{% endif %}{# if contributor.activities.all|slice:"4:7" #}
137+
</div>
138+
{% endfor %}{# for contributor in gamification_results #}
139+
</div>
140+
141+
{% endblock %}
142+

0 commit comments

Comments
 (0)