meta-review/: Redesign the webpage

The redesigned web-page provides a nice
UI/UX design to the web-page with "search"
feature.

Closes coala#259

community/urls.py

@@ -12,7 +12,7 @@
 from ci_build.view_log import BuildLogsView
 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
@@ -103,7 +103,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',

meta_review/urls.py

@@ -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'),
 ]

meta_review/views.py

@@ -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

static/css/meta-reviewers.css

@@ -0,0 +1,96 @@
+.contributor-details-part-1 {
+    padding-right: 5px;
+}
+
+.contributor-details-part-2 {
+    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;
+}
+
+.metareviewer-details {
+    display: flex;
+    width: 66%;
+}
+
+.meta-reviewer-image {
+    position: relative;
+    text-align: center;
+    color: white;
+}
+
+.meta-reviewer-image img{
+    border-radius: 30px;
+    margin: 20px;
+    width: 150px;
+}
+
+.top-right {
+    position: absolute;
+    top: 30px;
+    right: 25px;
+    width: 30px;
+    border-radius: 100%;
+    background-color: #37474f;
+}
+
+@media only screen and (max-width: 706px){
+    .contributors-cards {
+        margin: 50px 0;
+    }
+    .contributor-card {
+        margin: 0 10px 20px;
+        min-height: 230px;
+    }
+
+    .metareviewer-details {
+        width: 60%;
+    }
+
+    .meta-reviewer-image {
+        width: 40%;
+    }
+
+    .meta-reviewer-image img {
+        max-width: 80%;
+        margin: 20px 10px;
+    }
+
+    @media only screen and (max-width:419px){
+
+        .metareviewer-details {
+            width: 100%;
+        }
+
+        .meta-reviewer {
+            margin: 0 10px 20px 10px;
+        }
+
+        .meta-reviewer-image {
+            width: 100%;
+        }
+
+        .contributor-details-part-1 {
+            padding: 0 0 10px 10px;
+        }
+
+        .top-right {
+            right: 105px;
+        }
+
+    }
+}

static/js/contributors.js

@@ -3,6 +3,7 @@ $(document).ready(function(){
     var close_icon = $('.contributors-section .fa-close');
     var results_body = $('.search-results-tbody');
     var searched_keyword = null;
+    var contributors_card = $('.contributor-card');
 
     function appendChildren(element, username, el_result_value,
                             hide_all_contributors){
@@ -13,52 +14,71 @@ $(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');
             });
         }
         element.append(result_td);
     }
 
+    function match(search, element, attribute){
+        return $(element).attr(attribute).toLowerCase().indexOf(search) > -1;
+    }
+
     search_input.on('keypress keyup', function(){
-        searched_keyword = search_input.val();
+        searched_keyword = search_input.val().toLowerCase();
         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 all_results = [];
+            contributors_card.filter(function () {
+                if(match(searched_keyword, this, 'login') ||
+                   match(searched_keyword, this, 'name')) {
+                    all_results.push($(this));
+                }
+            });
             var results_tbody_tr = $('.search-results-tbody tr');
             results_tbody_tr.remove();
-            if(search_by_login.length + search_by_name.length === 0 ){
+            if(all_results.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);
+                all_results.forEach(function (result) {
+                    var login = result.attr('login');
+                    var name = result.attr('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');
+        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');
     });
 });