Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

gamification/: Redesign the webpage #261

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Prev Previous commit
Next Next commit
data/: Re-design the contributors webpage
Closes #258 , #240 , #231 ,
#141 , #139 , #141 , #140
  • Loading branch information
KVGarg committed Aug 5, 2019
commit 07468738935538c72ab5d6062ae3bda32374ecb3
4 changes: 2 additions & 2 deletions community/urls.py
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@
from gci.views import GCIStudentsList
from gci.feeds import LatestTasksFeed as gci_tasks_rss
from ci_build.view_log import BuildLogsView
from data.views import index as contributors_index
from data.views import ContributorsListView
from gamification.views import index as gamification_index
from meta_review.views import index as meta_review_index
from inactive_issues.inactive_issues_scraper import inactive_issues_json
@@ -97,7 +97,7 @@ def get_organization():
distill_file='ci/build/index.html',
),
distill_url(
r'contributors/$', contributors_index,
r'contributors/$', ContributorsListView.as_view(),
name='community-data',
distill_func=get_index,
distill_file='contributors/index.html',
4 changes: 2 additions & 2 deletions data/urls.py
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
from django.conf.urls import url

from . import views
from .views import ContributorsListView

urlpatterns = [
url(r'^$', views.index, name='index'),
url(r'^$', ContributorsListView.as_view(), name='index'),
]
18 changes: 13 additions & 5 deletions data/views.py
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
from django.views.generic import TemplateView

from community.views import get_header_and_footer
from data.models import Contributor
from django.shortcuts import render


def index(request):
contributors = Contributor.objects.all()
args = {'contributors': contributors}
return render(request, 'contributors.html', args)
class ContributorsListView(TemplateView):
template_name = 'contributors.html'

def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context = get_header_and_footer(context)
contrib_objects = Contributor.objects.all()
context['contributors'] = contrib_objects.order_by('-num_commits',
'name')
return context
64 changes: 64 additions & 0 deletions static/css/contributors.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
.commits,
.reviews,
.issues-opened {
padding: 0 5px;
}

.contributions {
margin: 10px;
}

.contributions p {
margin: 0;
}

.contributors-cards {
display: flex;
justify-content: space-evenly;
flex-flow: row wrap;
margin: 50px;
}

.contributor-card {
background-color: #efefef;
box-shadow: 0 0 25px 2px black;
border-radius: 30px;
margin: 0 15px 20px 15px;
width: 220px;
border: 5px #c0c5d1 solid;
}

.contributors-section .fa-close {
display: none;
}

.contributor-details {
text-align: center;
}

.contributor-image img {
border-radius: 30px 30px 0 0;
width: 210px;
}

.form-fields {
margin-top: 3%;
width: 40%;
min-width: 300px;
}

.search-results {
width: 100%;
background-color: transparent;
border-radius: 30px;
overflow: auto;
padding: 0 20px;
max-height: 150px;
display: none;
}

.side-border {
border-width: 0 0 0 1px;
border-color: darkgray;
border-style: solid;
}
64 changes: 64 additions & 0 deletions static/js/contributors.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
$(document).ready(function(){
var search_input = $('#search');
var close_icon = $('.contributors-section .fa-close');
var results_body = $('.search-results-tbody');
var searched_keyword = null;

function appendChildren(element, username, el_result_value,
hide_all_contributors){
var result_td = $('<tr></tr>').text(el_result_value);
result_td.id = "td-" + username;
if(hide_all_contributors){
result_td.on('click', function(){
var row_id = result_td.id;
var login = row_id.replace('td-', '');
$('.contributor-card').css('display', 'none');
$('[login=' + login +']').css('display', 'block');
$('.search-results').css('display', 'none');
});
}
element.append(result_td);
}

search_input.on('keypress keyup', function(){
searched_keyword = search_input.val();
if(searched_keyword === ''){
$('.search-results').css('display', 'none');
close_icon.css('display', 'none');
}
else {
$('.search-results').css('display', 'block');
close_icon.css('display', 'block');
var search_by_login = $('[login^=' + searched_keyword +']');
var search_by_name = $('[name^=' + searched_keyword +']');
var results_tbody_tr = $('.search-results-tbody tr');
results_tbody_tr.remove();
if(search_by_login.length + search_by_name.length === 0 ){
appendChildren(results_body, null, 'No results found!', false);
}
else {
var all_results = search_by_login.add(search_by_name);
for(var contrib in all_results.get()){
if(all_results[contrib]){
var login = all_results[contrib].getAttribute('login');
var name = all_results[contrib].getAttribute('name');
var result_value = null;
if(name){
result_value = login + " (" + name + ")";
}
else {
result_value = login;
}
appendChildren(results_body, login, result_value, true);
}
}
}
}
});

close_icon.on('click', function(){
$('.contributor-card').css('display', 'block');
close_icon.css('display', 'none');
search_input.val(null);
});
});
131 changes: 93 additions & 38 deletions templates/contributors.html
Original file line number Diff line number Diff line change
@@ -1,40 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Contributors Data</title>
</head>
<body>
<h1>Details of all the contributors</h1>
<ul>
{% for contributor in contributors %}
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<div class="caption">
<p>login: {{ contributor.login }}</p>
<p>name: {{ contributor.name }}</p>
<p>bio: {{ contributor.bio }}</p>
<p>num_commits: {{ contributor.num_commits }}</p>
<p>reviews: {{ contributor.reviews }}</p>
<p>issues_opened: {{ contributor.issues_opened }}</p>
<p>teams:
{% for team in contributor.teams.all %}
{{ team.name }}
{% endfor %}{# for team in contributor.teams.all #}
</p>
</div>
</div>
</div>
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
Community | Contributors
{% endblock %}

{% block add_css_files %}
<link rel="stylesheet" href="{% static 'css/contributors.css' %}">
{% endblock %}

{% block add_js_files %}
<script src="{% static 'js/contributors.js' %}"></script>
{% endblock %}

{% block main-content %}

<div class="web-page-details apply-flex center-content">
<h3 style="padding-right: 15px">~</h3>
<h3 class="page-name">
Our Precious Contributors
</h3>
<h3 style="padding-left: 15px">~</h3>
</div>

<div class="apply-flex center-content">
<p class="container web-page-description">
Contributor's who've been putting their hard-work to make {{ org.name }} best of its
own. Thanks to all contributors to make {{ org.name }} what is it today.
</p>
</div>

<div class="contributors-section apply-flex center-content">
<div class="form-fields">
<form>
<div class="input-field apply-flex center-content search-field">
<i class="fa fa-search social-icons"></i>
<input id="search" type="search" autocomplete="off" placeholder="Search by username or name" required>
<i class="fa fa-close social-icons"></i>
</div>
</form>
<div class="apply-flex center-content">
</div>
<div class="search-results">
<table>
<thead>
<tr>
<th>Search Results</th>
</tr>
</thead>
<tbody class="search-results-tbody large-font">
<tr>
<td>
No results found!
</td>
</tr>
</tbody>
</table>
</div>
<hr>
{% endfor %}{# for contributor in contributors #}
</ul>
</body>
</html>
</div>
</div>

<div class="contributors-cards">
{% for contributor in contributors %}
<div class="contributor-card" login="{{ contributor.login }}" name="{{ contributor.name }}">
<div class="contributor-image">
<img src="//github.com/{{ contributor.login }}.png/?size=210" alt="user-image">
</div>
<div class="contributor-details">
<a class="bold-text large-font" href="//github.com/{{ contributor.login }}" target="_blank">
{% if contributor.name %}
{{ contributor.name }}
{% else %}
{{ contributor.login }}
{% endif %}{# if contributor.name #}
</a>
<div class="apply-flex evenly-spread-content contributions gray-font-color">
<div class="commits">
<p>{{ contributor.num_commits }}</p>
<p class="bold-text">Commits</p>
</div>
<div class="reviews">
<p>{{ contributor.reviews }}</p>
<p class="bold-text">Reviews</p>
</div>
<div class="issues-opened">
<p>{{ contributor.issues_opened }}</p>
<p class="bold-text">Issues</p>
</div>
</div>
</div>
</div>
{% endfor %}{# for contributor in contributors #}
</div>

{% endblock %}