Skip to content

Commit 94bf17a

Browse files
KVGargKVGarg
committed
data/: Re-design the contributors webpage
Closes coala#258 , coala#240 , coala#231 , coala#141 , coala#139 , coala#141 , coala#140
1 parent ec61b5e commit 94bf17a

File tree

6 files changed

+238
-47
lines changed

6 files changed

+238
-47
lines changed

‎community/urls.py

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
from gci.feeds import LatestTasksFeed as gci_tasks_rss
1212
from twitter.view_twitter import index as twitter_index
1313
from log.view_log import index as log_index
14-
from data.views import index as contributors_index
14+
from data.views import ContributorsListView
1515
from gamification.views import index as gamification_index
1616
from meta_review.views import index as meta_review_index
1717
from inactive_issues.inactive_issues_scraper import inactive_issues_json
@@ -110,7 +110,7 @@ def get_organization():
110110
distill_file='log/index.html',
111111
),
112112
distill_url(
113-
r'contributors/$', contributors_index,
113+
r'contributors/$', ContributorsListView.as_view(),
114114
name='community-data',
115115
distill_func=get_index,
116116
distill_file='contributors/index.html',

‎data/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 ContributorsListView
44

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

‎data/views.py

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
1+
from django.views.generic import TemplateView
2+
3+
from community.views import get_header_and_footer
14
from data.models import Contributor
2-
from django.shortcuts import render
35

46

5-
def index(request):
6-
contributors = Contributor.objects.all()
7-
args = {'contributors': contributors}
8-
return render(request, 'contributors.html', args)
7+
class ContributorsListView(TemplateView):
8+
template_name = 'contributors.html'
9+
10+
def get_context_data(self, **kwargs):
11+
context = super().get_context_data(**kwargs)
12+
context = get_header_and_footer(context)
13+
contrib_objects = Contributor.objects.all()
14+
context['contributors'] = contrib_objects.order_by('-num_commits',
15+
'name')
16+
return context

‎static/css/contributors.css

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.commits,
2+
.reviews,
3+
.issues-opened {
4+
padding: 0px 5px;
5+
}
6+
7+
.contributions {
8+
margin: 10px;
9+
}
10+
11+
.contributions p {
12+
margin: 0px;
13+
}
14+
15+
.contributors-cards {
16+
display: flex;
17+
justify-content: space-evenly;
18+
flex-flow: row wrap;
19+
margin: 50px;
20+
}
21+
22+
.contributor-card {
23+
background-color: #efefef;
24+
box-shadow: 0px 0px 25px 2px black;
25+
border-radius: 30px;
26+
margin: 0px 15px 20px 15px;
27+
width: 220px;
28+
border: 5px #c0c5d1 solid;
29+
}
30+
31+
.contributors-section .fa-close {
32+
display: none;
33+
}
34+
35+
.contributor-details {
36+
text-align: center;
37+
}
38+
39+
.contributor-image img {
40+
border-radius: 30px 30px 0px 0px;
41+
width: 210px;
42+
}
43+
44+
.form-fields {
45+
margin-top: 3%;
46+
width: 40%;
47+
min-width: 300px;
48+
}
49+
50+
.search-results {
51+
width: 100%;
52+
background-color: transparent;
53+
border-radius: 30px;
54+
overflow: auto;
55+
padding: 0px 20px;
56+
max-height: 150px;
57+
display: none;
58+
}
59+
60+
.side-border {
61+
border-width: 0px 0px 0px 1px;
62+
border-color: darkgray;
63+
border-style: solid;
64+
}

‎static/js/contributors.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
$(document).ready(function(){
2+
var search_input = $('#search');
3+
var close_icon = $('.contributors-section .fa-close');
4+
var results_body = $('.search-results-tbody');
5+
var searched_keyword = null;
6+
7+
function appendChildren(element, username, el_result_value,
8+
hide_all_contributors){
9+
var result_td = $('<tr></tr>').text(el_result_value);
10+
result_td.id = "td-" + username;
11+
if(hide_all_contributors){
12+
result_td.on('click', function(){
13+
var row_id = result_td.id;
14+
var login = row_id.replace('td-', '');
15+
$('.contributor-card').css('display', 'none');
16+
$('[login=' + login +']').css('display', 'block');
17+
$('.search-results').css('display', 'none');
18+
});
19+
}
20+
element.append(result_td);
21+
}
22+
23+
search_input.on('keypress keyup', function(){
24+
searched_keyword = search_input.val();
25+
if(searched_keyword === ''){
26+
$('.search-results').css('display', 'none');
27+
close_icon.css('display', 'none');
28+
}
29+
else {
30+
$('.search-results').css('display', 'block');
31+
close_icon.css('display', 'block');
32+
var search_by_login = $('[login^=' + searched_keyword +']');
33+
var search_by_name = $('[name^=' + searched_keyword +']');
34+
var results_tbody_tr = $('.search-results-tbody tr');
35+
results_tbody_tr.remove();
36+
if(search_by_login.length + search_by_name.length === 0 ){
37+
appendChildren(results_body, null, 'No results found!', false);
38+
}
39+
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);
53+
}
54+
}
55+
}
56+
}
57+
});
58+
59+
close_icon.on('click', function(){
60+
$('.contributor-card').css('display', 'block');
61+
close_icon.css('display', 'none');
62+
search_input.val(null);
63+
});
64+
});

