diff --git a/hypha/apply/review/templates/review/review_edit_form.html b/hypha/apply/review/templates/review/review_edit_form.html index 7664e51b8097b251438337a13e1994e048ab7513..4760bc0e3c9711e1c32f1ed08b27f1910e8a34e4 100644 --- a/hypha/apply/review/templates/review/review_edit_form.html +++ b/hypha/apply/review/templates/review/review_edit_form.html @@ -1,5 +1,5 @@ {% 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 %} diff --git a/hypha/apply/review/templates/review/review_form.html b/hypha/apply/review/templates/review/review_form.html index 5f34abea3ba654591c2f86b19cf22d60874b4750..22d64f82d4be0ce4e5ba93f2daa6a9d93d9ff952 100644 --- a/hypha/apply/review/templates/review/review_form.html +++ b/hypha/apply/review/templates/review/review_form.html @@ -1,5 +1,5 @@ {% 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 diff --git a/hypha/static_src/src/javascript/apply/review-form-score.js b/hypha/static_src/src/javascript/apply/review-form-score.js new file mode 100644 index 0000000000000000000000000000000000000000..2c9647f7789f0f39cc954dfa33be30d2869d1e36 --- /dev/null +++ b/hypha/static_src/src/javascript/apply/review-form-score.js @@ -0,0 +1,30 @@ +(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); diff --git a/hypha/static_src/src/sass/apply/components/_form.scss b/hypha/static_src/src/sass/apply/components/_form.scss index 901142410811fb1a8f14dc950514f99ba044f9b2..2426a46dbfc8c066b7df21bebcfb5be62b445ea7 100644 --- a/hypha/static_src/src/sass/apply/components/_form.scss +++ b/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; diff --git a/hypha/static_src/src/sass/apply/components/_wrapper.scss b/hypha/static_src/src/sass/apply/components/_wrapper.scss index 579b4711fcd8b3960e6b7bf95b5b6605eb0f9322..74a3e198a5d9e0e472a2d1f266eba97366026b5b 100644 --- a/hypha/static_src/src/sass/apply/components/_wrapper.scss +++ b/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;