Skip to content

Commit 807b062

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 #260
1 parent 05e7d4e commit 807b062

File tree

5 files changed

+262
-54
lines changed

5 files changed

+262
-54
lines changed

‎community/urls.py

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
from twitter.view_twitter import index as twitter_index
1313
from ci_build.view_log import BuildLogsView
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
@@ -200,7 +200,7 @@ def get_organization():
200200
distill_file='static/unassigned-issues.json',
201201
),
202202
distill_url(
203-
r'gamification/$', gamification_index,
203+
r'gamification/$', GamificationResults.as_view(),
204204
name='community-gamification',
205205
distill_func=get_index,
206206
distill_file='gamification/index.html',

‎gamification/tests/test_views.py

+1-1
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

+13-6
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

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
.bottom-center {
2+
position: absolute;
3+
width: 100px;
4+
bottom: 2%;
5+
left: 50%;
6+
transform: translate(-50%, -50%);
7+
}
8+
9+
.gamifier-details {
10+
max-width: 79%;
11+
display: flex;
12+
}
13+
14+
.gamifier-details-part-1,
15+
.gamifier-details-part-2,
16+
.gamifier-details-part-3 {
17+
max-width: 44%;
18+
max-height: 80%;
19+
padding: 10px 5px;
20+
}
21+
22+
.gamifier-card {
23+
width: 100%;
24+
min-height: 380px;
25+
}
26+
27+
.gamifier-image {
28+
width: 20%;
29+
}
30+
31+
.gamifier-image img{
32+
width: 90%;
33+
margin-right: 0px;
34+
margin-left: 1%;
35+
min-width: 100px;
36+
37+
}
38+
39+
.github-icon {
40+
color: white;
41+
background-color: black;
42+
border-radius: 100px;
43+
}
44+
45+
.gitlab-icon {
46+
color: #e33834;
47+
border-radius: 100px;
48+
}
49+
50+
.filter-btn {
51+
width: 107px;
52+
margin-top: 3%;
53+
margin-left: 3%;
54+
}
55+
56+
.filter-btn .btn {
57+
text-transform: none;
58+
border-radius: 100px;
59+
box-shadow: 0px 0px 25px 2px black;
60+
}
61+
62+
.social-icons {
63+
font-size: 1.5em;
64+
}
65+
66+
@media only screen and (max-width: 890px){
67+
68+
.gamifier-card {
69+
max-width: 100%;
70+
width: auto;
71+
margin: 10px;
72+
}
73+
74+
.gamifier-details {
75+
max-width: 100%;
76+
padding: 0px 10px;
77+
}
78+
79+
.gamifier-image {
80+
margin: auto;
81+
width: 35%;
82+
}
83+
84+
.bottom-center {
85+
bottom: 2%;
86+
}
87+
88+
@media only screen and (max-width: 526px){
89+
90+
.gamifier-details-part-3 {
91+
display: none;
92+
}
93+
94+
.gamifier-details-part-1,
95+
.gamifier-details-part-2 {
96+
max-width: 50%;
97+
}
98+
99+
.gamifier-image {
100+
width: 50%;
101+
}
102+
103+
}
104+
}

‎templates/gamification.html

+142-45
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,147 @@
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>
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+
{% endblock %}
16+
17+
{% block main-content %}
18+
19+
<div class="web-page-details apply-flex center-content">
20+
<h3 style="padding-right: 15px">~</h3>
21+
<h3 class="page-name">
22+
Contributors Gamification Leaderboard
23+
</h3>
24+
<h3 style="padding-left: 15px">~</h3>
25+
</div>
26+
27+
<div class="apply-flex center-content">
28+
<p class="container web-page-description">
29+
The leaderboard is based upon the gamification system which automates the
30+
recognition of activities performed by community contributors. Based on activities
31+
performed, various parameters are calculated.
32+
</p>
33+
</div>
34+
35+
<div class="contributors-section apply-flex center-content">
36+
<div class="form-fields">
37+
<form>
38+
<div class="input-field apply-flex center-content search-field">
39+
<i class="fa fa-search social-icons"></i>
40+
<input id="search" type="search" autocomplete="off" placeholder="Search by username or name" required>
41+
<i class="fa fa-close social-icons"></i>
42+
</div>
43+
</form>
44+
<div class="search-results">
45+
<table>
46+
<thead>
47+
<tr>
48+
<th>Search Results</th>
49+
</tr>
50+
</thead>
51+
<tbody class="search-results-tbody large-font">
52+
<tr>
53+
<td>
54+
No results found!
55+
</td>
56+
</tr>
57+
</tbody>
58+
</table>
59+
</div>
60+
</div>
61+
</div>
62+
63+
<div class="contributors-cards column-flex">
64+
{% for contributor in gamification_results %}
65+
<div class="contributor-card meta-reviewer gamifier-card apply-flex" login="{{ contributor.username }}">
66+
<div class="contributor-image meta-reviewer-image gamifier-image">
67+
<img src="//github.com/{{ contributor.username }}.png/?size=400"
68+
alt="user-image">
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="gamifier-details">
80+
<div class="gamifier-details-part-1 column-flex">
81+
<div class="column-flex large-font gray-font-color">
82+
<span>
83+
<b>Username:</b>
84+
{{ contributor.username }}
85+
</span>
86+
<span>
87+
<b>Score:</b>
88+
{{ contributor.score }}
89+
</span>
90+
<span>
91+
<b>Level:</b>
92+
{{ contributor.level.name }}
93+
</span>
94+
<div>
95+
{% if contributor.badges.all %}
96+
<b>Badges Earned:</b>
97+
<div class="column-flex">
98+
{% for badge in contributor.badges.all %}
99+
<span>
100+
<b>-></b>
101+
{{ badge.name }}
102+
</span>
103+
{% endfor %}{# for badge in contributor.badges.all #}
41104
</div>
105+
{% else %}{# if contributor.badges.all #}
106+
<span>
107+
<b>No badges earned!<i class="fa fa-frown-o"></i></b>
108+
</span>
109+
{% endif %}{# if contributor.badges.all #}
110+
</div>
111+
<div class="column-flex">
112+
<b>Some Activities permormed:</b>
113+
{% for activity in contributor.activities.all|slice:":2" %}
114+
<span>
115+
<b>{{ forloop.counter }}.</b> {{ activity.name }}, on {{ activity.performed_at }}
116+
</span>
117+
{% endfor %}{# for activity in contributor.activities.all|slice:":2" #}
42118
</div>
43119
</div>
44120
</div>
121+
122+
{% if contributor.activities.all|slice:"2:6" %}
123+
<div class="gamifier-details-part-2 column-flex large-font gray-font-color">
124+
{% for activity in contributor.activities.all|slice:"2:6" %}
125+
<span>
126+
<b>{{ forloop.counter|add:2 }}.</b> {{ activity.name }}, on {{ activity.performed_at }}
127+
</span>
128+
{% endfor %}{# for activity in contributor.activities.all|slice:"2:6" #}
129+
</div>
130+
{% endif %}{# if contributor.activities.all|slice:"2:6" #}
131+
132+
{% if contributor.activities.all|slice:"6:10" %}
133+
<div class="gamifier-details-part-3 column-flex large-font gray-font-color">
134+
{% for activity in contributor.activities.all|slice:"6:10" %}
135+
<span>
136+
<b>{{ forloop.counter|add:6 }}.</b> {{ activity.name }}, on: {{ activity.performed_at }}
137+
</span>
138+
{% endfor %}{# for activity in contributor.activities.all|slice:"6:10" #}
139+
</div>
140+
{% endif %}{# if contributor.activities.all|slice:"6:10" #}
45141
</div>
46-
<hr>
47-
{% endfor %}{# for participant in participants #}
48-
</ul>
49-
</body>
50-
</html>
142+
</div>
143+
{% endfor %}{# for contributor in gamification_results #}
144+
</div>
145+
146+
{% endblock %}
147+

0 commit comments

Comments
 (0)