‎templates/contributors.html

+93-38
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,95 @@
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>Contributors Data</title>
10-
</head>
11-
<body>
12-
<h1>Details of all the contributors</h1>
13-
<ul>
14-
{% for contributor in contributors %}
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: {{ contributor.login }}</p>
21-
<p>name: {{ contributor.name }}</p>
22-
<p>bio: {{ contributor.bio }}</p>
23-
<p>num_commits: {{ contributor.num_commits }}</p>
24-
<p>reviews: {{ contributor.reviews }}</p>
25-
<p>issues_opened: {{ contributor.issues_opened }}</p>
26-
<p>teams:
27-
{% for team in contributor.teams.all %}
28-
{{ team.name }}
29-
{% endfor %}{# for team in contributor.teams.all #}
30-
</p>
31-
</div>
32-
</div>
33-
</div>
1+
{% extends 'base.html' %}
2+
{% load staticfiles %}
3+
{% block title %}
4+
Community | Contributors
5+
{% endblock %}
6+
7+
{% block add_css_files %}
8+
<link rel="stylesheet" href="{% static 'css/contributors.css' %}">
9+
{% endblock %}
10+
11+
{% block add_js_files %}
12+
<script src="{% static 'js/contributors.js' %}"></script>
13+
{% endblock %}
14+
15+
{% block main-content %}
16+
17+
<div class="web-page-details apply-flex center-content">
18+
<h3 style="padding-right: 15px">~</h3>
19+
<h3 class="page-name">
20+
Our Precious Contributors
21+
</h3>
22+
<h3 style="padding-left: 15px">~</h3>
23+
</div>
24+
25+
<div class="apply-flex center-content">
26+
<p class="container web-page-description">
27+
Contributor's who've been putting their hard-work to make {{ org.name }} best of its
28+
own. Thanks to all contributors to make {{ org.name }} what is it today.
29+
</p>
30+
</div>
31+
32+
<div class="contributors-section apply-flex center-content">
33+
<div class="form-fields">
34+
<form>
35+
<div class="input-field apply-flex center-content search-field">
36+
<i class="fa fa-search social-icons"></i>
37+
<input id="search" type="search" autocomplete="off" placeholder="Search by username or name" required>
38+
<i class="fa fa-close social-icons"></i>
3439
</div>
40+
</form>
41+
<div class="apply-flex center-content">
42+
</div>
43+
<div class="search-results">
44+
<table>
45+
<thead>
46+
<tr>
47+
<th>Search Results</th>
48+
</tr>
49+
</thead>
50+
<tbody class="search-results-tbody large-font">
51+
<tr>
52+
<td>
53+
No results found!
54+
</td>
55+
</tr>
56+
</tbody>
57+
</table>
3558
</div>
36-
<hr>
37-
{% endfor %}{# for contributor in contributors #}
38-
</ul>
39-
</body>
40-
</html>
59+
</div>
60+
</div>
61+
62+
<div class="contributors-cards">
63+
{% for contributor in contributors %}
64+
<div class="contributor-card" login="{{ contributor.login }}" name="{{ contributor.name }}">
65+
<div class="contributor-image">
66+
<img src="//github.com/{{ contributor.login }}.png/?size=210">
67+
</div>
68+
<div class="contributor-details">
69+
<a class="bold-font large-font" href="//github.com/{{ contributor.login }}" target="_blank">
70+
{% if contributor.name %}
71+
{{ contributor.name }}
72+
{% else %}
73+
{{ contributor.login }}
74+
{% endif %}{# if contributor.name #}
75+
</a>
76+
<div class="apply-flex evenly-spread-content contributions gray-font-color">
77+
<div class="commits">
78+
<p>{{ contributor.num_commits }}</p>
79+
<p class="bold-text">Commits</p>
80+
</div>
81+
<div class="reviews">
82+
<p>{{ contributor.reviews }}</p>
83+
<p class="bold-text">Reviews</p>
84+
</div>
85+
<div class="issues-opened">
86+
<p>{{ contributor.issues_opened }}</p>
87+
<p class="bold-text">Issues</p>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
{% endfor %}{# for contributor in contributors #}
93+
</div>
94+
95+
{% endblock %}

0 commit comments

Comments
 (0)