diff --git a/opentech/apply/funds/templates/funds/includes/review_sidebar.html b/opentech/apply/funds/templates/funds/includes/review_sidebar.html
index 210777f13044bdfb6af5c30524e362b17f064fa8..a0fe991e5a83057d635c24ce7e279855ea98e083 100644
--- a/opentech/apply/funds/templates/funds/includes/review_sidebar.html
+++ b/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>
\ No newline at end of file
+</ul>
diff --git a/opentech/apply/funds/templates/funds/includes/review_sidebar_item.html b/opentech/apply/funds/templates/funds/includes/review_sidebar_item.html
index 6a11896af038d955c35fa1dd3cdf94bea5c46c21..87dce8719f82253bbee129474ba5ad2f56b20a1e 100644
--- a/opentech/apply/funds/templates/funds/includes/review_sidebar_item.html
+++ b/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 %}
\ No newline at end of file
+ {% 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>
+ <div class="reviews-sidebar__outcome {{ opinion.get_opinion_display|lower }}">{{ opinion.get_opinion_display}}</div>
+ </li>
+ {% if forloop.last %}
+ </ul>
+ {% endif %}
+{% endfor %}
diff --git a/opentech/static_src/src/javascript/apply/toggle-reviewers.js b/opentech/static_src/src/javascript/apply/toggle-reviewers.js
index ed8715e3d52b57c466b066dbce921f33354a26d4..1afa3d984638cbf306e4c78730f3d7875ddf7030 100644
--- a/opentech/static_src/src/javascript/apply/toggle-reviewers.js
+++ b/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');
});
}
diff --git a/opentech/static_src/src/sass/apply/components/_reviews-sidebar.scss b/opentech/static_src/src/sass/apply/components/_reviews-sidebar.scss
index 47fc232fecd3598d52557b35f826e720c0628c69..3d72caaa0127efc09540359371ae478b0d2ed8a3 100644
--- a/opentech/static_src/src/sass/apply/components/_reviews-sidebar.scss
+++ b/opentech/static_src/src/sass/apply/components/_reviews-sidebar.scss
@@ -1,64 +1,67 @@
+// 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;
+ }
}