Add colour to review outcome displays and do not show "Avg. Score" if it is zero (0)

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

@@ -4,9 +4,11 @@
     <span>
         {{ recommendation|traffic_light }}
     </span>
-    <span class="font-medium">
-        {% trans 'Avg. Score'%}: {{assigned_reviewers|average_review_score|floatformat:'1'}}
-    </span>
+    {% with assigned_reviewers|average_review_score as average %}
+        <span class="font-medium">
+            {{ assigned_reviewers|average_review_score }}
+        </span>
+    {% endwith %}
 </div>
 
 <ul class="reviews-sidebar mt-4" x-data='{showHiddenReviewers: false}'>

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

@@ -28,8 +28,10 @@
                 {% if reviewer.role %}{% image reviewer.role.icon max-12x12 %}{% endif %}
             </div>
         {% endif %}
-        <div>{{ reviewer.review.get_recommendation_display }}</div>
-        <div>{{ reviewer.review.get_score_display }}</div>
+        {% with reviewer.review.get_recommendation_display as recommendation and reviewer.review.get_score_display as score %}
+            <div class="{{ recommendation|slugify }}">{{ recommendation }}</div>
+            <div class="{{ recommendation|slugify }}">{{ score }}</div>
+        {% endwith %}
     {% endif %}
 </li>
 
@@ -45,7 +47,7 @@
             {% endwith %}
         </div>
         <div></div>
-        <div class="reviews-sidebar__outcome {{ opinion.get_opinion_display|lower }}">{{ opinion.get_opinion_display}}</div>
+        <div class="reviews-sidebar__outcome {{ opinion.get_opinion_display|slugify }}">{{ opinion.get_opinion_display}}</div>
     </li>
     {% if forloop.last %}
         </ul>

hypha/apply/review/models.py

@@ -200,7 +200,7 @@ def get_comments_display(self, include_question=True):
 
     @property
     def get_score_display(self):
-        return "{:.1f}".format(self.score) if self.score != NA else "NA"
+        return "{:.1f}".format(self.score) if self.score != NA else "-"
 
     def get_absolute_url(self):
         return reverse(

hypha/apply/review/templatetags/review_tags.py

@@ -1,5 +1,6 @@
 from django import template
 from django.utils.safestring import mark_safe
+from django.utils.translation import gettext_lazy as _
 
 from ..models import MAYBE, NO, YES
 from ..options import NA
@@ -54,8 +55,7 @@ def average_review_score(reviewers):
             and not reviewer.review.score == NA
         ]
         if len(scores) > 0:
-            return sum(scores) / len(scores)
-        else:
-            return 0
-    else:
-        return reviewers
+            return _("Avg. score: {average}").format(
+                average=round(sum(scores) / len(scores), 1)
+            )
+    return ""

hypha/static_src/src/sass/apply/components/_form.scss

@@ -234,7 +234,7 @@
                     @supports (display: grid) {
                         display: grid;
                         grid-template-columns: 1fr 1fr;
-                        grid-gap: 5px;
+                        gap: 5px;
                     }
                 }
 

hypha/static_src/src/sass/apply/components/_grid.scss

@@ -28,7 +28,7 @@
     .grid {
         display: grid;
         margin-bottom: 1rem;
-        grid-gap: 10px;
+        gap: 10px;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 
         > * {
@@ -39,7 +39,7 @@
 
         &--two {
             grid-template-columns: 100%;
-            grid-gap: 0.25rem;
+            gap: 0.25rem;
 
             @include media-query(tablet-portrait) {
                 grid-template-columns: 1fr 1fr;
@@ -51,7 +51,7 @@
 
             .form--comments & {
                 margin: 20px 0 0;
-                grid-gap: 10px;
+                gap: 10px;
                 grid-template-columns: 100px 100px;
             }
 
@@ -70,7 +70,7 @@
 
         &--proposal-info {
             grid-template-columns: 100%;
-            grid-gap: 10px;
+            gap: 10px;
             margin: 0 0 1rem;
 
             @include media-query(mob-landscape) {

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

@@ -22,7 +22,7 @@
         @supports (display: grid) {
             display: grid;
             grid-template-columns: 45% 25% 15% 15%;
-            grid-gap: 5px;
+            gap: 5px;
         }
 
         &--decision {
@@ -57,6 +57,18 @@
         &.no-response {
             color: $color--black-20;
         }
+
+        .yes {
+            color: $color--green;
+        }
+
+        .maybe {
+            color: $color--mustard;
+        }
+
+        .no {
+            color: $color--tomato;
+        }
     }
 
     &__date {

hypha/static_src/src/sass/public/components/_form.scss

@@ -242,7 +242,7 @@
                     @supports (display: grid) {
                         display: grid;
                         grid-template-columns: 1fr 1fr;
-                        grid-gap: 5px;
+                        gap: 5px;
                     }
                 }
 

hypha/static_src/src/sass/public/components/_grid.scss

@@ -60,7 +60,7 @@
     .grid {
         display: grid;
         margin: 30px 0;
-        grid-gap: 10px;
+        gap: 10px;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 
         > * {
@@ -82,12 +82,12 @@
 
         &--one {
             grid-template-columns: 1fr;
-            grid-gap: 30px;
+            gap: 30px;
         }
 
         &--two {
             grid-template-columns: 100%;
-            grid-gap: 0;
+            gap: 0;
 
             @include media-query(tablet-portrait) {
                 grid-template-columns: 1fr 1fr;
@@ -96,7 +96,7 @@
 
         &--max-three {
             grid-template-columns: 1fr;
-            grid-gap: 30px;
+            gap: 30px;
 
             @include media-query(small-tablet) {
                 grid-template-columns: repeat(2, 1fr);
@@ -108,11 +108,11 @@
         }
 
         &--medium-gap {
-            grid-gap: 35px;
+            gap: 35px;
         }
 
         &--small-gap {
-            grid-gap: 20px;
+            gap: 20px;
         }
 
         &--no-margin {
@@ -124,7 +124,7 @@
             margin: 0 0 30px;
             border-bottom: 1px solid $color--mid-grey;
             grid-template-columns: 100%;
-            grid-gap: 10px;
+            gap: 10px;
 
             @include media-query(mob-landscape) {
                 margin: 0 0 30px;
@@ -138,7 +138,7 @@
 
         &--focus-areas {
             margin: 20px 0;
-            grid-gap: 20px;
+            gap: 20px;
             grid-template-columns: 1fr;
 
             @include media-query(small-tablet) {
@@ -150,7 +150,7 @@
                 margin: 3rem 0;
                 text-align: center;
                 grid-template-columns: repeat(4, 1fr);
-                grid-gap: 35px;
+                gap: 35px;
             }
         }
     }