Skip to content

Commit

Permalink
meta-review/: Redesign the webpage
Browse files Browse the repository at this point in the history 
The redesigned web-page provides a nice
UI/UX design to the web-page with "search"
feature.

Closes coala#259
  • Loading branch information
@KVGarg
KVGarg committed Jun 15, 2019
1 parent cde1aa2 commit bdd8c5a
Show file tree
Hide file tree
Showing 6 changed files with 277 additions and 67 deletions.
4 changes: 2 additions & 2 deletions community/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
from log.view_log import index as log_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 meta_review.views import ContributorsMetaReview
from inactive_issues.inactive_issues_scraper import inactive_issues_json
from openhub.views import index as openhub_index
from model.views import index as model_index
Expand Down Expand Up @@ -116,7 +116,7 @@ def get_organization():
distill_file='contributors/index.html',
),
distill_url(
r'meta-review/$', meta_review_index,
r'meta-review/$', ContributorsMetaReview.as_view(),
name='meta_review_data',
distill_func=get_index,
distill_file='meta-review/index.html',
Expand Down
4 changes: 2 additions & 2 deletions meta_review/urls.py
View file
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 ContributorsMetaReview

urlpatterns = [
url(r'^$', views.index, name='index'),
url(r'^$', ContributorsMetaReview.as_view(), name='index'),
]
29 changes: 18 additions & 11 deletions meta_review/views.py
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,22 @@
from meta_review.models import Participant
from django.shortcuts import render
from django.db.models import Q
from django.views.generic import TemplateView

from community.views import get_header_and_footer

def index(request):
participants = Participant.objects.all().exclude(
Q(pos_in=0),
Q(neg_in=0),
Q(pos_out=0),
Q(neg_out=0),
Q(offset=0)
)
args = {'participants': participants}
return render(request, 'meta_review.html', args)

class ContributorsMetaReview(TemplateView):
template_name = 'meta_review.html'

def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context = get_header_and_footer(context)
participants = Participant.objects.all().exclude(
Q(pos_in=0),
Q(neg_in=0),
Q(pos_out=0),
Q(neg_out=0),
Q(offset=0)
)
context['contributors_meta_review_details'] = participants
return context
101 changes: 101 additions & 0 deletions static/css/meta-reviewers.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
.contributor-details-part-1 {
width: 28%;
padding-right: 5px;
}

.contributor-details-part-2 {
width: 28%;
padding-left: 5px;
border-left: 1px #37474f solid;
}

.column-flex {
display: flex;
flex-direction: column;
}

.received-reactions div {
padding-left: 14px;
}

.meta-reviewer {
background-color: #c7da99;
width: 580px;
border: 4px #6c9a55 solid;
}
.meta-reviewer-image {
position: relative;
text-align: center;
color: white;
}

.meta-reviewer-image img{
border-radius: 30px;
margin: 20px;
min-width: 180px;
}

.top-right {
position: absolute;
top: 30px;
right: 45px;
width: 30px;
border-radius: 100%;
background-color: #37474f;
}

@media only screen and (max-width: 706px){
.contributors-cards {
margin: 50px 0px;
}
.contributor-card {
margin: 0px 10px;
margin-bottom: 20px;
min-height: 230px;
}

.contributor-details-part-1 {
width: 33%;
}

.contributor-details-part-2 {
width: 34%;
}

.meta-reviewer-image img {
width: 100px;
min-width: 100px;
margin: 20px 10px;
}

.top-right {
top: 16px;
right: 5px;
}

@media only screen and (max-width:391px){

.meta-reviewer {
margin: 0px 10px 20px 10px;
}

.meta-reviewer-image {
width: 100%;
}

.contributor-details-part-1 {
width: 50%;
padding: 0px 0px 10px 10px;
}

.contributor-details-part-2 {
width: 50%;
}

.top-right {
right: 105px;
}

}

}
17 changes: 15 additions & 2 deletions static/js/contributors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,13 @@ $(document).ready(function(){
var row_id = result_td.id;
var login = row_id.replace('td-', '');
$('.contributor-card').css('display', 'none');
$('[login=' + login +']').css('display', 'block');
var contrib_card = $('[login=' + login +']');
if(contrib_card.hasClass('meta-reviewer')){
contrib_card.css('display', 'flex');
}
else{
contrib_card.css('display', 'block');
}
$('.search-results').css('display', 'none');
});
}
Expand Down Expand Up @@ -57,8 +63,15 @@ $(document).ready(function(){
});

