Skip to content

Commit 05e7d4e

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 #259
1 parent 864e2f4 commit 05e7d4e

File tree

6 files changed

+277
-66
lines changed

6 files changed

+277
-66
lines changed

‎community/urls.py

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
from ci_build.view_log import BuildLogsView
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
@@ -110,7 +110,7 @@ def get_organization():
110110
distill_file='contributors/index.html',
111111
),
112112
distill_url(
113-
r'meta-review/$', meta_review_index,
113+
r'meta-review/$', ContributorsMetaReview.as_view(),
114114
name='meta_review_data',
115115
distill_func=get_index,
116116
distill_file='meta-review/index.html',

‎meta_review/urls.py

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

+18-11
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

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

‎static/js/contributors.js

+15-2
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

+142-49
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,146 @@
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>
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 Details
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+
alt="user-image">
70+
<div class="top-right large-font bold-text">
71+
{{ contributor.rank }}
72+
</div>
73+
</div>
74+
<div class="metareviewer-details">
75+
<div class="contributor-details-part-1 column-flex">
76+
<a class="bold-text large-font" href="//github.com
77+
/{{ contributor.login }}" target="_blank">
78+
{% if contributor.name %}
79+
{{ contributor.login }} ({{ contributor.name }})
80+
{% else %}
81+
{{ contributor.login }}
82+
{% endif %}{# if contributor.name #}
83+
</a>
84+
<div class="large-font gray-font-color">
85+
<span>
86+
<b>Score:</b>
87+
{{ contributor.score|floatformat:2 }}
88+
</span>
89+
<span>
90+
<b>Trend:</b>
91+
{{ contributor.trend }}
92+
</span>
93+
<div>
94+
<b>Given reactions:</b>
95+
<div>
96+
<span>
97+
<i class="fa fa-smile-o"></i>
98+
{{ contributor.pos_out }}
99+
<i class="fa fa-frown-o"></i>
100+
{{ contributor.neg_out }}
101+
</span>
45102
</div>
46103
</div>
104+
<span>
105+
<b>Weight factor:</b>
106+
{{ contributor.weight_factor|floatformat:2 }}
107+
</span>
108+
</div>
109+
</div>
110+
<div class="contributor-details-part-2 column-flex large-font gray-font-color">
111+
<div class="received-reactions">
112+
<b>Received reactions:</b>
113+
<div>
114+
<b>> Count</b>
115+
<div>
116+
<span>
117+
<i class="fa fa-smile-o"></i>
118+
{{ contributor.pos_in }}
119+
<i class="fa fa-frown-o"></i>
120+
{{ contributor.neg_in }}
121+
</span>
122+
</div>
123+
</div>
124+
<div>
125+
<b>> Weighted</b>
126+
<div>
127+
<span>
128+
<i class="fa fa-smile-o"></i>
129+
{{ contributor.weighted_pos_in|floatformat:0 }}
130+
<i class="fa fa-frown-o"></i>
131+
{{ contributor.weighted_neg_in|floatformat:0 }}
132+
</span>
133+
</div>
47134
</div>
48135
</div>
49-
<hr>
50-
{% endfor %}{# for participant in participants #}
51-
</ul>
52-
</body>
53-
</html>
136+
<span>
137+
<b>Negative point offset:</b>
138+
{{ contributor.offset|floatformat:2 }}
139+
</span>
140+
</div>
141+
</div>
142+
</div>
143+
{% endfor %}{# for contributor in contributors_meta_review_details #}
144+
</div>
145+
146+
{% endblock %}

0 commit comments

Comments
 (0)