Merge pull request #1043 from OpenTechFund/feature/979-reviews-sidebar

Feature/979 reviews sidebar

opentech/apply/funds/templates/funds/includes/review_sidebar.html

@@ -13,11 +13,11 @@
     {% endif %}
 
     {% for review_data in reviews_block.role_reviewed %}
-        {% include 'funds/includes/review_sidebar_item.html' with review=review_data.review reviewer=review_data.reviewer role=review_data.role %}
+        {% include 'funds/includes/review_sidebar_item.html' with review=review_data.review reviewer=review_data.reviewer role=review_data.role opinions=review_data.opinions %}
     {% endfor %}
 
     {% for review_data in reviews_block.staff_reviewed %}
-        {% include 'funds/includes/review_sidebar_item.html' with review=review_data.review reviewer=review_data.reviewer %}
+        {% include 'funds/includes/review_sidebar_item.html' with review=review_data.review reviewer=review_data.reviewer opinions=review_data.opinions %}
     {% endfor %}
 
     {% for review_data in reviews_block.role_not_reviewed %}
@@ -31,16 +31,14 @@
     {% if object.stage.has_external_review %}
         {% if reviews_block.external_reviewed or reviews_block.external_not_reviewed %}
             <hr class="reviews-sidebar__split">
-
             {% for review_data in reviews_block.external_reviewed %}
-                {% include 'funds/includes/review_sidebar_item.html' with review=review_data.review reviewer=review_data.reviewer %}
+                {% include 'funds/includes/review_sidebar_item.html' with review=review_data.review reviewer=review_data.reviewer opinions=review_data.opinions %}
             {% endfor %}
-
             {% for review_data in reviews_block.external_not_reviewed %}
-                {% include 'funds/includes/review_sidebar_item.html' with reviewer=review_data.reviewer missing=True class="is-hidden" %}
+            {% include 'funds/includes/review_sidebar_item.html' with reviewer=review_data.reviewer missing=True class="is-hidden" %}
             {% endfor %}
 
             <li><a class="link link--bold link--underlined js-toggle-reviewers" href="#">All Assigned Advisors</a></li>
         {% endif %}
     {% endif %}
-</ul>
+</ul>
\ No newline at end of file

opentech/apply/funds/templates/funds/includes/review_sidebar_item.html

@@ -31,12 +31,18 @@
 </li>
 
 {% for opinion in review.opinions.all %}
-<li class="reviews-sidebar__item {{ class }}">
-    <div class="reviews-sidebar__name">
-        <span>{{ opinion.author }}</span>
-        {% if opinion.get_author_assignment %}{% image opinion.get_author_assignment.icon max-12x12 %}{% endif %}
-    </div>
-    <div></div>
-    <div>{{ opinion.get_opinion_display }}</div>
-</li>
-{% endfor %}
+    {% if forloop.first %}
+        <ul class="reviews-sidebar__decision">
+    {% endif %}
+            <li class="reviews-sidebar__item reviews-sidebar__item--decision">
+                <div class="reviews-sidebar__name">
+                    <span>{{ opinion.author }}</span>
+                    {% if opinion.role %}{% image opinion.role.icon max-12x12 %}{% endif %}
+                </div>
+                <div></div>
\ No newline at end of file
+                <div class="reviews-sidebar__outcome {{ opinion.get_opinion_display|lower }}">{{ opinion.get_opinion_display}}</div>
+            </li>
+    {% if forloop.last %}
+        </ul>
+    {% endif %}
+{% endfor %}

opentech/static_src/src/javascript/apply/toggle-reviewers.js

@@ -3,7 +3,7 @@
     'use strict';
 
     // get all the reviewers that are missing
-    const reviewers = Array.prototype.slice.call($('.js-reviews-sidebar').find('tr.hidden.no-response'));
+    const reviewers = Array.prototype.slice.call($('.js-reviews-sidebar').find('.is-hidden.no-response'));
 
     $('.js-toggle-reviewers').click(function (e) {
         e.preventDefault();
@@ -24,7 +24,7 @@
     // show/hide the reviewers
     function toggleReviewers(reviewers) {
         reviewers.forEach(reviewer => {
-            $(reviewer).toggleClass('hidden');
+            $(reviewer).toggleClass('is-hidden');
         });
     }
 

opentech/static_src/src/sass/apply/components/_reviews-sidebar.scss

+// also used within the React app in /components/ReviewBlock
 .reviews-sidebar {
     $root: &;
     margin-bottom: 20px;
     font-weight: $weight--bold;
 
-    tbody {
-        tr {
-            border: 0;
+    &__decision {
+        position: relative;
+        font-size: 14px;
+        border-top: 1px solid $color--mid-grey;
+        border-bottom: 1px solid $color--mid-grey;
+        margin-bottom: 20px;
+        padding-top: 10px;
+    }
 
-            &:hover {
-                box-shadow: none;
-            }
+    &__item {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
 
-            @include media-query(tablet-portrait) {
-                border-bottom: 0;
-            }
+        @supports(display: grid) {
+            display: grid;
+            grid-template-columns: 50% 25% 25%;
+            grid-gap: 5px;
+        }
 
-            > th {
-                font-size: inherit;
-                font-weight: $weight--bold;
-            }
+        &--decision {
+            margin-bottom: 10px;
+            font-weight: $weight--semibold;
 
-            > td {
-                display: table-cell;
-                height: auto;
-            }
+            &:first-child {
 
-            th,
-            td,
-            td:last-child,
-            td:first-child {
-                padding: 10px;
-            }
+                #{$root}__outcome {
+                    &::before,
+                    &::after {
+                        position: absolute;
+                        top: -23px;
+                        left: 5px;
+                    }
 
-            &:only-child {
-                > td {
-                    padding: 0;
+                    &::after {
+                        @include triangle(top, $color--white, 8px);
+                        top: -21px;
+                    }
+
+                    &::before {
+                        @include triangle(top, $color--mid-grey, 8px);
+                    }
                 }
             }
+        }
 
-            &.no-response {
-                color: $color--black-20;
-            }
+        &--header {
+            background-color: $color--light-grey;
+            padding: 10px;
+            align-items: center;
         }
-    }
 
-    &__author {
-        span {
-            position: relative;
-            z-index: 1;
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            background: $color--white;
+        &.is-hidden {
+            display: none;
         }
 
-        &:hover {
-            span {
-                display: inline;
-                overflow: visible;
-            }
+        &.no-response {
+            color: $color--black-20;
         }
     }
 
@@ -69,4 +72,39 @@
     &__no-reviews {
         color: $color--mid-grey;
     }
+
+    &__name {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        background: $color--white;
+
+        &:hover {
+            display: inline-flex;
+            overflow: visible;
+        }
+
+        img {
+            margin-left: 7px;
+        }
+    }
+
+    &__outcome {
+        position: relative;
+
+        &.agree {
+            color: $color--green;
+        }
+
+        &.disagree {
+            color: $color--tomato;
+        }
+    }
+
+    &__split {
+        margin-bottom: 20px;
+    }
 }