meta-review/: Redesign the webpage

The redesigned web-page provides a nice UI/UX design to the web-page with "search" feature. Closes #259
coala · Aug 2, 2019 · 05e7d4e · 05e7d4e
1 parent 864e2f4
commit 05e7d4e
Show file tree

Hide file tree

Showing 6 changed files with 277 additions and 66 deletions.
diff --git a/community/urls.py b/community/urls.py
@@ -13,7 +13,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
@@ -110,7 +110,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',

diff --git a/meta_review/urls.py b/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'),
 ]
diff --git a/meta_review/views.py b/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
diff --git a/static/css/meta-reviewers.css b/static/css/meta-reviewers.css
@@ -0,0 +1,98 @@
+.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 0px;
+    }
+    .contributor-card {
+        margin: 0px 10px;
+        margin-bottom: 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: 0px 10px 20px 10px;
+        }
+
+        .meta-reviewer-image {
+            width: 100%;
+        }
+
+        .contributor-details-part-1 {
+            padding: 0px 0px 10px 10px;
+        }
+
+        .top-right {
+            right: 105px;
+        }
+
+    }
+
+}
diff --git a/static/js/contributors.js b/static/js/contributors.js
@@ -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');
             });
         }
@@ -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');
     });
 });
diff --git a/templates/meta_review.html b/templates/meta_review.html
@@ -1,53 +1,146 @@
-<!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>
+{% 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 Details
+    </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"
+           alt="user-image">
+      <div class="top-right large-font bold-text">
+        {{ contributor.rank }}
+      </div>
+    </div>
+    <div class="metareviewer-details">
+      <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>
+  </div>
+  {% endfor %}{# for contributor in contributors_meta_review_details #}
+  </div>
+
+{% endblock %}