Skip to content

Commit f5e7100

Browse files
KVGargKVGarg
committed
meta-review/: Redesign the webpage
The redesigned web-page provides a nice UI/UX design to the web-page with "search" feature. Closes https://gitlab.com/coala/GSoC/gsoc-2019/issues/143
1 parent cde1aa2 commit f5e7100

6 files changed

Lines changed: 251 additions & 67 deletions

File tree

‎community/urls.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
from log.view_log import index as log_index
1414
from data.views import ContributorsListView
1515
from gamification.views import index as gamification_index
16-
from meta_review.views import index as meta_review_index
16+
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
1919
from model.views import index as model_index
@@ -116,7 +116,7 @@ def get_organization():
116116
distill_file='contributors/index.html',
117117
),
118118
distill_url(
119-
r'meta-review/$', meta_review_index,
119+
r'meta-review/$', ContributorsMetaReview.as_view(),
120120
name='meta_review_data',
121121
distill_func=get_index,
122122
distill_file='meta-review/index.html',

‎meta_review/urls.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
from django.conf.urls import url
22

3-
from . import views
3+
from .views import ContributorsMetaReview
44

55
urlpatterns = [
6-
url(r'^$', views.index, name='index'),
6+
url(r'^$', ContributorsMetaReview.as_view(), name='index'),
77
]

‎meta_review/views.py‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
from meta_review.models import Participant
2-
from django.shortcuts import render
32
from django.db.models import Q
3+
from django.views.generic import TemplateView
44

5+
from community.views import get_header_and_footer
56

6-
def index(request):
7-
participants = Participant.objects.all().exclude(
8-
Q(pos_in=0),
9-
Q(neg_in=0),
10-
Q(pos_out=0),
11-
Q(neg_out=0),
12-
Q(offset=0)
13-
)
14-
args = {'participants': participants}
15-
return render(request, 'meta_review.html', args)
7+
8+
class ContributorsMetaReview(TemplateView):
9+
template_name = 'meta_review.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(pos_in=0),
16+
Q(neg_in=0),
17+
Q(pos_out=0),
18+
Q(neg_out=0),
19+
Q(offset=0)
20+
)
21+
context['contributors_meta_review_details'] = participants
22+
return context

‎static/css/meta-reviewers.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.contributor-details-part-1 {
2+
width: 28%;
3+
padding-right: 5px;
4+
}
5+
6+
.contributor-details-part-2 {
7+
width: 28%;
8+
padding-left: 5px;
9+
border-left: 1px #37474f solid;
10+
}
11+
12+
.column-flex {
13+
display: flex;
14+
flex-direction: column;
15+
}
16+
17+
.received-reactions div {
18+
padding-left: 14px;
19+
}
20+
21+
.meta-reviewer {
22+
background-color: #c7da99;
23+
width: 580px;
24+
border: 4px #6c9a55 solid;
25+
}
26+
.meta-reviewer-image {
27+
position: relative;
28+
text-align: center;
29+
color: white;
30+
}
31+
32+
.meta-reviewer-image img{
33+
border-radius: 30px;
34+
margin: 20px;
35+
min-width: 180px;
36+
}
37+
38+
.top-right {
39+
position: absolute;
40+
top: 30px;
41+
right: 45px;
42+
width: 30px;
43+
border-radius: 100%;
44+
background-color: #37474f;
45+
}
46+
47+
@media only screen and (max-width: 699px){
48+
.contributors-cards {
49+
margin: 50px 0px;
50+
}
51+
.contributor-card {
52+
margin: 0px;
53+
margin-bottom: 20px;
54+
min-height: 230px;
55+
}
56+
57+
.contributor-details-part-1 {
58+
width: 33%;
59+
}
60+
61+
.contributor-details-part-2 {
62+
width: 34%;
63+
}
64+
65+
.meta-reviewer-image img {
66+
width: 100px;
67+
min-width: 100px;
68+
margin: 20px 10px;
69+
}
70+
71+
.top-right {
72+
top: 16px;
73+
right: 5px;
74+
}
75+
}

‎static/js/contributors.js‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,13 @@ $(document).ready(function(){
1313
var row_id = result_td.id;
1414
var login = row_id.replace('td-', '');
1515
$('.contributor-card').css('display', 'none');
16-
$('[login=' + login +']').css('display', 'block');
16+
var contrib_card = $('[login=' + login +']');
17+
if(contrib_card.hasClass('meta-reviewer')){
18+
contrib_card.css('display', 'flex');
19+
}
20+
else{
21+
contrib_card.css('display', 'block');
22+
}
1723
$('.search-results').css('display', 'none');
1824
});
1925
}
@@ -57,8 +63,15 @@ $(document).ready(function(){
5763
});
5864

5965
close_icon.on('click', function(){
60-
$('.contributor-card').css('display', 'block');
66+
var all_contrib_cards = $('.contributor-card');
67+
if(all_contrib_cards.hasClass('meta-reviewer')){
68+
all_contrib_cards.css('display', 'flex');
69+
}
70+
else {
71+
all_contrib_cards.css('display', 'block');
72+
}
6173
close_icon.css('display', 'none');
6274
search_input.val(null);
75+
$('.search-results').css('display', 'none');
6376
});
6477
});

‎templates/meta_review.html‎

