Merge branch 'lfc-7-improvements' into 'lfc-main'

Lfc 7 improvements

See merge request !14

hypha/apply/review/templates/review/review_edit_form.html

 {% extends "base-apply.html" %}
-{% load i18n %}
+{% load i18n static %}
 {% block title %}{{ title }}{% endblock %}
 {% block content %}
 <div class="admin-bar">
@@ -11,8 +11,8 @@
 
 {% include "forms/includes/form_errors.html" with form=form %}
 
-<div class="wrapper wrapper--medium wrapper--inner-space-medium">
-<form class="form form--with-p-tags form--scoreable" action="" method="post" novalidate>
+<div class="wrapper wrapper--medium wrapper--inner-space-medium wrapper--flex">
+<form class="form form--with-p-tags form--scoreable form--width" action="" method="post" novalidate>
     {{ form.media }}
     {% csrf_token %}
 
@@ -41,5 +41,10 @@
     {% endif %}
     <button class="button button--submit button--top-space button--primary" type="submit" name="submit">{% trans "Submit" %}</button>
 </form>
+<div class="form--score-box">Score:0</div>
 </div>
 {% endblock %}
+
+{% block extra_js %}
+    <script src="{% static 'js/apply/review-form-score.js' %}"></script>
+{% endblock %}

hypha/apply/review/templates/review/review_form.html

 {% extends "base-apply.html" %}
-{% load i18n %}
+{% load i18n static %}
 {% block title %}{{ title }}{% endblock %}
 {% block content %}
 <div class="admin-bar">
@@ -10,10 +10,9 @@
 </div>
 
 {% include "forms/includes/form_errors.html" with form=form %}
-
-<div class="wrapper wrapper--medium wrapper--inner-space-medium">
+<div class="wrapper wrapper--medium wrapper--inner-space-medium wrapper--flex">
 {% if not has_submitted_review %}
-    <form class="form form--with-p-tags form--scoreable" action="" method="post">
+    <form class="form form--with-p-tags form--scoreable form--width" action="" method="post">
         {{ form.media }}
         {% csrf_token %}
 
@@ -45,5 +44,10 @@
 {% else %}
     <p>{% trans "You have already posted a review for this submission" %}</p>
 {% endif %}
+<div class="form--score-box">Score:0</div>
 </div>
+
 {% endblock %}
+{% block extra_js %}
+    <script src="{% static 'js/apply/review-form-score.js' %}"></script>
+{% endblock %}
\ No newline at end of file

hypha/static_src/src/javascript/apply/review-form-score.js

+(function ($) {
+
+    'use strict';
+
+    // grab all the selectors
+    let filtered_selectors;
+    const selectors = Array.prototype.slice.call(
+        document.querySelectorAll('select')
+    );
+    if (selectors.length > 1) {
+        document.querySelector('.form--score-box').style.display = 'block';
+        // remove recommendation select box from array
+        filtered_selectors = selectors.filter(selector => selector[0].text !== 'Need More Info');
+        filtered_selectors.forEach(function (selector) {
+            selector.onchange = calculate_score;
+        });
+        calculate_score();
+    }
+    function calculate_score() {
+        let score = 0;
+        filtered_selectors.forEach(function (selector) {
+            const value = parseInt(selector.value);
+            if (!isNaN(value) && value !== 99) {
+                score += value;
+            }
+        });
+        $('.form--score-box').text('Score: ' + score);
+    }
+
+})(jQuery);

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

@@ -32,6 +32,22 @@
         }
     }
 
+    &--width {
+        flex-grow: 2;
+    }
+
+    &--score-box {
+        display: none;
+        background-color: #1d79a8;
+        color: #fff;
+        padding: 0.5em 60px;
+        font-weight: 700;
+        position: sticky;
+        position: -webkit-sticky;
+        top:0;
+        margin-top: 10px
+    }
+
     &__group {
         position: relative;
         margin: 1rem 0;

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

@@ -123,7 +123,13 @@
             margin-bottom: 0;
         }
     }
-
+    // flex
+    &--flex {
+        display: flex;
+        align-items: start;
+        column-gap: 25px;
+    }
+    
     // Inner spacing
     &--inner-space-small {
         padding: 20px 0;