close_icon.on('click', function(){
$('.contributor-card').css('display', 'block');
var all_contrib_cards = $('.contributor-card');
if(all_contrib_cards.hasClass('meta-reviewer')){
all_contrib_cards.css('display', 'flex');
}
else {
all_contrib_cards.css('display', 'block');
}
close_icon.css('display', 'none');
search_input.val(null);
$('.search-results').css('display', 'none');
});
});
189 changes: 139 additions & 50 deletions templates/meta_review.html
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,142 @@
<!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>Meta-review Score Ranking List</title>
</head>
<body>
<h1>Details of meta-review score</h1>
<ul>
{% for participant in participants %}
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<div class="caption">
<p>login: {{ participant.login }}</p>
<p>name: {{ participant.name }}</p>
<p>score: {{ participant.score|floatformat:2 }}</p>
<p>rank: {{ participant.rank }}</p>
<p>trend: {{ participant.trend }}</p>
<p>received: </p>
<p>number of positive reactions: {{ participant.pos_in }}</p>
<p>
weighted positive reactions:
{{ participant.weighted_pos_in|floatformat:2 }}
</p>
<p>number of negative reactions: {{ participant.neg_in }}</p>
<p>
weighted negative reactions:
{{ participant.weighted_neg_in|floatformat:2 }}
</p>
<p>give away: </p>
<p>number of positive reactions: {{ participant.pos_out }}</p>
<p>number of negative reactions: {{ participant.neg_out }}</p>
<p>
negative point offset:
{{ participant.offset|floatformat:2 }}
</p>
<p>weight_factor: {{ participant.weight_factor|floatformat:2 }}</p>
</div>
</div>
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
Community | Meta-Review
{% endblock %}

{% block add_css_files %}
<link rel="stylesheet" href="{% static 'css/contributors.css' %}">
<link rel="stylesheet" href="{% static 'css/meta-reviewers.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">
Contributors Meta-Review Deatils
</h3>
<h3 style="padding-left: 15px">~</h3>
</div>

<div class="apply-flex center-content">
<p class="container web-page-description">
Contributor meta-review related details are calculated based upon the
GitHub reactions made by that contributor on any issue or merge request
within an organization, for example - {{ org.name }}.
</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>
</div>
</div>

<div class="contributors-cards">
{% for contributor in contributors_meta_review_details %}
<div class="contributor-card meta-reviewer apply-flex" login="{{ contributor.login }}" name="{{ contributor.name }}">
<div class="contributor-image meta-reviewer-image">
<img src="//github.com/{{ contributor.login }}.png/?size=210">
<div class="top-right large-font bold-text">
{{ contributor.rank }}
</div>
</div>
<div class="contributor-details-part-1 column-flex">
<a class="bold-text large-font" href="//github.com/{{ contributor.login }}" target="_blank">
{% if contributor.name %}
{{ contributor.login }} ({{ contributor.name }})
{% else %}
{{ contributor.login }}
{% endif %}{# if contributor.name #}
</a>
<div class="large-font gray-font-color">
<span>
<b>Score:</b>
{{ contributor.score|floatformat:2 }}
</span>
<span>
<b>Trend:</b>
{{ contributor.trend }}
</span>
<div>
<b>Given reactions:</b>
<div>
<span>
<i class="fa fa-smile-o"></i>
{{ contributor.pos_out }}
<i class="fa fa-frown-o"></i>
{{ contributor.neg_out }}
</span>
</div>
</div>
<span>
<b>Weight factor:</b>
{{ contributor.weight_factor|floatformat:2 }}
</span>
</div>
</div>
<div class="contributor-details-part-2 column-flex large-font gray-font-color">
<div class="received-reactions">
<b>Received reactions:</b>
<div>
<b>> Count</b>
<div>
<span>
<i class="fa fa-smile-o"></i>
{{ contributor.pos_in }}
<i class="fa fa-frown-o"></i>
{{ contributor.neg_in }}
</span>
</div>
</div>
<div>
<b>> Weighted</b>
<div>
<span>
<i class="fa fa-smile-o"></i>
{{ contributor.weighted_pos_in|floatformat:0 }}
<i class="fa fa-frown-o"></i>
{{ contributor.weighted_neg_in|floatformat:0 }}
</span>
</div>
</div>
</div>
<hr>
{% endfor %}{# for participant in participants #}
</ul>
</body>
</html>
<span>
<b>Negative point offset:</b>
{{ contributor.offset|floatformat:2 }}
</span>
</div>
</div>
{% endfor %}{# for contributor in contributors_meta_review_details #}
</div>

{% endblock %}

0 comments on commit bdd8c5a

Please sign in to comment.