Lines changed: 139 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +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>Meta-review Score Ranking List</title>
10-
</head>
11-
<body>
12-
<h1>Details of meta-review score</h1>
13-
<ul>
14-
{% for participant in participants %}
15-
<div class="container">
16-
<div class="row">
17-
<div class="col-sm-6 col-md-4">
18-
<div class="thumbnail">
19-
<div class="caption">
20-
<p>login: {{ participant.login }}</p>
21-
<p>name: {{ participant.name }}</p>
22-
<p>score: {{ participant.score|floatformat:2 }}</p>
23-
<p>rank: {{ participant.rank }}</p>
24-
<p>trend: {{ participant.trend }}</p>
25-
<p>received: </p>
26-
<p>number of positive reactions: {{ participant.pos_in }}</p>
27-
<p>
28-
weighted positive reactions:
29-
{{ participant.weighted_pos_in|floatformat:2 }}
30-
</p>
31-
<p>number of negative reactions: {{ participant.neg_in }}</p>
32-
<p>
33-
weighted negative reactions:
34-
{{ participant.weighted_neg_in|floatformat:2 }}
35-
</p>
36-
<p>give away: </p>
37-
<p>number of positive reactions: {{ participant.pos_out }}</p>
38-
<p>number of negative reactions: {{ participant.neg_out }}</p>
39-
<p>
40-
negative point offset:
41-
{{ participant.offset|floatformat:2 }}
42-
</p>
43-
<p>weight_factor: {{ participant.weight_factor|floatformat:2 }}</p>
44-
</div>
45-
</div>
1+
{% extends 'base.html' %}
2+
{% load staticfiles %}
3+
{% block title %}
4+
Community | Meta-Review
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+
{% endblock %}
11+
12+
{% block add_js_files %}
13+
<script src="{% static 'js/contributors.js' %}"></script>
14+
{% endblock %}
15+
16+
{% block main-content %}
17+
18+
<div class="web-page-details apply-flex center-content">
19+
<h3 style="padding-right: 15px">~</h3>
20+
<h3 class="page-name">
21+
Contributors Meta-Review Deatils
22+
</h3>
23+
<h3 style="padding-left: 15px">~</h3>
24+
</div>
25+
26+
<div class="apply-flex center-content">
27+
<p class="container web-page-description">
28+
Contributor meta-review related details are calculated based upon the
29+
GitHub reactions made by that contributor on any issue or merge request
30+
within an organization, for example - {{ org.name }}.
31+
</p>
32+
</div>
33+
34+
<div class="contributors-section apply-flex center-content">
35+
<div class="form-fields">
36+
<form>
37+
<div class="input-field apply-flex center-content search-field">
38+
<i class="fa fa-search social-icons"></i>
39+
<input id="search" type="search" autocomplete="off" placeholder="Search by username or name" required>
40+
<i class="fa fa-close social-icons"></i>
41+
</div>
42+
</form>
43+
<div class="apply-flex center-content">
44+
</div>
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">
65+
{% for contributor in contributors_meta_review_details %}
66+
<div class="contributor-card meta-reviewer apply-flex" login="{{ contributor.login }}" name="{{ contributor.name }}">
67+
<div class="contributor-image meta-reviewer-image">
68+
<img src="//github.com/{{ contributor.login }}.png/?size=210">
69+
<div class="top-right large-font bold-text">
70+
{{ contributor.rank }}
71+
</div>
72+
</div>
73+
<div class="contributor-details-part-1 column-flex">
74+
<a class="bold-text large-font" href="//github.com/{{ contributor.login }}" target="_blank">
75+
{% if contributor.name %}
76+
{{ contributor.login }} ({{ contributor.name }})
77+
{% else %}
78+
{{ contributor.login }}
79+
{% endif %}{# if contributor.name #}
80+
</a>
81+
<div class="large-font gray-font-color">
82+
<span>
83+
<b>Score:</b>
84+
{{ contributor.score|floatformat:2 }}
85+
</span>
86+
<span>
87+
<b>Trend:</b>
88+
{{ contributor.trend }}
89+
</span>
90+
<div>
91+
<b>Given reactions:</b>
92+
<div>
93+
<span>
94+
<i class="fa fa-smile-o"></i>
95+
{{ contributor.pos_out }}
96+
<i class="fa fa-frown-o"></i>
97+
{{ contributor.neg_out }}
98+
</span>
99+
</div>
100+
</div>
101+
<span>
102+
<b>Weight factor:</b>
103+
{{ contributor.weight_factor|floatformat:2 }}
104+
</span>
105+
</div>
106+
</div>
107+
<div class="contributor-details-part-2 column-flex large-font gray-font-color">
108+
<div class="received-reactions">
109+
<b>Received reactions:</b>
110+
<div>
111+
<b>> Count</b>
112+
<div>
113+
<span>
114+
<i class="fa fa-smile-o"></i>
115+
{{ contributor.pos_in }}
116+
<i class="fa fa-frown-o"></i>
117+
{{ contributor.neg_in }}
118+
</span>
119+
</div>
120+
</div>
121+
<div>
122+
<b>> Weighted</b>
123+
<div>
124+
<span>
125+
<i class="fa fa-smile-o"></i>
126+
{{ contributor.weighted_pos_in|floatformat:0 }}
127+
<i class="fa fa-frown-o"></i>
128+
{{ contributor.weighted_neg_in|floatformat:0 }}
129+
</span>
46130
</div>
47131
</div>
48132
</div>
49-
<hr>
50-
{% endfor %}{# for participant in participants #}
51-
</ul>
52-
</body>
53-
</html>
133+
<span>
134+
<b>Negative point offset:</b>
135+
{{ contributor.offset|floatformat:2 }}
136+
</span>
137+
</div>
138+
</div>
139+
{% endfor %}{# for contributor in contributors_meta_review_details #}
140+
</div>
141+
142+
{% endblock %}

0 commit comments

Comments
 (0)