From bee4b876f48c4d8dd0e59ee31847c55dba903ca4 Mon Sep 17 00:00:00 2001
From: Jorran de Wit <jorrandewit@outlook.com>
Date: Wed, 19 Apr 2017 09:23:52 +0200
Subject: [PATCH] Change cycle form to regular radiobuttons

---
 .../_form_submission_cycle_choice.html        | 122 +++++++++---------
 1 file changed, 62 insertions(+), 60 deletions(-)

diff --git a/submissions/templates/submissions/_form_submission_cycle_choice.html b/submissions/templates/submissions/_form_submission_cycle_choice.html
index 8b1a2d5b9..989596f4a 100644
--- a/submissions/templates/submissions/_form_submission_cycle_choice.html
+++ b/submissions/templates/submissions/_form_submission_cycle_choice.html
@@ -1,77 +1,79 @@
+{% load bootstrap %}
 <form method="post" action="{% url 'submissions:cycle_confirmation' submission.arxiv_identifier_w_vn_nr %}">
     {% csrf_token %}
-    <h3 class="mb-2">This submission is a resubmission, please choose which submission cycle to proceed with</h3>
-    <div class="card-deck mb-5" id="id_submission_cycle">
-        {% for choice in form.refereeing_cycle %}
-            <div class="card radio-option" for="{{choice.id_for_label}}" data-reinvite="{% if choice.choice_value == 'direct_rec' %}0{% else %}1{% endif %}">
-                <div class="card-block text-center">
-                    <span class="hidden-xs-up">{{choice.tag}}</span>
-
-                        <h3 class="card-title">{{choice.choice_label}}</h3>
-                        <p class="card-text text-muted">
-                            {% if choice.choice_value == 'short' %}
-                                Run a speedy refereeing round: two weeks, with option of reinviting previous referees
-                            {% elif choice.choice_value == 'direct_rec' %}
-                                Immediately write an editorial recommendation.
-                            {% else %}
-                                Run a new full refereeing round: four weeks as usual, can invite previous referees and/or new ones.
-                            {% endif %}
-                        </p>
-                        <label for="{{choice.id_for_label}}" class="text-blue">Choose this cycle</label>
-
-                </div>
-            </div>
-        {% endfor %}
+    <div class="row">
+        <div class="col-12">
+            <h3>This submission is a resubmission, please choose which submission cycle to proceed with</h3>
+        </div>
     </div>
-    <div class="card-deck" id="id_referees_reinvite_block" style="display: none;">
-        <div class="card">
-            <div class="card-block">
-                <h3 class="card-title">The following referees were also invited in the last submission</h3>
-                <h4 class="card-subtitle text-muted pt-0">Please choose who you want to reinvite</h4>
-                <div class="form-group row" id="id_referees_reinvite">
-                    <label class="col-form-label col-md-2" for="id_referees_reinvite">Reinvite referees</label>
-                    <div class="col-md-10 multiple-checkbox">
-                        <ul class="mb-0 list-group list-group-flush">
-                            {% for referee in form.referees_reinvite.field.queryset %}
-                                <li class="list-group-item py-1">
-                                    <label for="{{form.referees_reinvite.name}}_{{forloop.counter0}}" class="mb-0">
-                                        <input checked="checked" id="{{form.referees_reinvite.name}}_{{forloop.counter0}}" name="{{form.referees_reinvite.name}}" type="checkbox" value="{{referee.id}}">
-                                        <div class="d-inline-block" style="vertical-align: top;">
-                                            {{referee.referee_str}}
-                                            <br>
-                                            <span class="text-muted">Originally invited on {{referee.date_invited}}</span>
-                                        </div>
-                                     </label>
-                                 </li>
-                            {% endfor %}
-                        </ul>
-                    </div>
+
+    <!-- Refereeing cycle -->
+    <div class="form-group row">
+        <label class="col-form-label col-md-2 ">Refereeing cycle</label>
+        <div class="col-md-10">
+            {% for field in form.refereeing_cycle %}
+                <div class="radio" data-reinvite="{% if field.choice_value == 'direct_rec' %}0{% else %}1{% endif %}">
+                    <label for="{{field.id_for_label}}" class="mb-0">
+                        {{field.tag}}
+                        {{field.choice_label}}
+                    </label>
                 </div>
+                <p class="help-block text-muted">
+                    {{ field.help_text|safe }}
+                    {% if field.choice_value == 'short' %}
+                        Run a speedy refereeing round: two weeks, with option of reinviting previous referees
+                    {% elif field.choice_value == 'direct_rec' %}
+                        Immediately write an editorial recommendation.
+                    {% else %}
+                        Run a new full refereeing round: four weeks as usual, can invite previous referees and/or new ones.
+                    {% endif %}
+                </p>
+
+                {% for error in field.errors %}
+                    <span class="help-block {{ form.error_css_class }}">{{ error }}</span>
+                {% endfor %}
+            {% endfor %}
+        </div>
+    </div><!-- end refereeing cycle -->
+
+    <!-- Reinvite referees -->
+    <div id="id_referees_reinvite_block" style="display: none;">
+        <div class="row">
+            <div class="col-12">
+                <h3>The following referees were also invited in the last submission</h3>
+                <h4 class="text-muted">Please choose who you want to reinvite</h4>
             </div>
         </div>
+        <div class="form-group row">
+            <label class="col-form-label col-md-2 ">Reinvite referees</label>
+            <div class="col-md-10">
+                <ul class="list-group list-group-flush">
+                    {% for referee in form.referees_reinvite.field.queryset %}
+                        <li class="list-group-item py-1">
+                            <label for="{{form.referees_reinvite.name}}_{{forloop.counter0}}" class="mb-0">
+                                <input checked="checked" id="{{form.referees_reinvite.name}}_{{forloop.counter0}}" name="{{form.referees_reinvite.name}}" type="checkbox" value="{{referee.id}}">
+                                <div class="d-inline-block" style="vertical-align: top;">
+                                    {{referee.referee_str}}
+                                    <br>
+                                    <span class="text-muted">Originally invited on {{referee.date_invited}}</span>
+                                </div>
+                             </label>
+                         </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div><!-- end reinvite referees -->
     </div>
     <input type="submit" class="btn btn-primary" value="Confirm choice">
 </form>
 
 <script>
     $(function(){
-        $('#id_submission_cycle .radio-option').on('click change', function(){
-            var radio_clicked = $(this).find('input[type="radio"]');
-
-            // Uncheck all cycles except the one clicked and
-            $('#id_submission_cycle .radio-option input[type="radio"]')
-            .prop('checked', false)
-            .filter(radio_clicked)
-            .prop('checked', true);
-
-            // Toggle classes of cards
-            $('#id_submission_cycle .radio-option')
-            .removeClass('checked')
-            .filter(this)
-            .addClass('checked');
+        $('[name="{{form.refereeing_cycle.name}}"]').on('click change', function(){
+            var reinvite = $('[name="{{form.refereeing_cycle.name}}"]:checked').parents('.radio').attr('data-reinvite') == 1;
 
             // Show/hide invitation block
-            if($(this).attr('data-reinvite') > 0) {
+            if(reinvite > 0) {
                 $('#id_referees_reinvite_block').show();
             } else {
                 $('#id_referees_reinvite_block').hide();
-- 
GitLab