Skip to content

Commit cafc7e6

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 0746873 commit cafc7e6

File tree

6 files changed

+298
-84
lines changed

6 files changed

+298
-84
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 ci_build.view_log import BuildLogsView
1313
from data.views import ContributorsListView
1414
from gamification.views import index as gamification_index
15-
from meta_review.views import index as meta_review_index
15+
from meta_review.views import ContributorsMetaReview
1616
from inactive_issues.inactive_issues_scraper import inactive_issues_json
1717
from openhub.views import index as openhub_index
1818
from model.views import index as model_index
@@ -103,7 +103,7 @@ def get_organization():
103103
distill_file='contributors/index.html',
104104
),
105105
distill_url(
106-
r'meta-review/$', meta_review_index,
106+
r'meta-review/$', ContributorsMetaReview.as_view(),
107107
name='meta_review_data',
108108
distill_func=get_index,
109109
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: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
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 0;
54+
}
55+
.contributor-card {
56+
margin: 0 10px 20px;
57+
min-height: 230px;
58+
}
59+
60+
.metareviewer-details {
61+
width: 60%;
62+
}
63+
64+
.meta-reviewer-image {
65+
width: 40%;
66+
}
67+
68+
.meta-reviewer-image img {
69+
max-width: 80%;
70+
margin: 20px 10px;
71+
}
72+
73+
@media only screen and (max-width:419px){
74+
75+
.metareviewer-details {
76+
width: 100%;
77+
}
78+
79+
.meta-reviewer {
80+
margin: 0 10px 20px 10px;
81+
}
82+
83+
.meta-reviewer-image {
84+
width: 100%;
85+
}
86+
87+
.contributor-details-part-1 {
88+
padding: 0 0 10px 10px;
89+
}
90+
91+
.top-right {
92+
right: 105px;
93+
}
94+
95+
}
96+
}

‎static/js/contributors.js‎

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ $(document).ready(function(){
33
var close_icon = $('.contributors-section .fa-close');
44
var results_body = $('.search-results-tbody');
55
var searched_keyword = null;
6+
var contributors_card = $('.contributor-card');
67

78
function appendChildren(element, username, el_result_value,
89
hide_all_contributors){
@@ -13,52 +14,71 @@ $(document).ready(function(){
1314
var row_id = result_td.id;
1415
var login = row_id.replace('td-', '');
1516
$('.contributor-card').css('display', 'none');
16-
$('[login=' + login +']').css('display', 'block');
17+
var contrib_card = $('[login=' + login +']');
18+
if(contrib_card.hasClass('meta-reviewer')){
19+
contrib_card.css('display', 'flex');
20+
}
21+
else{
22+
contrib_card.css('display', 'block');
23+
}
1724
$('.search-results').css('display', 'none');
1825
});
1926
}
2027
element.append(result_td);
2128
}
2229

30+
function match(search, element, attribute){
31+
return $(element).attr(attribute).toLowerCase().indexOf(search) > -1;
32+
}
33+
2334
search_input.on('keypress keyup', function(){
24-
searched_keyword = search_input.val();
35+
searched_keyword = search_input.val().toLowerCase();
2536
if(searched_keyword === ''){
2637
$('.search-results').css('display', 'none');
2738
close_icon.css('display', 'none');
2839
}
2940
else {
3041
$('.search-results').css('display', 'block');
3142
close_icon.css('display', 'block');
32-
var search_by_login = $('[login^=' + searched_keyword +']');
33-
var search_by_name = $('[name^=' + searched_keyword +']');
43+
var all_results = [];
44+
contributors_card.filter(function () {
45+
if(match(searched_keyword, this, 'login') ||
46+
match(searched_keyword, this, 'name')) {
47+
all_results.push($(this));
48+
}
49+
});
3450
var results_tbody_tr = $('.search-results-tbody tr');
3551
results_tbody_tr.remove();
36-
if(search_by_login.length + search_by_name.length === 0 ){
52+
if(all_results.length === 0 ){
3753
appendChildren(results_body, null, 'No results found!', false);
3854
}
3955
else {
40-
var all_results = search_by_login.add(search_by_name);
41-
for(var contrib in all_results.get()){
42-
if(all_results[contrib]){
43-
var login = all_results[contrib].getAttribute('login');
44-
var name = all_results[contrib].getAttribute('name');
45-
var result_value = null;
46-
if(name){
47-
result_value = login + " (" + name + ")";
48-
}
49-
else {
50-
result_value = login;
51-
}
52-
appendChildren(results_body, login, result_value, true);
56+
all_results.forEach(function (result) {
57+
var login = result.attr('login');
58+
var name = result.attr('name');
59+
var result_value = null;
60+
if(name){
61+
result_value = login + " (" + name + ")";
5362
}
54-
}
63+
else {
64+
result_value = login;
65+
}
66+
appendChildren(results_body, login, result_value, true);
67+
});
5568
}
5669
}
5770
});
5871

5972
close_icon.on('click', function(){
60-
$('.contributor-card').css('display', 'block');
73+
var all_contrib_cards = $('.contributor-card');
74+
if(all_contrib_cards.hasClass('meta-reviewer')){
75+
all_contrib_cards.css('display', 'flex');
76+
}
77+
else {
78+
all_contrib_cards.css('display', 'block');
79+
}
6180
close_icon.css('display', 'none');
6281
search_input.val(null);
82+
$('.search-results').css('display', 'none');
6383
});
6484
});

0 commit comments

Comments
 (0)