diff --git a/evap/contributor/templates/contributor_evaluation_form.html b/evap/contributor/templates/contributor_evaluation_form.html index a17df3006c630d200bcdac84c91b7d8e72a519e2..f3ec8ee53679d672d374ccac7e0972d2668cf941 100644 --- a/evap/contributor/templates/contributor_evaluation_form.html +++ b/evap/contributor/templates/contributor_evaluation_form.html @@ -32,29 +32,29 @@ <div class="card-body"> <h5 class="card-title">{% trans 'Course data' %}</h5> <div class="d-flex"> - <label class="col-md-3 form-label">{% trans 'Name (German)' %}</label> + <label class="col-md-3 pe-4 form-label">{% trans 'Name (German)' %}</label> <div class="col-md-7 form-static-text">{{ evaluation.course.name_de }}</div> </div> <div class="d-flex"> - <label class="col-md-3 form-label">{% trans 'Name (English)' %}</label> + <label class="col-md-3 pe-4 form-label">{% trans 'Name (English)' %}</label> <div class="col-md-7 form-static-text">{{ evaluation.course.name_en }}</div> </div> <div class="d-flex"> - <label class="col-md-3 form-label">{% trans 'Responsibles' %}</label> + <label class="col-md-3 pe-4 form-label">{% trans 'Responsibles' %}</label> <div class="col-md-7 form-static-text">{{ evaluation.course.responsibles_names }}</div> </div> <div class="d-flex"> - <label class="col-md-3 form-label">{% trans 'Degrees' %}</label> + <label class="col-md-3 pe-4 form-label">{% trans 'Degrees' %}</label> <div class="col-md-7 form-static-text"> {% for degree in evaluation.course.degrees.all %} - <span class="badge badge-primary">{{ degree }}</span> + <span class="badge bg-primary">{{ degree }}</span> {% endfor %} </div> </div> <div class="d-flex"> - <label class="col-md-3 form-label">{% trans 'Course type' %}</label> + <label class="col-md-3 pe-4 form-label">{% trans 'Course type' %}</label> <div class="col-md-7 form-static-text"> - <span class="badge badge-secondary">{{ evaluation.course.type }}</span> + <span class="badge bg-secondary">{{ evaluation.course.type }}</span> </div> </div> </div> @@ -62,7 +62,7 @@ <div class="card mb-3"> <div class="card-body"> <div class="d-flex"> - <h5 class="card-title mr-auto">{% trans 'Evaluation data' %}</h5> + <h5 class="card-title me-auto">{% trans 'Evaluation data' %}</h5> {% if not evaluation.allow_editors_to_edit %} <div> <button type="button" class="btn btn-sm btn-light" onclick="changeEvaluationRequestModalShow();" id="changeEvaluationRequestModalButton"> @@ -84,7 +84,7 @@ <div class="card-body"> <fieldset> <div class="d-flex"> - <h5 class="card-title mr-auto">{% trans 'Participants' %}</h5> + <h5 class="card-title me-auto">{% trans 'Participants' %}</h5> <div> <button type="button" class="btn btn-sm btn-light" onclick="changeParticipantRequestModalShow();" id="changeParticipantRequestModalButton"> {% trans 'Request changes' %} @@ -120,13 +120,13 @@ <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="previewModalLabel">{% trans 'Preview' %}</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="fas fa-times"></span></button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> {{ preview_html|safe }} </div> <div class="modal-footer"> - <button type="button" class="btn btn-light" data-dismiss="modal">{% trans 'Close' %}</button> + <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% trans 'Close' %}</button> </div> </div> </div> @@ -165,7 +165,8 @@ {% if preview_html %} <script type="text/javascript"> - $('#previewModal').modal(); + var previewModal = new bootstrap.Modal(document.getElementById('previewModal')); + previewModal.show(); </script> {% endif %} {% endblock %} diff --git a/evap/contributor/templates/contributor_index.html b/evap/contributor/templates/contributor_index.html index 008667740cb984b859dce4e71cc100a87766b2c5..511765be00ddb8866157a642ed37c71766d924be 100644 --- a/evap/contributor/templates/contributor_index.html +++ b/evap/contributor/templates/contributor_index.html @@ -12,9 +12,7 @@ <div class="callout-header d-flex"> <span class="fas fa-info-circle callout-icon"></span> <span>{% trans 'Information for contributors' %}</span> - <button type="button" class="close callout-closable-close ml-auto" data-dismiss="modal" aria-label="Close"> - <span class="fas fa-times"></span> - </button> + <button type="button" class="btn-close callout-closable-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="callout-content small"> <b>{% trans 'Delegates' %}</b><br /> @@ -25,23 +23,23 @@ {% if user.is_delegate %} {% blocktrans %}Evaluations from lecturers who set you as a delegate are marked with a label below.{% endblocktrans %}<br /> {% endif %} - <em>{% trans 'More details:' %} <a href="/faq#15-q">{% trans 'FAQ/Delegates' %}</a></em><br /> + <em>{% trans 'More details:' %} <a href="/faq#faq-15-q">{% trans 'FAQ/Delegates' %}</a></em><br /> <br /> <b>{% trans 'States of the evaluations' %}</b><br /> {% blocktrans %}You can only edit evaluations which are in the state "prepared". After you approved an evaluation it will automatically change to the state "editor approved" and your preparation is finished.{% endblocktrans %}<br /> - <em>{% trans 'More details:' %} <a href="/faq#18-q">{% trans 'FAQ/States' %}</a></em><br /> + <em>{% trans 'More details:' %} <a href="/faq#faq-18-q">{% trans 'FAQ/States' %}</a></em><br /> <br /> <b>{% trans 'Evaluation Results' %}</b><br /> {% blocktrans %}Text answers will be shown to the people who were evaluated and to the person responsible for the course. Voting answers will be published for all users of the platform if at least two people participated in the evaluation. The average grade is calculated if the participation rate is at least 20 percent.{% endblocktrans %}<br /> - <em>{% trans 'More details:' %} <a href="/faq#3-s">{% trans 'FAQ/Results' %}</a></em> + <em>{% trans 'More details:' %} <a href="/faq#faq-3-s">{% trans 'FAQ/Results' %}</a></em> </div> </div> <div class="d-flex mb-3"> - <div class="ml-auto d-print-none"> + <div class="ms-auto d-print-none"> <a href="{% url 'contributor:export' %}" class="btn btn-sm btn-light">{% trans 'Export results' %}</a> </div> {% if user.is_delegate %} - <div class="btn-switch btn-switch-light mb-auto ml-2 d-print-none"> + <div class="btn-switch btn-switch-light mb-auto ms-2 d-print-none"> <div class="btn-switch-label"><span class="fas fa-user-friends"></span> {% trans 'Delegated evaluations' %}</div> <div class="btn-switch btn-group"> <a href="{% url 'contributor:index' %}?show_delegated=true" role="button" class="btn btn-sm btn-light{% if show_delegated %} active{% endif %}"> @@ -82,16 +80,16 @@ {{ course.name }} </div> {% for degree in course.degrees.all %} - <span class="badge badge-primary">{{ degree }}</span> + <span class="badge bg-primary">{{ degree }}</span> {% endfor %} - <span class="badge badge-secondary">{{ course.type }}</span> + <span class="badge bg-secondary">{{ course.type }}</span> </td> <td></td> <td></td> <td></td> <td> {% if course.not_all_evaluations_are_published %} - <div class="d-flex" data-toggle="tooltip" data-placement="left" title="{% trans 'Course result is not yet available.' %}"> + <div class="d-flex" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Course result is not yet available.' %}"> {% include 'distribution_with_grade_disabled.html' with icon="fas fa-hourglass-half" %} </div> {% else %} @@ -111,17 +109,17 @@ <td> <div class="evaluation-name"> {% if evaluation.delegated_evaluation %} - <span class="badge badge-secondary-outline" data-toggle="tooltip" data-placement="top" + <span class="badge bg-secondary-outline" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'You are a delegate of a contributor who can edit the evaluation.' %}"> <span class="fas fa-user-friends"></span> </span> {% elif evaluation.contributes_to %} - <span class="badge badge-primary-outline" data-toggle="tooltip" data-placement="top" + <span class="badge bg-primary-outline" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'You are listed as a contributor for this evaluation.' %}"> <span class="fas fa-chalkboard-teacher"></span> </span> {% else %} - <span class="badge badge-secondary-outline" data-toggle="tooltip" data-placement="top" + <span class="badge bg-secondary-outline" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'You are not listed as a contributor for this evaluation.' %}"> <span class="fas fa-user-slash"></span> </span> @@ -139,14 +137,14 @@ {% if course.evaluation_count == 1 %} {% include 'evaluation_badges.html' with mode='contributor' %} {% else %} - {% if evaluation.is_midterm_evaluation %}<span class="badge badge-dark">{% trans 'Midterm evaluation' %}</span>{% endif %} + {% if evaluation.is_midterm_evaluation %}<span class="badge bg-dark">{% trans 'Midterm evaluation' %}</span>{% endif %} {% if evaluation.is_single_result %} - <span class="badge badge-success">{% trans 'Single result' %}</span> + <span class="badge bg-success">{% trans 'Single result' %}</span> {% endif %} {% endif %} </td> <td> - <span data-toggle="tooltip" data-placement="left" title="{{ evaluation.state|statedescription }}">{{ evaluation.state|statename }}</span> + <span data-bs-toggle="tooltip" data-bs-placement="left" title="{{ evaluation.state|statedescription }}">{{ evaluation.state|statename }}</span> </td> <td> {% if evaluation.is_single_result %} @@ -167,17 +165,17 @@ <span class="fas fa-user"></span> {{ evaluation.num_participants }} </td> {% endif %} - <td class="text-right"> + <td class="text-end"> {% if evaluation.state != evaluation.State.PUBLISHED and not evaluation.is_single_result %} {% if evaluation|is_user_editor_or_delegate:user %} {% if evaluation.state == evaluation.State.PREPARED %} <a href="{% url 'contributor:evaluation_edit' evaluation.id %}" class="btn btn-primary btn-row-hover" - data-toggle="tooltip" data-placement="top" title="{% trans 'Edit or approve' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Edit or approve' %}"> <span class="fas fa-pencil-alt"></span> </a> {% if not evaluation|has_nonresponsible_editor %} - <a href="#" class="btn btn-sm btn-dark" data-toggle="tooltip" - data-placement="top" title="{% trans 'Delegate preparation' %}" + <a href="#" class="btn btn-sm btn-dark" data-bs-toggle="tooltip" + data-bs-placement="top" title="{% trans 'Delegate preparation' %}" onclick="delegateSelectionModalShow(`{{ evaluation.full_name }}`, `{% url 'contributor:evaluation_direct_delegation' evaluation.id %}`);return false;" > <span class="fas fa-hand-point-right fa-flip-horizontal"></span> @@ -185,7 +183,7 @@ {% endif %} {% elif evaluation.state == evaluation.State.EDITOR_APPROVED or evaluation.state == evaluation.State.APPROVED %} <a href="{% url 'contributor:evaluation_view' evaluation.id %}" class="btn btn-sm btn-light" - data-toggle="tooltip" data-placement="top" + data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'You already approved the evaluation, the edit form will be disabled.' %}"> <span class="fas fa-pencil-alt"></span> </a> @@ -193,12 +191,12 @@ {% endif %} {% if evaluation|is_user_responsible_or_contributor_or_delegate:user %} <a href="{% url 'contributor:evaluation_preview' evaluation.id %}" class="btn btn-sm btn-light" - data-toggle="tooltip" data-placement="top" title="{% trans 'Preview' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Preview' %}"> <span class="fas fa-eye"></span> </a> {% endif %} {% elif evaluation.state != evaluation.State.PUBLISHED and evaluation.is_single_result %} - <div class="d-flex" data-toggle="tooltip" data-placement="left" title="{% trans 'You will receive an email when the results are published.' %}"> + <div class="d-flex" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'You will receive an email when the results are published.' %}"> {% include 'distribution_with_grade_disabled.html' with icon="fas fa-hourglass-half" weight_info=evaluation|weight_info %} </div> {% elif evaluation.state == evaluation.State.PUBLISHED %} @@ -227,17 +225,17 @@ {% csrf_token %} <div class="modal-header"> <h5 class="modal-title" id="{{ modal_id }}Label">{% trans 'Delegate preparation' %}</h5> - <button class="close" data-dismiss="modal" aria-label="Close"><span class="fas fa-times"></span></button> + <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> - {% trans 'Do you really want to delegate the preparation of the evaluation <strong id="data-label"></strong>?' %} + {% trans 'Do you really want to delegate the preparation of the evaluation <strong data-label=""></strong>?' %} <div class="pt-4"> {% include 'bootstrap_form.html' with form=delegate_selection_form wide=True %} </div> </div> <div class="modal-footer"> <button type="submit" id="btn-action" class="btn btn-primary">{% trans 'Delegate preparation' %}</button> - <button type="button" class="btn btn-light" data-dismiss="modal">{% trans 'Cancel' %}</button> + <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% trans 'Cancel' %}</button> </div> </form> </div> @@ -250,7 +248,7 @@ $('#{{ modal_id }} form').attr('action', action); // put the correct evaluation name in the modal - $('#{{ modal_id }} #data-label').text(evaluationName); + $('#{{ modal_id }} [data-label=""]').text(evaluationName); // fix incorrect select2 width calculation that occurrs because the select2 is applied while the modal is invisible $('#{{ modal_id }} span.select2').width("100%"); @@ -259,7 +257,8 @@ $('#{{ modal_id }} select').val(null).trigger('change'); // show modal - $('#{{ modal_id }}').modal(); + var {{ modal_id }} = new bootstrap.Modal(document.getElementById('{{ modal_id }}')); + {{ modal_id }}.show(); } </script> {% endwith %} diff --git a/evap/development/templates/development_components.html b/evap/development/templates/development_components.html index 5b31d80edd7a31e3899c6c4ac0c8dc1e6a70479d..ac50357d90cc02373573eb4d1f1cffc3dffb03f2 100644 --- a/evap/development/templates/development_components.html +++ b/evap/development/templates/development_components.html @@ -11,7 +11,7 @@ {% endblock %} {% block content %} - <div class="card-deck mb-3"> + <div class="mb-3"> <div class="card"> <div class="card-header"> Card @@ -51,14 +51,14 @@ <div class="row mb-2"> {% for color in theme_colors %} <div class="col"> - <div class="badge badge-{{ color }}">{{ color|title }}</div> + <div class="badge bg-{{ color }}">{{ color|title }}</div> </div> {% endfor %} </div> <div class="row mb-2"> <div class="col"></div> <div class="col"> - <div class="badge badge-secondary-outline">Secondary Outline</div> + <div class="badge bg-secondary-outline">Secondary Outline</div> </div> <div class="col"></div> <div class="col"></div> @@ -70,26 +70,26 @@ <div class="row mb-2"> {% for color in theme_colors %} <div class="col"> - <div class="badge badge-pill badge-{{ color }}">{{ color|title }}</div> + <div class="badge rounded-pill bg-{{ color }}">{{ color|title }}</div> </div> {% endfor %} </div> <div class="row"> <div class="col-3"> <button type="button" class="btn btn-sm btn-light"> - <div class="badge badge-pill badge-btn">17</div> + <div class="badge rounded-pill badge-btn">17</div> </button> </div> <div class="col-3"> <button type="button" class="btn btn-sm btn-light"> Sum - <div class="badge badge-pill badge-btn">25</div> + <div class="badge rounded-pill badge-btn">25</div> </button> </div> <div class="col-3"> <button type="button" class="btn btn-sm btn-light"> Zero - <div class="badge badge-pill badge-btn-zero">0</div> + <div class="badge rounded-pill badge-btn-zero">0</div> </button> </div> </div> @@ -250,9 +250,7 @@ <div class="callout-header d-flex"> <span class="fas fa-info-circle callout-icon"></span> <span>Information</span> - <button type="button" class="close callout-closable-close ml-auto" data-dismiss="modal" aria-label="Close"> - <span class="fas fa-times"></span> - </button> + <button type="button" class="btn-close callout-closable-close ms-auto" data-bs-dismiss="modal" aria-label="Close"> </div> <div class="callout-content"> Give the user some explanation. @@ -272,29 +270,29 @@ Unipolar </div> <div class="vote-answer-buttons"> - <div class="vote-inputs vote-type-unipolar btn-group btn-group-toggle" data-toggle="buttons"> - <label class="btn btn-sm vote-btn vote-btn-green d-flex"> - <input type="radio" value="1" autocomplete="off" /> + <div class="vote-inputs vote-type-unipolar btn-group" data-bs-toggle="buttons"> + <input class="btn-check" type="radio" value="1" autocomplete="off" /> + <label class="btn btn-sm vote-btn vote-btn-green d-flex"> <span class="m-auto vote-btn-text">Strongly<br />agree </span> </label> + <input class="btn-check" type="radio" value="2" autocomplete="off" /> <label class="btn btn-sm vote-btn vote-btn-lime d-flex"> - <input type="radio" value="2" autocomplete="off" /> <span class="m-auto vote-btn-text">Agree </span> </label> + <input class="btn-check" type="radio" value="3" autocomplete="off" /> <label class="btn btn-sm vote-btn vote-btn-yellow d-flex"> - <input type="radio" value="3" autocomplete="off" /> <span class="m-auto vote-btn-text">Neutral </span> </label> + <input class="btn-check" type="radio" value="4" autocomplete="off" /> <label class="btn btn-sm vote-btn vote-btn-orange d-flex"> - <input type="radio" value="4" autocomplete="off" /> <span class="m-auto vote-btn-text">Disagree </span> </label> + <input class="btn-check" type="radio" value="5" autocomplete="off" /> <label class="btn btn-sm vote-btn vote-btn-red d-flex"> - <input type="radio" value="5" autocomplete="off" /> <span class="m-auto vote-btn-text">Strongly<br />disagree </span> </label> + <input class="btn-check" type="radio" value="6" autocomplete="off" /> <label class="btn btn-sm vote-btn vote-btn-gray d-flex"> - <input type="radio" value="6" autocomplete="off" /> <span class="m-auto vote-btn-text">No answer </span> </label> </div> @@ -305,37 +303,37 @@ Bipolar </div> <div class="vote-answer-buttons"> - <div class="vote-inputs vote-type-bipolar btn-group btn-group-toggle" data-toggle="buttons"> + <div class="vote-inputs vote-type-bipolar btn-group" data-bs-toggle="buttons"> + <input class="btn-check" type="radio" value="-3" autocomplete="off" /> <label class="btn btn-sm vote-btn vote-btn-red d-flex"> - <input type="radio" value="-3" autocomplete="off" /> <span class="m-auto vote-btn-text">Way too<br />small</span> </label> - <label class="btn btn-sm vote-btn vote-btn-orange d-flex"> - <input type="radio" value="-2" autocomplete="off" /> + <input class="btn-check" type="radio" value="-2" autocomplete="off" /> + <label class="btn btn-sm vote-btn vote-btn-orange d-flex"> <span class="m-auto vote-btn-text">Too<br />small</span> </label> - <label class="btn btn-sm vote-btn vote-btn-lime d-flex"> - <input type="radio" value="-1" autocomplete="off" /> + <input class="btn-check" type="radio" value="-1" autocomplete="off" /> + <label class="btn btn-sm vote-btn vote-btn-lime d-flex"> <span class="m-auto vote-btn-text">Slightly too<br />small</span> </label> - <label class="btn btn-sm vote-btn vote-btn-green d-flex"> - <input type="radio" value="0" autocomplete="off" /> + <input class="btn-check" type="radio" value="0" autocomplete="off" /> + <label class="btn btn-sm vote-btn vote-btn-green d-flex"> <span class="m-auto vote-btn-text">Ideal</span> </label> - <label class="btn btn-sm vote-btn vote-btn-lime d-flex"> - <input type="radio" value="1" autocomplete="off" /> + <input class="btn-check" type="radio" value="1" autocomplete="off" /> + <label class="btn btn-sm vote-btn vote-btn-lime d-flex"> <span class="m-auto vote-btn-text">Slightly too<br />large</span> </label> - <label class="btn btn-sm vote-btn vote-btn-orange d-flex"> - <input type="radio" value="2" autocomplete="off" /> + <input class="btn-check" type="radio" value="2" autocomplete="off" /> + <label class="btn btn-sm vote-btn vote-btn-orange d-flex"> <span class="m-auto vote-btn-text">Too<br />large</span> </label> - <label class="btn btn-sm vote-btn vote-btn-red d-flex"> - <input type="radio" value="3" autocomplete="off" /> + <input class="btn-check" type="radio" value="3" autocomplete="off" /> + <label class="btn btn-sm vote-btn vote-btn-red d-flex"> <span class="m-auto vote-btn-text">Way too<br />large</span> </label> - <label class="btn btn-sm vote-btn vote-btn-gray d-flex"> - <input type="radio" value="6" autocomplete="off" /> + <input class="btn-check" type="radio" value="6" autocomplete="off" /> + <label class="btn btn-sm vote-btn vote-btn-gray d-flex"> <span class="m-auto vote-btn-text">No answer</span> </label> </div> @@ -346,17 +344,17 @@ Yes-No </div> <div class="vote-answer-buttons"> - <div class="vote-inputs vote-type-yes-no btn-group btn-group-toggle" data-toggle="buttons"> - <label class="btn btn-sm vote-btn vote-btn-green d-flex"> - <input type="radio" value="1" autocomplete="off" /> + <div class="vote-inputs vote-type-yes-no btn-group" data-bs-toggle="buttons"> + <input class="btn-check" type="radio" value="1" autocomplete="off" /> + <label class="btn btn-sm vote-btn vote-btn-green d-flex"> <span class="m-auto vote-btn-text">Yes</span> </label> - <label class="btn btn-sm vote-btn vote-btn-red d-flex"> - <input type="radio" value="5" autocomplete="off" /> + <input class="btn-check" type="radio" value="5" autocomplete="off" /> + <label class="btn btn-sm vote-btn vote-btn-red d-flex"> <span class="m-auto vote-btn-text">No</span> </label> - <label class="btn btn-sm vote-btn vote-btn-gray d-flex"> - <input type="radio" value="6" autocomplete="off" /> + <input class="btn-check" type="radio" value="6" autocomplete="off" /> + <label class="btn btn-sm vote-btn vote-btn-gray d-flex"> <span class="m-auto vote-btn-text">No answer</span> </label> </div> @@ -409,7 +407,7 @@ </div> </div> {% endspaceless %} - <div class="badge-grade ml-2" style="background-color: rgb(177, 205, 82)">1.8</div> + <div class="badge-grade ms-2" style="background-color: rgb(177, 205, 82)">1.8</div> </div> </td> </tr> @@ -460,7 +458,7 @@ </div> </div> {% endspaceless %} - <div class="badge-grade ml-2" style="background-color: rgb(177, 205, 82)">1.8</div> + <div class="badge-grade ms-2" style="background-color: rgb(177, 205, 82)">1.8</div> </div> </td> </tr> @@ -484,7 +482,7 @@ Let all cells contain a link so that the whole row appears as one link. </td> <td> - <div class="badge badge-primary">Badge</div> + <div class="badge bg-primary">Badge</div> </td> </tr> </tbody> @@ -503,7 +501,7 @@ </div> <div class="card collapsible"> <div class="card-header"> - <a href="#collapse" class="collapse-toggle" data-toggle="collapse" aria-expanded="false">Collapsible</a> + <a href="#collapse" class="collapse-toggle" data-bs-toggle="collapse" aria-expanded="false">Collapsible</a> </div> <div id="collapse" class="collapse show"> <div class="card-body"> diff --git a/evap/evaluation/templates/base.html b/evap/evaluation/templates/base.html index 366b57bbc843f0005669a3b6ce5511e5dfa12258..0697b9b28d96b5b502e31f69c796a5ce58ce7751 100644 --- a/evap/evaluation/templates/base.html +++ b/evap/evaluation/templates/base.html @@ -7,156 +7,159 @@ {% endspaceless %}<!DOCTYPE html> {% get_current_language as LANGUAGE_CODE %} <html lang="{{ LANGUAGE_CODE }}"> -<head> - {% block header %} - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - <title>{% block title %}EvaP{% endblock %}</title> - - <link rel="stylesheet" href="{% static 'css/select2.min.css' %}" /> - <link rel="stylesheet" href="{% static 'css/bootstrap-datetimepicker.min.css' %}" /> - <link rel="stylesheet" href="{% static 'css/evap.css' %}" /> - {% if debug %} - <link rel="icon" type="image/png" sizes="64x64" href="{% static 'images/favicon_gray.png' %}" /> - {% else %} - <link rel="icon" type="image/png" sizes="64x64" href="{% static 'images/favicon_64.png' %}" /> - <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicon_32.png' %}" /> - <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicon_16.png' %}" /> - {% endif %} - {% endblock %} -</head> -<body> -{% block modals %} - {% if user.is_authenticated %} - {% trans 'Feedback' as title %} - {% trans 'You are welcome to submit feedback regarding the evaluation platform or specific evaluations. Please let us know how we can improve your experience on EvaP.' as teaser %} - {% include 'contact_modal.html' with modal_id='feedbackModal' user=request.user title=title teaser=teaser %} - {% endif %} -{% endblock %} - -<div class="sticky-top d-print-none"> - {% cache 3600 navbar request.user.email LANGUAGE_CODE %} - {% include_navbar user LANGUAGE_CODE %} - {% endcache %} - - {% block breadcrumb_bar %} - {% endblock %} -</div> - -<img class="print-brand-image d-none d-print-block" src="{% static 'images/evap.png' %}" alt="{% trans 'Evaluation Platform' %}" /> - -<div class="container mb-4 pt-3"> - {% for message in messages %} - <div class="alert alert-{{ message.tags|message_class }} alert-dismissable"> - <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> - <span class="fas fa-times"></span> - </button> - {{ message }} + <head> + {% block header %} + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> + <title>{% block title %}EvaP{% endblock %}</title> + + <link rel="stylesheet" href="{% static 'css/select2.min.css' %}" /> + <link rel="stylesheet" href="{% static 'css/bootstrap-datetimepicker.min.css' %}" /> + <link rel="stylesheet" href="{% static 'css/evap.css' %}" /> + {% if debug %} + <link rel="icon" type="image/png" sizes="64x64" href="{% static 'images/favicon_gray.png' %}" /> + {% else %} + <link rel="icon" type="image/png" sizes="64x64" href="{% static 'images/favicon_64.png' %}" /> + <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicon_32.png' %}" /> + <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicon_16.png' %}" /> + {% endif %} + {% endblock %} + </head> + <body> + <script type="text/javascript" src="{% static 'bootstrap/dist/js/bootstrap.bundle.min.js' %}"></script> + + {% block modals %} + {% if user.is_authenticated %} + {% trans 'Feedback' as title %} + {% trans 'You are welcome to submit feedback regarding the evaluation platform or specific evaluations. Please let us know how we can improve your experience on EvaP.' as teaser %} + {% include 'contact_modal.html' with modal_id='feedbackModal' user=request.user title=title teaser=teaser %} + {% endif %} + {% endblock %} + + <div class="sticky-top d-print-none"> + {% cache 3600 navbar request.user.email LANGUAGE_CODE %} + {% include_navbar user LANGUAGE_CODE %} + {% endcache %} + + {% block breadcrumb_bar %} + {% endblock %} </div> - {% endfor %} - {% block content %} - {% endblock %} -</div> + <img class="print-brand-image d-none d-print-block" src="{% static 'images/evap.png' %}" alt="{% trans 'Evaluation Platform' %}" /> -{% include 'footer.html' %} + <div class="container mb-4 pt-3"> + {% for message in messages %} + <div class="alert alert-{{ message.tags|message_class }} alert-dismissible"> + {{ message }} + <button type="button" class="btn-close" data-bs-dismiss="alert"></button> + </div> + {% endfor %} -<script type="text/javascript" src="{% static 'js/jquery-2.1.3.min.js' %}"></script> -<script type="text/javascript" src="{% static 'js/popper-1.14.1.min.js' %}"></script> -<script type="text/javascript" src="{% static 'bootstrap/dist/js/bootstrap.min.js' %}"></script> - -<script type="text/javascript" src="{% static 'js/select2.min.js' %}"></script> -<script type="text/javascript" src="{% static 'js/locale/select2_de.js' %}"></script> -<script type="text/javascript" src="{% static 'js/locale/select2_en.js' %}"></script> -<script type="text/javascript" src="{% static 'js/plugins/jquery.formset.js' %}"></script> -<script type="text/javascript" src="{% static 'js/Sortable.min.js' %}"></script> + {% block content %} + {% endblock %} + </div> -<script type="module" src="{% static 'js/csrf-utils.js' %}"></script> + {% include 'footer.html' %} + + <script type="text/javascript" src="{% static 'js/jquery-2.1.3.min.js' %}"></script> + <script type="text/javascript" src="{% static 'js/select2.min.js' %}"></script> + <script type="text/javascript" src="{% static 'js/locale/select2_de.js' %}"></script> + <script type="text/javascript" src="{% static 'js/locale/select2_en.js' %}"></script> + <script type="text/javascript" src="{% static 'js/plugins/jquery.formset.js' %}"></script> + <script type="text/javascript" src="{% static 'js/Sortable.min.js' %}"></script> + + <script type="module" src="{% static 'js/csrf-utils.js' %}"></script> + + <script type="text/javascript"> + activateTooltips = function(selector = "") { + var tooltipTriggerList = [].slice.call(document.querySelectorAll(selector + ' [data-bs-toggle="tooltip"]')) + var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { + var container = 'body'; + if (tooltipTriggerEl.dataset.container){ + container = tooltipTriggerEl.closest(tooltipTriggerEl.dataset.container); + } + return new bootstrap.Tooltip(tooltipTriggerEl, {container: container, html: true, trigger: 'hover'}) + }) + + }; + activateTooltips(); + + // These are workarounds around incompatibilities of django, django-dynamic-formsets, and select2. + // select2 can't handle already select2'd forms that were copies made by + // django-dynamic-formsets' "add another" button, so we take a copy of a non-select2'd form here + var templateForm = $(".select2tr").last().clone(); + + // later we use this class to give this to django-dynamic-formsets + // as template and to make sure it does not get select2'd + templateForm.addClass("form-template").css("display", "none"); + // for some reason django-dynamic-formsets does not hide the checkbox like it should + templateForm.find(':checkbox').last().attr("type", "hidden"); + // For some reason, django validates this template if it's part of the form, so we insert the copy outside of the form. + templateForm.insertAfter($('.select2form')); + + // put this into a function for later re-use + applySelect2 = function(elem, parent = $(document.body)) { + elem.each(function() { + $(this).select2({ + language: "{{ LANGUAGE_CODE }}", + placeholder: "{% trans 'Please select...' %}", + minimumResultsForSearch: 15, + minimumInputLength: $(this).children('option').length > 50 ? 3 : 0, + allowClear: this.multiple, + dropdownParent: parent + }); + }); + }; + applySelect2($('select').not('.form-template select').not('[disabled]').not('.no-select2').not('#id_delegate_to')); + // handle delegation modal, which includes a dropdown select field + applySelect2($('select#id_delegate_to'), $('#delegateSelectionModal')); + + // don't use the placeholder text on disabled select2 elements + applySelect2Disabled = function(elem) { + elem.select2(); + }; + applySelect2Disabled($('select[disabled]').not('.form-template select')); + + // fix Bootstrap bug that selecting toggle buttons via keyboard controls is only visually + // https://github.com/twbs/bootstrap/issues/26855 + $(document).on("click", '[data-bs-toggle^="button"] input[type="radio"]', function(event) { + // Bootstrap will call event.preventDefault() which results into a reset of the radio buttons before the keyboard input. + // To work around this, we set the method to one without side effects. + event.preventDefault = () => true; + }); -<script type="text/javascript"> - activateTooltips = function(selector = "") { - $(selector + ' [data-toggle="tooltip"]') - .tooltip({container: 'body', html: true, trigger: 'hover'}) - .on('inserted.bs.tooltip', event => { - // trigger an immediate update of the tooltip to avoid later reposition - setTimeout(() => $(event.target).tooltip('update'), 0); + // fix scrolling to required field when the browser does form validation + // taken from http://stackoverflow.com/questions/19814673/html5-input-required-scroll-to-input-with-fixed-navbar-on-submit + var delay = 0; + var offset = 150; + document.addEventListener('invalid', function(e){ + $(e.target).addClass("invalid"); + $('html, body').animate({scrollTop: $($(".invalid")[0]).offset().top - offset }, delay); + }, true); + document.addEventListener('change', function(e){ + $(e.target).removeClass("invalid") + }, true); + + // activate clickable hover tables + $(".table-seamless-links [data-url]").each(function() { + const row = $(this); + const link = "<a href='" + row.data("url") + "'></a>"; + row.children().wrapInner(link); }); - }; - activateTooltips(); - - // These are workarounds around incompatibilities of django, django-dynamic-formsets, and select2. - // select2 can't handle already select2'd forms that were copies made by - // django-dynamic-formsets' "add another" button, so we take a copy of a non-select2'd form here - var templateForm = $(".select2tr").last().clone(); - - // later we use this class to give this to django-dynamic-formsets - // as template and to make sure it does not get select2'd - templateForm.addClass("form-template").css("display", "none"); - // for some reason django-dynamic-formsets does not hide the checkbox like it should - templateForm.find(':checkbox').last().attr("type", "hidden"); - // For some reason, django validates this template if it's part of the form, so we insert the copy outside of the form. - templateForm.insertAfter($('.select2form')); - - // put this into a function for later re-use - applySelect2 = function(elem) { - elem.each(function() { - $(this).select2({ - language: "{{ LANGUAGE_CODE }}", - placeholder: "{% trans 'Please select...' %}", - minimumResultsForSearch: 15, - minimumInputLength: $(this).children('option').length > 50 ? 3 : 0, - allowClear: this.multiple + + $(".hover-row").each(function() { + const row = $(this); + row + .find(".btn:not(.btn-row-hover)") + .mouseover(() => row.removeClass("hover-row")) + .mouseout(() => row.addClass("hover-row")); }); - }); - }; - applySelect2($('select').not('.form-template select').not('[disabled]').not('.no-select2')); - - // don't use the placeholder text on disabled select2 elements - applySelect2Disabled = function(elem) { - elem.select2(); - }; - applySelect2Disabled($('select[disabled]').not('.form-template select')); - - // fix Bootstrap bug that selecting toggle buttons via keyboard controls is only visually - // https://github.com/twbs/bootstrap/issues/26855 - $(document).on("click", '[data-toggle^="button"] input[type="radio"]', function(event) { - // Bootstrap will call event.preventDefault() which results into a reset of the radio buttons before the keyboard input. - // To work around this, we set the method to one without side effects. - event.preventDefault = () => true; - }); - - // fix scrolling to required field when the browser does form validation - // taken from http://stackoverflow.com/questions/19814673/html5-input-required-scroll-to-input-with-fixed-navbar-on-submit - var delay = 0; - var offset = 150; - document.addEventListener('invalid', function(e){ - $(e.target).addClass("invalid"); - $('html, body').animate({scrollTop: $($(".invalid")[0]).offset().top - offset }, delay); - }, true); - document.addEventListener('change', function(e){ - $(e.target).removeClass("invalid") - }, true); - - // activate clickable hover tables - $(".table-seamless-links [data-url]").each(function() { - const row = $(this); - const link = "<a href='" + row.data("url") + "'></a>"; - row.children().wrapInner(link); - }); - - $(".hover-row").each(function() { - const row = $(this); - row - .find(".btn:not(.btn-row-hover)") - .mouseover(() => row.removeClass("hover-row")) - .mouseout(() => row.addClass("hover-row")); - }); - - function setSpinnerIcon(id) { - $("#" + id).empty().removeClass().addClass('fas fa-spinner fa-spin'); - }; -</script> - -{% block additional_javascript %}{% endblock %} -</body> + + function setSpinnerIcon(id) { + $("#" + id).empty().removeClass().addClass('fas fa-spinner fa-spin'); + }; + </script> + + {% block additional_javascript %}{% endblock %} + </body> </html> diff --git a/evap/evaluation/templates/bootstrap_form_field.html b/evap/evaluation/templates/bootstrap_form_field.html index 11c1079bc35564ebfac14c0caeee56b27e229534..8d03d0473ac1409fce50493e5e8a5bac74cb1f3a 100644 --- a/evap/evaluation/templates/bootstrap_form_field.html +++ b/evap/evaluation/templates/bootstrap_form_field.html @@ -1,15 +1,15 @@ {% if field.is_hidden %} {{ field }} {% else %} - <div class="form-group d-md-flex"> + <div class="mb-3 d-md-flex"> {% if wide %} - {% include 'bootstrap_form_field_label.html' with field=field class='col-md-5' %} + {% include 'bootstrap_form_field_label.html' with field=field class='col-md-5 pe-4' %} {% include 'bootstrap_form_field_widget.html' with field=field class='col-md-7' %} {% elif email_form %} - {% include 'bootstrap_form_field_label.html' with field=field class='col-md-2' %} + {% include 'bootstrap_form_field_label.html' with field=field class='col-md-2 pe-4' %} {% include 'bootstrap_form_field_widget.html' with field=field class='col-md-10' %} {% else %} - {% include 'bootstrap_form_field_label.html' with field=field class='col-md-3' %} + {% include 'bootstrap_form_field_label.html' with field=field class='col-md-3 pe-4' %} {% include 'bootstrap_form_field_widget.html' with field=field class='col-md-7' %} {% endif %} </div> diff --git a/evap/evaluation/templates/bootstrap_form_pill_group.html b/evap/evaluation/templates/bootstrap_form_pill_group.html index 88fcb8979d922fec82fb207a07b5547ceddf8a45..ecf92ac084fbf57339cb87d5b064da86487dd828 100644 --- a/evap/evaluation/templates/bootstrap_form_pill_group.html +++ b/evap/evaluation/templates/bootstrap_form_pill_group.html @@ -1,16 +1,16 @@ -<div class="form-group d-md-flex"> - <div class="col-md-2"> - <div class="nav nav-pills btn-switch btn-group-vertical float-right" role="tablist"> +<div class="mb-3 d-md-flex"> + <div class="col-md-2 pe-4 form-label"> + <div class="nav flex-column nav-pills btn-switch" role="tablist"> {% for field in fields %} - <a class="px-2 py-1 space-normal font-weight-bold btn btn-light text-center nav-link {% if forloop.first %}show active{% endif %}" href="#tab-{{ field.id_for_label }}" data-toggle="pill" role="tab" aria-controls="pills-{{ field.label }}" aria-selected="{% if forloop.first %}true{% endif %}"> + <button class="nav-link fw-bold text-end{% if forloop.first %} active{% endif %}" data-bs-toggle="pill" data-bs-target="#tab-{{ field.id_for_label }}" type="button" role="tab"> {{ field.label }} - </a> + </button> {% endfor %} </div> </div> <div class="tab-content col-md-10"> {% for field in fields %} - <div class="tab-pane fade {% if forloop.first %}show active{% endif %}" id="tab-{{ field.id_for_label }}" role="tabpanel" aria-labelledby="pills-{{ field.label }}-tab"> + <div class="tab-pane fade{% if forloop.first %} show active{% endif %}" id="tab-{{ field.id_for_label }}" role="tabpanel"> {% include 'bootstrap_form_field_widget.html' with field=field %} </div> {% endfor %} diff --git a/evap/evaluation/templates/choice_button.html b/evap/evaluation/templates/choice_button.html index 84a3da013b14f30c4e38427f219bf540633d385d..f4ecd52b5dc0c005377f880740eded484f7fcaea 100644 --- a/evap/evaluation/templates/choice_button.html +++ b/evap/evaluation/templates/choice_button.html @@ -1,11 +1,12 @@ {% load evaluation_filters %} -<label class="btn btn-sm btn-option - {% if formelement.field.disabled or disabled %} disabled{% endif %} - {% if choice.data.selected %} active{% endif %} - {% if formelement.errors %} choice-error{% endif %}" - data-toggle="tooltip" data-placement="top" title="{{ tooltip }}"> - <input id="{{ choice.id_for_label }}" name="{{ choice.data.name }}" type="radio" value="{{ choice.data.value }}" - autocomplete="off" {% if choice.data.selected %}checked{% endif %} /> + +<input id="{{ choice.id_for_label }}" class="btn-check" name="{{ choice.data.name }}" type="radio" value="{{ choice.data.value }}" + autocomplete="off" {% if choice.data.selected %}checked{% endif %} /> +<label class="btn btn-sm btn-outline-primary + {% if formelement.field.disabled or disabled %} disabled{% endif %} + + {% if formelement.errors %} choice-error{% endif %}" + for="{{ choice.id_for_label }}" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ tooltip }}"> {{ choice.choice_label }} </label> diff --git a/evap/evaluation/templates/confirmation_modal.html b/evap/evaluation/templates/confirmation_modal.html index 89bc54efb166d8eded125d1a25d161a6f2dbe886..fe04abff3b4bae49aeda9bcc419b2a3af170a3e0 100644 --- a/evap/evaluation/templates/confirmation_modal.html +++ b/evap/evaluation/templates/confirmation_modal.html @@ -5,16 +5,14 @@ <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="{{ modal_id }}Label">{{ title }}</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span class="fas fa-times"></span> - </button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> {{ question|safe }} </div> <div class="modal-footer"> - <button type="button" id="btn-action-{{ modal_id }}" class="btn btn-{{ btn_type }}" data-dismiss="modal">{{ action_text }}</button> - <button type="button" class="btn btn-light" data-dismiss="modal">{% trans 'Cancel' %}</button> + <button type="button" id="btn-action-{{ modal_id }}" class="btn btn-{{ btn_type }}" data-bs-dismiss="modal">{{ action_text }}</button> + <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% trans 'Cancel' %}</button> </div> </div> </div> @@ -27,6 +25,7 @@ // put the dataLabel text in the right place $('#{{modal_id}} [data-label=""]').text(dataLabel); // show modal - $('#{{ modal_id }}').modal(); + var {{ modal_id }} = new bootstrap.Modal(document.getElementById('{{ modal_id }}')); + {{ modal_id }}.show(); } </script> diff --git a/evap/evaluation/templates/confirmation_text_modal.html b/evap/evaluation/templates/confirmation_text_modal.html index 89f0661ef4dee621cfacb60b1d03d32bad11fb29..7694c4065ce1b81be0d20acf595a8efa723f94da 100644 --- a/evap/evaluation/templates/confirmation_text_modal.html +++ b/evap/evaluation/templates/confirmation_text_modal.html @@ -5,21 +5,19 @@ <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="{{ modal_id }}Label">{{ title }}</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span class="fas fa-times"></span> - </button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <form id="{{ modal_id }}Form"> <div class="modal-body"> {{ question|safe }} <br /><br /> - <div class="form-group"> + <div class="mb-3"> <input type="text" class="form-control" id="{{ modal_id }}ConfirmationText" oninput="{{ modal_id }}CheckValue();" /> </div> </div> <div class="modal-footer"> - <button type="button" id="{{ modal_id }}ActionButton" class="btn btn-{{ btn_type }}" data-dismiss="modal" disabled>{{ action_text }}</button> - <button type="button" class="btn btn-light" data-dismiss="modal">{% trans 'Cancel' %}</button> + <button type="button" id="{{ modal_id }}ActionButton" class="btn btn-{{ btn_type }}" data-bs-dismiss="modal" disabled>{{ action_text }}</button> + <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% trans 'Cancel' %}</button> </div> </form> </div> @@ -31,13 +29,14 @@ // call the modal's action function when action button was pressed and give dataId as parameter $('#{{ modal_id }} #{{ modal_id }}ActionButton').unbind().click(function(){ {{ modal_id }}Action(dataId); }); // put the dataLabel text in the right place - $('#{{ modal_id }} #data-label').text(dataLabel); + $('#{{modal_id}} [data-label=""]').text(dataLabel); // show modal - $('#{{ modal_id }}').modal(); + var {{ modal_id }} = new bootstrap.Modal(document.getElementById('{{ modal_id }}')); + {{ modal_id }}.show(); } function {{ modal_id }}CheckValue() { - if ($('input#{{ modal_id }}ConfirmationText').val() == $('#{{ modal_id }} #data-label').text()) { + if ($('input#{{ modal_id }}ConfirmationText').val() == $('#{{ modal_id }} [data-label=""]').text()) { $('#{{ modal_id }}ActionButton').prop('disabled', false); } else { $('#{{ modal_id }}ActionButton').prop('disabled', true); diff --git a/evap/evaluation/templates/contact_modal.html b/evap/evaluation/templates/contact_modal.html index e745b61700fa8587c4191dc52f2bab832108a096..4c754f97f770fa30150bb321df1fdf6927f14447 100644 --- a/evap/evaluation/templates/contact_modal.html +++ b/evap/evaluation/templates/contact_modal.html @@ -16,29 +16,27 @@ <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="{{ modal_id }}Label">{{ title }}</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span class="fas fa-times"></span> - </button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <form id="{{ modal_id }}Form"> <div class="modal-body"> {{ teaser }} <br /><br /> - <div class="form-group"> + <div class="mb-3"> <label for="{{ modal_id }}SenderName" class="control-label">{% trans 'Sender' %}:</label> <input type="text" class="form-control mb-3" id="{{ modal_id }}SenderName" disabled value="{{ user.full_name }}" /> </div> - <div class="form-group"> + <div class="mb-3"> <label for="{{ modal_id }}Subject" class="control-label">{% trans 'Subject' %}:</label> <input type="text" class="form-control" id="{{ modal_id }}Subject" disabled value="{{ title }}" /> </div> - <div class="form-group"> + <div class="mb-3"> <label for="{{ modal_id }}MessageText" class="control-label">{% trans 'Message' %}:</label> <textarea class="form-control" id="{{ modal_id }}MessageText" style="resize:vertical;min-height:150px;"></textarea> </div> </div> <div class="modal-footer"> - <button type="button" class="btn btn-light" data-dismiss="modal">{% trans 'Cancel' %}</button> + <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% trans 'Cancel' %}</button> <button type="submit" id="{{ modal_id }}ActionButton" class="btn btn-primary">{% trans 'Send Message' %}</button> </div> </form> @@ -47,9 +45,12 @@ </div> <script type="text/javascript"> + var {{ modal_id }} = new bootstrap.Modal(document.getElementById('{{ modal_id }}')); + var successMessageModal_{{ modal_id }} = new bootstrap.Modal(document.getElementById('successMessageModal_{{ modal_id }}')); + function {{ modal_id }}Show() { $('#{{ modal_id }}ActionButton').unbind().click(function(event){ {{ modal_id }}Action(event); }); - $('#{{ modal_id }}').modal(); + {{ modal_id }}.show(); } function {{ modal_id }}Action(event) { var actionButton = $('#{{ modal_id }}ActionButton'); @@ -59,7 +60,7 @@ message = $('#{{ modal_id }}MessageText').val(); if (message.trim() == "") { - $('#{{ modal_id }}').modal('hide'); + {{ modal_id }}.hide(); actionButton.prop('disabled', false); return; } @@ -71,11 +72,11 @@ type : "POST", data : { message: message, title: "{{ title|escapejs }}" }, success : function(json) { - $('#{{ modal_id }}').modal('hide'); - $('#successMessageModal_{{ modal_id }}').modal('show'); + {{ modal_id }}.hide(); + successMessageModal_{{ modal_id }}.show(); $('#{{ modal_id }}MessageText').val(""); setTimeout(function(){ - $('#successMessageModal_{{ modal_id }}').modal('hide'); + successMessageModal_{{ modal_id }}.hide(); actionButton.prop('disabled', false); }, 3000); }, diff --git a/evap/evaluation/templates/contribution_formset.html b/evap/evaluation/templates/contribution_formset.html index a2e34fada5a283d77fd60754b0bf10ea7c748b57..5a89c911c1bebdff3cdb97e828938a8603528e50 100644 --- a/evap/evaluation/templates/contribution_formset.html +++ b/evap/evaluation/templates/contribution_formset.html @@ -2,7 +2,7 @@ <fieldset> <div class="d-flex mb-2"> - <h5 class="card-title mr-auto">{% trans 'Contributors' %}</h5> + <h5 class="card-title me-auto">{% trans 'Contributors' %}</h5> {% if not manager %} <div> <button type="button" class="btn btn-sm btn-light" onclick="createAccountRequestModalShow();" id="createAccountRequestModalButton"> @@ -38,7 +38,7 @@ {% endfor %} {% include 'bootstrap_form_errors.html' with errors=form.contributor.errors %} {{ form.contributor }} - <div class="form-check mt-2" data-toggle="tooltip" data-placement="right" title="{% blocktrans %}Select this option if no questions about this person shall be included in the evaluation. This can be used if the person does not visibly contribute and is solely added to receive permissions for editing the evaluation or viewing text answers.{% endblocktrans %}"> + <div class="form-check mt-2" data-bs-toggle="tooltip" data-bs-placement="right" title="{% blocktrans %}Select this option if no questions about this person shall be included in the evaluation. This can be used if the person does not visibly contribute and is solely added to receive permissions for editing the evaluation or viewing text answers.{% endblocktrans %}"> <input class="form-check-input" id="{{ form.does_not_contribute.id_for_label }}" name="{{ form.does_not_contribute.html_name }}" type="checkbox"{% if form.does_not_contribute.value %} checked{% endif %} {% if form.does_not_contribute.field.disabled %} disabled{% endif %} /> @@ -57,7 +57,7 @@ {% include 'textanswer_visibility_buttons.html' with form=form %} <br /><br /> <span class="{% if form.label.errors %}error-label{% endif %}">{% trans 'Label' %}: - <span data-toggle="tooltip" data-placement="right" class="fas fa-info-circle" + <span data-bs-toggle="tooltip" data-bs-placement="right" class="fas fa-info-circle" title="{% blocktrans %}This text will be shown next to the contributor's name in the questionnaire.{% endblocktrans %}"> </span> </span> @@ -67,7 +67,7 @@ </td> <td> {% if editable %} - {{ form.DELETE }} + {% include 'bootstrap_form_field_widget.html' with field=form.DELETE class="d-none" %} {% endif %} </td> </tr> diff --git a/evap/evaluation/templates/course_badges.html b/evap/evaluation/templates/course_badges.html index 656aae4b671d4b0deadc0a8fa13c02ef2508654a..9c049c599598a4132767cc21c568906240f56ac9 100644 --- a/evap/evaluation/templates/course_badges.html +++ b/evap/evaluation/templates/course_badges.html @@ -1,5 +1,5 @@ {% for degree in course.degrees.all %} - <span class="badge badge-primary">{{ degree }}</span> + <span class="badge bg-primary">{{ degree }}</span> {% endfor %} -<span class="badge badge-secondary">{{ course.type }}</span> -{% if course.is_private %}<span class="badge badge-dark">{% trans 'private' %}</span>{% endif %} +<span class="badge bg-secondary">{{ course.type }}</span> +{% if course.is_private %}<span class="badge bg-dark">{% trans 'private' %}</span>{% endif %} diff --git a/evap/evaluation/templates/evaluation_badges.html b/evap/evaluation/templates/evaluation_badges.html index 869e4ea2992bb5ef906b2a85d86c061f6487f7a1..4d4ec7d70a91d43148f4a3f971166511b28c6acd 100644 --- a/evap/evaluation/templates/evaluation_badges.html +++ b/evap/evaluation/templates/evaluation_badges.html @@ -1,20 +1,20 @@ {% if not mode == 'student' and not mode == 'subentry' %} {% for degree in evaluation.course.degrees.all %} - <span class="badge badge-primary badge-degree">{{ degree }}</span> + <span class="badge bg-primary badge-degree">{{ degree }}</span> {% endfor %} {% endif %} {% if not mode == 'subentry' %} - <span class="badge badge-secondary badge-course-type">{{ evaluation.course.type }}</span> + <span class="badge bg-secondary badge-course-type">{{ evaluation.course.type }}</span> {% endif %} {% if evaluation.is_single_result %} - <span class="badge badge-success">{% trans 'Single result' %}</span> + <span class="badge bg-success">{% trans 'Single result' %}</span> {% endif %} -{% if evaluation.is_midterm_evaluation %}<span class="badge badge-dark">{% trans 'Midterm evaluation' %}</span>{% endif %} +{% if evaluation.is_midterm_evaluation %}<span class="badge bg-dark">{% trans 'Midterm evaluation' %}</span>{% endif %} {% if mode == 'manager' and not evaluation.is_single_result %} - {% if not evaluation.wait_for_grade_upload_before_publishing %}<span class="badge badge-dark">{% trans 'not graded' %}</span>{% endif %} - {% if not evaluation.is_rewarded %}<span class="badge badge-dark">{% trans 'not rewarded' %}</span>{% endif %} - {% if evaluation.course.is_private %}<span class="badge badge-dark">{% trans 'private' %}</span>{% endif %} + {% if not evaluation.wait_for_grade_upload_before_publishing %}<span class="badge bg-dark">{% trans 'not graded' %}</span>{% endif %} + {% if not evaluation.is_rewarded %}<span class="badge bg-dark">{% trans 'not rewarded' %}</span>{% endif %} + {% if evaluation.course.is_private %}<span class="badge bg-dark">{% trans 'private' %}</span>{% endif %} {% if evaluation.course.has_external_responsible %} - <span class="badge badge-warning">{% trans 'External responsible' %}</span> + <span class="badge bg-warning">{% trans 'External responsible' %}</span> {% endif %} {% endif %} diff --git a/evap/evaluation/templates/evaluation_form_general_questionnaires.html b/evap/evaluation/templates/evaluation_form_general_questionnaires.html index 28e436308de7242de59fe3db6741dfdc7e63028f..c68d1327e019cc8cbf9c7db6d5920d37e3337c6a 100644 --- a/evap/evaluation/templates/evaluation_form_general_questionnaires.html +++ b/evap/evaluation/templates/evaluation_form_general_questionnaires.html @@ -1,8 +1,8 @@ <fieldset> {% for field in evaluation_form %} {% if field == evaluation_form.general_questionnaires %} - <div class="form-group d-flex"> - {% include 'bootstrap_form_field_label.html' with field=field class='col-md-3' %} + <div class="mb-3 d-flex"> + {% include 'bootstrap_form_field_label.html' with field=field class='col-md-3 pe-4' %} <div class="col-md-7{% if field.errors %} is-invalid{% endif %}"> {% include 'bootstrap_form_errors.html' with errors=field.errors %} {% include 'questionnaires_widget.html' with field=field %} diff --git a/evap/evaluation/templates/evap_evaluation_edit_js.html b/evap/evaluation/templates/evap_evaluation_edit_js.html index 3f70b864796bbdf2241997c92ffc51bb8c8c7b93..30601f6118628bb05659d71c152fac408b54cf49 100644 --- a/evap/evaluation/templates/evap_evaluation_edit_js.html +++ b/evap/evaluation/templates/evap_evaluation_edit_js.html @@ -12,8 +12,8 @@ questionnaireChanged = true; }) - roleChanged = ! row.find("input[id$=-role_0]").parent().hasClass("active"); - commVisibilityChanged = ! row.find("input[id$=_visibility_0]").parent().hasClass("active"); + roleChanged = ! row.find("input[id$=-role_0]").prop("checked"); + commVisibilityChanged = ! row.find("input[id$=_visibility_0]").prop("checked"); labelChanged = row.find("input[id$=-label]").val(); return idChanged || nameChanged || questionnaireChanged || roleChanged || commVisibilityChanged || labelChanged; diff --git a/evap/evaluation/templates/external_user_confirm_login.html b/evap/evaluation/templates/external_user_confirm_login.html index 4999af85a2d8a80c90b5e64880068fdb83257f35..a3eb169fe13814b01b6a1a694b16b8adf87045a0 100644 --- a/evap/evaluation/templates/external_user_confirm_login.html +++ b/evap/evaluation/templates/external_user_confirm_login.html @@ -3,7 +3,7 @@ {% block content %} {{ block.super }} -<div class="jumbotron jumbotron-evap"> +<div class="jumbotron-evap"> <h1 class="display-4">{% trans 'Welcome to the evaluation platform!' %}</h1> <hr class="my-4" /> <div class="card-deck-external-login-confirm"> diff --git a/evap/evaluation/templates/faq.html b/evap/evaluation/templates/faq.html index 523aac82f848a95f7f54a76c2a3b8117dca71302..5e1c8d4f4670548d74d978c7421cfa5b26b67db0 100644 --- a/evap/evaluation/templates/faq.html +++ b/evap/evaluation/templates/faq.html @@ -3,20 +3,20 @@ {% block title %}{% trans 'FAQ' %} - {{ block.super }}{% endblock %} {% block content %} - <h3 class="mb-4">{% trans 'These are the Frequently Asked Questions (FAQs)' %}</h3> + <h2 class="mb-4">{% trans 'Frequently Asked Questions (FAQs)' %}</h2> - <div id="accordion" role="tablist"> + <div class="accordion accordion-flush pb-4" id="accordionFAQ"> {% for section in sections %} - <h4 id="{{ section.id }}-s">{{ section.title }}</h4> + <h4 id="faq-{{ section.id }}-s">{{ section.title }}</h4> {% for question in section.questions.all %} - <div id="{{ question.id }}-card" class="card collapsible{% if not forloop.last %} mb-1{% else %} mb-4{% endif %}"> - <div class="card-header d-flex" role="tab" id="{{ question.id }}-q"> - <a class="collapse-toggle collapsed" data-toggle="collapse" href="#{{ question.id }}-a" aria-expanded="false" aria-controls="collapse-{{ question.id }}"> + <div id="faq-{{ question.id }}-card" class="accordion-item{% if not forloop.last %} mb-1{% else %} mb-4{% endif %}"> + <h2 id="faq-{{ question.id }}-q" class="accordion-header"> + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-{{ question.id }}-a" aria-expanded="false" aria-controls="faq-{{ question.id }}-a"> {{ question.question }} - </a> - </div> - <div id="{{ question.id }}-a" class="collapse" role="tabpanel" aria-labelledby="{{ question.id }}-q" data-parent="#accordion"> - <div class="card-body"> + </button> + </h2> + <div id="faq-{{ question.id }}-a" class="accordion-collapse collapse" aria-labelledby="faq-{{ question.id }}-q" data-bs-parent="#accordionFAQ"> + <div class="accordion-body"> {{ question.answer|safe }} </div> </div> @@ -29,25 +29,23 @@ {% block additional_javascript %} <script type="text/javascript"> const anchor = window.location.hash.replace("#", "").split('-'); - const id = anchor[0]; - const type = anchor[1]; + const id = anchor[1]; + const type = anchor[2]; if(type == "q"){ - // open collapsed answer and scroll into center - const answer_div = $("#"+id+"-a"); - window.history.pushState('', id, '/faq#' + id + '-q'); - answer_div.collapse('show'); - answer_div.on('shown.bs.collapse', function () { - $("#"+id+"-card")[0].scrollIntoView({ - behavior: "smooth", - block: "center" - }); - }); - } else if(type == "s") { - // scroll section heading below navbar - setTimeout(function(){ - window.scrollBy(0, -50); - }, 0); - } + // open collapsed answer and scroll into center + const answer_div = $("#faq-"+id+"-a"); + window.history.pushState('', id, '/faq#faq-' + id + '-q'); + var answerCard = document.getElementById("faq-"+id+"-a"); + var answerCardCollapse = bootstrap.Collapse.getOrCreateInstance(answerCard); + answerCardCollapse.show(); + answerCard.scrollIntoView(); + } + if(type == "q" || type == "s") { + // scroll section heading below navbar + setTimeout(function(){ + window.scrollBy(0, -50); + }, 0); + } </script> {% endblock %} diff --git a/evap/evaluation/templates/index.html b/evap/evaluation/templates/index.html index 266e6e23be919ebbb481d9803fd533e8d993fe03..82d9953a8d216e296b11d034f3c35e01061dabaa 100644 --- a/evap/evaluation/templates/index.html +++ b/evap/evaluation/templates/index.html @@ -3,7 +3,7 @@ {% block content %} {{ block.super }} - <div class="jumbotron jumbotron-evap"> + <div class="jumbotron-evap"> <h1 class="display-4">{% trans 'Welcome to the evaluation platform!' %}</h1> <hr class="my-4" /> <div class="card-deck-login"> @@ -51,7 +51,7 @@ {% include 'bootstrap_form_field.html' with field=new_key_form.email wide=True %} <div class="d-flex justify-content-center"> <button type="submit" class="btn btn-dark login-button">{% trans 'Request login URL' %}</button> - <button type="button" class="btn btn-light ml-1" data-toggle="modal" data-target="#loginProblemsModal"> + <button type="button" class="btn btn-light ms-1" data-bs-toggle="modal" data-bs-target="#loginProblemsModal"> {% trans 'Help' %} </button> </div> @@ -68,15 +68,13 @@ <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="loginProblemsModalLabel">{% trans 'Login problems' %}</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span class="fas fa-times"></span> - </button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> {% trans 'You should have received an evaluation invitation via email that included a URL to login on this platform. You can also request a new login URL on this page. If you encounter any problems with your login, please let us know by answering to the evaluation email you received.' %} </div> <div class="modal-footer"> - <button type="button" class="btn btn-light" data-dismiss="modal">{% trans 'Close' %}</button> + <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% trans 'Close' %}</button> </div> </div> </div> diff --git a/evap/evaluation/templates/log/logentries.html b/evap/evaluation/templates/log/logentries.html index 682460694a14294e7bb6a9c6be32eba6f9e21485..ca39e380fee019e0d60fc0957b10c569e6bee878 100644 --- a/evap/evaluation/templates/log/logentries.html +++ b/evap/evaluation/templates/log/logentries.html @@ -5,14 +5,14 @@ {% for log_group in logged_object.grouped_logentries %} <li class="list-group-item"> <p> - <span class="pr-3"> + <span class="pe-3"> <span class="far fa-clock" aria-hidden="true"></span> {{ log_group.0.datetime|date:"SHORT_DATETIME_FORMAT" }} </span> {% if log_group.0.user %} {% if log_group.0.user.is_manager %} <span class="far fa-id-card fa-fw" - data-toggle="tooltip" + data-bs-toggle="tooltip" title="{% trans "This change was performed by a manager." %}"> </span> {% else %} diff --git a/evap/evaluation/templates/navbar.html b/evap/evaluation/templates/navbar.html index 42d445605ca3d76f77745b539b35643d138e89dd..e5e2bd43919a1bf17e501724c49ac06e59f3ba9e 100644 --- a/evap/evaluation/templates/navbar.html +++ b/evap/evaluation/templates/navbar.html @@ -1,7 +1,7 @@ {% load static %} {% load evaluation_filters %} -<nav class="navbar navbar-dark {% if debug %}bg-debug{% else %}bg-dark{% endif %} {% if user.is_participant and user.is_responsible_or_contributor_or_delegate or user.is_reviewer %}navbar-expand-xl{% else %}navbar-expand-lg{% endif %} pl-0"> +<nav class="navbar navbar-dark {% if debug %}bg-debug{% else %}bg-dark{% endif %} {% if user.is_participant and user.is_responsible_or_contributor_or_delegate or user.is_reviewer %}navbar-expand-xl{% else %}navbar-expand-lg{% endif %} ps-0"> <a class="d-block {% if user.is_participant and user.is_responsible_or_contributor_or_delegate or user.is_reviewer %} d-xl-none @@ -9,7 +9,7 @@ d-lg-none {% endif %}" href="{% url 'evaluation:index' %}"><img class="brand-image" src="{% static 'images/evap.png' %}" alt=""/></a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-between" id="navbarNavDropdown"> @@ -30,7 +30,7 @@ {% if user.is_manager %} <li class="nav-item"><a class="nav-link" href="{% url 'staff:index' %}">{% trans 'Overview' %}</a></li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarSemestersDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'Semesters' %}</a> + <a class="nav-link dropdown-toggle" href="#" id="navbarSemestersDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'Semesters' %}</a> <div class="dropdown-menu" aria-labelledby="navbarSemestersDropdownMenuLink"> {% for semester in result_semesters %} <a class="dropdown-item" href="{% url 'staff:semester_view' semester.id %}">{{ semester.name }}</a> @@ -39,7 +39,7 @@ </li> {% elif user.is_reviewer %} <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarReviewDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'Review' %}</a> + <a class="nav-link dropdown-toggle" href="#" id="navbarReviewDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'Review' %}</a> <div class="dropdown-menu" aria-labelledby="navbarReviewDropdownMenuLink"> {% for semester in result_semesters %} <a class="dropdown-item" href="{% url 'staff:semester_view' semester.id %}">{{ semester.name }}</a> @@ -52,7 +52,7 @@ {% endif %} {% if user.is_manager %} <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarUsersDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'Users' %}</a> + <a class="nav-link dropdown-toggle" href="#" id="navbarUsersDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'Users' %}</a> <div class="dropdown-menu" aria-labelledby="navbarUsersDropdownMenuLink"> <a class="dropdown-item" href="{% url 'staff:user_index' %}">{% trans 'User list' %}</a> <a class="dropdown-item" href="{% url 'staff:user_create' %}">{% trans 'Create' %}</a> @@ -65,7 +65,7 @@ {% endif %} {% if user.is_grade_publisher %} <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="{% url 'grades:index' %}" id="navbarPublishDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'Publish grades' %}</a> + <a class="nav-link dropdown-toggle" href="{% url 'grades:index' %}" id="navbarPublishDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'Publish grades' %}</a> <div class="dropdown-menu" aria-labelledby="navbarPublishDropdownMenuLink"> <a class="dropdown-item" href="{% url 'grades:index' %}">{% trans 'Semesters' %}</a> {% for semester in grade_document_semesters %} @@ -76,7 +76,7 @@ {% endif %} {% if user.is_manager %} <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarStaffDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'More' %}</a> + <a class="nav-link dropdown-toggle" href="#" id="navbarStaffDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'More' %}</a> <div class="dropdown-menu" aria-labelledby="navbarStaffDropdownMenuLink"> <a class="dropdown-item" href="{% url 'staff:course_type_index' %}">{% trans 'Course types' %}</a> <a class="dropdown-item" href="{% url 'staff:degree_index' %}">{% trans 'Degrees' %}</a> @@ -93,10 +93,10 @@ </ul> <ul class="navbar-nav justify-content-end"> <li class="nav-item"><a class="nav-link" href="{% url 'evaluation:faq' %}">{% trans 'FAQ' %}</a></li> - <li class="nav-item btn-switch-navbar my-auto"> + <li class="nav-item btn-switch-navbar my-auto ps-2 pb-3 {% if user.is_participant and user.is_responsible_or_contributor_or_delegate or user.is_reviewer %}pb-xl-0{% else %}pb-lg-0{% endif %}"> <div class="btn-group"> {% for language_code, language_name in languages %} - <form class="form-inline" method="post" action="{% url 'evaluation:set_lang' %}"> + <form class="d-flex" method="post" action="{% url 'evaluation:set_lang' %}"> {% csrf_token %} <input name="language" type="hidden" value="{{ language_code }}"> <button type="submit"{% if current_language == language_code %} disabled{% endif %} onclick="setSpinnerIcon('span-set-language-{{ language_code }}')" @@ -109,17 +109,17 @@ </li> {% if user.is_authenticated %} {% if user.has_staff_permission %} - <li class="nav-item btn-switch-navbar my-auto pl-2"> + <li class="nav-item btn-switch-navbar my-auto ps-2"> <div class="btn-group"> - <form class="form-inline" method="post" action="{% url 'staff:exit_staff_mode' %}"> + <form class="d-flex" method="post" action="{% url 'staff:exit_staff_mode' %}"> {% csrf_token %} - <button type="submit" {% if user.is_staff %}class="btn btn-sm btn-navbar"{% else %}class="btn btn-sm btn-navbar active" disabled{% endif %} data-toggle="tooltip" data-placement="bottom" title="{% trans 'Regular mode' %}" onclick="setSpinnerIcon('span-exit-staff-mode')"> + <button type="submit" {% if user.is_staff %}class="btn btn-sm btn-navbar"{% else %}class="btn btn-sm btn-navbar active" disabled{% endif %} data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% trans 'Regular mode' %}" onclick="setSpinnerIcon('span-exit-staff-mode')"> <span id="span-exit-staff-mode" class="fas fa-user"></span> </button> </form> - <form id="enter-staff-mode-form" class="form-inline" method="post" action="{% url 'staff:enter_staff_mode' %}"> + <form id="enter-staff-mode-form" class="d-flex" method="post" action="{% url 'staff:enter_staff_mode' %}"> {% csrf_token %} - <button type="submit" {% if user.is_staff %}class="btn btn-sm btn-navbar active" disabled{% else %}class="btn btn-sm btn-navbar"{% endif %} data-toggle="tooltip" data-placement="bottom" title="{% trans 'Staff mode' %}" onclick="setSpinnerIcon('span-enter-staff-mode')"> + <button type="submit" {% if user.is_staff %}class="btn btn-sm btn-navbar active" disabled{% else %}class="btn btn-sm btn-navbar"{% endif %} data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% trans 'Staff mode' %}" onclick="setSpinnerIcon('span-enter-staff-mode')"> <span id="span-enter-staff-mode" class="fas fa-briefcase"></span> </button> </form> @@ -127,7 +127,7 @@ </li> {% endif %} <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarUserDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-user"></span> {{ user.full_name }}</a> + <a class="nav-link dropdown-toggle" href="#" id="navbarUserDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-user"></span> {{ user.full_name }}</a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-tight" aria-labelledby="navbarUserDropdownMenuLink"> <a class="dropdown-item" href="{% url 'evaluation:profile_edit' %}">{% trans 'Profile' %}</a> <a class="dropdown-item" href="{% url 'django-auth-logout' %}">{% trans 'Logout' %}</a> diff --git a/evap/evaluation/templates/questionnaires_widget.html b/evap/evaluation/templates/questionnaires_widget.html index f23320265ae843cb1abddd44f7e96dd1fa4edddd..e479b98550ed26c9f8ba6d079854281920999565 100644 --- a/evap/evaluation/templates/questionnaires_widget.html +++ b/evap/evaluation/templates/questionnaires_widget.html @@ -7,7 +7,7 @@ <li><hr class="mb-1 mt-1" /></li> {% endif %} {% endifchanged %} - <li class="form-check" data-toggle="tooltip" data-placement="left" title="{% spaceless %} + <li class="form-check" data-bs-toggle="tooltip" data-bs-placement="left" title="{% spaceless %} {% if questionnaire.is_locked and not manager %} {% trans 'This questionnaire is locked, its selection cannot be changed.' %}<br /><br /> {% endif %} diff --git a/evap/evaluation/templates/role_buttons.html b/evap/evaluation/templates/role_buttons.html index 031b5b0d2f8ae5282fb566a178408f84721ee32b..1eb6df3aefbcddd0e18c64fde2716a7404c7200d 100644 --- a/evap/evaluation/templates/role_buttons.html +++ b/evap/evaluation/templates/role_buttons.html @@ -1,6 +1,6 @@ {% load evaluation_filters %} -<div class="btn-group btn-group-toggle" data-toggle="buttons"> +<div class="btn-group"> {% for choice in form.role %} {% if choice.data.value == form.instance.Role.EDITOR %} {% trans 'Able to edit the evaluation for preparation.' as tooltip %} diff --git a/evap/evaluation/templates/sortable_form_js.html b/evap/evaluation/templates/sortable_form_js.html index 1527bff56b7d2d5f1afe23579065371e00cb29e4..774f113067df3fcc6490b1ada8e6fcec7b806662 100644 --- a/evap/evaluation/templates/sortable_form_js.html +++ b/evap/evaluation/templates/sortable_form_js.html @@ -27,9 +27,6 @@ // Checkboxes with 'data-keep' need to stay checked. row.find("input:checkbox:not([data-keep]),:radio").removeAttr("checked"); - //Disable active buttons from bootstrap button groups - row.find("label").removeClass("active"); - row.find("input:text,textarea").val(""); row.find("select").each(function(){ @@ -41,7 +38,6 @@ row.find(".btn-group").each(function() { var inputs = $(this).find("input"); $(inputs[0]).prop("checked", true); - $(inputs[0]).parent().addClass("active"); }); //Remove all error messages diff --git a/evap/evaluation/templates/textanswer_visibility_buttons.html b/evap/evaluation/templates/textanswer_visibility_buttons.html index f72736cab33f5a9650f70ebfbdc3720c5938cf71..1f082e80b1999840aa0f09184c6f5b88a93ba235 100644 --- a/evap/evaluation/templates/textanswer_visibility_buttons.html +++ b/evap/evaluation/templates/textanswer_visibility_buttons.html @@ -1,4 +1,4 @@ -<div class="btn-group btn-group-toggle" data-toggle="buttons"> +<div class="btn-group"> {% for choice in form.textanswer_visibility %} {% if choice.data.value == 'GENERAL' %} {% trans 'Will see own and general text answers.' as tooltip %} diff --git a/evap/evaluation/templates/textanswer_visibility_info.html b/evap/evaluation/templates/textanswer_visibility_info.html index e03a705cb70a563bae105cb032faa2c6435d4ae5..db1f38bf5bb1e346c14e7337812561b0b4531ebc 100644 --- a/evap/evaluation/templates/textanswer_visibility_info.html +++ b/evap/evaluation/templates/textanswer_visibility_info.html @@ -1,4 +1,4 @@ -<span class="far fa-eye ml-1 icon-gray" data-toggle="tooltip" data-placement="left" title=" +<span class="far fa-eye ms-1 icon-gray" data-bs-toggle="tooltip" data-bs-placement="left" title=" {{ intro_text }}<br /> {% for contributor in visible_by_contribution %} {{ contributor.full_name }}{% if contributor.is_proxy_user %} ({% blocktrans count delegate_count=contributor.delegates.count %}{{ delegate_count }} person{% plural %}{{ delegate_count }} people{% endblocktrans %}){% endif %}{% if not forloop.last or visible_by_delegation_count > 0 %}, {% endif %} diff --git a/evap/grades/templates/grades_course_view.html b/evap/grades/templates/grades_course_view.html index 599ee1781c90a33fbace71ea5ecfdb6fccba5e0b..d62f7949c4bbe378c3d29d9527c01d0d0b77654b 100644 --- a/evap/grades/templates/grades_course_view.html +++ b/evap/grades/templates/grades_course_view.html @@ -27,10 +27,10 @@ <td>{{ grade_document.get_type_display }}</td> <td>{{ grade_document.last_modified_time }}, {% trans 'by' %} {{ grade_document.last_modified_user }}</td> <td> - <a href="{% url 'grades:download_grades' grade_document.id %}" class="btn btn-sm btn-light" data-toggle="tooltip" data-placement="top" title="{% trans 'Download' %}"><span class="fas fa-download"></span></a> + <a href="{% url 'grades:download_grades' grade_document.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Download' %}"><span class="fas fa-download"></span></a> {% if user.is_grade_publisher %} - <a href="{% url 'grades:edit_grades' semester.id course.id grade_document.id %}" class="btn btn-sm btn-light" data-toggle="tooltip" data-placement="top" title="{% trans 'Edit' %}"><span class="fas fa-pencil-alt"></span></a> - <button type="button" {{ disable_if_archived }} onclick="deleteGradedocumentModalShow({{ grade_document.id }}, '{{ grade_document.description|escapejs }}');" class="btn btn-sm btn-danger" data-toggle="tooltip" data-placement="top" title="{% trans 'Delete' %}"> + <a href="{% url 'grades:edit_grades' semester.id course.id grade_document.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Edit' %}"><span class="fas fa-pencil-alt"></span></a> + <button type="button" {{ disable_if_archived }} onclick="deleteGradedocumentModalShow({{ grade_document.id }}, '{{ grade_document.description|escapejs }}');" class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}"> <span class="fas fa-trash"></span> </button> {% endif %} diff --git a/evap/grades/templates/grades_semester_view.html b/evap/grades/templates/grades_semester_view.html index 292d99bc97eacfbdd20e5c5fa23d68bfb78788dd..c00c07c4348d17275d89bf97cc5f270a08c2a22a 100644 --- a/evap/grades/templates/grades_semester_view.html +++ b/evap/grades/templates/grades_semester_view.html @@ -9,13 +9,13 @@ <h3 class="col-9 mb-0"> {{ semester.name }} </h3> - <div class="input-group col-3"> - <input type="search" name="search" class="form-control" placeholder="{% trans 'Search...' %}" /> - <div class="input-group-append"> - <button class="btn btn-light text-secondary" type="button" data-reset="search" data-toggle="tooltip" data-placement="top" title="{% trans 'Clear search filter' %}"> + <div class="col-3"> + <div class="input-group"> + <input type="search" name="search" class="form-control" placeholder="{% trans 'Search...' %}" /> + <button class="btn btn-light text-secondary" type="button" data-reset="search" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Clear search filter' %}"> <span class="fas fa-backspace"></span> </button> - </div> + </div> </div> </div> @@ -33,7 +33,7 @@ <th style="width: 10%" class="col-order" data-col="complete">{% trans 'Evaluation completed' %}</th> <th style="width: 10%" class="col-order" data-col="midterm-grades">{% trans 'Midterm grade documents' %}</th> <th style="width: 10%" class="col-order" data-col="final-grades">{% trans 'Final grade documents' %}</th> - <th style="width: 15%" class="text-right">{% trans 'Actions' %}</th> + <th style="width: 15%" class="text-end">{% trans 'Actions' %}</th> </tr> </thead> <tbody> @@ -58,18 +58,18 @@ <span class="fas fa-file"></span> {{ num_final_grades }} {% elif course.gets_no_grade_documents %} <a href="#" onclick="confirmLateruploadModalShow({{ course.id }}, '{{ course.name|escapejs }}');"> - <span class="fas fa-times light-link" data-toggle="tooltip" data-placement="top" title="{% trans 'Grade documents for this course will not be uploaded. Click to change.' %}"></span> + <span class="fas fa-times light-link" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Grade documents for this course will not be uploaded. Click to change.' %}"></span> </a> {% endif %} </td> - <td class="text-right" style="min-width:72px"> + <td class="text-end" style="min-width:72px"> {% if not course.gets_no_grade_documents %} {% if num_final_grades == 0 %} - <button type="button" {{ disable_if_archived }} onclick="confirmNouploadModalShow({{ course.id }}, '{{ course.name|escapejs }}');" class="btn btn-sm btn-secondary" data-toggle="tooltip" data-placement="top" title="{% trans 'Confirm that final grades have been submitted but will not be uploaded.' %}"> + <button type="button" {{ disable_if_archived }} onclick="confirmNouploadModalShow({{ course.id }}, '{{ course.name|escapejs }}');" class="btn btn-sm btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Confirm that final grades have been submitted but will not be uploaded.' %}"> <span class="fas fa-times"></span> </button> - <div class="btn-group" role="group" data-toggle="tooltip" data-placement="top" title="{% trans 'Upload grade document' %}"> - <button type="button" id="btnUpload{{ course.id }}" class="btn btn-sm btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <div class="btn-group" role="group" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Upload grade document' %}"> + <button type="button" id="btnUpload{{ course.id }}" class="btn btn-sm btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="fas fa-upload"></span> </button> <div class="dropdown-menu" aria-labelledby="btnUpload{{ course.id }}"> @@ -78,7 +78,7 @@ </div> </div> {% else %} - <a href="{% url 'grades:course_view' semester.id course.id %}" class="btn btn-sm btn-light {{ disable_if_archived }}" data-toggle="tooltip" data-placement="top" title="{% trans 'Change grade document' %}"><span class="fas fa-pencil-alt"></span></a> + <a href="{% url 'grades:course_view' semester.id course.id %}" class="btn btn-sm btn-light {{ disable_if_archived }}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Change grade document' %}"><span class="fas fa-pencil-alt"></span></a> {% endif %} {% endif %} </td> diff --git a/evap/results/templates/distribution_widget.html b/evap/results/templates/distribution_widget.html index 529bc11c4221877999ccc5f7aa4dc0b16da4e73e..06fdc7c0dee394400d97769f2c93e72175da12d4 100644 --- a/evap/results/templates/distribution_widget.html +++ b/evap/results/templates/distribution_widget.html @@ -3,18 +3,18 @@ {% spaceless %} {% if question_result.has_answers %} <div class="result-widget d-flex" - data-toggle="tooltip" data-placement="left" data-fallback-placement='["left", "bottom"]' + data-bs-toggle="tooltip" data-bs-placement="left" data-fallback-placement='["left", "bottom"]' title="{% include 'result_widget_tooltip.html' with question_result=question_result %}" > - <div class="badge-participants badge-participants-{{ question_result.count_sum|participationclass:num_voters }} mr-2 mr-lg-3"> + <div class="badge-participants badge-participants-{{ question_result.count_sum|participationclass:num_voters }} me-2 me-lg-3"> <span class="fas fa-user"></span> {{ question_result.count_sum }} </div> {% include 'distribution_with_grade.html' with question_result=question_result distribution=question_result.counts|normalized_distribution average=question_result.average %} </div> {% else %} - <div class="d-flex" data-toggle="tooltip" data-placement="left" data-fallback-placement='["left", "bottom"]' title="{% trans 'Not enough answers were given.' %}"> - <div class="badge-participants badge-disabled mr-2 mr-lg-3"> + <div class="d-flex" data-bs-toggle="tooltip" data-bs-placement="left" data-fallback-placement='["left", "bottom"]' title="{% trans 'Not enough answers were given.' %}"> + <div class="badge-participants badge-disabled me-2 me-lg-3"> {% if question_result.is_published %} <span class="fas fa-user"></span> {{ question_result.count_sum }} {% else %} diff --git a/evap/results/templates/distribution_with_grade.html b/evap/results/templates/distribution_with_grade.html index ef34f66d478f31157341d888f2f3a27b526675e2..221438c27b7c39bed7bfcad2e69ad1f6bc4072b2 100644 --- a/evap/results/templates/distribution_with_grade.html +++ b/evap/results/templates/distribution_with_grade.html @@ -28,7 +28,7 @@ <span class="right">{{ weight_info }}</span> {% endif %} </div> -<div class="badge-grade ml-2{% if question_result.warning %} participants-warning{% endif %}" style="background-color: {{ average|gradecolor }}"> +<div class="badge-grade ms-2{% if question_result.warning %} participants-warning{% endif %}" style="background-color: {{ average|gradecolor }}"> {% if question_result.question.is_yes_no_question %} {{ question_result.approval_count|percentage:question_result.count_sum }} {% else %} diff --git a/evap/results/templates/distribution_with_grade_disabled.html b/evap/results/templates/distribution_with_grade_disabled.html index 03d57e99443b1d606306a5268eb0fec370999988..9197a400d7fde3c9d078be804331a521e2d24c44 100644 --- a/evap/results/templates/distribution_with_grade_disabled.html +++ b/evap/results/templates/distribution_with_grade_disabled.html @@ -6,4 +6,4 @@ <span class="right">{{ weight_info }}</span> {% endif %} </div> -<div class="badge-grade badge-disabled ml-2"><span class="{{ icon }}"></span></div> +<div class="badge-grade badge-disabled ms-2"><span class="{{ icon }}"></span></div> diff --git a/evap/results/templates/evaluation_result_widget.html b/evap/results/templates/evaluation_result_widget.html index 7772530c839975cc22557886e93fe31921d34287..7e3e8703a5a8f3d3c4946beded50dd508e1c6649 100644 --- a/evap/results/templates/evaluation_result_widget.html +++ b/evap/results/templates/evaluation_result_widget.html @@ -4,13 +4,13 @@ {% spaceless %} {% if course_or_evaluation.avg_grade is not None %} <div class="d-flex" - data-toggle="tooltip" data-placement="left" data-fallback-placement='["left", "bottom"]' + data-bs-toggle="tooltip" data-bs-placement="left" data-fallback-placement='["left", "bottom"]' title="{% spaceless %}{% include 'result_widget_tooltip.html' with question_result=course_or_evaluation.single_result_rating_result weight_info=course_or_evaluation|weight_info %}{% endspaceless %}" > {% include "distribution_with_grade.html" with distribution=course_or_evaluation.distribution average=course_or_evaluation.avg_grade weight_info=course_or_evaluation|weight_info %} </div> {% else %} - <div class="d-flex" data-toggle="tooltip" data-placement="left" title="{% trans 'Not enough answers were given.' %}"> + <div class="d-flex" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Not enough answers were given.' %}"> {% include "distribution_with_grade_disabled.html" with icon="far fa-eye-slash" %} </div> {% endif %} diff --git a/evap/results/templates/results_evaluation_detail.html b/evap/results/templates/results_evaluation_detail.html index e30fb144fa7d0a7aae3eff2deb85f52dcee8f5c8..e6958a0cd9fd43034826c85449999818b200d122 100644 --- a/evap/results/templates/results_evaluation_detail.html +++ b/evap/results/templates/results_evaluation_detail.html @@ -27,23 +27,23 @@ </div> {% endif %} <div class="d-flex"> - <h3 class="mr-auto">{{ evaluation.full_name }} ({{ evaluation.course.semester.name }})</h3> + <h3 class="me-auto">{{ evaluation.full_name }} ({{ evaluation.course.semester.name }})</h3> <div class="btn-switch btn-switch-light my-auto d-print-none"> <div class="btn-switch-label">{% trans 'View' %}</div> <div class="btn-switch btn-group"> {% if user.is_staff and view == 'export' or is_contributor %} - <a href="{% if is_contributor %}{% url 'results:evaluation_detail' evaluation.course.semester.id evaluation.id %}?view=export{% endif %}" role="button" class="btn btn-sm btn-light{% if view == 'export' %} active{% endif %}" data-toggle="tooltip" data-placement="bottom" + <a href="{% if is_contributor %}{% url 'results:evaluation_detail' evaluation.course.semester.id evaluation.id %}?view=export{% endif %}" role="button" class="btn btn-sm btn-light{% if view == 'export' %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% blocktrans %}Shows filtered view meant for personal export. Other contributors' results and private answers are hidden.{% endblocktrans %}"> {% trans 'Export' context 'view mode' %} </a> {% endif %} - <a href="{% url 'results:evaluation_detail' evaluation.course.semester.id evaluation.id %}?view=full" role="button" class="btn btn-sm btn-light{% if view == 'full' %} active{% endif %}" data-toggle="tooltip" data-placement="bottom" + <a href="{% url 'results:evaluation_detail' evaluation.course.semester.id evaluation.id %}?view=full" role="button" class="btn btn-sm btn-light{% if view == 'full' %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% trans 'Shows all results available for you.' %}"> {% trans 'Full' %} </a> {% if not evaluation.can_publish_rating_results %} - <button type="button" disabled class="btn btn-sm btn-light" data-toggle="tooltip" data-placement="bottom" + <button type="button" disabled class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% blocktrans %}The results of this evaluation have not been published because it didn't get enough votes.{% endblocktrans %}"> {% if evaluation.course.is_private %} {% trans 'Participant' %} @@ -52,7 +52,7 @@ {% endif %} </button> {% else %} - <a href="{% url 'results:evaluation_detail' evaluation.course.semester.id evaluation.id %}?view=public" role="button" class="btn btn-sm btn-light{% if view == 'public' %} active{% endif %}" data-toggle="tooltip" data-placement="bottom" + <a href="{% url 'results:evaluation_detail' evaluation.course.semester.id evaluation.id %}?view=public" role="button" class="btn btn-sm btn-light{% if view == 'public' %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title=" {% if evaluation.course.is_private %} {% trans 'Shows results available for the participants.' %}"> @@ -72,17 +72,17 @@ <div class="card card-outline-primary mb-3"> <div class="card-header d-flex"> - <div class="mr-auto">{% trans 'Overview' %}</div> + <div class="me-auto">{% trans 'Overview' %}</div> {% if can_export_text_answers %} <a class="btn btn-sm btn-light d-print-none" href="{% url 'results:evaluation_text_answers_export' evaluation.id %}?view={{ view }}{% if contributor_id is not None %}&contributor_id={{ contributor_id }}{% endif %}" type="button"> {% trans 'Export text answers' %} </a> {% endif %} {% if evaluation.course.grade_documents.count == 1 and can_download_grades %} - <a class="btn btn-sm btn-light d-print-none ml-2" href="{% url 'grades:download_grades' evaluation.course.grade_documents.first.id %}">{{ evaluation.course.grade_documents.first.description }}</a> + <a class="btn btn-sm btn-light d-print-none ms-2" href="{% url 'grades:download_grades' evaluation.course.grade_documents.first.id %}">{{ evaluation.course.grade_documents.first.description }}</a> {% elif evaluation.course.grade_documents.count > 1 and can_download_grades %} - <div class="btn-group d-print-none ml-2" role="group"> - <button type="button" id="btnDownload" class="btn btn-sm btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'Grades' %}</button> + <div class="btn-group d-print-none ms-2" role="group"> + <button type="button" id="btnDownload" class="btn btn-sm btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'Grades' %}</button> <div class="dropdown-menu" aria-labelledby="btnDownload"> {% for grade_document in evaluation.course.grade_documents.all %} <a class="dropdown-item" href="{% url 'grades:download_grades' grade_document.id %}">{{ grade_document.description }}</a> @@ -140,9 +140,9 @@ {% for contribution_result in contributor_contribution_results %} <div class="card collapsible{% if not forloop.last %} mb-3{% endif %}"> <div class="card-header d-flex"> - <div class="mr-auto"> + <div class="me-auto"> <a class="collapse-toggle{% if not contribution_result.has_answers %} collapsed{% endif %}" - data-toggle="collapse" href="#contributor-{{ contribution_result.contributor.id }}" + data-bs-toggle="collapse" href="#contributor-{{ contribution_result.contributor.id }}" aria-controls="contributor-{{ contribution_result.contributor.id }}"> {{ contribution_result.contributor.full_name }} {% if contribution_result.label %} diff --git a/evap/results/templates/results_evaluation_detail_questionnaires.html b/evap/results/templates/results_evaluation_detail_questionnaires.html index 9b3cdbf13beeed3916996d61bb795bcd3957d18d..96aae75cfa3747c8fe614bd91cdf69742f337067 100644 --- a/evap/results/templates/results_evaluation_detail_questionnaires.html +++ b/evap/results/templates/results_evaluation_detail_questionnaires.html @@ -1,7 +1,7 @@ <div class="d-md-flex print-no-break"> <h4>{{ questionnaire_result.questionnaire.public_name }}</h4> {% if questionnaire_result.warning %} - <p class="ml-auto mt-auto participants-warning"> + <p class="ms-auto mt-auto participants-warning"> <span class="fas fa-exclamation-triangle"></span> {% trans 'Only a few participants answered these questions.' %} </p> diff --git a/evap/results/templates/results_index.html b/evap/results/templates/results_index.html index 863aa16e948355c77b17da7eb6dceba41ce880f6..a9c07f46bd5fbb2d0d814c92dd59601809d0c916 100644 --- a/evap/results/templates/results_index.html +++ b/evap/results/templates/results_index.html @@ -13,7 +13,7 @@ <div class="card-body"> <h5 class="card-title"> {% trans 'Filter' %} - <span class="reset-button float-right" data-reset="filter"> + <span class="reset-button float-end" data-reset="filter"> <span class="fas fa-eraser"></span> {% trans 'Clear all filters' %} </span> @@ -68,7 +68,7 @@ <div class="card-body pb-lg-0"> <h5 class="card-title mb-lg-0"> {% trans 'Order' %} - <span class="reset-button float-right d-none d-lg-block" data-reset="order"> + <span class="reset-button float-end d-none d-lg-block" data-reset="order"> <span class="fas fa-sort-amount-down"></span> {% trans 'Order by evaluation and semester' %} </span> @@ -81,13 +81,13 @@ <div data-col="result" class="col-order">{% trans 'Distribution and average grade' %}</div> </div> <div class="d-flex d-lg-none"> - <div class="mr-2 btn-switch btn-group btn-group-toggle icon-buttons" data-toggle="buttons"> - <label class="btn btn-light btn-lg active"> - <input type="radio" name="result-sort-order" value="asc" /> + <div class="me-2 btn-group icon-buttons" data-bs-toggle="buttons"> + <input id="sort-order-asc" class="btn-check" type="radio" name="result-sort-order" value="asc" checked /> + <label class="btn btn-outline-primary btn-lg" for="sort-order-asc"> <span class="fas fa-sort-alpha-down"></span> </label> - <label class="btn btn-light btn-lg"> - <input type="radio" name="result-sort-order" value="desc" /> + <input id="sort-order-desc" class="btn-check" type="radio" name="result-sort-order" value="desc" /> + <label class="btn btn-outline-primary btn-lg" for="sort-order-desc"> <span class="fas fa-sort-alpha-up-alt"></span> </label> </div> diff --git a/evap/results/templates/results_index_course.html b/evap/results/templates/results_index_course.html index fa39da5d0dd8981e0d8c996d1d99d50cc57fff86..9c25ae465353f8284bf4f430822b14691028023e 100644 --- a/evap/results/templates/results_index_course.html +++ b/evap/results/templates/results_index_course.html @@ -12,9 +12,9 @@ <div data-col="name" data-order="{{ course.name|lower }}"> <div> {% for degree in course.degrees.all %} - <span class="badge badge-primary badge-degree">{{ degree }}</span> + <span class="badge bg-primary badge-degree">{{ degree }}</span> {% endfor %} - <span class="badge badge-secondary badge-course-type">{{ course.type }}</span> + <span class="badge bg-secondary badge-course-type">{{ course.type }}</span> </div> <span class="evaluation-name">{{ course.name }}</span> </div> @@ -26,7 +26,7 @@ </div> <div data-col="result" data-order="{{ course.avg_grade|default:7 }}"> {% if course.not_all_evaluations_are_published %} - <div class="d-flex" data-toggle="tooltip" data-placement="left" title="{% trans 'Course result is not yet available.' %}"> + <div class="d-flex" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Course result is not yet available.' %}"> {% include 'distribution_with_grade_disabled.html' with icon="fas fa-hourglass-half" %} </div> {% else %} diff --git a/evap/results/templates/results_index_evaluation.html b/evap/results/templates/results_index_evaluation.html index 8fbc8feaffa57ad01cea43df105ef427c1417bf9..531f6284c29a4f8f0096a212524a093b7fcbcb3b 100644 --- a/evap/results/templates/results_index_evaluation.html +++ b/evap/results/templates/results_index_evaluation.html @@ -34,14 +34,14 @@ {% endif %} {% if evaluation.is_single_result %} ({{ evaluation.vote_start_datetime|date }}){% endif %} {% if evaluation.state == evaluation.State.IN_EVALUATION %} - <span data-toggle="tooltip" data-placement="top" class="fas fa-play icon-gray" title="{% trans 'This evaluation is still running' %}"></span> + <span data-bs-toggle="tooltip" data-bs-placement="top" class="fas fa-play icon-gray" title="{% trans 'This evaluation is still running' %}"></span> {% elif evaluation.state == evaluation.State.EVALUATED %} - <span data-toggle="tooltip" data-placement="top" class="fas fa-chart-bar icon-yellow" title="{% trans 'Results not yet published' %}"></span> + <span data-bs-toggle="tooltip" data-bs-placement="top" class="fas fa-chart-bar icon-yellow" title="{% trans 'Results not yet published' %}"></span> {% elif evaluation.state == evaluation.State.REVIEWED %} {% if evaluation.is_single_result or evaluation.grading_process_is_finished %} - <span data-toggle="tooltip" data-placement="top" class="fas fa-chart-bar icon-red" title="{% trans 'Results not yet published although grading process is finished' %}"></span> + <span data-bs-toggle="tooltip" data-bs-placement="top" class="fas fa-chart-bar icon-red" title="{% trans 'Results not yet published although grading process is finished' %}"></span> {% else %} - <span data-toggle="tooltip" data-placement="top" class="fas fa-chart-bar icon-yellow" title="{% trans 'Results not yet published' %}"></span> + <span data-bs-toggle="tooltip" data-bs-placement="top" class="fas fa-chart-bar icon-yellow" title="{% trans 'Results not yet published' %}"></span> {% endif %} {% endif %} </span> @@ -66,7 +66,7 @@ <div data-col="result"{% if not is_subentry %} data-order="{% if evaluation.is_single_result %}{{ evaluation.single_result_rating_result.average }}{% else %}{{ evaluation.avg_grade|default:7 }}{% endif %}"{% endif %}> {% if not evaluation.can_staff_see_average_grade %} - <div class="d-flex" data-toggle="tooltip" data-placement="left" title="{% trans 'Evaluation result is not yet available.' %}"> + <div class="d-flex" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Evaluation result is not yet available.' %}"> {% include "distribution_with_grade_disabled.html" with icon="fas fa-hourglass-half" %} </div> {% else %} diff --git a/evap/results/templates/textanswer_list.html b/evap/results/templates/textanswer_list.html index 7fc4b4a48a13a12f45609c18d3ae55ba99aa500b..dc95e164ccbf615f676f2f61d5a16d78a74fe848 100644 --- a/evap/results/templates/textanswer_list.html +++ b/evap/results/templates/textanswer_list.html @@ -2,13 +2,13 @@ {% for answer in question_result.answers %} <li> {% if answer.is_private %} - <span data-toggle="tooltip" data-placement="left" class="fas fa-info-circle" title="{% trans 'This answer is only visible to you. Other contributors and your delegates can not see it.' %}"></span> + <span data-bs-toggle="tooltip" data-bs-placement="left" class="fas fa-info-circle" title="{% trans 'This answer is only visible to you. Other contributors and your delegates can not see it.' %}"></span> {% endif %} {{ answer.answer|linebreaksbr }} </li> {% endfor %} </ul> -<div class="ml-auto d-print-none"> +<div class="ms-auto d-print-none"> {% blocktrans asvar intro_text %}These text answers can be seen by:{% endblocktrans %} {% include 'textanswer_visibility_info.html' with intro_text=intro_text visible_by_contribution=question_result.answers_visible_to.visible_by_contribution visible_by_delegation_count=question_result.answers_visible_to.visible_by_delegation_count %} </div> diff --git a/evap/rewards/templates/rewards_index.html b/evap/rewards/templates/rewards_index.html index 89ba40f3d96a848589a8cc5ac086d52f197637fc..bcb43fd45546d953b9bbb0ecdd7fc22dbe0d3304 100644 --- a/evap/rewards/templates/rewards_index.html +++ b/evap/rewards/templates/rewards_index.html @@ -28,7 +28,7 @@ <th style="width: 20%">{% trans 'Date' %}</th> <th style="width: 40%">{% trans 'Event' %}</th> <th style="width: 20%">{% trans 'Available until' %}</th> - <th style="width: 20%" class="text-right">{% trans 'Redeem points' %}</th> + <th style="width: 20%" class="text-end">{% trans 'Redeem points' %}</th> </tr> </thead> <tbody> @@ -37,8 +37,8 @@ <td>{{ event.date }}</td> <td>{{ event.name }}</td> <td>{{ event.redeem_end_date }}</td> - <td class="text-right"> - <select class="form-control pull-right" id="id_points-{{ event.id }}" name="points-{{ event.id }}" style="width:5em"> + <td class="text-end"> + <select class="form-control" id="id_points-{{ event.id }}" name="points-{{ event.id }}" style="width:5em"> {% for p in point_selection %} <option value="{{ p }}">{{ p }}</option> {% endfor %} @@ -48,7 +48,9 @@ {% endfor %} </tbody> </table> - <button type="submit" class="btn btn-primary pull-right">{% trans 'Redeem' %}</button> + <span class="d-flex"> + <button type="submit" class="btn btn-primary ms-auto">{% trans 'Redeem' %}</button> + </span> </form> {% else %} <p class="font-italic">{% blocktrans %}Currently there are no events available for which you can redeem points. We'll send you a message when this changes.{% endblocktrans %}</p> @@ -70,8 +72,8 @@ <tr> <th style="width: 20%">{% trans 'Date' %}</th> <th style="width: 40%">{% trans 'Action' %}</th> - <th style="width: 20%" class="text-right">{% trans 'Granted points' %}</th> - <th style="width: 20%" class="text-right">{% trans 'Redeemed points' %}</th> + <th style="width: 20%" class="text-end">{% trans 'Granted points' %}</th> + <th style="width: 20%" class="text-end">{% trans 'Redeemed points' %}</th> </tr> </thead> <tbody> @@ -79,8 +81,8 @@ <tr> <td>{{ action_time }}</td> <td>{{ event_name }}</td> - <td class="text-right">{{ granting_value }}</td> - <td class="text-right">{{ redemption_value }}</td> + <td class="text-end">{{ granting_value }}</td> + <td class="text-end">{{ redemption_value }}</td> </tr> {% endfor %} </tbody> diff --git a/evap/rewards/templates/rewards_reward_point_redemption_event_list.html b/evap/rewards/templates/rewards_reward_point_redemption_event_list.html index 29e13dca9ce80cf26eac289eb8f7ddbe0c3a3288..8571e072034386697896b92dedff4a04cca1d3f5 100644 --- a/evap/rewards/templates/rewards_reward_point_redemption_event_list.html +++ b/evap/rewards/templates/rewards_reward_point_redemption_event_list.html @@ -21,14 +21,14 @@ <td>{{ event.name }}</td> <td><span class="fas fa-user"></span> {{ event.redemptions_by_user|length }} <td> - <a href="{% url 'rewards:reward_point_redemption_event_export' event.id %}" class="btn btn-sm btn-primary" data-toggle="tooltip" data-placement="top" title="{% trans 'Export Redemptions' %}"><span class="fas fa-download"></span></a> - <a href="{% url 'rewards:reward_point_redemption_event_edit' event.id %}" class="btn btn-sm btn-secondary" data-toggle="tooltip" data-placement="top" title="{% trans 'Edit' %}"><span class="fas fa-pencil-alt"></span></a> + <a href="{% url 'rewards:reward_point_redemption_event_export' event.id %}" class="btn btn-sm btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Export Redemptions' %}"><span class="fas fa-download"></span></a> + <a href="{% url 'rewards:reward_point_redemption_event_edit' event.id %}" class="btn btn-sm btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Edit' %}"><span class="fas fa-pencil-alt"></span></a> {% if event.can_delete %} - <button type="button" onclick="deleteEventModalShow({{ event.id }}, '{{ event.name|escapejs }}');" class="btn btn-sm btn-danger" data-toggle="tooltip" data-placement="top" title="{% trans 'Delete' %}"> + <button type="button" onclick="deleteEventModalShow({{ event.id }}, '{{ event.name|escapejs }}');" class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}"> <span class="fas fa-trash"></span> </button> {% else %} - <button disabled type="button" class="btn btn-sm btn-danger" data-toggle="tooltip" data-placement="top" + <button disabled type="button" class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'This event cannot be deleted because some users already redeemed points for it.' %}"> <span class="fas fa-trash"></span> </button> diff --git a/evap/staff/forms.py b/evap/staff/forms.py index f4f2304f7dc1214845b6a12ab503998c347701a0..a99721dbb5199994276c7990ff0fca1d17325f1b 100644 --- a/evap/staff/forms.py +++ b/evap/staff/forms.py @@ -535,8 +535,8 @@ class EvaluationEmailForm(forms.Form): widget=forms.CheckboxSelectMultiple(), choices=EmailTemplate.Recipients.choices, label=_("Send email to") ) subject = forms.CharField(label=_("Subject")) - plain_content = forms.CharField(widget=forms.Textarea(), label=_("Plain Message")) - html_content = forms.CharField(widget=forms.Textarea(), label=_("HTML Message")) + plain_content = forms.CharField(widget=forms.Textarea(), label=_("Plain Text")) + html_content = forms.CharField(widget=forms.Textarea(), label=_("HTML")) def __init__(self, *args, evaluation, export=False, **kwargs): super().__init__(*args, **kwargs) @@ -575,8 +575,8 @@ class RemindResponsibleForm(forms.Form): to = UserModelChoiceField(None, required=False, disabled=True, label=_("To")) cc = UserModelMultipleChoiceField(None, required=False, disabled=True, label=_("CC")) subject = forms.CharField(label=_("Subject")) - plain_content = forms.CharField(widget=forms.Textarea(), label=_("Plain Message")) - html_content = forms.CharField(widget=forms.Textarea(), label=_("HTML Message")) + plain_content = forms.CharField(widget=forms.Textarea(), label=_("Plain Text")) + html_content = forms.CharField(widget=forms.Textarea(), label=_("HTML")) def __init__(self, *args, responsible, **kwargs): super().__init__(*args, **kwargs) diff --git a/evap/staff/templates/staff_course_type_index.html b/evap/staff/templates/staff_course_type_index.html index d9b51efabcabe361062f6ae72c8548deff33558e..371b1cf01319c46e6f5fc6ca66cf397416d622b6 100644 --- a/evap/staff/templates/staff_course_type_index.html +++ b/evap/staff/templates/staff_course_type_index.html @@ -48,9 +48,9 @@ </td> <td> {% if form.instance.can_be_deleted_by_manager %} - {% include 'bootstrap_form_field_widget.html' with field=form.DELETE %} + {% include 'bootstrap_form_field_widget.html' with field=form.DELETE class="d-none" %} {% else %} - <button type="button" disabled class="btn btn-sm btn-danger" data-toggle="tooltip" data-placement="left" + <button type="button" disabled class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'This course type cannot be deleted because it is used for at least one course.' %}"> <span class="fas fa-trash"></span> </button> diff --git a/evap/staff/templates/staff_degree_index.html b/evap/staff/templates/staff_degree_index.html index 4fc7146863d44304c8254310ce9fa3025e971251..a1ecae5a19483eb560073ee375e59b3b9a3a472a 100644 --- a/evap/staff/templates/staff_degree_index.html +++ b/evap/staff/templates/staff_degree_index.html @@ -44,9 +44,9 @@ </td> <td> {% if form.instance.can_be_deleted_by_manager %} - {% include 'bootstrap_form_field_widget.html' with field=form.DELETE %} + {% include 'bootstrap_form_field_widget.html' with field=form.DELETE class="d-none" %} {% else %} - <button type="button" disabled class="btn btn-sm btn-danger" data-toggle="tooltip" data-placement="left" + <button type="button" disabled class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'This degree cannot be deleted because it is used for at least one course.' %}"> <span class="fas fa-trash"></span> </button> diff --git a/evap/staff/templates/staff_email_preview_form.html b/evap/staff/templates/staff_email_preview_form.html index 1bdee565a04cad742c729577ccdf4b1bdf1b52dd..a1d78d89a26571b6760a9c8c955fb45f9b12d4f9 100644 --- a/evap/staff/templates/staff_email_preview_form.html +++ b/evap/staff/templates/staff_email_preview_form.html @@ -7,17 +7,17 @@ <label class="form-check-label" for="send_email{{ id_suffix }}">{% trans 'Send email notifications' %}</label> </div> <div class="email-form" id="email_form{{ id_suffix}}"> - <div class="form-group d-flex"> - <div class="form-label">{% trans 'Email subject' %}</div> + <div class="mb-3 d-flex"> + <div class="form-label pe-4">{% trans 'Email subject' %}</div> <div class="form-field"><input class="form-control" name="email_subject{{ id_suffix }}" type="text" value="{{ email_template.subject }}" /></div> </div> - <div class="form-group d-flex"> - <div class="form-label"> - <div class="nav nav-pills btn-switch btn-group-vertical float-right" role="tablist"> - <a class="p-1 space-normal font-weight-bold btn btn-light text-center nav-link show active" href="#tab-plain{{ id_suffix }}" data-toggle="pill" role="tab" aria-controls="pills-plain{{ id_suffix }}" aria-selected="true"> + <div class="mb-3 d-flex"> + <div class="form-label pe-4"> + <div class="nav nav-pills btn-switch btn-group-vertical float-end" role="tablist"> + <a class="p-1 space-normal fw-bold btn btn-light text-center nav-link show active" href="#tab-plain{{ id_suffix }}" data-bs-toggle="pill" role="tab" aria-controls="pills-plain{{ id_suffix }}" aria-selected="true"> {% trans 'Plain Text' %} </a> - <a class="p-1 space-normal font-weight-bold btn btn-light text-center nav-link" href="#tab-html{{ id_suffix }}" data-toggle="pill" role="tab" aria-controls="pills-html{{ id_suffix }}" aria-selected="false"> + <a class="p-1 space-normal fw-bold btn btn-light text-center nav-link" href="#tab-html{{ id_suffix }}" data-bs-toggle="pill" role="tab" aria-controls="pills-html{{ id_suffix }}" aria-selected="false"> {% trans 'HTML' %} </a> </div> diff --git a/evap/staff/templates/staff_evaluation_email.html b/evap/staff/templates/staff_evaluation_email.html index eddf6ff5d4dff8be59a8149a6f19009bfea4a948..d27800bf52aba8ad7c0333392308ee42a248a097 100644 --- a/evap/staff/templates/staff_evaluation_email.html +++ b/evap/staff/templates/staff_evaluation_email.html @@ -17,13 +17,13 @@ {% with bodies=form.visible_fields|slice:"-2:" rest=form.visible_fields|slice:":-2" %} {% for field in rest %} {% if field.name == 'recipients' %} - <div class="form-group d-flex"> - {% include 'bootstrap_form_field_label.html' with field=field class='col-md-2' %} + <div class="mb-3 d-flex"> + {% include 'bootstrap_form_field_label.html' with field=field class='col-md-2 pe-4' %} <div class="col-md-7{% if field.errors %} is-invalid{% endif %}"> - <div class="btn-group btn-group-toggle mb-1" data-toggle="buttons"> + <div class="btn-group btn-group-toggle mb-1" data-bs-toggle="buttons"> {% for choice in field %} - <label class="btn btn-sm btn-light{% if choice.data.value in field.value %} active{% endif %}{% if field.errors %} error-label{% endif %}"> - <input id="{{ choice.id_for_label }}" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}" autocomplete="off"{% if choice.data.value in field.value %} checked{% endif %} /> + <input id="{{ choice.id_for_label }}" class="btn-check" name="{{ choice.data.name }}" type="checkbox" value="{{ choice.data.value }}" autocomplete="off"{% if choice.data.value in field.value %} checked{% endif %} /> + <label class="btn btn-sm btn-outline-primary{% if field.errors %} error-label{% endif %}" for="{{ choice.id_for_label }}"> {{ choice.choice_label }} {{ choice.id }} </label> {% endfor %} diff --git a/evap/staff/templates/staff_evaluation_evaluation_period.html b/evap/staff/templates/staff_evaluation_evaluation_period.html index 72cb197d358f5d0d7061e5e35857f90a1331a4e1..a9c5be4d0b9fc672acc85e3b65124dbe7d7f20fc 100644 --- a/evap/staff/templates/staff_evaluation_evaluation_period.html +++ b/evap/staff/templates/staff_evaluation_evaluation_period.html @@ -10,16 +10,16 @@ {% if not start_only %} {% if state < evaluation.State.IN_EVALUATION %} {% if evaluation.days_until_evaluation < 0 %} - <div class="badge badge-danger"> + <div class="badge bg-danger"> {% trans 'Overdue' %} </div> {% else %} - <div class="badge {% if evaluation.days_until_evaluation <= 7 %}badge-warning{% else %}badge-light{% endif %}"> + <div class="badge {% if evaluation.days_until_evaluation <= 7 %}bg-warning{% else %}bg-light{% endif %}"> {% trans 'Begins in' %} {{ evaluation.vote_start_datetime|timeuntil }} </div> {% endif %} {% elif state == evaluation.State.IN_EVALUATION %} - <div class="badge {% if evaluation.days_left_for_evaluation <= 3 %}badge-dark{% else %}badge-light{% endif %}"> + <div class="badge {% if evaluation.days_left_for_evaluation <= 3 %}bg-dark{% else %}bg-light{% endif %}"> {% trans 'Ends in' %} {{ evaluation.vote_end_datetime|timeuntil }} </div> {% endif %} diff --git a/evap/staff/templates/staff_evaluation_form.html b/evap/staff/templates/staff_evaluation_form.html index de05e232029a598cb9bcf17092041d36227ac136..2ac428af0f7e8444c45f57708422a758eea63ccd 100644 --- a/evap/staff/templates/staff_evaluation_form.html +++ b/evap/staff/templates/staff_evaluation_form.html @@ -14,7 +14,7 @@ {% if evaluation_form.instance.id %} <div class="mb-2"> {% with approval_state_values=evaluation.state|approval_state_values %} - <span class="badge badge-light"><span class="{{ approval_state_values.icon }}"></span> {{ approval_state_values.description }}</span> + <span class="badge bg-light"><span class="{{ approval_state_values.icon }}"></span> {{ approval_state_values.description }}</span> {% endwith %} {% include 'course_badges.html' with course=evaluation.course %} </div> diff --git a/evap/staff/templates/staff_evaluation_person_management.html b/evap/staff/templates/staff_evaluation_person_management.html index bc02ac32815a8f94412a43baef0eaf37d87aec65..d65aaa1a2b32b9e5fe7dc71cbbe074939de35c4f 100644 --- a/evap/staff/templates/staff_evaluation_person_management.html +++ b/evap/staff/templates/staff_evaluation_person_management.html @@ -28,7 +28,7 @@ {% else %} <button name="operation" value="test-participants" type="submit" class="btn btn-sm btn-light form-submit-btn">{% trans 'Upload and test' %}</button> <div class="mt-2"> - <button name="operation" value="import-participants" type="button" onclick="importParticipantsModalShow('import-participants');" class="btn btn-sm btn-primary mr-1 form-submit-btn";>{% trans 'Import previously uploaded file' %}</button> + <button name="operation" value="import-participants" type="button" onclick="importParticipantsModalShow('import-participants');" class="btn btn-sm btn-primary me-1 form-submit-btn";>{% trans 'Import previously uploaded file' %}</button> <button name="operation" value="import-replace-participants" type="button" onclick="replaceParticipantsModalShow('import-replace-participants');" class="btn btn-sm btn-danger form-submit-btn">{% trans 'Replace participants' %}</button> </div> {% endif %} @@ -48,7 +48,7 @@ </div> <div class="card-footer text-center"> <button name="operation" value="copy-participants" type="button" onclick="copyParticipantsModalShow('copy-participants');" class="btn btn-sm btn-primary form-submit-btn">{% trans 'Copy participants' %}</button> - <button name="operation" value="copy-replace-participants" type="button" onclick="copyReplaceParticipantsModalShow('copy-replace-participants');" class="btn btn-sm btn-danger ml-1 form-submit-btn">{% trans 'Replace participants' %}</button> + <button name="operation" value="copy-replace-participants" type="button" onclick="copyReplaceParticipantsModalShow('copy-replace-participants');" class="btn btn-sm btn-danger ms-1 form-submit-btn">{% trans 'Replace participants' %}</button> </div> </div> </form> @@ -78,7 +78,7 @@ <button name="operation" value="test-contributors" type="submit" class="btn btn-sm btn-light form-submit-btn">{% trans 'Upload and test' %}</button> <div class="mt-2"> <button name="operation" value="import-contributors" type="button" onclick="importContributorsModalShow('import-contributors');" class="btn btn-sm btn-primary form-submit-btn">{% trans 'Import previously uploaded file' %}</button> - <button name="operation" value="import-replace-contributors" type="button" onclick="replaceContributorsModalShow('import-replace-contributors');" class="btn btn-sm btn-danger ml-1 form-submit-btn">{% trans 'Replace contributors' %}</button> + <button name="operation" value="import-replace-contributors" type="button" onclick="replaceContributorsModalShow('import-replace-contributors');" class="btn btn-sm btn-danger ms-1 form-submit-btn">{% trans 'Replace contributors' %}</button> </div> {% endif %} </div> @@ -97,7 +97,7 @@ </div> <div class="card-footer text-center"> <button name="operation" value="copy-contributors" type="button" onclick="copyContributorsModalShow('copy-contributors');" class="btn btn-sm btn-primary form-submit-btn">{% trans 'Copy contributors' %}</button> - <button name="operation" value="copy-replace-contributors" type="button" onclick="copyReplaceContributorsModalShow('copy-replace-contributors');" class="btn btn-sm btn-danger ml-1 form-submit-btn">{% trans 'Replace contributors' %}</button> + <button name="operation" value="copy-replace-contributors" type="button" onclick="copyReplaceContributorsModalShow('copy-replace-contributors');" class="btn btn-sm btn-danger ms-1 form-submit-btn">{% trans 'Replace contributors' %}</button> </div> </div> </form> @@ -116,7 +116,7 @@ </div> <div class="card-footer text-center"> <button name="operation" value="export-login-keys" type="submit" class="btn btn-sm btn-primary form-submit-btn" - {% if not evaluation.has_external_participant %} disabled data-toggle="tooltip" data-placement="top" title="{% trans "This evaluation has no external participants." %}"{% endif %}> + {% if not evaluation.has_external_participant %} disabled data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans "This evaluation has no external participants." %}"{% endif %}> {% trans 'Export login keys' %} </button> </div> diff --git a/evap/staff/templates/staff_evaluation_textanswers.html b/evap/staff/templates/staff_evaluation_textanswers.html index dbb265b8aa4d8736cfd6356e8a12009800b3b107..384969b7c4840f0c3ffb87033e1815c4e30a6f28 100644 --- a/evap/staff/templates/staff_evaluation_textanswers.html +++ b/evap/staff/templates/staff_evaluation_textanswers.html @@ -11,7 +11,7 @@ {{ block.super }} <div class="d-flex"> - <h3 class="mr-auto">{{ evaluation.full_name }} ({{ evaluation.course.semester.name }})</h3> + <h3 class="me-auto">{{ evaluation.full_name }} ({{ evaluation.course.semester.name }})</h3> <div class="btn-switch btn-switch-light my-auto d-print-none"> <div class="btn-switch-label">{% trans 'View' %}</div> <div class="btn-switch btn-group"> @@ -29,9 +29,9 @@ </div> <div class="mb-2"> {% if evaluation.state == evaluation.State.IN_EVALUATION %} - <span class="badge badge-warning"><span class="fas fa-play icon-gray"></span> {% trans 'Still in evaluation' %}</span> + <span class="badge bg-warning"><span class="fas fa-play icon-gray"></span> {% trans 'Still in evaluation' %}</span> {% else %} - <span class="badge badge-light"><span class="fas fa-stop icon-green"></span> {% trans 'Evaluation finished' %}</span> + <span class="badge bg-light"><span class="fas fa-stop icon-green"></span> {% trans 'Evaluation finished' %}</span> {% endif %} {% include 'evaluation_badges.html' with mode='manager' %} </div> diff --git a/evap/staff/templates/staff_evaluation_textanswers_quick.html b/evap/staff/templates/staff_evaluation_textanswers_quick.html index 8c98370f8d23b4619d167798b3e2248c4c14dc2b..94f620e2b0bbdf2ea174eaaa678c82a1b4671ae6 100644 --- a/evap/staff/templates/staff_evaluation_textanswers_quick.html +++ b/evap/staff/templates/staff_evaluation_textanswers_quick.html @@ -8,9 +8,7 @@ <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="hotkeys-modal-title">Hotkeys</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <table class="modal-body table table-striped table-vertically-aligned"> <tr><td><kbd>←</kbd> <kbd>→</kbd></td><td>{% trans 'Navigate through answers' %}</td></tr> @@ -24,7 +22,7 @@ <tr><td><kbd>M</kbd></td><td>{% trans 'Show unreviewed' %}</td></tr> </table> <div class="modal-footer"> - <button type="button" class="btn btn-light" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button> </div> </div> </div> @@ -33,15 +31,15 @@ <div class="card card-outline-primary slider"> <div class="card-header"> {% trans 'Text answers' %} - <span class="hotkey-btn" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="{% trans 'Hotkeys' %}"> - <span class="far fa-keyboard" data-toggle="modal" data-target="#hotkeys-modal"></span> + <span class="hotkey-btn" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="right" title="{% trans 'Hotkeys' %}"> + <span class="far fa-keyboard" data-bs-toggle="modal" data-bs-target="#hotkeys-modal"></span> </span> </div> <div class="card-body slider-inner px-0"> <div class="slider-side slider-side-left"> - <span class="badge badge-pill badge-primary" data-counter="reviewed-left" data-toggle="tooltip" data-placement="left" title="{% trans 'Reviewed text answers' %}"></span> + <span class="badge rounded-pill bg-primary" data-counter="reviewed-left" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Reviewed text answers' %}"></span> <span class="fas fa-angle-left" data-slide="left"></span> - <span class="badge badge-pill badge-secondary" data-counter="unreviewed-left" data-toggle="tooltip" data-placement="left" title="{% trans 'Unreviewed text answers' %}"></span> + <span class="badge rounded-pill bg-secondary" data-counter="unreviewed-left" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Unreviewed text answers' %}"></span> </div> <div class="slider-items"> {% for questionnaire, contributor, label, is_responsible, results in sections %} @@ -85,9 +83,9 @@ </div> </div> <div class="slider-side slider-side-right"> - <span class="badge badge-pill badge-primary" data-counter="reviewed-right" data-toggle="tooltip" data-placement="right" title="{% trans 'Reviewed text answers' %}"></span> + <span class="badge rounded-pill bg-primary" data-counter="reviewed-right" data-bs-toggle="tooltip" data-bs-placement="right" title="{% trans 'Reviewed text answers' %}"></span> <span class="fas fa-angle-right" data-slide="right" title=""></span> - <span class="badge badge-pill badge-secondary" data-counter="unreviewed-right" data-toggle="tooltip" data-placement="right" title="{% trans 'Unreviewed text answers' %}"></span> + <span class="badge rounded-pill bg-secondary" data-counter="unreviewed-right" data-bs-toggle="tooltip" data-bs-placement="right" title="{% trans 'Unreviewed text answers' %}"></span> </div> </div> <div class="card-footer d-flex"> @@ -97,7 +95,7 @@ {% trans 'yes' %} </button> <button data-action="make_private" class="btn btn-sm btn-outline-secondary" disabled="" - title="{% blocktrans %}This answer is for a general question and can't be made private.{% endblocktrans %}" data-toggle="tooltip"> + title="{% blocktrans %}This answer is for a general question and can't be made private.{% endblocktrans %}" data-bs-toggle="tooltip"> {% trans 'private' %} </button> <button data-action="hide" class="btn btn-sm btn-outline-secondary"> diff --git a/evap/staff/templates/staff_faq_index.html b/evap/staff/templates/staff_faq_index.html index ace349c9b6092003c72b78fdd997bd55ea43e031..5eeb33e78fa38577b1517c01331ec4218212e08a 100644 --- a/evap/staff/templates/staff_faq_index.html +++ b/evap/staff/templates/staff_faq_index.html @@ -40,7 +40,7 @@ {% if form.instance.id %} <a href="{% url 'staff:faq_section' form.instance.id %}" class="btn btn-secondary btn-sm"><span class="fas fa-pencil-alt"></span></a> {% endif %} - {% include 'bootstrap_form_field_widget.html' with class="d-none" field=form.DELETE %} + {% include 'bootstrap_form_field_widget.html' with field=form.DELETE class="d-none" %} </td> </tr> {% endfor %} diff --git a/evap/staff/templates/staff_faq_section.html b/evap/staff/templates/staff_faq_section.html index 91ecaf971be34da7863419c4659b8c39b1ae76ee..7b34288ad0c0f582007712417a5ff5b2dffe534a 100644 --- a/evap/staff/templates/staff_faq_section.html +++ b/evap/staff/templates/staff_faq_section.html @@ -41,7 +41,7 @@ {% include 'bootstrap_form_field_widget.html' with field=form.question_en %} {% include 'bootstrap_form_field_widget.html' with field=form.answer_en %} </td> - <td>{{ form.DELETE }}</td> + <td>{% include 'bootstrap_form_field_widget.html' with field=form.DELETE class="d-none" %}</td> </tr> {% endfor %} </tbody> diff --git a/evap/staff/templates/staff_message_rendering_template.html b/evap/staff/templates/staff_message_rendering_template.html index 62df82799359b9b80bb8d61f1e07b010997f507c..316bed8f2b884922c0480b5178bcee9dfae82771 100644 --- a/evap/staff/templates/staff_message_rendering_template.html +++ b/evap/staff/templates/staff_message_rendering_template.html @@ -1,54 +1,48 @@ {% for message in success_messages %} - <div class="alert alert-success alert-dismissable"> - <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> - <span class="fas fa-times"></span> - </button> + <div class="alert alert-success alert-dismissible"> {{ message }} + <button type="button" class="btn-close" data-bs-dismiss="alert"></button> </div> {% endfor %} {% for key, errorlist in errors.items %} - <div class="card collapsible card-outline-danger mb-3"> - <div class="card-header"> - <a class="collapse-toggle" data-toggle="collapse" href="#{{ key.value }}Card" aria-expanded="false" - aria-controls="{{ key.value }}Card"> - {{ key.label }} - </a> - </div> - <div class="collapse show" id="{{ key.value }}Card"> - <div class="card-body"> - {% for error in errorlist %} - <div class="alert alert-danger alert-dismissable"> - <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> - <span class="fas fa-times"></span> - </button> - {{ error }} - </div> - {% endfor %} - </div> - </div> - </div> + <div class="card collapsible card-outline-danger mb-3"> + <div class="card-header"> + <a class="collapse-toggle" data-bs-toggle="collapse" href="#{{ key.value }}Card" aria-expanded="false" + aria-controls="{{ key.value }}Card"> + {{ key.label }} + </a> + </div> + <div class="collapse show" id="{{ key.value }}Card"> + <div class="card-body"> + {% for error in errorlist %} + <div class="alert alert-danger alert-dismissible"> + {{ error }} + <button type="button" class="btn-close" data-bs-dismiss="alert"></button> + </div> + {% endfor %} + </div> + </div> + </div> {% endfor %} {% for key, warninglist in warnings.items %} - <div class="card card-outline-warning collapsible mb-3"> - <div class="card-header"> - <a class="collapse-toggle" data-toggle="collapse" href="#{{ key.value }}Card" aria-expanded="false" - aria-controls="{{ key.value }}Card"> - {{ key.label }} - </a> - </div> - <div class="collapse show" id="{{ key.value }}Card"> - <div class="card-body"> - {% for warning in warninglist %} - <div class="alert alert-warning alert-dismissable"> - <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> - <span class="fas fa-times"></span> - </button> - {{ warning }} - </div> - {% endfor %} - </div> - </div> - </div> + <div class="card card-outline-warning collapsible mb-3"> + <div class="card-header"> + <a class="collapse-toggle" data-bs-toggle="collapse" href="#{{ key.value }}Card" aria-expanded="false" + aria-controls="{{ key.value }}Card"> + {{ key.label }} + </a> + </div> + <div class="collapse show" id="{{ key.value }}Card"> + <div class="card-body"> + {% for warning in warninglist %} + <div class="alert alert-warning alert-dismissible"> + {{ warning }} + <button type="button" class="btn-close" data-bs-dismiss="alert"></button> + </div> + {% endfor %} + </div> + </div> + </div> {% endfor %} diff --git a/evap/staff/templates/staff_questionnaire_index.html b/evap/staff/templates/staff_questionnaire_index.html index 9d81c95dfc23034a673e0f604ee4be99e7ce09cc..d78aba91af4ee56bab0050fd06d3b12166e4d9c3 100644 --- a/evap/staff/templates/staff_questionnaire_index.html +++ b/evap/staff/templates/staff_questionnaire_index.html @@ -21,13 +21,13 @@ </div> </div> </div> - <div class="input-group col-3"> - <input type="search" name="search" class="form-control" placeholder="{% trans 'Search...' %}" /> - <div class="input-group-append"> - <button class="btn btn-light text-secondary" type="button" data-reset="search" data-toggle="tooltip" data-placement="top" title="{% trans 'Clear filter' %}"> + <div class="col-3"> + <div class="input-group"> + <input type="search" name="search" class="form-control" placeholder="{% trans 'Search...' %}" /> + <button class="btn btn-light text-secondary" type="button" data-reset="search" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Clear filter' %}"> <span class="fas fa-backspace"></span> </button> - </div> + </div> </div> </div> diff --git a/evap/staff/templates/staff_questionnaire_index_list.html b/evap/staff/templates/staff_questionnaire_index_list.html index 0da85cd2d1b16c5896fd367f25ae14f8adb5283f..6c2df14991c7d74c5ddb609261d088ffb3e124b7 100644 --- a/evap/staff/templates/staff_questionnaire_index_list.html +++ b/evap/staff/templates/staff_questionnaire_index_list.html @@ -1,7 +1,7 @@ {% if questionnaires %} <div class="card collapsible {{ extra_classes }}"> <div class="card-header"> - <a class="collapse-toggle" data-toggle="collapse" href="#questionnaires-{{ type }}" aria-expanded="false" aria-controls="questionnaires-{{ type }}"> + <a class="collapse-toggle" data-bs-toggle="collapse" href="#questionnaires-{{ type }}" aria-expanded="false" aria-controls="questionnaires-{{ type }}"> {% trans headline %} </a> </div> @@ -34,29 +34,29 @@ <td> {% if type != 'contributor' %} <div class="btn-switch btn-group icon-buttons"> - <button data-is-locked="0" type="button" onclick="changeLocked($(this));" class="btn btn-sm btn-light{% if questionnaire.is_locked == False %} active{% endif %}" data-toggle="tooltip" data-placement="top" title="{% trans 'Allow editors to change the selection of this questionnaire' %}"><span class="fas fa-fw fa-lock-open" aria-hidden="true"></span></button> - <button data-is-locked="1" type="button" onclick="changeLocked($(this));" class="btn btn-sm btn-light{% if questionnaire.is_locked == True %} active{% endif %}" data-toggle="tooltip" data-placement="top" title="{% trans 'Prevent editors from changing the selection of this questionnaire' %}"><span class="fas fa-fw fa-lock" aria-hidden="true"></span></button> + <button data-is-locked="0" type="button" onclick="changeLocked($(this));" class="btn btn-sm btn-light{% if questionnaire.is_locked == False %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Allow editors to change the selection of this questionnaire' %}"><span class="fas fa-fw fa-lock-open" aria-hidden="true"></span></button> + <button data-is-locked="1" type="button" onclick="changeLocked($(this));" class="btn btn-sm btn-light{% if questionnaire.is_locked == True %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Prevent editors from changing the selection of this questionnaire' %}"><span class="fas fa-fw fa-lock" aria-hidden="true"></span></button> </div> {% endif %} </td> <td> <div class="btn-group icon-buttons"> - <button data-visibility="0" type="button" onclick="changeVisibility($(this));" class="btn btn-sm btn-light{% if questionnaire.visibility == 0 %} active{% endif %}" data-toggle="tooltip" data-placement="top" title="{% blocktrans %}Hide in lists{% endblocktrans %}"><span class="fas fa-fw fa-user-slash" aria-hidden="true"></span></button> - <button data-visibility="1" type="button" onclick="changeVisibility($(this));" class="btn btn-sm btn-light{% if questionnaire.visibility == 1 %} active{% endif %}" data-toggle="tooltip" data-placement="top" title="{% trans 'Show only for managers' %}"><span class="fas fa-fw fa-user" aria-hidden="true"></span></button> - <button data-visibility="2" type="button" onclick="changeVisibility($(this));" class="btn btn-sm btn-light{% if questionnaire.visibility == 2 %} active{% endif %}" data-toggle="tooltip" data-placement="top" title="{% trans 'Show for managers and editors' %}"><span class="fas fa-fw fa-users" aria-hidden="true"></span></button> + <button data-visibility="0" type="button" onclick="changeVisibility($(this));" class="btn btn-sm btn-light{% if questionnaire.visibility == 0 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% blocktrans %}Hide in lists{% endblocktrans %}"><span class="fas fa-fw fa-user-slash" aria-hidden="true"></span></button> + <button data-visibility="1" type="button" onclick="changeVisibility($(this));" class="btn btn-sm btn-light{% if questionnaire.visibility == 1 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Show only for managers' %}"><span class="fas fa-fw fa-user" aria-hidden="true"></span></button> + <button data-visibility="2" type="button" onclick="changeVisibility($(this));" class="btn btn-sm btn-light{% if questionnaire.visibility == 2 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Show for managers and editors' %}"><span class="fas fa-fw fa-users" aria-hidden="true"></span></button> </div> </td> <td> - <a href="{% url 'staff:questionnaire_edit' questionnaire.id %}" class="btn btn-sm {%if questionnaire.can_be_edited_by_manager %}btn-primary{% else %}btn-light{% endif %}" data-toggle="tooltip" data-placement="top" title="{%if questionnaire.can_be_edited_by_manager %}{% trans 'Edit' %}{% else %}{% trans 'Edit (questionnaire is already in use)' %}{% endif %}"><span class="fas fa-pencil-alt"></span></a> - <a href="{% url 'staff:questionnaire_new_version' questionnaire.id %}" class="btn btn-sm btn-light" data-toggle="tooltip" data-placement="top" title="{% trans 'Hide and create new version' %}"><span class="far fa-clock"></span></a> - <a href="{% url 'staff:questionnaire_copy' questionnaire.id %}" class="btn btn-sm btn-light" data-toggle="tooltip" data-placement="top" title="{% trans 'Copy' %}"><span class="far fa-copy"></span></a> - <a href="{% url 'staff:questionnaire_view' questionnaire.id %}" class="btn btn-sm btn-light" data-toggle="tooltip" data-placement="top" title="{% trans 'Preview' %}"><span class="far fa-eye"></span></a> + <a href="{% url 'staff:questionnaire_edit' questionnaire.id %}" class="btn btn-sm {%if questionnaire.can_be_edited_by_manager %}btn-primary{% else %}btn-light{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{%if questionnaire.can_be_edited_by_manager %}{% trans 'Edit' %}{% else %}{% trans 'Edit (questionnaire is already in use)' %}{% endif %}"><span class="fas fa-pencil-alt"></span></a> + <a href="{% url 'staff:questionnaire_new_version' questionnaire.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Hide and create new version' %}"><span class="far fa-clock"></span></a> + <a href="{% url 'staff:questionnaire_copy' questionnaire.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Copy' %}"><span class="far fa-copy"></span></a> + <a href="{% url 'staff:questionnaire_view' questionnaire.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Preview' %}"><span class="far fa-eye"></span></a> {% if questionnaire.can_be_deleted_by_manager %} - <button type="button" onclick="deleteQuestionnaireModalShow({{ questionnaire.id }}, '{{ questionnaire.name|escapejs }}');" class="btn btn-sm btn-danger" data-toggle="tooltip" data-placement="top" title="{% trans 'Delete' %}"> + <button type="button" onclick="deleteQuestionnaireModalShow({{ questionnaire.id }}, '{{ questionnaire.name|escapejs }}');" class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}"> <span class="fas fa-trash"></span> </button> {% else %} - <button type="button" disabled class="btn btn-sm btn-danger" data-toggle="tooltip" data-placement="top" + <button type="button" disabled class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'This questionnaire cannot be deleted because it is already in use.' %}"> <span class="fas fa-trash"></span> </button> diff --git a/evap/staff/templates/staff_semester_export.html b/evap/staff/templates/staff_semester_export.html index 8239f3cd84043457811a96b0b592f1abb5e13635..ec3e149684879518c6d4bcde4520c682a50d5090 100644 --- a/evap/staff/templates/staff_semester_export.html +++ b/evap/staff/templates/staff_semester_export.html @@ -40,7 +40,7 @@ <td> {% include 'multiple_checkbox_widget.html' with field=form.selected_course_types %} </td> - <td>{{ form.DELETE }}</td> + <td>{% include 'bootstrap_form_field_widget.html' with field=form.DELETE class="d-none" %}</td> </tr> {% endfor %} </tbody> diff --git a/evap/staff/templates/staff_semester_preparation_reminder.html b/evap/staff/templates/staff_semester_preparation_reminder.html index 3aa1b8c3e072febd07b1806ebe3130473f7fa284..9ffff7b1d264ca3fa43f70a984197d121a3b4ef5 100644 --- a/evap/staff/templates/staff_semester_preparation_reminder.html +++ b/evap/staff/templates/staff_semester_preparation_reminder.html @@ -12,7 +12,7 @@ {% if responsible_list %} <div class="d-flex mb-3"> - <div class="mr-auto"> + <div class="me-auto"> <button type="button" id="remindAllButton" onClick="remindAllModalShow()" class="btn btn-sm btn-light">{% trans 'Remind all' %}</button> </div> </div> @@ -21,7 +21,7 @@ {% for responsible, evaluations, delegates in responsible_list %} <div class="card{% if not forloop.last %} mb-3{% endif %}"> <div class="card-header d-flex"> - <span class="pl-1 mr-auto"> + <span class="ps-1 me-auto"> <a href="{% url 'staff:user_edit' responsible.id %}">{{ responsible.full_name }}</a>, {% trans 'Delegates' %}: {% for delegate in delegates %} <a href="{% url 'staff:user_edit' delegate.id %}">{{ delegate.full_name }}</a>{% if not forloop.last %},{% endif %} @@ -47,7 +47,7 @@ <tr{% if evaluation.state != evaluation.State.PREPARED %} class="deactivate"{% endif %}> <th scope="row"> {% with approval_state_values=evaluation.state|approval_state_values %} - <span class="{{ approval_state_values.icon }}" data-toggle="tooltip" data-placement="top" title="{{ approval_state_values.description }}"></span> + <span class="{{ approval_state_values.icon }}" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ approval_state_values.description }}"></span> {% endwith %} <a href="{% url 'staff:evaluation_edit' semester.id evaluation.id %}">{{ evaluation.full_name }}</a><br /> {% include 'evaluation_badges.html' with mode='manager' %} diff --git a/evap/staff/templates/staff_semester_view.html b/evap/staff/templates/staff_semester_view.html index 2a5e056c94acb43b064044286b7d34bbf5c85a11..1a250bfcdd43f618575296a6c547691985e86a85 100644 --- a/evap/staff/templates/staff_semester_view.html +++ b/evap/staff/templates/staff_semester_view.html @@ -16,7 +16,7 @@ id="makeActiveSemesterButton" type="button" {% if semester.is_active %} disabled - data-toggle="tooltip" data-placement="top" + data-bs-toggle="tooltip" data-bs-placement="top" title="{% blocktrans %}This is the active semester{% endblocktrans %}" {% endif %}> {% trans 'Make active' %} @@ -28,7 +28,7 @@ {% if request.user.is_manager %} <div class="card collapsible mb-3"> <div class="card-header d-flex"> - <a class="collapse-toggle{% if not semester.participations_are_archived and not semester.grade_documents_are_deleted and not semester.results_are_archived %} collapsed{% endif %}" data-toggle="collapse" href="#archivingCard">{% trans 'Archiving' %}</a> + <a class="collapse-toggle{% if not semester.participations_are_archived and not semester.grade_documents_are_deleted and not semester.results_are_archived %} collapsed{% endif %}" data-bs-toggle="collapse" href="#archivingCard">{% trans 'Archiving' %}</a> </div> <div class="collapse{% if semester.participations_are_archived or semester.grade_documents_are_deleted or semester.results_are_archived %} show{% endif %}" id="archivingCard"> <div class="card-body"> @@ -38,7 +38,7 @@ <button type="button" disabled class="btn btn-sm btn-success">{% trans 'Participations have been archived' %}</button> {% else %} <button type="button" disabled class="btn btn-sm btn-warning" - data-toggle="tooltip" data-placement="top" title="{% trans 'The participations in this semester can not be archived.' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'The participations in this semester can not be archived.' %}"> {% trans 'Archive participations' %}</button> {% endif %} {% if semester.grade_documents_can_be_deleted %} @@ -58,14 +58,14 @@ <div class="card collapsible mb-3"> <div class="card-header d-flex"> - <a class="collapse-toggle collapsed" data-toggle="collapse" href="#overviewCard" aria-expanded="false" aria-controls="overviewCard" onclick="saveCollapseState()">{% trans 'Overview' %}</a> + <a class="collapse-toggle collapsed" data-bs-toggle="collapse" href="#overviewCard" aria-expanded="false" aria-controls="overviewCard" onclick="saveCollapseState()">{% trans 'Overview' %}</a> {% if request.user.is_manager %} - <div class="ml-auto"> + <div class="ms-auto"> {% if not semester.participations_are_archived %} <a href="{% url 'staff:semester_preparation_reminder' semester.id %}" class="btn btn-sm btn-light">{% trans 'Preparation reminder' %}</a> - <a href="{% url 'staff:semester_grade_reminder' semester.id %}" class="btn btn-sm btn-light ml-2">{% trans 'Grade publish reminder' %}</a> + <a href="{% url 'staff:semester_grade_reminder' semester.id %}" class="btn btn-sm btn-light ms-2">{% trans 'Grade publish reminder' %}</a> {% endif %} - <div class="btn-switch ml-2"> + <div class="btn-switch ms-2"> <div class="btn-switch-label">{% trans 'Reward points active' %}</div> <div class="btn-switch btn-group icon-buttons"> <button type="button" onclick="activateRewardPointsModalShow({{ semester.id }}, '{{ semester.name|escapejs }}');" class="btn btn-sm btn-light{% if rewards_active %} active{% endif %}"><span class="fas fa-check" aria-hidden="true"></span></button> @@ -119,25 +119,25 @@ <div class="card-header d-flex"> <ul class="nav nav-pills" role="tablist"> <li class="nav-item"> - <a class="nav-link active" id="evaluationsTab" data-toggle="pill" href="#evaluations" role="tab" onclick="saveSelectedTab('evaluations');"> + <a class="nav-link active" id="evaluationsTab" data-bs-toggle="pill" href="#evaluations" role="tab" onclick="saveSelectedTab('evaluations');"> <span class="fas fa-clipboard-check"></span> {% trans 'Evaluations' %} </a> </li> <li class="nav-item"> - <a class="nav-link" id="coursesTab" data-toggle="pill" href="#courses" role="tab" onclick="saveSelectedTab('courses');"> + <a class="nav-link" id="coursesTab" data-bs-toggle="pill" href="#courses" role="tab" onclick="saveSelectedTab('courses');"> <span class="fas fa-chalkboard-teacher"></span> {% trans 'Courses' %} </a> </li> </ul> {% if request.user.is_manager %} - <div class="ml-auto"> + <div class="ms-auto"> {% if not semester.participations_are_archived %} <a class="btn btn-sm btn-light" href="{% url 'staff:semester_import' semester.id %}"> {% trans 'Import' %} </a> {% endif %} - <div class="btn-group ml-2" role="group"> - <button type="button" id="btnExport" class="btn btn-sm btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'Export' %}</button> + <div class="btn-group ms-2" role="group"> + <button type="button" id="btnExport" class="btn btn-sm btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'Export' %}</button> <div class="dropdown-menu" aria-labelledby="btnExport"> <a class="dropdown-item" href="{% url 'staff:semester_export' semester.id %}">{% trans 'Export results' %}</a> <a class="dropdown-item" href="{% url 'staff:semester_raw_export' semester.id %}">{% trans 'Export raw evaluation data' %}</a> @@ -145,7 +145,7 @@ </div> </div> {% if not semester.participations_are_archived %} - <a href="{% url 'staff:semester_questionnaire_assign' semester.id %}" class="btn btn-sm btn-light ml-2">{% trans 'Assign questionnaires' %}</a> + <a href="{% url 'staff:semester_questionnaire_assign' semester.id %}" class="btn btn-sm btn-light ms-2">{% trans 'Assign questionnaires' %}</a> {% endif %} </div> {% endif %} @@ -157,27 +157,28 @@ <a class="btn btn-sm btn-dark" href="{% url 'staff:evaluation_create' semester.id %}"> {% trans 'Create evaluation' %} </a> - <a class="btn btn-sm btn-dark ml-2" href="{% url 'staff:single_result_create' semester.id %}"> + <a class="btn btn-sm btn-dark ms-2" href="{% url 'staff:single_result_create' semester.id %}"> {% trans 'Create single result' %} </a> </div> - <div class="col-3 input-group"> - <input type="search" name="search-evaluation" class="form-control" placeholder="{% trans 'Search...' %}" /> - <div class="input-group-append"> - <button class="btn btn-light text-secondary" type="button" data-reset="search-evaluation" data-toggle="tooltip" data-placement="top" title="{% trans 'Clear search filter' %}"> + <div class="col-3"> + <div class="input-group"> + <input type="search" name="search-evaluation" class="form-control" placeholder="{% trans 'Search...' %}" /> + <button class="btn btn-light text-secondary" type="button" data-reset="search-evaluation" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Clear search filter' %}"> <span class="fas fa-backspace"></span> </button> </div> </div> </div> <div class="btn-switch mb-2" id="evaluation-filter-buttons"> - <div class="btn-switch-label my-auto pr-0">{% trans 'Filter' %}</div> + <div class="btn-switch-label my-auto pe-0">{% trans 'Filter' %}</div> <div> <div class="btn-switch btn-group icon-buttons"> {% for approval_state in approval_states %} {% with approval_state_values=approval_state|approval_state_values %} <button type="button" class="btn btn-sm btn-light" data-filter="{{ approval_state }}" - data-toggle="tooltip" data-placement="top" title="{{ approval_state_values.description }}"> + data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch" + title="{{ approval_state_values.description }}"> <span class="{{ approval_state_values.icon }}"></span> </button> {% endwith %} @@ -185,51 +186,62 @@ </div> <div class="btn-switch btn-group icon-buttons"> <button type="button" class="btn btn-sm btn-light" data-filter="evaluation_not_yet_started" - data-toggle="tooltip" data-placement="top" title="{% trans 'Evaluation did not start yet' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch" + title="{% trans 'Evaluation did not start yet' %}"> <span class="fas fa-pause icon-gray"></span> </button> <button type="button" class="btn btn-sm btn-light" data-filter="in_evaluation" - data-toggle="tooltip" data-placement="top" title="{% trans 'In evaluation' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch" + title="{% trans 'In evaluation' %}"> <span class="fas fa-play icon-gray"></span> </button> <button type="button" class="btn btn-sm btn-light" data-filter="evaluated" - data-toggle="tooltip" data-placement="top" title="{% trans 'Evaluated' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch" + title="{% trans 'Evaluated' %}"> <span class="fas fa-stop icon-green"></span> </button> </div> <div class="btn-switch btn-group icon-buttons"> <button type="button" class="btn btn-sm btn-light" data-filter="no_review" - data-toggle="tooltip" data-placement="top" title="{% trans 'No text answers available or evaluation not yet finished' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch" + title="{% trans 'No text answers available or evaluation not yet finished' %}"> <span class="fas fa-comment icon-gray"></span> </button> <button type="button" class="btn btn-sm btn-light" data-filter="unreviewed_textanswers_urgent" - data-toggle="tooltip" data-placement="top" title="{% trans 'Text answers awaiting urgent review because grading process is finished' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch" + title="{% trans 'Text answers awaiting urgent review because grading process is finished' %}"> <span class="fas fa-comment icon-red"></span> </button> <button type="button" class="btn btn-sm btn-light" data-filter="unreviewed_textanswers" - data-toggle="tooltip" data-placement="top" title="{% trans 'Text answers awaiting review' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch" + title="{% trans 'Text answers awaiting review' %}"> <span class="fas fa-comment icon-yellow"></span> </button> <button type="button" class="btn btn-sm btn-light" data-filter="textanswers_reviewed" - data-toggle="tooltip" data-placement="top" title="{% trans 'Text answers reviewed' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch" + title="{% trans 'Text answers reviewed' %}"> <span class="fas fa-comment icon-green"></span> </button> </div> <div class="btn-switch btn-group icon-buttons"> <button type="button" class="btn btn-sm btn-light" data-filter="evaluation_not_finished" - data-toggle="tooltip" data-placement="top" title="{% trans 'Evaluation not finished' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch" + title="{% trans 'Evaluation not finished' %}"> <span class="fas fa-chart-bar icon-gray"></span> </button> <button type="button" class="btn btn-sm btn-light" data-filter="results_not_published" - data-toggle="tooltip" data-placement="top" title="{% trans 'Results not yet published although grading process is finished' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch" + title="{% trans 'Results not yet published although grading process is finished' %}"> <span class="fas fa-chart-bar icon-red"></span> </button> <button type="button" class="btn btn-sm btn-light" data-filter="results_not_yet_published" - data-toggle="tooltip" data-placement="top" title="{% trans 'Results not yet published' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch" + title="{% trans 'Results not yet published' %}"> <span class="fas fa-chart-bar icon-yellow"></span> </button> <button type="button" class="btn btn-sm btn-light" data-filter="results_published" - data-toggle="tooltip" data-placement="top" title="{% trans 'Results published' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch" + title="{% trans 'Results published' %}"> <span class="fas fa-chart-bar icon-green"></span> </button> </div> @@ -286,31 +298,31 @@ </div> <div> <button name="target_state" value="{{ Evaluation.State.PREPARED }}" type="submit" class="btn btn-sm btn-light" - data-toggle="tooltip" data-placement="top" title="{% trans 'Evaluations in preparation or approved by editors' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Evaluations in preparation or approved by editors' %}"> <span class="{{ Evaluation.State.NEW|approval_state_icon }}"></span> <span class="{{ Evaluation.State.EDITOR_APPROVED|approval_state_icon }}"></span> {% trans 'Ask for editor review' %} </button> <button name="target_state" value="{{ Evaluation.State.NEW }}" type="submit" class="btn btn-sm btn-light" - data-toggle="tooltip" data-placement="top" title="{% trans 'Evaluations awaiting editor review, approved by editor or approved by manager' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Evaluations awaiting editor review, approved by editor or approved by manager' %}"> <span class="{{ Evaluation.State.PREPARED|approval_state_icon }}"></span> <span class="{{ Evaluation.State.EDITOR_APPROVED|approval_state_icon }}"></span> <span class="{{ Evaluation.State.APPROVED|approval_state_icon }}"></span> {% trans 'Revert to preparation' %} </button> <button name="target_state" value="{{ Evaluation.State.IN_EVALUATION }}" type="submit" class="btn btn-sm btn-light" - data-toggle="tooltip" data-placement="top" title="{% trans 'Evaluations waiting for evaluation period to start' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Evaluations waiting for evaluation period to start' %}"> <span class="fas fa-pause icon-gray"></span> {% trans 'Start evaluation' %} </button> <button name="target_state" value="{{ Evaluation.State.PUBLISHED }}" type="submit" class="btn btn-sm btn-light" - data-toggle="tooltip" data-placement="top" title="{% trans 'Unpublished evaluations' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Unpublished evaluations' %}"> <span class="fas fa-chart-bar icon-yellow"></span> <span class="fas fa-chart-bar icon-red"></span> {% trans 'Publish' %} </button> <button name="target_state" value="{{ Evaluation.State.REVIEWED }}" type="submit" class="btn btn-sm btn-light" - data-toggle="tooltip" data-placement="top" title="{% trans 'Published evaluations' %}"> + data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Published evaluations' %}"> <span class="fas fa-chart-bar icon-green"></span> {% trans 'Unpublish' %} </button> @@ -325,10 +337,10 @@ {% trans 'Create course' %} </a> </div> - <div class="col-3 input-group"> - <input type="search" name="search-course" class="form-control" placeholder="{% trans 'Search...' %}" /> - <div class="input-group-append"> - <button class="btn btn-light text-secondary" type="button" data-reset="search-course" data-toggle="tooltip" data-placement="top" title="{% trans 'Clear search filter' %}"> + <div class="col-3"> + <div class="input-group"> + <input type="search" name="search-course" class="form-control" placeholder="{% trans 'Search...' %}" /> + <button class="btn btn-light text-secondary" type="button" data-reset="search-course" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Clear search filter' %}"> <span class="fas fa-backspace"></span> </button> </div> @@ -367,24 +379,24 @@ </td> <td data-col="evaluation-count" data-order="{{ course.evaluations.count }}"> {% if course.evaluations.count == 0 %} - <span class="badge badge-warning">{% trans 'No evaluations' %}</span> + <span class="badge bg-warning">{% trans 'No evaluations' %}</span> {% else %} {{ course.evaluations.count }} {% endif %} </td> <td class="icon-buttons"> - <a class="btn btn-sm btn-dark" data-toggle="tooltip" + <a class="btn btn-sm btn-dark" data-bs-toggle="tooltip" href="{% url 'staff:evaluation_create' semester.id course.id %}" title="{% trans "Create evaluation for this course" %}"> <span class="fas fa-clipboard-check"></span> </a> - <a class="btn btn-sm btn-dark" data-toggle="tooltip" + <a class="btn btn-sm btn-dark" data-bs-toggle="tooltip" href="{% url 'staff:single_result_create' semester.id course.id %}" title="{% trans "Create single result for this course" %}"> <span class="fas fa-poll"></span> </a> {% if course.can_be_deleted_by_manager %} - <button type="button" onclick="deleteCourseModalShow({{ course.id }}, '{{ course.name|escapejs }}');" class="btn btn-sm btn-outline-danger" data-toggle="tooltip" data-placement="top" title="{% trans 'Delete' %}"> + <button type="button" onclick="deleteCourseModalShow({{ course.id }}, '{{ course.name|escapejs }}');" class="btn btn-sm btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}"> <span class="fas fa-trash" aria-hidden="true"></span> </button> {% endif %} @@ -421,7 +433,7 @@ } </script> {% trans 'Delete semester' as title %} - {% trans 'Do you really want to delete the semester <strong data-label=""></strong>? All courses and evaluations will be deleted as well as all results. If you are sure, enter the name of the semester below.' as question %} + {% blocktrans asvar question %}Do you really want to delete the semester <strong data-label=""></strong>? All courses and evaluations will be deleted as well as all results. If you are sure, enter the name of the semester below.{% endblocktrans %} {% trans 'Delete semester' as action_text %} {% include 'confirmation_text_modal.html' with modal_id='deleteSemesterModal' title=title question=question action_text=action_text btn_type='danger' %} <script type="text/javascript"> @@ -550,12 +562,11 @@ $(this).find('.btn').toggleClass('btn-secondary'); }); - if (localStorage['show_overview'] === 'true') { - $('#overviewCard').collapse('show'); - } - else { - $('#overviewCard').collapse('hide'); - } + + var overviewCard = document.getElementById('overviewCard'); + var overviewCardCollapse = new bootstrap.Collapse(overviewCard, { + toggle: localStorage['show_overview'] === 'true' + }); function saveCollapseState() { var state = localStorage['show_overview'] === 'true'; @@ -563,7 +574,9 @@ } if(localStorage['selected_tab'] === 'courses') { - $('#coursesTab').tab('show'); + var coursesTab = document.getElementById('coursesTab'); + var coursesTabTrigger = new bootstrap.Tab(coursesTab); + coursesTabTrigger.show(); } function saveSelectedTab(tab) { diff --git a/evap/staff/templates/staff_semester_view_evaluation.html b/evap/staff/templates/staff_semester_view_evaluation.html index 90a2cf091b0df168fcb2166b3ab5c03a44353393..3cf26e02d47214b1afe1067bf9c5d516c8b39fe8 100644 --- a/evap/staff/templates/staff_semester_view_evaluation.html +++ b/evap/staff/templates/staff_semester_view_evaluation.html @@ -6,7 +6,7 @@ <td> {% if request.user.is_manager and not info_only and not semester.participations_are_archived %} {% if state <= evaluation.State.APPROVED or state >= evaluation.State.REVIEWED %} - <div class="form-check" data-toggle="tooltip" data-placement="top" title="{% trans 'Select for evaluation operation' %}"> + <div class="form-check" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Select for evaluation operation' %}"> <input class="form-check-input" type="checkbox" name="evaluation" id="evaluation{{ evaluation.id }}" value="{{ evaluation.id }}" /> <label class="form-check-label" for="evaluation{{ evaluation.id }}"></label> </div> @@ -16,63 +16,63 @@ {% with approval_state_values=state|approval_state_values %} <td class="icon" data-col="state-approval" data-order="{{ approval_state_values.order }}" data-filter="{{ approval_state_values.filter }}"> - <span class="{{ approval_state_values.icon }}" data-toggle="tooltip" data-placement="top" title="{{ approval_state_values.description }}"></span> + <span class="{{ approval_state_values.icon }}" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ approval_state_values.description }}"></span> </td> {% endwith %} {% if state < evaluation.State.APPROVED %} <td class="icon" data-col="state-evaluating" data-order="1" data-filter="evaluation_not_yet_started"> - <span class="fas fa-pause icon-gray" data-toggle="tooltip" data-placement="top" title="{% trans 'Evaluation did not start yet' %}"></span> + <span class="fas fa-pause icon-gray" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Evaluation did not start yet' %}"></span> </td> {% elif state == evaluation.State.APPROVED %} <td class="icon" data-col="state-evaluating" data-order="1" data-filter="evaluation_not_yet_started"> - <span class="fas fa-pause icon-gray" data-toggle="tooltip" data-placement="top" title="{% trans 'Waiting for evaluation period to start' %}"></span> + <span class="fas fa-pause icon-gray" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Waiting for evaluation period to start' %}"></span> </td> {% elif state == evaluation.State.IN_EVALUATION %} <td class="icon" data-col="state-evaluating" data-order="2" data-filter="in_evaluation"> - <span class="fas fa-play icon-gray" data-toggle="tooltip" data-placement="top" title="{% trans 'In evaluation' %}"></span> + <span class="fas fa-play icon-gray" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'In evaluation' %}"></span> </td> {% elif state >= evaluation.State.EVALUATED %} <td class="icon" data-col="state-evaluating" data-order="3" data-filter="evaluated"> - <span class="fas fa-stop icon-green" data-toggle="tooltip" data-placement="top" title="{% trans 'Evaluated' %}"></span> + <span class="fas fa-stop icon-green" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Evaluated' %}"></span> </td> {% endif %} {% if evaluation.textanswer_review_state == evaluation.TextAnswerReviewState.NO_TEXTANSWERS or evaluation.textanswer_review_state == evaluation.TextAnswerReviewState.NO_REVIEW_NEEDED %} <td class="icon" data-col="state-textanswers" data-order="3" data-filter="no_review"> - <span class="fas fa-comment icon-gray" data-toggle="tooltip" data-placement="top" title="{% trans 'No text answers available or evaluation not yet finished' %}"></span> + <span class="fas fa-comment icon-gray" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'No text answers available or evaluation not yet finished' %}"></span> </td> {% elif evaluation.textanswer_review_state == evaluation.TextAnswerReviewState.REVIEW_URGENT %} <td class="icon" data-col="state-textanswers" data-order="1" data-filter="unreviewed_textanswers_urgent"> - <span class="fas fa-comment icon-red" data-toggle="tooltip" data-placement="top" title="{% trans 'Text answers awaiting urgent review because grading process is finished' %}"></span> + <span class="fas fa-comment icon-red" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Text answers awaiting urgent review because grading process is finished' %}"></span> </td> {% elif evaluation.textanswer_review_state == evaluation.TextAnswerReviewState.REVIEW_NEEDED %} <td class="icon" data-col="state-textanswers" data-order="2" data-filter="unreviewed_textanswers"> - <span class="fas fa-comment icon-yellow" data-toggle="tooltip" data-placement="top" title="{% trans 'Text answers awaiting review' %}"></span> + <span class="fas fa-comment icon-yellow" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Text answers awaiting review' %}"></span> </td> {% else %} <td class="icon" data-col="state-textanswers" data-order="4" data-filter="textanswers_reviewed"> - <span class="fas fa-comment icon-green" data-toggle="tooltip" data-placement="top" title="{% trans 'Text answers reviewed' %}"></span> + <span class="fas fa-comment icon-green" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Text answers reviewed' %}"></span> </td> {% endif %} {% if state < evaluation.State.REVIEWED %} <td class="icon" data-col="state-results" data-order="2" data-filter="evaluation_not_finished"> - <span class="fas fa-chart-bar icon-gray" data-toggle="tooltip" data-placement="top" title="{% trans 'Evaluation not finished' %}"></span> + <span class="fas fa-chart-bar icon-gray" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Evaluation not finished' %}"></span> </td> {% elif state == evaluation.State.REVIEWED %} {% if evaluation.is_single_result or evaluation.grading_process_is_finished %} <td class="icon text-center" data-col="state-results" data-order="0" data-filter="results_not_published"> - <span class="fas fa-chart-bar icon-red" data-toggle="tooltip" data-placement="top" title="{% trans 'Results not yet published although grading process is finished' %}"></span> + <span class="fas fa-chart-bar icon-red" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Results not yet published although grading process is finished' %}"></span> </td> {% else %} <td class="icon text-center" data-col="state-results" data-order="1" data-filter="results_not_yet_published"> - <span class="fas fa-chart-bar icon-yellow" data-toggle="tooltip" data-placement="top" title="{% trans 'Results not yet published' %}"></span> + <span class="fas fa-chart-bar icon-yellow" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Results not yet published' %}"></span> </td> {% endif %} {% elif state == evaluation.State.PUBLISHED %} <td class="icon" data-col="state-results" data-order="3" data-filter="results_published"> - <span class="fas fa-chart-bar icon-green" data-toggle="tooltip" data-placement="top" title="{% trans 'Results published' %}"></span> + <span class="fas fa-chart-bar icon-green" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Results published' %}"></span> </td> {% endif %} @@ -80,7 +80,7 @@ <div> {% if not info_only and request.user.is_manager %} <a href="{% url 'staff:evaluation_edit' semester.id evaluation.id %}">{{ evaluation.full_name }}</a> - <a class="small no-underline" href="{% url 'staff:course_edit' semester.id evaluation.course.id %}" data-toggle="tooltip" data-placement="right" title="{% trans 'Edit course' %}"> + <a class="small no-underline" href="{% url 'staff:course_edit' semester.id evaluation.course.id %}" data-bs-toggle="tooltip" data-bs-placement="right" title="{% trans 'Edit course' %}"> <span class="fas fa-chalkboard-teacher"></span> </a> {% else %} @@ -90,26 +90,26 @@ <div class="font-italic"> {{ evaluation.course.responsibles_names }} {% if info_only or not request.user.is_manager or state >= evaluation.State.IN_EVALUATION %} - <span class="small" data-toggle="tooltip" data-placement="right" title="{% trans 'Number of contributors' %}"> + <span class="small" data-bs-toggle="tooltip" data-bs-placement="right" title="{% trans 'Number of contributors' %}"> ({{ evaluation.num_contributors }} <span class="fas fa-graduation-cap"></span>) </span> {% else %} - <a class="small no-underline" href="{% url 'staff:evaluation_person_management' semester.id evaluation.id %}" data-toggle="tooltip" data-placement="right" title="{% trans 'Manage contributors' %}"> + <a class="small no-underline" href="{% url 'staff:evaluation_person_management' semester.id evaluation.id %}" data-bs-toggle="tooltip" data-bs-placement="right" title="{% trans 'Manage contributors' %}"> ({{ evaluation.num_contributors }} <span class="fas fa-graduation-cap"></span>) </a> {% endif %} </div> {% include 'evaluation_badges.html' with mode='manager' %} {% if evaluation.num_course_evaluations > 1 %} - <span class="badge badge-pill badge-dark" data-toggle="tooltip" data-placement="right" title="{% trans 'Weight' %}">{{ evaluation.weight }}</span> + <span class="badge rounded-pill bg-dark" data-bs-toggle="tooltip" data-bs-placement="right" title="{% trans 'Weight' %}">{{ evaluation.weight }}</span> {% endif %} {% if state < evaluation.State.APPROVED %} {% if not evaluation.all_contributions_have_questionnaires %} {% if not evaluation.general_contribution_has_questionnaires %} - <span class="badge badge-danger">{% trans 'Evaluation has no questionnaires' %}</span> + <span class="badge bg-danger">{% trans 'Evaluation has no questionnaires' %}</span> {% else %} - <span class="badge badge-warning">{% trans 'Not all contributors have questionnaires' %}</span> + <span class="badge bg-warning">{% trans 'Not all contributors have questionnaires' %}</span> {% endif %} {% endif %} {% endif %} @@ -121,63 +121,63 @@ {% if not evaluation.is_single_result %} <td class="multi-progress-bar"> {% if evaluation.can_publish_average_grade %} - <span data-toggle="tooltip" data-placement="left" title="{% trans 'Number of voters' %}"> + <span data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Number of voters' %}"> {% include 'progress_bar.html' with done=evaluation.num_voters total=evaluation.num_participants icon='user' %} </span> {% else %} - <span data-toggle="tooltip" data-placement="left" title="{% trans 'Not enough voters to publish average grade' %}"> + <span data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Not enough voters to publish average grade' %}"> {% include 'progress_bar.html' with done=evaluation.num_voters total=evaluation.num_participants icon='user' warning=True %} </span> {% endif %} {% if evaluation.num_textanswers > 0 and state != evaluation.State.PUBLISHED and not info_only %} - <a class="no-underline" href="{% url 'staff:evaluation_textanswers' semester.id evaluation.id %}" data-toggle="tooltip" data-placement="left" title="{% trans 'Review text answers' %}"> + <a class="no-underline" href="{% url 'staff:evaluation_textanswers' semester.id evaluation.id %}" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Review text answers' %}"> {% include 'progress_bar.html' with done=evaluation.num_reviewed_textanswers total=evaluation.num_textanswers icon='comment' %} </a> {% elif info_only %} - <span data-toggle="tooltip" data-placement="left" title="{% trans 'Number of text answers' %}"> + <span data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Number of text answers' %}"> {% include 'progress_bar.html' with done=evaluation.num_reviewed_textanswers total=evaluation.num_textanswers icon='comment' %} </span> {% else %} - <span data-toggle="tooltip" data-placement="left" title="{% trans 'Number of text answers' %}"> + <span data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Number of text answers' %}"> <span class="fas fa-comment"></span> {{ evaluation.num_textanswers }} </span> <br /> {% endif %} {% if evaluation.wait_for_grade_upload_before_publishing %} {% if info_only or not request.user.is_manager %} - <span data-toggle="tooltip" data-placement="left" title="{% trans 'Grade documents (Midterm, Final)' %}"> + <span data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Grade documents (Midterm, Final)' %}"> <span class="fas fa-file"></span> {% blocktrans with midterm=evaluation.midterm_grade_documents_count final=evaluation.final_grade_documents_count %}M: {{ midterm }}, F: {{ final }}{% endblocktrans %} </span> {% else %} - <a href="{% url 'grades:course_view' semester.id evaluation.course.id %}" data-toggle="tooltip" data-placement="left" title="{% trans 'Grade documents (Midterm, Final)' %}"> + <a href="{% url 'grades:course_view' semester.id evaluation.course.id %}" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Grade documents (Midterm, Final)' %}"> <span class="fas fa-file"></span> {% blocktrans with midterm=evaluation.midterm_grade_documents_count final=evaluation.final_grade_documents_count %}M: {{ midterm }}, F: {{ final }}{% endblocktrans %} </a> {% endif %} {% if evaluation.final_grade_documents_count %} - <span class="fas fa-check" data-toggle="tooltip" data-placement="top" title="{% trans 'Final grades have been uploaded' %}"></span> + <span class="fas fa-check" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Final grades have been uploaded' %}"></span> {% elif evaluation.course.gets_no_grade_documents %} - <span class="fas fa-check" data-toggle="tooltip" data-placement="top" title="{% trans 'It was confirmed that final grades have been submitted' %}"></span> + <span class="fas fa-check" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'It was confirmed that final grades have been submitted' %}"></span> {% endif %} {% endif %} </td> {% else %} <td> - <span data-toggle="tooltip" data-placement="left" title="{% trans 'Number of voters' %}"> + <span data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Number of voters' %}"> <span class="fas fa-user"></span> {{ evaluation.num_voters }} </span> </td> {% endif %} {% elif info_only or not request.user.is_manager %} <td> - <span {% if evaluation.num_participants == 0 %}class="text-danger" {% endif %}data-toggle="tooltip" data-placement="top" title="{% trans 'Number of participants' %}"> + <span {% if evaluation.num_participants == 0 %}class="text-danger" {% endif %}data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Number of participants' %}"> <span class="fas fa-user"></span> {{ evaluation.num_participants }} </span> </td> {% else %} <td> - <a class="no-underline{% if evaluation.num_participants == 0 %} text-danger{% endif %}" href="{% url 'staff:evaluation_person_management' semester.id evaluation.id %}" data-toggle="tooltip" data-placement="left" title="{% trans 'Manage participants' %}"> + <a class="no-underline{% if evaluation.num_participants == 0 %} text-danger{% endif %}" href="{% url 'staff:evaluation_person_management' semester.id evaluation.id %}" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Manage participants' %}"> <span class="fas fa-user"></span> {{ evaluation.num_participants }} </a> </td> @@ -185,30 +185,30 @@ <td class="icon-buttons"> {% if not info_only %} {% if not evaluation.is_single_result %} - <a href="{% url 'staff:evaluation_copy' semester.id evaluation.id %}" class="btn btn-sm btn-light" data-toggle="tooltip" title="{% trans "Copy" %}"> + <a href="{% url 'staff:evaluation_copy' semester.id evaluation.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="{% trans "Copy" %}"> <span class="far fa-copy"></span> </a> {% endif %} {% if request.user.is_manager %} - <a href="{% url 'staff:evaluation_email' semester.id evaluation.id %}" class="btn btn-sm btn-light" data-toggle="tooltip" data-placement="top" title="{% trans 'Send email' %}"> + <a href="{% url 'staff:evaluation_email' semester.id evaluation.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Send email' %}"> <span class="fas fa-envelope" aria-hidden="true"></span> </a> {% endif %} {% if state < evaluation.State.IN_EVALUATION %} - <a href="{% url 'staff:evaluation_preview' semester.id evaluation.id %}" class="btn btn-sm btn-light" data-toggle="tooltip" data-placement="top" title="{% trans 'Preview' %}"> + <a href="{% url 'staff:evaluation_preview' semester.id evaluation.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Preview' %}"> <span class="fas fa-eye" aria-hidden="true"></span> </a> {% elif state < evaluation.State.PUBLISHED and evaluation|can_results_page_be_seen_by:request.user %} - <a href="{% url 'results:evaluation_detail' semester.id evaluation.id %}" class="btn btn-sm btn-light" data-toggle="tooltip" data-placement="top" title="{% trans 'Preview results' %}"> + <a href="{% url 'results:evaluation_detail' semester.id evaluation.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Preview results' %}"> <span class="fas fa-chart-bar" aria-hidden="true"></span> </a> {% elif state == evaluation.State.PUBLISHED and evaluation|can_results_page_be_seen_by:request.user %} - <a href="{% url 'results:evaluation_detail' semester.id evaluation.id %}" class="btn btn-sm btn-light" data-toggle="tooltip" data-placement="top" title="{% trans 'Results' %}"> + <a href="{% url 'results:evaluation_detail' semester.id evaluation.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Results' %}"> <span class="fas fa-chart-bar" aria-hidden="true"></span> </a> {% endif %} {% if request.user.is_manager and evaluation.can_be_deleted_by_manager %} - <button type="button" onclick="deleteEvaluationModalShow({{ evaluation.id }}, '{{ evaluation.full_name|escapejs }}');" class="btn btn-sm btn-outline-danger" data-toggle="tooltip" data-placement="top" title="{% trans 'Delete' %}"> + <button type="button" onclick="deleteEvaluationModalShow({{ evaluation.id }}, '{{ evaluation.full_name|escapejs }}');" class="btn btn-sm btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}"> <span class="fas fa-trash" aria-hidden="true"></span> </button> {% endif %} diff --git a/evap/staff/templates/staff_template_form.html b/evap/staff/templates/staff_template_form.html index 36ceaeff9701950df8580135ed8f2a88ffae3738..24a71c95fd13b387bda6e8232c8d61aeddb1f9c4 100644 --- a/evap/staff/templates/staff_template_form.html +++ b/evap/staff/templates/staff_template_form.html @@ -21,7 +21,7 @@ <div class="col-3"> <p>{% trans 'The following variables are available for this email template:' %}</p> {% for variable in available_variables %} - <button type="button" class="btn btn-sm btn-link text-dark pr-1" data-toggle="tooltip" data-placement="top" title="{% trans 'Copy to clipboard' %}" onClick="copyToClipboard('{{ variable }}')"> + <button type="button" class="btn btn-sm btn-link text-dark pe-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Copy to clipboard' %}" onClick="copyToClipboard('{{ variable }}')"> <span class="far fa-clipboard"></span> </button> <code>{{ variable }}</code> diff --git a/evap/staff/templates/staff_text_answer_warnings.html b/evap/staff/templates/staff_text_answer_warnings.html index 7f07710c0af479c355dbb94aff0fb11e719d8654..423bbfc5249c801def46647ec288989f0c0baa8e 100644 --- a/evap/staff/templates/staff_text_answer_warnings.html +++ b/evap/staff/templates/staff_text_answer_warnings.html @@ -52,8 +52,8 @@ <td> {% include 'bootstrap_form_field_widget.html' with field=form.warning_text_en %} </td> - <td class="align-right"> - {% include 'bootstrap_form_field_widget.html' with class="d-none" field=form.DELETE %} + <td class="align-end"> + {% include 'bootstrap_form_field_widget.html' with field=form.DELETE class="d-none" %} </td> </tr> {% endfor %} diff --git a/evap/staff/templates/staff_user_badges.html b/evap/staff/templates/staff_user_badges.html index fd7201bb32b08bddf6bbe8adeff7a388c6aae908..b55b5dea1ea97b11d441d1b6454bb3e8913f6fb9 100644 --- a/evap/staff/templates/staff_user_badges.html +++ b/evap/staff/templates/staff_user_badges.html @@ -1,28 +1,28 @@ {% if user.pk %} {% if user.is_manager %} - <span class="badge badge-primary">{% trans 'Manager' %}</span> + <span class="badge bg-primary">{% trans 'Manager' %}</span> {% elif user.is_reviewer %} - <span class="badge badge-primary">{% trans 'Reviewer' %}</span> + <span class="badge bg-primary">{% trans 'Reviewer' %}</span> {% endif %} {% if user.is_grade_publisher %} - <span class="badge badge-primary">{% trans 'Grade publisher' %}</span> + <span class="badge bg-primary">{% trans 'Grade publisher' %}</span> {% endif %} {% if user.is_contributor %} - <span class="badge badge-info">{% trans 'Contributor' %}</span> + <span class="badge bg-info">{% trans 'Contributor' %}</span> {% endif %} {% if user.is_responsible %} - <span class="badge badge-info">{% trans 'Responsible' %}</span> + <span class="badge bg-info">{% trans 'Responsible' %}</span> {% endif %} {% if user.is_proxy_user %} - <span class="badge badge-dark">{% trans 'Proxy user' %}</span> + <span class="badge bg-dark">{% trans 'Proxy user' %}</span> {% endif %} {% if user.is_external %} - <span class="badge badge-dark">{% trans 'External' %}</span> + <span class="badge bg-dark">{% trans 'External' %}</span> {% endif %} {% if not user.is_active %} - <span class="badge badge-danger">{% trans 'Inactive' %}</span> + <span class="badge bg-danger">{% trans 'Inactive' %}</span> {% endif %} {% if not user.email %} - <span class="badge badge-danger">{% trans 'No email' %}</span> + <span class="badge bg-danger">{% trans 'No email' %}</span> {% endif %} {% endif %} diff --git a/evap/staff/templates/staff_user_form.html b/evap/staff/templates/staff_user_form.html index 1afefdddc27519a1e6a23110b6572e6a6f6ac0c2..1adb6df576c02879dac5bdb50b5f437d0227c2b5 100644 --- a/evap/staff/templates/staff_user_form.html +++ b/evap/staff/templates/staff_user_form.html @@ -20,7 +20,7 @@ {% csrf_token %} <div class="card mb-3"> <div class="card-body"> - <div class="ml-auto col-sm-9 mb-3"> + <div class="ms-auto col-sm-9 mb-3"> {% include 'staff_user_badges.html' with user=form.instance %} </div> {% include 'bootstrap_form.html' with form=form %} @@ -44,7 +44,7 @@ <div class="card mb-3"> <div class="card-body"> <div class="d-flex"> - <h5 class="card-title mr-auto">{% trans 'Export evaluation results' %}</h5> + <h5 class="card-title me-auto">{% trans 'Export evaluation results' %}</h5> <div> <a href="{% url 'staff:export_contributor_results' form.instance.id %}" class="btn btn-sm btn-light">{% trans 'Export all results' %}</a> </div> diff --git a/evap/staff/templates/staff_user_index.html b/evap/staff/templates/staff_user_index.html index fb53f0728b6a4c9605c5a1778298c44e3a5121db..ee4c7f2cbd7ada46fbf416cb44e79d8de062c10c 100644 --- a/evap/staff/templates/staff_user_index.html +++ b/evap/staff/templates/staff_user_index.html @@ -29,13 +29,13 @@ </div> </div> </div> - <div class="input-group col-3"> - <input type="search" name="search" class="form-control" placeholder="{% trans 'Search...' %}" /> - <div class="input-group-append"> - <button class="btn btn-light text-secondary" type="button" data-reset="search" data-toggle="tooltip" data-placement="top" title="{% trans 'Clear search filter' %}"> + <div class="col-3"> + <div class="input-group"> + <input type="search" name="search" class="form-control" placeholder="{% trans 'Search...' %}" /> + <button class="btn btn-light text-secondary" type="button" data-reset="search" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Clear search filter' %}"> <span class="fas fa-backspace"></span> </button> - </div> + </div> </div> </div> @@ -63,8 +63,8 @@ <span class="fas fa-trash"></span ></button> {% else %} - <button type="button" disabled class="btn btn-sm btn-danger" data-toggle="tooltip" data-placement="left" - title="{% blocktrans %}This user contributes to an evaluation, participates in an evaluation whose participations + <button type="button" disabled class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="left" + title="{% blocktrans %}This user contributes to an evaluation, participates in an evaluation whose participations haven't been archived yet or has special rights and as such cannot be deleted.{% endblocktrans %}"> <span class="fas fa-trash"></span> </button> diff --git a/evap/staff/templates/staff_user_merge.html b/evap/staff/templates/staff_user_merge.html index 0f5b520bdf3ce4431b2dafff21e6aa7dcc595c13..c09ea3529acbe1e359dea825f2cb28f3a6f6ac3a 100644 --- a/evap/staff/templates/staff_user_merge.html +++ b/evap/staff/templates/staff_user_merge.html @@ -13,7 +13,7 @@ <h3>{% trans 'Merge users' %}</h3> <div class="card mb-3"> <div class="card-body"> - <table class="table table-striped mb-3"> + <table class="table mb-3"> <thead> <tr> <th style="width: 25%"></th> @@ -51,17 +51,17 @@ <td><strong>{% trans 'Groups' %}</strong></td> <td{% if main_user.groups.all %} class="table-info"{% endif %}> {% for group in main_user.groups.all %} - <span class="badge badge-secondary">{{ group.name }}</span> + <span class="badge bg-secondary">{{ group.name }}</span> {% endfor %} </td> <td{% if other_user.groups.all %} class="table-info"{% endif %}> {% for group in other_user.groups.all %} - <span class="badge badge-secondary">{{ group.name }}</span> + <span class="badge bg-secondary">{{ group.name }}</span> {% endfor %} </td> <td{% if merged_user.groups %} class="table-success"{% endif %}> {% for group in merged_user.groups %} - <span class="badge badge-secondary">{{ group }}</span> + <span class="badge bg-secondary">{{ group }}</span> {% endfor %} </td> </tr> diff --git a/evap/static/bootstrap b/evap/static/bootstrap index 8a628b943cf31ca0a002c08af661a95772480225..f20fece3a8cdd0e76a42c2737524b7652bf54d26 160000 --- a/evap/static/bootstrap +++ b/evap/static/bootstrap @@ -1 +1 @@ -Subproject commit 8a628b943cf31ca0a002c08af661a95772480225 +Subproject commit f20fece3a8cdd0e76a42c2737524b7652bf54d26 diff --git a/evap/static/js/popper-1.14.1.min.js b/evap/static/js/popper-1.14.1.min.js deleted file mode 100644 index 640b1a69fb9b308658edb8be13f5133674f28bcb..0000000000000000000000000000000000000000 --- a/evap/static/js/popper-1.14.1.min.js +++ /dev/null @@ -1,5 +0,0 @@ -/* - Copyright (C) Federico Zivolo 2018 - Distributed under the MIT License (license terms are at http://opensource.org/licenses/MIT). - */(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.Popper=t()})(this,function(){'use strict';function e(e){return e&&'[object Function]'==={}.toString.call(e)}function t(e,t){if(1!==e.nodeType)return[];var o=getComputedStyle(e,null);return t?o[t]:o}function o(e){return'HTML'===e.nodeName?e:e.parentNode||e.host}function n(e){if(!e)return document.body;switch(e.nodeName){case'HTML':case'BODY':return e.ownerDocument.body;case'#document':return e.body;}var i=t(e),r=i.overflow,p=i.overflowX,s=i.overflowY;return /(auto|scroll|overlay)/.test(r+s+p)?e:n(o(e))}function r(e){if(!e)return document.documentElement;for(var o=ie(10)?document.body:null,n=e.offsetParent;n===o&&e.nextElementSibling;)n=(e=e.nextElementSibling).offsetParent;var i=n&&n.nodeName;return i&&'BODY'!==i&&'HTML'!==i?-1!==['TD','TABLE'].indexOf(n.nodeName)&&'static'===t(n,'position')?r(n):n:e?e.ownerDocument.documentElement:document.documentElement}function p(e){var t=e.nodeName;return'BODY'!==t&&('HTML'===t||r(e.firstElementChild)===e)}function s(e){return null===e.parentNode?e:s(e.parentNode)}function d(e,t){if(!e||!e.nodeType||!t||!t.nodeType)return document.documentElement;var o=e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING,n=o?e:t,i=o?t:e,a=document.createRange();a.setStart(n,0),a.setEnd(i,0);var l=a.commonAncestorContainer;if(e!==l&&t!==l||n.contains(i))return p(l)?l:r(l);var f=s(e);return f.host?d(f.host,t):d(e,s(t).host)}function a(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:'top',o='top'===t?'scrollTop':'scrollLeft',n=e.nodeName;if('BODY'===n||'HTML'===n){var i=e.ownerDocument.documentElement,r=e.ownerDocument.scrollingElement||i;return r[o]}return e[o]}function l(e,t){var o=2<arguments.length&&void 0!==arguments[2]&&arguments[2],n=a(t,'top'),i=a(t,'left'),r=o?-1:1;return e.top+=n*r,e.bottom+=n*r,e.left+=i*r,e.right+=i*r,e}function f(e,t){var o='x'===t?'Left':'Top',n='Left'==o?'Right':'Bottom';return parseFloat(e['border'+o+'Width'],10)+parseFloat(e['border'+n+'Width'],10)}function m(e,t,o,n){return Q(t['offset'+e],t['scroll'+e],o['client'+e],o['offset'+e],o['scroll'+e],ie(10)?o['offset'+e]+n['margin'+('Height'===e?'Top':'Left')]+n['margin'+('Height'===e?'Bottom':'Right')]:0)}function h(){var e=document.body,t=document.documentElement,o=ie(10)&&getComputedStyle(t);return{height:m('Height',e,t,o),width:m('Width',e,t,o)}}function c(e){return de({},e,{right:e.left+e.width,bottom:e.top+e.height})}function g(e){var o={};try{if(ie(10)){o=e.getBoundingClientRect();var n=a(e,'top'),i=a(e,'left');o.top+=n,o.left+=i,o.bottom+=n,o.right+=i}else o=e.getBoundingClientRect()}catch(t){}var r={left:o.left,top:o.top,width:o.right-o.left,height:o.bottom-o.top},p='HTML'===e.nodeName?h():{},s=p.width||e.clientWidth||r.right-r.left,d=p.height||e.clientHeight||r.bottom-r.top,l=e.offsetWidth-s,m=e.offsetHeight-d;if(l||m){var g=t(e);l-=f(g,'x'),m-=f(g,'y'),r.width-=l,r.height-=m}return c(r)}function u(e,o){var i=2<arguments.length&&void 0!==arguments[2]&&arguments[2],r=ie(10),p='HTML'===o.nodeName,s=g(e),d=g(o),a=n(e),f=t(o),m=parseFloat(f.borderTopWidth,10),h=parseFloat(f.borderLeftWidth,10);i&&'HTML'===o.nodeName&&(d.top=Q(d.top,0),d.left=Q(d.left,0));var u=c({top:s.top-d.top-m,left:s.left-d.left-h,width:s.width,height:s.height});if(u.marginTop=0,u.marginLeft=0,!r&&p){var b=parseFloat(f.marginTop,10),y=parseFloat(f.marginLeft,10);u.top-=m-b,u.bottom-=m-b,u.left-=h-y,u.right-=h-y,u.marginTop=b,u.marginLeft=y}return(r&&!i?o.contains(a):o===a&&'BODY'!==a.nodeName)&&(u=l(u,o)),u}function b(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],o=e.ownerDocument.documentElement,n=u(e,o),i=Q(o.clientWidth,window.innerWidth||0),r=Q(o.clientHeight,window.innerHeight||0),p=t?0:a(o),s=t?0:a(o,'left'),d={top:p-n.top+n.marginTop,left:s-n.left+n.marginLeft,width:i,height:r};return c(d)}function y(e){var n=e.nodeName;return'BODY'===n||'HTML'===n?!1:'fixed'===t(e,'position')||y(o(e))}function w(e){if(!e||!e.parentElement||ie())return document.documentElement;for(var o=e.parentElement;o&&'none'===t(o,'transform');)o=o.parentElement;return o||document.documentElement}function E(e,t,i,r){var p=4<arguments.length&&void 0!==arguments[4]&&arguments[4],s={top:0,left:0},a=p?w(e):d(e,t);if('viewport'===r)s=b(a,p);else{var l;'scrollParent'===r?(l=n(o(t)),'BODY'===l.nodeName&&(l=e.ownerDocument.documentElement)):'window'===r?l=e.ownerDocument.documentElement:l=r;var f=u(l,a,p);if('HTML'===l.nodeName&&!y(a)){var m=h(),c=m.height,g=m.width;s.top+=f.top-f.marginTop,s.bottom=c+f.top,s.left+=f.left-f.marginLeft,s.right=g+f.left}else s=f}return s.left+=i,s.top+=i,s.right-=i,s.bottom-=i,s}function v(e){var t=e.width,o=e.height;return t*o}function x(e,t,o,n,i){var r=5<arguments.length&&void 0!==arguments[5]?arguments[5]:0;if(-1===e.indexOf('auto'))return e;var p=E(o,n,r,i),s={top:{width:p.width,height:t.top-p.top},right:{width:p.right-t.right,height:p.height},bottom:{width:p.width,height:p.bottom-t.bottom},left:{width:t.left-p.left,height:p.height}},d=Object.keys(s).map(function(e){return de({key:e},s[e],{area:v(s[e])})}).sort(function(e,t){return t.area-e.area}),a=d.filter(function(e){var t=e.width,n=e.height;return t>=o.clientWidth&&n>=o.clientHeight}),l=0<a.length?a[0].key:d[0].key,f=e.split('-')[1];return l+(f?'-'+f:'')}function O(e,t,o){var n=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null,i=n?w(t):d(t,o);return u(o,i,n)}function L(e){var t=getComputedStyle(e),o=parseFloat(t.marginTop)+parseFloat(t.marginBottom),n=parseFloat(t.marginLeft)+parseFloat(t.marginRight),i={width:e.offsetWidth+n,height:e.offsetHeight+o};return i}function S(e){var t={left:'right',right:'left',bottom:'top',top:'bottom'};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function T(e,t,o){o=o.split('-')[0];var n=L(e),i={width:n.width,height:n.height},r=-1!==['right','left'].indexOf(o),p=r?'top':'left',s=r?'left':'top',d=r?'height':'width',a=r?'width':'height';return i[p]=t[p]+t[d]/2-n[d]/2,i[s]=o===s?t[s]-n[a]:t[S(s)],i}function D(e,t){return Array.prototype.find?e.find(t):e.filter(t)[0]}function C(e,t,o){if(Array.prototype.findIndex)return e.findIndex(function(e){return e[t]===o});var n=D(e,function(e){return e[t]===o});return e.indexOf(n)}function N(t,o,n){var i=void 0===n?t:t.slice(0,C(t,'name',n));return i.forEach(function(t){t['function']&&console.warn('`modifier.function` is deprecated, use `modifier.fn`!');var n=t['function']||t.fn;t.enabled&&e(n)&&(o.offsets.popper=c(o.offsets.popper),o.offsets.reference=c(o.offsets.reference),o=n(o,t))}),o}function k(){if(!this.state.isDestroyed){var e={instance:this,styles:{},arrowStyles:{},attributes:{},flipped:!1,offsets:{}};e.offsets.reference=O(this.state,this.popper,this.reference,this.options.positionFixed),e.placement=x(this.options.placement,e.offsets.reference,this.popper,this.reference,this.options.modifiers.flip.boundariesElement,this.options.modifiers.flip.padding),e.originalPlacement=e.placement,e.positionFixed=this.options.positionFixed,e.offsets.popper=T(this.popper,e.offsets.reference,e.placement),e.offsets.popper.position=this.options.positionFixed?'fixed':'absolute',e=N(this.modifiers,e),this.state.isCreated?this.options.onUpdate(e):(this.state.isCreated=!0,this.options.onCreate(e))}}function P(e,t){return e.some(function(e){var o=e.name,n=e.enabled;return n&&o===t})}function W(e){for(var t=[!1,'ms','Webkit','Moz','O'],o=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<t.length;n++){var i=t[n],r=i?''+i+o:e;if('undefined'!=typeof document.body.style[r])return r}return null}function B(){return this.state.isDestroyed=!0,P(this.modifiers,'applyStyle')&&(this.popper.removeAttribute('x-placement'),this.popper.style.position='',this.popper.style.top='',this.popper.style.left='',this.popper.style.right='',this.popper.style.bottom='',this.popper.style.willChange='',this.popper.style[W('transform')]=''),this.disableEventListeners(),this.options.removeOnDestroy&&this.popper.parentNode.removeChild(this.popper),this}function H(e){var t=e.ownerDocument;return t?t.defaultView:window}function A(e,t,o,i){var r='BODY'===e.nodeName,p=r?e.ownerDocument.defaultView:e;p.addEventListener(t,o,{passive:!0}),r||A(n(p.parentNode),t,o,i),i.push(p)}function I(e,t,o,i){o.updateBound=i,H(e).addEventListener('resize',o.updateBound,{passive:!0});var r=n(e);return A(r,'scroll',o.updateBound,o.scrollParents),o.scrollElement=r,o.eventsEnabled=!0,o}function M(){this.state.eventsEnabled||(this.state=I(this.reference,this.options,this.state,this.scheduleUpdate))}function F(e,t){return H(e).removeEventListener('resize',t.updateBound),t.scrollParents.forEach(function(e){e.removeEventListener('scroll',t.updateBound)}),t.updateBound=null,t.scrollParents=[],t.scrollElement=null,t.eventsEnabled=!1,t}function R(){this.state.eventsEnabled&&(cancelAnimationFrame(this.scheduleUpdate),this.state=F(this.reference,this.state))}function U(e){return''!==e&&!isNaN(parseFloat(e))&&isFinite(e)}function Y(e,t){Object.keys(t).forEach(function(o){var n='';-1!==['width','height','top','right','bottom','left'].indexOf(o)&&U(t[o])&&(n='px'),e.style[o]=t[o]+n})}function j(e,t){Object.keys(t).forEach(function(o){var n=t[o];!1===n?e.removeAttribute(o):e.setAttribute(o,t[o])})}function q(e,t,o){var n=D(e,function(e){var o=e.name;return o===t}),i=!!n&&e.some(function(e){return e.name===o&&e.enabled&&e.order<n.order});if(!i){var r='`'+t+'`';console.warn('`'+o+'`'+' modifier is required by '+r+' modifier in order to work, be sure to include it before '+r+'!')}return i}function K(e){return'end'===e?'start':'start'===e?'end':e}function V(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],o=le.indexOf(e),n=le.slice(o+1).concat(le.slice(0,o));return t?n.reverse():n}function z(e,t,o,n){var i=e.match(/((?:\-|\+)?\d*\.?\d*)(.*)/),r=+i[1],p=i[2];if(!r)return e;if(0===p.indexOf('%')){var s;switch(p){case'%p':s=o;break;case'%':case'%r':default:s=n;}var d=c(s);return d[t]/100*r}if('vh'===p||'vw'===p){var a;return a='vh'===p?Q(document.documentElement.clientHeight,window.innerHeight||0):Q(document.documentElement.clientWidth,window.innerWidth||0),a/100*r}return r}function G(e,t,o,n){var i=[0,0],r=-1!==['right','left'].indexOf(n),p=e.split(/(\+|\-)/).map(function(e){return e.trim()}),s=p.indexOf(D(p,function(e){return-1!==e.search(/,|\s/)}));p[s]&&-1===p[s].indexOf(',')&&console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');var d=/\s*,\s*|\s+/,a=-1===s?[p]:[p.slice(0,s).concat([p[s].split(d)[0]]),[p[s].split(d)[1]].concat(p.slice(s+1))];return a=a.map(function(e,n){var i=(1===n?!r:r)?'height':'width',p=!1;return e.reduce(function(e,t){return''===e[e.length-1]&&-1!==['+','-'].indexOf(t)?(e[e.length-1]=t,p=!0,e):p?(e[e.length-1]+=t,p=!1,e):e.concat(t)},[]).map(function(e){return z(e,i,t,o)})}),a.forEach(function(e,t){e.forEach(function(o,n){U(o)&&(i[t]+=o*('-'===e[n-1]?-1:1))})}),i}function _(e,t){var o,n=t.offset,i=e.placement,r=e.offsets,p=r.popper,s=r.reference,d=i.split('-')[0];return o=U(+n)?[+n,0]:G(n,p,s,d),'left'===d?(p.top+=o[0],p.left-=o[1]):'right'===d?(p.top+=o[0],p.left+=o[1]):'top'===d?(p.left+=o[0],p.top-=o[1]):'bottom'===d&&(p.left+=o[0],p.top+=o[1]),e.popper=p,e}for(var X=Math.min,J=Math.floor,Q=Math.max,Z='undefined'!=typeof window&&'undefined'!=typeof document,$=['Edge','Trident','Firefox'],ee=0,te=0;te<$.length;te+=1)if(Z&&0<=navigator.userAgent.indexOf($[te])){ee=1;break}var i=Z&&window.Promise,oe=i?function(e){var t=!1;return function(){t||(t=!0,window.Promise.resolve().then(function(){t=!1,e()}))}}:function(e){var t=!1;return function(){t||(t=!0,setTimeout(function(){t=!1,e()},ee))}},ne={},ie=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:'all';return(e=e.toString(),ne.hasOwnProperty(e))?ne[e]:('11'===e?ne[e]=-1!==navigator.userAgent.indexOf('Trident'):'10'===e?ne[e]=-1!==navigator.appVersion.indexOf('MSIE 10'):'all'===e?ne[e]=-1!==navigator.userAgent.indexOf('Trident')||-1!==navigator.userAgent.indexOf('MSIE'):void 0,ne.all=ne.all||Object.keys(ne).some(function(e){return ne[e]}),ne[e])},re=function(e,t){if(!(e instanceof t))throw new TypeError('Cannot call a class as a function')},pe=function(){function e(e,t){for(var o,n=0;n<t.length;n++)o=t[n],o.enumerable=o.enumerable||!1,o.configurable=!0,'value'in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),se=function(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e},de=Object.assign||function(e){for(var t,o=1;o<arguments.length;o++)for(var n in t=arguments[o],t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},ae=['auto-start','auto','auto-end','top-start','top','top-end','right-start','right','right-end','bottom-end','bottom','bottom-start','left-end','left','left-start'],le=ae.slice(3),fe={FLIP:'flip',CLOCKWISE:'clockwise',COUNTERCLOCKWISE:'counterclockwise'},me=function(){function t(o,n){var i=this,r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};re(this,t),this.scheduleUpdate=function(){return requestAnimationFrame(i.update)},this.update=oe(this.update.bind(this)),this.options=de({},t.Defaults,r),this.state={isDestroyed:!1,isCreated:!1,scrollParents:[]},this.reference=o&&o.jquery?o[0]:o,this.popper=n&&n.jquery?n[0]:n,this.options.modifiers={},Object.keys(de({},t.Defaults.modifiers,r.modifiers)).forEach(function(e){i.options.modifiers[e]=de({},t.Defaults.modifiers[e]||{},r.modifiers?r.modifiers[e]:{})}),this.modifiers=Object.keys(this.options.modifiers).map(function(e){return de({name:e},i.options.modifiers[e])}).sort(function(e,t){return e.order-t.order}),this.modifiers.forEach(function(t){t.enabled&&e(t.onLoad)&&t.onLoad(i.reference,i.popper,i.options,t,i.state)}),this.update();var p=this.options.eventsEnabled;p&&this.enableEventListeners(),this.state.eventsEnabled=p}return pe(t,[{key:'update',value:function(){return k.call(this)}},{key:'destroy',value:function(){return B.call(this)}},{key:'enableEventListeners',value:function(){return M.call(this)}},{key:'disableEventListeners',value:function(){return R.call(this)}}]),t}();return me.Utils=('undefined'==typeof window?global:window).PopperUtils,me.placements=ae,me.Defaults={placement:'bottom',positionFixed:!1,eventsEnabled:!0,removeOnDestroy:!1,onCreate:function(){},onUpdate:function(){},modifiers:{shift:{order:100,enabled:!0,fn:function(e){var t=e.placement,o=t.split('-')[0],n=t.split('-')[1];if(n){var i=e.offsets,r=i.reference,p=i.popper,s=-1!==['bottom','top'].indexOf(o),d=s?'left':'top',a=s?'width':'height',l={start:se({},d,r[d]),end:se({},d,r[d]+r[a]-p[a])};e.offsets.popper=de({},p,l[n])}return e}},offset:{order:200,enabled:!0,fn:_,offset:0},preventOverflow:{order:300,enabled:!0,fn:function(e,t){var o=t.boundariesElement||r(e.instance.popper);e.instance.reference===o&&(o=r(o));var n=E(e.instance.popper,e.instance.reference,t.padding,o,e.positionFixed);t.boundaries=n;var i=t.priority,p=e.offsets.popper,s={primary:function(e){var o=p[e];return p[e]<n[e]&&!t.escapeWithReference&&(o=Q(p[e],n[e])),se({},e,o)},secondary:function(e){var o='right'===e?'left':'top',i=p[o];return p[e]>n[e]&&!t.escapeWithReference&&(i=X(p[o],n[e]-('right'===e?p.width:p.height))),se({},o,i)}};return i.forEach(function(e){var t=-1===['left','top'].indexOf(e)?'secondary':'primary';p=de({},p,s[t](e))}),e.offsets.popper=p,e},priority:['left','right','top','bottom'],padding:5,boundariesElement:'scrollParent'},keepTogether:{order:400,enabled:!0,fn:function(e){var t=e.offsets,o=t.popper,n=t.reference,i=e.placement.split('-')[0],r=J,p=-1!==['top','bottom'].indexOf(i),s=p?'right':'bottom',d=p?'left':'top',a=p?'width':'height';return o[s]<r(n[d])&&(e.offsets.popper[d]=r(n[d])-o[a]),o[d]>r(n[s])&&(e.offsets.popper[d]=r(n[s])),e}},arrow:{order:500,enabled:!0,fn:function(e,o){var n;if(!q(e.instance.modifiers,'arrow','keepTogether'))return e;var i=o.element;if('string'==typeof i){if(i=e.instance.popper.querySelector(i),!i)return e;}else if(!e.instance.popper.contains(i))return console.warn('WARNING: `arrow.element` must be child of its popper element!'),e;var r=e.placement.split('-')[0],p=e.offsets,s=p.popper,d=p.reference,a=-1!==['left','right'].indexOf(r),l=a?'height':'width',f=a?'Top':'Left',m=f.toLowerCase(),h=a?'left':'top',g=a?'bottom':'right',u=L(i)[l];d[g]-u<s[m]&&(e.offsets.popper[m]-=s[m]-(d[g]-u)),d[m]+u>s[g]&&(e.offsets.popper[m]+=d[m]+u-s[g]),e.offsets.popper=c(e.offsets.popper);var b=d[m]+d[l]/2-u/2,y=t(e.instance.popper),w=parseFloat(y['margin'+f],10),E=parseFloat(y['border'+f+'Width'],10),v=b-e.offsets.popper[m]-w-E;return v=Q(X(s[l]-u,v),0),e.arrowElement=i,e.offsets.arrow=(n={},se(n,m,Math.round(v)),se(n,h,''),n),e},element:'[x-arrow]'},flip:{order:600,enabled:!0,fn:function(e,t){if(P(e.instance.modifiers,'inner'))return e;if(e.flipped&&e.placement===e.originalPlacement)return e;var o=E(e.instance.popper,e.instance.reference,t.padding,t.boundariesElement,e.positionFixed),n=e.placement.split('-')[0],i=S(n),r=e.placement.split('-')[1]||'',p=[];switch(t.behavior){case fe.FLIP:p=[n,i];break;case fe.CLOCKWISE:p=V(n);break;case fe.COUNTERCLOCKWISE:p=V(n,!0);break;default:p=t.behavior;}return p.forEach(function(s,d){if(n!==s||p.length===d+1)return e;n=e.placement.split('-')[0],i=S(n);var a=e.offsets.popper,l=e.offsets.reference,f=J,m='left'===n&&f(a.right)>f(l.left)||'right'===n&&f(a.left)<f(l.right)||'top'===n&&f(a.bottom)>f(l.top)||'bottom'===n&&f(a.top)<f(l.bottom),h=f(a.left)<f(o.left),c=f(a.right)>f(o.right),g=f(a.top)<f(o.top),u=f(a.bottom)>f(o.bottom),b='left'===n&&h||'right'===n&&c||'top'===n&&g||'bottom'===n&&u,y=-1!==['top','bottom'].indexOf(n),w=!!t.flipVariations&&(y&&'start'===r&&h||y&&'end'===r&&c||!y&&'start'===r&&g||!y&&'end'===r&&u);(m||b||w)&&(e.flipped=!0,(m||b)&&(n=p[d+1]),w&&(r=K(r)),e.placement=n+(r?'-'+r:''),e.offsets.popper=de({},e.offsets.popper,T(e.instance.popper,e.offsets.reference,e.placement)),e=N(e.instance.modifiers,e,'flip'))}),e},behavior:'flip',padding:5,boundariesElement:'viewport'},inner:{order:700,enabled:!1,fn:function(e){var t=e.placement,o=t.split('-')[0],n=e.offsets,i=n.popper,r=n.reference,p=-1!==['left','right'].indexOf(o),s=-1===['top','left'].indexOf(o);return i[p?'left':'top']=r[o]-(s?i[p?'width':'height']:0),e.placement=S(t),e.offsets.popper=c(i),e}},hide:{order:800,enabled:!0,fn:function(e){if(!q(e.instance.modifiers,'hide','preventOverflow'))return e;var t=e.offsets.reference,o=D(e.instance.modifiers,function(e){return'preventOverflow'===e.name}).boundaries;if(t.bottom<o.top||t.left>o.right||t.top>o.bottom||t.right<o.left){if(!0===e.hide)return e;e.hide=!0,e.attributes['x-out-of-boundaries']=''}else{if(!1===e.hide)return e;e.hide=!1,e.attributes['x-out-of-boundaries']=!1}return e}},computeStyle:{order:850,enabled:!0,fn:function(e,t){var o=t.x,n=t.y,i=e.offsets.popper,p=D(e.instance.modifiers,function(e){return'applyStyle'===e.name}).gpuAcceleration;void 0!==p&&console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');var s,d,a=void 0===p?t.gpuAcceleration:p,l=r(e.instance.popper),f=g(l),m={position:i.position},h={left:J(i.left),top:J(i.top),bottom:J(i.bottom),right:J(i.right)},c='bottom'===o?'top':'bottom',u='right'===n?'left':'right',b=W('transform');if(d='bottom'==c?-f.height+h.bottom:h.top,s='right'==u?-f.width+h.right:h.left,a&&b)m[b]='translate3d('+s+'px, '+d+'px, 0)',m[c]=0,m[u]=0,m.willChange='transform';else{var y='bottom'==c?-1:1,w='right'==u?-1:1;m[c]=d*y,m[u]=s*w,m.willChange=c+', '+u}var E={"x-placement":e.placement};return e.attributes=de({},E,e.attributes),e.styles=de({},m,e.styles),e.arrowStyles=de({},e.offsets.arrow,e.arrowStyles),e},gpuAcceleration:!0,x:'bottom',y:'right'},applyStyle:{order:900,enabled:!0,fn:function(e){return Y(e.instance.popper,e.styles),j(e.instance.popper,e.attributes),e.arrowElement&&Object.keys(e.arrowStyles).length&&Y(e.arrowElement,e.arrowStyles),e},onLoad:function(e,t,o,n,i){var r=O(i,t,e,o.positionFixed),p=x(o.placement,r,t,e,o.modifiers.flip.boundariesElement,o.modifiers.flip.padding);return t.setAttribute('x-placement',p),Y(t,{position:o.positionFixed?'fixed':'absolute'}),o},gpuAcceleration:void 0}}},me}); -//# sourceMappingURL=popper.min.js.map diff --git a/evap/static/scss/_adjustments.scss b/evap/static/scss/_adjustments.scss index 9299332cf40daa9b52725c1954a0f11d99578af4..bb8c758bec8b8df87668d05d4439a950979f09cc 100644 --- a/evap/static/scss/_adjustments.scss +++ b/evap/static/scss/_adjustments.scss @@ -22,8 +22,102 @@ body, .fixed-top, .fixed-bottom, .is-fixed, .sticky-top { .btn-link { padding: 0; border: none; + background-color: transparent; } +// change btn text colors for better contrast +.btn-secondary { + @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $disabled-color: $white); +} +.btn-outline-secondary { + @include button-outline-variant($secondary, $color-hover: $white); +} +.btn-danger { + @include button-variant($danger, $danger, $color: $white, $hover-color: $white, $disabled-color: $white); +} +.btn-outline-danger { + @include button-outline-variant($danger, $color-hover: $white); +} + +// accordion adjustments +.accordion-flush .accordion-item { + border: 1px solid $dark-gray; + + &:last-child { + border: 1px solid $dark-gray; + } +} +.accordion-body ul { + margin-bottom: 0; +} + +// move accordion icon to the left +.accordion-button { + &:not(.collapsed) { + &::before { + background-image: escape-svg($accordion-button-active-icon); + transform: $accordion-icon-transform; + } + } + + &::after { display: none; } + &::before { + flex-shrink: 0; + width: $accordion-icon-width; + height: $accordion-icon-width; + margin-right: 1rem; + content: ""; + background-image: escape-svg($accordion-button-icon); + background-repeat: no-repeat; + background-size: $accordion-icon-width; + @include transition($accordion-icon-transition); + } +} + +// make buttons in btn-groups usable in forms +.btn-switch-navbar .btn-group > :not(:last-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-switch-navbar .btn-group > :not(:first-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +// remove horizontal line after "add another" in formsets +.dynamic-form-add td { + border-bottom: none; +} + +// explicitely set alert colors +$alert-colors: ( + "secondary" $light-gray $medium-gray, + "success" $evap-light-green $evap-green, + "info" $evap-light-blue $evap-dark-blue, + "warning" $evap-light-yellow $evap-yellow, + "danger" $evap-light-red $evap-red, + "light" $lighter-gray $light-gray, + "dark" $dark-gray $darker-gray +); +@each $name, $bg-color, $border-color in $alert-colors { + .alert-#{$name} { + background-color: $bg-color; + border-color: $border-color; + color: shade-color($border-color, 60%); + } +} +.alert-primary { + background-color: tint-color($evap-dark-blue, 50%); + border-color: $evap-dark-blue; + color: shade-color($evap-dark-blue, 50%); +} + +// fix checkbox positions +.form-check:not(li) { + padding-top: 0.25rem; +} + + // select2 adjustments .select2-container--default .select2-selection--single { height: 38px; diff --git a/evap/static/scss/_bootstrap.scss b/evap/static/scss/_bootstrap.scss index c35d4abb8ce78c4f665e918e2a1ca687706f9bf5..833eab6ae358de5fa398af41c1dcfcb5daa33734 100644 --- a/evap/static/scss/_bootstrap.scss +++ b/evap/static/scss/_bootstrap.scss @@ -1,8 +1,13 @@ -@import "../bootstrap/scss/functions"; @import "../bootstrap/scss/variables"; +@import "../bootstrap/scss/mixins"; +@import "../bootstrap/scss/utilities"; + +// Layout & components +@import "../bootstrap/scss/root"; @import "../bootstrap/scss/reboot"; @import "../bootstrap/scss/type"; -@import "../bootstrap/scss/code"; +@import "../bootstrap/scss/images"; +@import "../bootstrap/scss/containers"; @import "../bootstrap/scss/grid"; @import "../bootstrap/scss/tables"; @import "../bootstrap/scss/forms"; @@ -10,18 +15,28 @@ @import "../bootstrap/scss/transitions"; @import "../bootstrap/scss/dropdown"; @import "../bootstrap/scss/button-group"; -@import "../bootstrap/scss/input-group"; -@import "../bootstrap/scss/custom-forms"; @import "../bootstrap/scss/nav"; @import "../bootstrap/scss/navbar"; @import "../bootstrap/scss/card"; +@import "../bootstrap/scss/accordion"; @import "../bootstrap/scss/breadcrumb"; +@import "../bootstrap/scss/pagination"; @import "../bootstrap/scss/badge"; -@import "../bootstrap/scss/jumbotron"; @import "../bootstrap/scss/alert"; @import "../bootstrap/scss/progress"; @import "../bootstrap/scss/list-group"; @import "../bootstrap/scss/close"; +@import "../bootstrap/scss/toasts"; @import "../bootstrap/scss/modal"; @import "../bootstrap/scss/tooltip"; -@import "../bootstrap/scss/utilities"; +@import "../bootstrap/scss/popover"; +@import "../bootstrap/scss/carousel"; +@import "../bootstrap/scss/spinners"; +@import "../bootstrap/scss/offcanvas"; +@import "../bootstrap/scss/placeholders"; + +// Helpers +@import "../bootstrap/scss/helpers"; + +// Utilities +@import "../bootstrap/scss/utilities/api"; diff --git a/evap/static/scss/_colors.scss b/evap/static/scss/_colors.scss index 4eafe0768dcf834b45cf60c25bf095501e7a49ff..cbe50af2d7fbb7e529ac9dc59449e547d52c0279 100644 --- a/evap/static/scss/_colors.scss +++ b/evap/static/scss/_colors.scss @@ -4,17 +4,17 @@ $evap-yellow: #efe258; $evap-orange: #f29e58; $evap-red: #eb595a; -$evap-dark-green: darken($evap-green, 20%); -$evap-dark-lime: darken($evap-lime, 20%); -$evap-dark-yellow: darken($evap-yellow, 20%); -$evap-dark-orange: darken($evap-orange, 20%); -$evap-dark-red: darken($evap-red, 20%); +$evap-dark-green: shade-color($evap-green, 20%); +$evap-dark-lime: shade-color($evap-lime, 20%); +$evap-dark-yellow: shade-color($evap-yellow, 20%); +$evap-dark-orange: shade-color($evap-orange, 20%); +$evap-dark-red: shade-color($evap-red, 20%); -$evap-light-green: lighten($evap-green, 30%); -$evap-light-lime: lighten($evap-lime, 30%); -$evap-light-yellow: lighten($evap-yellow, 30%); -$evap-light-orange: lighten($evap-orange, 30%); -$evap-light-red: lighten($evap-red, 30%); +$evap-light-green: tint-color($evap-green, 60%); +$evap-light-lime: tint-color($evap-lime, 60%); +$evap-light-yellow: tint-color($evap-yellow, 60%); +$evap-light-orange: tint-color($evap-orange, 60%); +$evap-light-red: tint-color($evap-red, 60%); $evap-dark-blue: #31708f; $evap-light-blue: #d9edf7; @@ -27,16 +27,14 @@ $dark-gray: #868e96; $darker-gray: #495057; $black: #000000; -$theme-colors: ( - primary: $evap-dark-blue, - secondary: $dark-gray, - success: $evap-green, - info: $evap-light-blue, - warning: $evap-yellow, - danger: $evap-red, - light: $lighter-gray, - dark: $darker-gray -); +$primary: $evap-dark-blue; +$secondary: $dark-gray; +$success: $evap-green; +$info: $evap-light-blue; +$warning: $evap-yellow; +$danger: $evap-red; +$light: $lighter-gray; +$dark: $darker-gray; $vote-colors: ( "green": $evap-green, diff --git a/evap/static/scss/_utilities.scss b/evap/static/scss/_utilities.scss index 7b2765cbc41a6ce9df01eb7ba3a3e961babbb71f..142ab798af98c6bd2c80906d6c1c467f62fa5989 100644 --- a/evap/static/scss/_utilities.scss +++ b/evap/static/scss/_utilities.scss @@ -61,8 +61,8 @@ a.no-underline:hover { .bg-debug { background: repeating-linear-gradient( 118deg, - lighten($darker-gray, 6%), - lighten($darker-gray, 6%) 3.5em, + tint-color($darker-gray, 12%), + tint-color($darker-gray, 12%) 3.5em, $darker-gray 3.5em, $darker-gray 7em ); diff --git a/evap/static/scss/_variables.scss b/evap/static/scss/_variables.scss index 88e574cf59b9e6bdae1b967738ae6d5679e6aba3..d56d572a937382900a65f2263050316e4d3fccbc 100644 --- a/evap/static/scss/_variables.scss +++ b/evap/static/scss/_variables.scss @@ -2,12 +2,15 @@ $fa-font-path: "../font-awesome/webfonts"; +$enable-smooth-scroll: false; + $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 1008px, - xl: 1200px + xl: 1200px, + xxl: 1400px ); $print-breakpoint: lg; @@ -18,14 +21,34 @@ $container-max-widths: ( sm: 540px, md: 720px, lg: 1000px, - xl: 1140px + xl: 1140px, + xxl: 1320px ); $border-color: $medium-gray; $headings-margin-bottom: 1rem; -$table-accent-bg: darken($lighter-gray, 3%); +$table-accent-bg: transparent; +$table-striped-bg: tint-color($light-gray, 50%); +$table-border-color: $light-gray; +$table-group-separator-color: $medium-gray; + +$card-cap-bg: $table-striped-bg; + +$accordion-border-width: 0; +$accordion-button-active-bg: $evap-light-blue; +$accordion-button-active-color: $evap-dark-blue; +$accordion-icon-transform: rotate(90deg); +$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$dark-gray}'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>"); +$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-button-active-color}'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>"); + +$accordion-border-width: 0; +$accordion-button-active-bg: $evap-light-blue; +$accordion-button-active-color: $evap-dark-blue; +$accordion-icon-transform: rotate(90deg); +$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$dark-gray}'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>"); +$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-button-active-color}'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>"); $btn-disabled-opacity: 0.45; @@ -45,6 +68,11 @@ $tooltip-opacity: 1; $breadcrumb-padding-y: 3px; $breadcrumb-padding-x: 0.5rem; -$breadcrumb-item-padding: 0.3rem; +$breadcrumb-item-padding-x: 0.3rem; $breadcrumb-margin-bottom: 0; $breadcrumb-bg: $darker-gray; + +$link-decoration: none; +$link-hover-decoration: underline; + +$small-font-size: 0.8rem; diff --git a/evap/static/scss/components/_badge.scss b/evap/static/scss/components/_badge.scss index 6552d1ef20a9b7089e9a467c5047b2943aa477fd..48ab31e3ea39b68ac212cce14fec2d3eb99771ee 100644 --- a/evap/static/scss/components/_badge.scss +++ b/evap/static/scss/components/_badge.scss @@ -12,7 +12,7 @@ color: $medium-gray; background-color: $white; } -.badge-info, .badge-warning { +.bg-info, .bg-warning, .bg-light { color: $darker-gray; } @@ -56,18 +56,18 @@ .badge-disabled { background-color: $light-gray; - color: lighten($medium-gray, 5%); + color: tint-color($medium-gray, 10%); text-shadow: none; } -.badge-primary-outline { +.bg-primary-outline { background-color: $white; color: $evap-dark-blue; border: 1px solid $evap-dark-blue; padding: 0.16em 0.35em; } -.badge-secondary-outline { +.bg-secondary-outline { background-color: $white; color: $secondary; border: 1px solid $secondary; diff --git a/evap/static/scss/components/_buttons.scss b/evap/static/scss/components/_buttons.scss index 5563f376c145a88b371c6ff6de8f46fb908cadc1..02ae8c988332df5f93d9663e0115de21ed857cf6 100644 --- a/evap/static/scss/components/_buttons.scss +++ b/evap/static/scss/components/_buttons.scss @@ -10,7 +10,7 @@ } .btn-light:focus, .btn-light.focus { - box-shadow: 0 0 0 3px rgba($light-gray, 0.5); + box-shadow: 0 0 0 $btn-focus-width rgba($dark-gray, 0.5); } .btn-light.active, .btn-light:active { @@ -31,7 +31,7 @@ border-color: $dark-gray; &:focus { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($dark-gray, .5); + box-shadow: inset 0 0 5px $dark-gray, 0 0 0 $btn-focus-width rgba($dark-gray, 0.5); } } @@ -45,16 +45,16 @@ a:not([href]):not(.disabled) { @include button-disabled-variant(".btn-primary", $evap-dark-blue, $evap-light-blue); @include button-disabled-variant(".btn-secondary", $dark-gray, $light-gray); -@include button-disabled-variant(".btn-success", $evap-green, $evap-light-green); +@include button-disabled-variant(".btn-success", shade-color($evap-green, 25%), $evap-light-green); @include button-disabled-variant(".btn-danger", $evap-red, $evap-light-red); -@include button-disabled-variant(".btn-warning", $evap-dark-yellow, $evap-light-yellow); -@include button-disabled-variant(".btn-info", darken($evap-light-blue, 20%), lighten($evap-light-blue, 5%)); +@include button-disabled-variant(".btn-warning", shade-color($evap-dark-yellow, 25%), $evap-light-yellow); +@include button-disabled-variant(".btn-info", shade-color($evap-light-blue, 40%), tint-color($evap-light-blue, 10%)); @include button-disabled-variant(".btn-light", $medium-gray, $lighter-gray); @include button-disabled-variant(".btn-dark", $white, $dark-gray, $darker-gray); .btn-switch { display: inline-flex; - background-color: lighten($light-gray, 2%); + background-color: tint-color($light-gray, 4%); border-radius: 0.2rem; .btn-toolbar { @@ -62,7 +62,7 @@ a:not([href]):not(.disabled) { } .btn-group { - background: lighten($light-gray, 2%); + background: tint-color($light-gray, 4%); &::before { width: 0.5rem; @@ -110,7 +110,7 @@ a:not([href]):not(.disabled) { .btn-navbar { padding: 0 0.25rem; - background-color: lighten($darker-gray, 5%); + background-color: tint-color($darker-gray, 10%); border-width: 0; color: $light-gray; transition: none; @@ -118,7 +118,7 @@ a:not([href]):not(.disabled) { margin-left: 0; &:hover { - background-color: lighten($darker-gray, 10%); + background-color: tint-color($darker-gray, 20%); color: $white; } @@ -127,10 +127,10 @@ a:not([href]):not(.disabled) { } &.active { - background-color: lighten($darker-gray, 5%); + background-color: tint-color($darker-gray, 10%); color: $medium-gray; border-width: 0; - box-shadow: inset 0 0 10px darken($darker-gray, 20%); + box-shadow: inset 0 0 10px shade-color($darker-gray, 40%); opacity: 1; } } @@ -159,25 +159,6 @@ a:not([href]):not(.disabled) { max-width: 16em; } -.btn-option { - background-color: $white; - border-color: $light-gray; - color: $black; -} -.btn-option.active { - background-color: $evap-dark-blue; - color: $white; -} -.btn-option.disabled { - opacity: 0.6; -} -.btn-option:hover:not(.disabled) { - background-color: $light-gray; -} -.btn-option.active:hover:not(.disabled) { - background-color: darken($evap-dark-blue, 10%); -} - .vote-btn { width: 6rem; height: 2.5rem; @@ -233,19 +214,23 @@ a.collapse-toggle { @each $name, $color in $vote-colors { .vote-btn-#{$name} { background-color: $lighter-gray; - color: darken($color, 20%); + color: shade-color($color, 40%); &:hover { background-color: change-color($color, $lightness: 85%); } + } - &.active { - background-color: $color; - color: change-color($color, $lightness: 30%); - } + .btn-check:checked + .vote-btn-#{$name} { + background-color: $color; + color: change-color($color, $lightness: 30%); } } +.btn-group > .vote-btn { + flex: 0 1 auto; +} + .btn-area { margin-bottom: -0.25rem; .btn { @@ -254,7 +239,7 @@ a.collapse-toggle { } .btn-grade-download { - align-self: flex-start; + align-self: flex-left; } .btn-textanswer { @@ -273,6 +258,10 @@ a.collapse-toggle { box-shadow: inset 0 0 10px $dark-gray; + &:focus { + box-shadow: $btn-focus-box-shadow, inset 0 0 10px $dark-gray; + } + &.collapsed { box-shadow: none; } diff --git a/evap/static/scss/components/_callouts.scss b/evap/static/scss/components/_callouts.scss index 0843ac9616732c4c1cdac75edd699edfb3448ed8..14039723f8c4e90522d8bbe945e0f589de85c22a 100644 --- a/evap/static/scss/components/_callouts.scss +++ b/evap/static/scss/components/_callouts.scss @@ -4,7 +4,7 @@ margin: 0 0 20px; padding: 15px 30px 15px 15px; border-left: 5px solid $dark-gray; - @include border-right-radius($alert-border-radius); + @include border-end-radius($alert-border-radius); } .callout-header { @@ -18,7 +18,7 @@ .callout-content { max-height: 500px; - max-width: 1200px; + max-width: 1300px; padding-top: 20px; overflow: hidden; } @@ -26,16 +26,19 @@ .callout-warning { background-color: $evap-light-yellow; border-color: $evap-yellow; + color: shade-color($evap-yellow, 60%); } .callout-danger { background-color: $evap-light-red; border-color: $evap-red; + color: shade-color($evap-red, 60%); } .callout-info { background-color: $evap-light-blue; border-color: $evap-dark-blue; + color: shade-color($evap-dark-blue, 60%); .callout-header { color: $evap-dark-blue; @@ -43,7 +46,7 @@ &.closed:hover, &.closed:active { - background-color: darken($evap-light-blue, 10%); + background-color: shade-color($evap-light-blue, 20%); } } diff --git a/evap/static/scss/components/_card.scss b/evap/static/scss/components/_card.scss index fa64d1ee9c8ca5fc65d475c9c7a1324d65074913..d6365340845ad203db05fd8e4740f65fa9068beb 100644 --- a/evap/static/scss/components/_card.scss +++ b/evap/static/scss/components/_card.scss @@ -77,7 +77,7 @@ .card-deck-login { display: grid; - grid-gap: $card-deck-margin; + grid-gap: 1rem; @include media-breakpoint-up(lg) { grid-template-columns: 1fr 1fr; diff --git a/evap/static/scss/components/_distribution-bar.scss b/evap/static/scss/components/_distribution-bar.scss index cb830ab68ac4b4e5c0cf7357626d98c19f785ec5..fa02262263ab6f1354b8e7bc76de1f411abec3a6 100644 --- a/evap/static/scss/components/_distribution-bar.scss +++ b/evap/static/scss/components/_distribution-bar.scss @@ -96,5 +96,5 @@ .distribution-bar-disabled { background-color: $light-gray; - color: lighten($medium-gray, 5%); + color: tint-color($medium-gray, 10%); } diff --git a/evap/static/scss/components/_forms.scss b/evap/static/scss/components/_forms.scss index ac0d31aa47680b218a79c4c1e67251ed82cb4bc8..98b527e7a651de1f2eeb277137cc0b5472e06bbc 100644 --- a/evap/static/scss/components/_forms.scss +++ b/evap/static/scss/components/_forms.scss @@ -17,10 +17,6 @@ select[multiple] { } .email-form { - .form-row { - clear: both; - } - .form-label { float: left; width: 15%; @@ -73,86 +69,3 @@ select[multiple] { height: auto; display: inline-block; } - -/* custom checkboxes (based on http://getbootstrap.com/docs/4.0/components/forms/#custom-forms) */ -.form-check-input { - z-index: 1; - width: 1rem; - height: 1rem; - opacity: 0; - - &:checked ~ .form-check-label::before { - color: $white; - background-color: $evap-dark-blue; - } - - &:hover ~ .form-check-label::before { - background-color: darken($light-gray, 10%); - } - - &:checked:hover ~ .form-check-label::before { - background-color: darken($evap-dark-blue, 10%); - } - - &:focus ~ .form-check-label::before { - box-shadow: 0 0 0 0.2rem rgba($evap-dark-blue, 0.25); - } - - &:disabled { - ~ .form-check-label { - color: $medium-gray; - - &::before { - background-color: $lighter-gray; - border: 1px solid $light-gray; - box-shadow: none; - } - - &::after { - color: $medium-gray; - } - } - - &:checked ~ .form-check-label::before { - color: $medium-gray; - } - - &:hover ~ .form-check-label::before { - background-color: $lighter-gray; - } - - &:checked:hover ~ .form-check-label::before { - background-color: $lighter-gray; - } - } -} -// formset delete checkboxes are hidden when replaced with a link and no checkbox should be shown there -input[type="hidden"] ~ .form-check-label { - display: none; -} -.form-check-label { - color: $black; - transition: color 0.15s ease-in-out; - - &::before { - position: absolute; - top: .25rem; - left: 0; - display: block; - width: 1rem; - height: 1rem; - text-align: center; - content: fa-content($fa-var-check); - font-family: "Font Awesome 5 Free"; - font-size: .6rem; - font-weight: 900; - line-height: 1.05rem; - color: rgba($white, 0); - border-radius: $border-radius; - background-color: $light-gray; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; - - pointer-events: none; - @include no-user-select; - } -} diff --git a/evap/static/scss/components/_grid.scss b/evap/static/scss/components/_grid.scss index 577a83d46fc913cf17a6443f41901885b1740ddb..da75bb983181b14d69c5c1e5f5ad49c606dfa1f4 100644 --- a/evap/static/scss/components/_grid.scss +++ b/evap/static/scss/components/_grid.scss @@ -1,5 +1,5 @@ .container-striped .row:nth-child(odd) { - background-color: $table-accent-bg; + background-color: $table-striped-bg; } .lcr-left { @@ -16,6 +16,7 @@ .col-question { + position: relative; padding: 0.5rem 0.75rem 0; word-wrap: break-word; @@ -154,7 +155,7 @@ } th.col-order { - padding-left: 1.25em; + padding-left: 1.4em; &:empty { padding-right: 0; @@ -162,7 +163,7 @@ th.col-order { &::before, &::after { margin-left: 0.2em; - bottom: 0.75em; + bottom: 0.5em; } } diff --git a/evap/static/scss/components/_jumbotron.scss b/evap/static/scss/components/_jumbotron.scss index cae1e9ce1452d1d5301ab816368e32b4014ca9ec..bd1a7488d82cbda6897c1cd4f3e52ff061f83608 100644 --- a/evap/static/scss/components/_jumbotron.scss +++ b/evap/static/scss/components/_jumbotron.scss @@ -1,6 +1,8 @@ .jumbotron-evap { background-image: url("../images/triangles_color.svg"); background-size: cover; + padding: 4rem 2rem; + border-radius: .3rem; .card { background-color: $lighter-gray; diff --git a/evap/static/scss/components/_progress.scss b/evap/static/scss/components/_progress.scss index 0282b692ed6f834c97377ed3f3215fa268557858..6eef3ce4a865684cd5d54736305f333d2d1d816e 100644 --- a/evap/static/scss/components/_progress.scss +++ b/evap/static/scss/components/_progress.scss @@ -16,7 +16,7 @@ background-color: $light-gray; .progress-bartext { text-shadow: none; - color: lighten($medium-gray, 5%); + color: tint-color($medium-gray, 10%); } } diff --git a/evap/static/scss/components/_quick-review.scss b/evap/static/scss/components/_quick-review.scss index 230cd6b305f2637cb12a09e3569e7122c117d8e5..eec23a31f6d0054ea929ddae70cda19eb7174b13 100644 --- a/evap/static/scss/components/_quick-review.scss +++ b/evap/static/scss/components/_quick-review.scss @@ -69,7 +69,7 @@ @include border-top-radius($card-border-radius); } [data-layer="1"] { - background-color: theme-color("light"); + background-color: $light; border-left: $card-border-width solid $card-border-color; border-right: $card-border-width solid $card-border-color; } diff --git a/evap/static/scss/components/_tables.scss b/evap/static/scss/components/_tables.scss index 96870f07a910d6d4da4fb059bc5dd601a9c2ab79..4e06084380417727ce674127b4c7e7ef8bb20495 100644 --- a/evap/static/scss/components/_tables.scss +++ b/evap/static/scss/components/_tables.scss @@ -2,53 +2,23 @@ margin-bottom: 0; } -.table-primary, -.table-primary > th, -.table-primary > td { - background-color: $evap-dark-blue; - color: $white; -} -.table-secondary, -.table-secondary > th, -.table-secondary > td { - background-color: $medium-gray; - color: $black; -} -.table-success, -.table-success > th, -.table-success > td { - background-color: $evap-green; - color: $black; -} -.table-info, -.table-info > th, -.table-info > td { - background-color: $evap-light-blue; - color: $black; -} -.table-warning, -.table-warning > th, -.table-warning > td { - background-color: $evap-yellow; - color: $black; -} -.table-danger, -.table-danger > th, -.table-danger > td { - background-color: $evap-red; - color: $white; -} -.table-light, -.table-light > th, -.table-light > td { - background-color: $light-gray; - color: $black; -} -.table-dark, -.table-dark > th, -.table-dark > td { - background-color: $darker-gray; - color: $white; +$table-colors: ( + "primary" $evap-dark-blue $white, + "secondary" $medium-gray $black, + "success" $evap-green $black, + "info" $evap-light-blue $black, + "warning" $evap-yellow $black, + "danger" $evap-red $white $black, + "light" $light-gray $black, + "dark" $darker-gray $white +); +@each $name, $bg-color, $color in $table-colors { + .table-#{$name}, + .table-#{$name} > th, + .table-#{$name} > td { + background-color: $bg-color !important; + color: $color; + } } .table-total-stats { @@ -112,6 +82,13 @@ height: 2.5rem; } +tr.heading-row td { + border-bottom: none; +} +tr.heading-row:not(:first-child) td { + border-top: 1px solid $light-gray; +} + tr.heading-row.course-row { td { padding-bottom: 0.2rem; @@ -154,6 +131,6 @@ tr.evaluation-row:not(.heading-row) { } } -.table-headerless tr:first-child td { - border-top-width: 0; +.table-headerless tr:last-child td { + border-bottom-width: 0; } diff --git a/evap/static/scss/components/_transitions.scss b/evap/static/scss/components/_transitions.scss index 7400c5b9ef210659554ced65d6b7e02388d15426..0b4bed90bf52950706e4205945f05e719f3b7353 100644 --- a/evap/static/scss/components/_transitions.scss +++ b/evap/static/scss/components/_transitions.scss @@ -9,10 +9,16 @@ &::before { float: left; - content: fa-content($fa-var-chevron-down); - font-family: 'Font Awesome 5 Free'; + background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$dark-gray}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>")); + background-repeat: no-repeat; + background-size: 1.25rem; margin-right: $spacer * .5; transition: transform 0.15s ease-in-out; + flex-shrink: 0; + width: 1.25rem; + height: 1.25rem; + content: ""; + margin-top: 0.1rem; } &.collapsed::before { diff --git a/evap/static/scss/components/_type.scss b/evap/static/scss/components/_type.scss index 0e80a7032ed0deef4e626594458081eca7560dbb..4c353f011111d96b0bd7b9347d2c546ba3822f32 100644 --- a/evap/static/scss/components/_type.scss +++ b/evap/static/scss/components/_type.scss @@ -4,6 +4,6 @@ } @include media-breakpoint-down(sm) { - font-size: 0.7 * $display4-size; + font-size: 2.5rem; } } diff --git a/evap/static/scss/evap.scss b/evap/static/scss/evap.scss index 7f3b12ca088888c599a81e7351651d5f8186859d..6c0876d1377aa5fcb9c25a6caffb8daf677b32d8 100644 --- a/evap/static/scss/evap.scss +++ b/evap/static/scss/evap.scss @@ -1,3 +1,4 @@ +@import "../bootstrap/scss/functions"; @import "variables"; @import "mixins"; @import "font-awesome"; @@ -94,7 +95,7 @@ body { } } -.card-body .form-group:last-of-type { +.card-body .mb-3:last-of-type { margin-bottom: 0; } diff --git a/evap/static/ts/src/datagrid.ts b/evap/static/ts/src/datagrid.ts index 0ce83b9cb1080ca3201963edd8cc69f62196fb87..5262d356c5eed251d402e084d459d2cb8cb88d6d 100644 --- a/evap/static/ts/src/datagrid.ts +++ b/evap/static/ts/src/datagrid.ts @@ -289,7 +289,7 @@ export class EvaluationGrid extends TableGrid { private static createBadgePill(count: number): HTMLElement { const badgeClass = count === 0 ? "badge-btn-zero" : "badge-btn"; const pill = document.createElement("span"); - pill.classList.add("badge", "badge-pill", badgeClass); + pill.classList.add("badge", "rounded-pill", badgeClass); pill.textContent = count.toString(); return pill; } diff --git a/evap/static/ts/tests/frontend/student-vote.ts b/evap/static/ts/tests/frontend/student-vote.ts index 9a275ca4c3ef12afc67fd7fd055edc5e030b78e8..2974fd3679327b96fbb386b107460794a3a89d45 100644 --- a/evap/static/ts/tests/frontend/student-vote.ts +++ b/evap/static/ts/tests/frontend/student-vote.ts @@ -54,7 +54,7 @@ test("checking bottom confirm checkbox check top but keeps bottom visible", page test("resolving submit errors clears warning", pageHandler( "student/vote/1/submit_errors.html", async page => { - const checkbox = (await page.$(".choice-error input[type=radio][value='3']"))!; + const checkbox = (await page.$(".choice-error + input[type=radio][value='3']"))!; await checkbox.click(); const row = await queryClosest(checkbox, ".row"); expect(await row.$$(".choice-error")).toHaveLength(0); @@ -64,16 +64,14 @@ test("resolving submit errors clears warning", pageHandler( test("skip contributor", pageHandler( "student/vote/1/normal.html", async page => { - const voteArea = (await page.$(".card .collapse"))!; - const button = (await queryClosest(voteArea, ".card").then(card => card.$("button")))!; + const button = (await page.$("[data-mark-no-answers-for]"))!; + const voteArea = (await queryClosest(button, ".card").then(card => card.$(".collapse")))! await button.click(); for (const checkbox of await voteArea.$$("input[type=radio]:not([value='6'])")) { await expect(checkbox).not.toBeChecked(); - await expect(await queryParent(checkbox)).not.toHaveClass("active"); } for (const checkbox of await voteArea.$$("input[type=radio][value='6']")) { await expect(checkbox).toBeChecked(); - await expect(await queryParent(checkbox)).toHaveClass("active"); } await expect(voteArea).toHaveClass("collapsing"); }, @@ -82,8 +80,8 @@ test("skip contributor", pageHandler( test("skipping contributor clears warning", pageHandler( "student/vote/1/submit_errors.html", async page => { - const voteArea = (await page.$(".card .collapse"))!; - const button = (await queryClosest(voteArea, ".card").then(card => card.$("button")))!; + const button = (await page.$("[data-mark-no-answers-for]"))!; + const voteArea = (await queryClosest(button, ".card").then(card => card.$(".collapse")))!; await button.click(); await expect(await voteArea.$$(".choice-error")).toHaveLength(0); }, diff --git a/evap/static/ts/tests/utils/page.ts b/evap/static/ts/tests/utils/page.ts index 0f840f3fe3ab1c8e6b5e9130fcae36bc60ab8cc0..8f420b3b899d0aee20c9d729c0bf7c596a2786ae 100644 --- a/evap/static/ts/tests/utils/page.ts +++ b/evap/static/ts/tests/utils/page.ts @@ -44,6 +44,7 @@ export function pageHandler(fileName: string, fn: (page: Page) => void): (done?: await page.evaluate(() => { localStorage.clear(); }); + await page.close(); done!(reason); } } diff --git a/evap/student/templates/student_index.html b/evap/student/templates/student_index.html index 4503b72a14e55c3168fb957e070484f06bcff850..50d8bc14337d88eba3afea354d887cc340f23f20 100644 --- a/evap/student/templates/student_index.html +++ b/evap/student/templates/student_index.html @@ -11,22 +11,20 @@ <div class="callout-header d-flex"> <span class="fas fa-info-circle callout-icon"></span> <span>{% trans 'Information about the evaluation' %}</span> - <button type="button" class="close callout-closable-close ml-auto" data-dismiss="modal" aria-label="Close"> - <span class="fas fa-times"></span> - </button> + <button type="button" class="btn-close callout-closable-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="callout-content small"> <b>{% trans 'Anonymity' %}</b><br /> {% blocktrans %}Your votes and text answers can't be related to you. But you should be aware that your style of writing might allow lecturers to guess who wrote the text answer, especially in small courses.{% endblocktrans %}<br /> - <em>{% trans 'More details:' %} <a href="/faq#21-q">{% trans 'FAQ/Anonymity' %}</a></em><br /> + <em>{% trans 'More details:' %} <a href="/faq#faq-21-q">{% trans 'FAQ/Anonymity' %}</a></em><br /> <br /> <b>{% trans 'References to other answers' %}</b><br /> {% blocktrans %}Lecturers can't see completed questionnaires as a whole. If you would write "see above", the lecturer can't find the respective answer.{% endblocktrans %}<br /> - <em>{% trans 'More details:' %} <a href="/faq#24-q">{% trans 'FAQ/Reference' %}</a></em><br /> + <em>{% trans 'More details:' %} <a href="/faq#faq-24-q">{% trans 'FAQ/Reference' %}</a></em><br /> <br /> <b>{% trans 'Evaluation Results' %}</b><br /> {% blocktrans %}Your text answers will be shown to the person whom you evaluated and to the person responsible for the course. Voting answers will be published for all users of the platform if at least two people participated in the evaluation. The average grade is calculated if the participation rate is at least 20 percent.{% endblocktrans %}<br /> - <em>{% trans 'More details:' %} <a href="/faq#3-s">{% trans 'FAQ/Results' %}</a></em> + <em>{% trans 'More details:' %} <a href="/faq#faq-3-s">{% trans 'FAQ/Results' %}</a></em> </div> </div> diff --git a/evap/student/templates/student_index_evaluation_period.html b/evap/student/templates/student_index_evaluation_period.html index c8cc712caa855cef850cb4b39279f1128d54209a..343f802a0f9217bb14753d9676da814cd2683cea 100644 --- a/evap/student/templates/student_index_evaluation_period.html +++ b/evap/student/templates/student_index_evaluation_period.html @@ -1,25 +1,25 @@ {% load evaluation_filters %} {% if evaluation.state == evaluation.State.PREPARED or evaluation.state == evaluation.State.EDITOR_APPROVED %} - <span class="small text-secondary" data-toggle="tooltip" data-placement="left" + <span class="small text-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'The evaluation is currently prepared by the lecturers and the evaluation team.' %} {% trans 'You will receive an email when the evaluation period begins.' %}"> <i>{% trans 'In preparation' %}</i> </span> {% elif evaluation.state == evaluation.State.APPROVED %} - <span class="small{%if evaluation.hours_until_evaluation < 12 %} text-primary{% endif %}" data-toggle="tooltip" data-placement="left" + <span class="small{%if evaluation.hours_until_evaluation < 12 %} text-primary{% endif %}" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Evaluation period' %}:<br />{{ evaluation.vote_start_datetime }} – {{ evaluation.vote_end_date }}<br /><br />{% trans 'You will receive an email when the evaluation period begins.' %}"> <span class="far fa-clock"></span> {% trans 'Begins in' %} {{ evaluation.vote_start_datetime|timeuntil }} </span> {% elif evaluation.state == evaluation.State.IN_EVALUATION and not evaluation.voted_for %} {% if evaluation.hours_left_for_evaluation < evaluation_end_warning_period %} - <span class="small badge badge-danger" data-toggle="tooltip" data-placement="left" + <span class="small badge bg-danger" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Evaluation period' %}:<br />{{ evaluation.vote_start_datetime }} – {{ evaluation.vote_end_date }}<br /><br />{% trans 'The evaluation period will end soon. You only have a few hours left.' %}"> <span class="far fa-clock"></span> {% trans 'Ends in' %} {{ evaluation.vote_end_datetime|timeuntil }} </span> {% else %} - <span class="small{% if evaluation.display_hours_left_for_evaluation < 48 %} badge badge-warning{% endif %}" data-toggle="tooltip" data-placement="left" + <span class="small{% if evaluation.display_hours_left_for_evaluation < 48 %} badge bg-warning{% endif %}" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Evaluation period' %}:<br />{{ evaluation.vote_start_datetime }} – {{ evaluation.vote_end_date }}"> <span class="far fa-clock"></span> {% trans 'Ends in' %} {{ evaluation.display_vote_end_datetime|timeuntil }} diff --git a/evap/student/templates/student_index_semester_evaluations_list.html b/evap/student/templates/student_index_semester_evaluations_list.html index 4a53bdea5152af402bd5657b1f3fee41b6529925..9a4e62e9adaa4ac81ef9b7730906125793d49b3a 100644 --- a/evap/student/templates/student_index_semester_evaluations_list.html +++ b/evap/student/templates/student_index_semester_evaluations_list.html @@ -4,7 +4,7 @@ {% if semester.evaluations %} <div class="card{% if not forloop.last %} mb-3{% endif %}{% if semester.results_are_archived %} deactivate{% endif %}"> <div class="card-header d-flex"> - <span class="mr-auto"> + <span class="me-auto"> {{ semester.semester_name }} </span> {% if semester.results_are_archived %} @@ -29,7 +29,7 @@ <td></td> <td> <div class="d-flex"> - <span class="font-weight-bold mr-auto"> + <span class="fw-bold me-auto"> {{ course.name }} </span> {% if can_download_grades and not semester.grade_documents_are_deleted %} @@ -38,7 +38,7 @@ {% endif %} {% for grade_document in course.grade_documents.all %} <a class="btn btn-sm btn-sm-narrow btn-light btn-grade-download" href="{% url 'grades:download_grades' grade_document.id %}" role="button" - data-toggle="tooltip" data-placement="top" title="{{ grade_document.description }}"> + data-bs-toggle="tooltip" data-bs-placement="top" title="{{ grade_document.description }}"> <span class="far fa-file"></span> </a> {% endfor %} @@ -47,14 +47,14 @@ {% endif %} {% endif %} </div> - <span class="badge badge-secondary">{{ course.type }}</span> + <span class="badge bg-secondary">{{ course.type }}</span> <i class="small">{{ course.responsibles_names }}</i> </td> <td></td> <td> {% if semester.results_are_archived %} {% elif course.not_all_evaluations_are_published %} - <div class="d-flex" data-toggle="tooltip" data-placement="left" title="{% trans 'The total grade will be calculated once all evaluation results have been published.' %}"> + <div class="d-flex" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'The total grade will be calculated once all evaluation results have been published.' %}"> {% include 'distribution_with_grade_disabled.html' with icon="fas fa-hourglass-half" %} </div> {% else %} @@ -70,28 +70,28 @@ {% else %} class="{% if course.evaluation_count > 1 %}evaluation-row{% else %}heading-row{% endif %}" {% endif %}> - <td class="pl-2 full-size"> + <td class="ps-2 full-size"> {% if not evaluation.is_single_result %} {% if evaluation.voted_for %} - <span class="text text-success" data-toggle="tooltip" data-placement="top" title="{% trans 'You gave us your feedback in this evaluation. Thank you!' %}"><span class="far fa-fw fa-smile" aria-hidden="true"></span></span> + <span class="text text-success" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'You gave us your feedback in this evaluation. Thank you!' %}"><span class="far fa-fw fa-smile" aria-hidden="true"></span></span> {% elif evaluation.participates_in %} {% if evaluation.state > evaluation.State.IN_EVALUATION %} - <span class="text text-secondary" data-toggle="tooltip" data-placement="top" title="{% trans 'You did not take part in this evaluation.' %}"><span class="far fa-fw fa-frown" aria-hidden="true"></span></span> + <span class="text text-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'You did not take part in this evaluation.' %}"><span class="far fa-fw fa-frown" aria-hidden="true"></span></span> {% elif evaluation.state == evaluation.State.IN_EVALUATION %} - <span class="text text-primary" data-toggle="tooltip" data-placement="top" title="{% trans 'You can take part in this evaluation above.' %}"><span class="fas fa-fw fa-arrow-up" aria-hidden="true"></span></span> + <span class="text text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'You can take part in this evaluation above.' %}"><span class="fas fa-fw fa-arrow-up" aria-hidden="true"></span></span> {% else %} - <span class="text text-secondary" data-toggle="tooltip" data-placement="top" title="{% trans 'This evaluation will start in the future.' %}"><span class="far fa-fw fa-clock" aria-hidden="true"></span></span> + <span class="text text-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'This evaluation will start in the future.' %}"><span class="far fa-fw fa-clock" aria-hidden="true"></span></span> {% endif %} {% else %} - <span class="text text-secondary" data-toggle="tooltip" data-placement="top" title="{% trans 'You are not listed as a participant for this evaluation.' %}"> + <span class="text text-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'You are not listed as a participant for this evaluation.' %}"> <span class="far fa-fw fa-circle"></span> </span> {% endif %} {% endif %} </td> - <td {% if course.evaluation_count > 1 %}class="pl-4" {% endif %}> + <td {% if course.evaluation_count > 1 %}class="ps-4" {% endif %}> <div class="d-flex"> - <span class="font-weight-bold mr-auto{% if course.evaluation_count > 1 %} text-secondary{% endif %}"> + <span class="fw-bold me-auto{% if course.evaluation_count > 1 %} text-secondary{% endif %}"> {% if course.evaluation_count > 1 %} {% if evaluation.name %} {{ evaluation.name }} @@ -112,7 +112,7 @@ {% endif %} {% for grade_document in course.grade_documents.all %} <a class="btn btn-sm btn-sm-narrow btn-light btn-grade-download" href="{% url 'grades:download_grades' grade_document.id %}" role="button" - data-toggle="tooltip" data-placement="top" title="{{ grade_document.description }}"> + data-bs-toggle="tooltip" data-bs-placement="top" title="{{ grade_document.description }}"> <span class="far fa-file"></span> </a> {% endfor %} @@ -123,13 +123,13 @@ {% endif %} </div> {% if course.evaluation_count == 1 %} - <span class="badge badge-secondary">{{ course.type }}</span> + <span class="badge bg-secondary">{{ course.type }}</span> {% endif %} {% if evaluation.is_midterm_evaluation %} - <span class="badge badge-dark">{% trans 'Midterm evaluation' %}</span> + <span class="badge bg-dark">{% trans 'Midterm evaluation' %}</span> {% endif %} {% if evaluation.is_single_result %} - <span class="badge badge-success">{% trans 'Single result' %}</span> + <span class="badge bg-success">{% trans 'Single result' %}</span> {% endif %} {% if course.evaluation_count == 1 %} <i class="small">{{ course.responsibles_names }}</i> @@ -139,7 +139,7 @@ {% if not semester.results_are_archived %} {% if evaluation.is_single_result %} {% if evaluation.state == evaluation.State.PUBLISHED %} - <span data-toggle="tooltip" data-placement="top" title="{% trans 'Individual participants are not stored for single results. The number shown here is the number of votes received.' %}"> + <span data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Individual participants are not stored for single results. The number shown here is the number of votes received.' %}"> {% include 'progress_bar_fill.html' with icon='user' total=evaluation.single_result_rating_result.count_sum fill=100 %} </span> {% endif %} @@ -152,12 +152,12 @@ {% endif %} {% endif %} </td> - <td class="text-right"> + <td class="text-end"> {% if not semester.results_are_archived %} {% if evaluation.state == evaluation.State.PUBLISHED %} {% include 'evaluation_result_widget.html' with course_or_evaluation=evaluation %} {% elif not evaluation.participates_in or evaluation.voted_for and evaluation.State.IN_EVALUATION <= evaluation.state and evaluation.state <= evaluation.State.REVIEWED %} - <div class="d-flex" data-toggle="tooltip" data-placement="left" title="{% if evaluation|weight_info %}{% blocktrans with percentage=evaluation|weight_info %}This evaluation contributes {{ percentage }} to the final grade of the course.{% endblocktrans %} {% endif %}{% trans 'The results have not been published yet.' %}{% if evaluation.participates_in %} {% trans 'You will receive an email when the results are published.' %}{% endif %}"> + <div class="d-flex" data-bs-toggle="tooltip" data-bs-placement="left" title="{% if evaluation|weight_info %}{% blocktrans with percentage=evaluation|weight_info %}This evaluation contributes {{ percentage }} to the final grade of the course.{% endblocktrans %} {% endif %}{% trans 'The results have not been published yet.' %}{% if evaluation.participates_in %} {% trans 'You will receive an email when the results are published.' %}{% endif %}"> {% include 'distribution_with_grade_disabled.html' with icon="fas fa-hourglass-half" weight_info=evaluation|weight_info %} </div> {% endif %} diff --git a/evap/student/templates/student_index_unfinished_evaluations_list.html b/evap/student/templates/student_index_unfinished_evaluations_list.html index 552863f7fee7b28c17b96a6c16d60b57e5b8b0e2..c98c77c0e45c4cac4401c30dab7440e28926d657 100644 --- a/evap/student/templates/student_index_unfinished_evaluations_list.html +++ b/evap/student/templates/student_index_unfinished_evaluations_list.html @@ -8,14 +8,14 @@ {% else %} class="deactivate"{% endif %}> <td style="width: 65%"> <div> - <span class="evaluation-name font-weight-bold {% if evaluation.state == evaluation.State.IN_EVALUATION and not evaluation.voted_for %} text-primary{% endif %}"> + <span class="evaluation-name fw-bold {% if evaluation.state == evaluation.State.IN_EVALUATION and not evaluation.voted_for %} text-primary{% endif %}"> {{ evaluation.full_name }} </span> {% if not evaluation.course.semester.is_active %}({{ evaluation.course.semester.name }}){% endif %} </div> - <span class="badge badge-secondary">{{ evaluation.course.type }}</span> - {% if evaluation.is_midterm_evaluation %}<span class="badge badge-dark">{% trans 'Midterm evaluation' %}</span>{% endif %} - <span class="badge badge-secondary-outline" data-toggle="tooltip" data-placement="right" title="{% trans 'Number of participants' %}"> + <span class="badge bg-secondary">{{ evaluation.course.type }}</span> + {% if evaluation.is_midterm_evaluation %}<span class="badge bg-dark">{% trans 'Midterm evaluation' %}</span>{% endif %} + <span class="badge bg-secondary-outline" data-bs-toggle="tooltip" data-bs-placement="right" title="{% trans 'Number of participants' %}"> <span class="fas fa-user"></span> {{ evaluation.num_participants }} </span> <i class="small">{{ evaluation.course.responsibles_names }}</i> @@ -23,7 +23,7 @@ <td style="width: 25%"> {% include 'student_index_evaluation_period.html' %} </td> - <td style="width: 10%" class="text-right"> + <td style="width: 10%" class="text-end"> {% if evaluation.state == evaluation.State.IN_EVALUATION and not evaluation.voted_for and evaluation.is_in_evaluation_period %} <a class="btn btn-sm btn-primary btn-row-hover" href="{% url 'student:vote' evaluation.id %}">{% trans 'Evaluate' %}</a> {% endif %} diff --git a/evap/student/templates/student_vote.html b/evap/student/templates/student_vote.html index d5676340997c2a2c04d07a6e0ea3ff2bf3344b6a..95f3e42424b76aeb0ac59e57b2eaef2765a1b8e5 100644 --- a/evap/student/templates/student_vote.html +++ b/evap/student/templates/student_vote.html @@ -88,9 +88,9 @@ {% for contributor, label, form_group, contributor_has_errors, textanswers_visible_to in contributor_form_groups %} <div class="card collapsible{% if not forloop.last %} mb-3{% endif %}"> <div class="card-header d-flex tab-row"> - <div class="mr-auto"> - <button class="collapse-toggle{% if errors_exist and not contributor_has_errors %} collapsed{% endif %} bg-transparent" data-toggle="collapse" - data-target="#vote-area-{{ contributor.id }}" aria-expanded="false" aria-controls="vote-area-{{ contributor.id }}" tabindex="-1" type="button"> + <div class="me-auto"> + <button class="collapse-toggle{% if errors_exist and not contributor_has_errors %} collapsed{% endif %} bg-transparent" data-bs-toggle="collapse" + data-bs-target="#vote-area-{{ contributor.id }}" aria-expanded="false" aria-controls="vote-area-{{ contributor.id }}" tabindex="-1" type="button"> {{ contributor.full_name }} {% if label %} – <span class="font-italic">{{ label }}</span>{% endif %} </button> @@ -150,7 +150,7 @@ {% else %} <div class="pb-3 text-secondary"> <span id="last-saved"></span> - <span class="fas fa-info-circle" data-toggle="tooltip" title="{% trans 'The evaluation can be continued later using the same device and the same browser. But you have to submit it to send it to the server and make it count. After submitting, you can not edit the evaluation anymore.' %}"></span> + <span class="fas fa-info-circle" data-bs-toggle="tooltip" title="{% trans 'The evaluation can be continued later using the same device and the same browser. But you have to submit it to send it to the server and make it count. After submitting, you can not edit the evaluation anymore.' %}"></span> </div> <button id="vote-submit-btn" type="submit" class="btn btn-success tab-selectable">{% trans 'Submit questionnaire' %}</button> <p id="submit-error-warning" style="display: none"> @@ -185,10 +185,6 @@ autoRelease: false, // don't automatically release the data on submit, because the server might not receive the data customKeySuffix: "[user={{ request.user.id }}]", // don't load data for other users onRestore: function () { - // update vote button states - $("div.vote-inputs input[type=radio]:not(:checked)").parent().removeClass("active"); - $("div.vote-inputs input[type=radio]:checked").parent().addClass("active"); - // restore publish confirmation state if (textResultsPublishConfirmation.bottomCard) { updateTextResultsPublishConfirmation(); @@ -309,22 +305,20 @@ document.querySelectorAll("[data-mark-no-answers-for]").forEach(button => { const contributorId = button.dataset.markNoAnswersFor; - const voteArea = document.querySelector(`#vote-area-${contributorId}`); + const voteArea = document.getElementById(`vote-area-${contributorId}`); const collapseToggle = voteArea.closest(".collapsible").querySelector(".collapse-toggle"); button.addEventListener("click", () => { - voteArea.querySelectorAll(".vote-btn.active").forEach(el => el.classList.remove("active")); voteArea.querySelectorAll(".vote-inputs [type=radio][value='6']").forEach(radioInput => { radioInput.checked = true; - const voteButton = radioInput.closest(".vote-btn"); - voteButton.classList.add("active"); - clearChoiceError(voteButton); + clearChoiceError(radioInput); }); sisyphus.saveAllData(); // hide questionnaire for contributor - $(voteArea).collapse("hide"); + var voteAreaCollapse = bootstrap.Collapse.getOrCreateInstance(voteArea); + voteAreaCollapse.hide(); collapseToggle.classList.add("tab-selectable"); // Disable this button, until user changes a value @@ -334,7 +328,7 @@ voteArea.querySelectorAll(".vote-inputs [type=radio]:not([value='6'])") .forEach(radioInput => { - radioInput.labels[0].addEventListener("click", () => { + radioInput.addEventListener("click", () => { collapseToggle.classList.remove("tab-selectable"); button.classList.add("tab-selectable"); button.disabled = false; @@ -348,7 +342,7 @@ }); document.querySelectorAll(".btn-textanswer").forEach(textanswerButton => { - const textfieldClass = textanswerButton.dataset.target; + const textfieldClass = textanswerButton.dataset.bsTarget; const textfield = textanswerButton.closest(".row").querySelector(textfieldClass + " textarea"); textanswerButton.addEventListener("click", () => { // focus textarea when opening the collapsed area @@ -358,7 +352,7 @@ } }); textfield.addEventListener("input", () => { - if (textfield.value.length !== 0) + if (textfield.value.trim().length !== 0) textanswerButton.classList.add("has-contents"); else textanswerButton.classList.remove("has-contents"); @@ -390,22 +384,18 @@ } function selectByNumberKey(row, num) { + let index = 2 * num - 1; if (num === 0) { // Select "No answer" - num = row.children.length; + index = row.children.length - 1; } - const index = num - 1; if (!(0 <= index && index < row.children.length)) { return; } - const maybeNextElement = row - .children[index] - .getElementsByClassName("num-selectable"); - if (maybeNextElement.length === 1) { - maybeNextElement[0].click(); - } + const nextElement = row.children[index]; + nextElement.click(); } const studentForm = document.getElementById("student-vote-form"); @@ -459,7 +449,7 @@ return; e.preventDefault(); - const textAnswerButton = wholeRow.querySelector("[data-toggle=\"collapse\"]"); + const textAnswerButton = wholeRow.querySelector("[data-bs-toggle=\"collapse\"]"); const textField = wholeRow.querySelector("textarea.tab-selectable"); if (textAnswerButton !== null && textField !== null) { if (isInvisible(textField)) @@ -500,7 +490,7 @@ e.preventDefault(); let nextElement; - const alreadySelectedElement = nextRow.querySelector(".active .tab-selectable"); + const alreadySelectedElement = nextRow.querySelector(".tab-selectable:checked"); if (alreadySelectedElement) { nextElement = alreadySelectedElement; diff --git a/evap/student/templates/student_vote_questionnaire_group.html b/evap/student/templates/student_vote_questionnaire_group.html index 0e02f8f09c0cb445895eef664242868c510a282c..a5c27c522742f572b0c279a9142f5bfcc66fbed7 100644 --- a/evap/student/templates/student_vote_questionnaire_group.html +++ b/evap/student/templates/student_vote_questionnaire_group.html @@ -19,13 +19,13 @@ <div class="row row-question"> {% endif %} {% if field|is_choice_field %} - <div class="col-question col-lg-4 col-xl-5 d-flex justify-content-between {% if field.errors %} choice-error{% endif %}"> - <span class="mr-1"> + <div class="col-question col-lg-4 col-xl-5 d-flex justify-content-between{% if field.errors %} choice-error{% endif %}"> + <span class="me-1"> {{ field.label }} </span> {% if allows_textanswer %} - <span class="my-auto" data-toggle="tooltip" title="{% trans 'Add a text answer to this question' %}"> - <button type="button" class="btn btn-textanswer collapsed" data-toggle="collapse" data-target=".collapse-{{ field.name }}"> + <span class="my-auto" data-bs-toggle="tooltip" data-container=".col-question" title="{% trans 'Add a text answer to this question' %}"> + <button type="button" class="btn btn-textanswer collapsed" data-bs-toggle="collapse" data-bs-target=".collapse-{{ field.name }}"> <span class="far fa-comment"></span> </button> </span> @@ -43,10 +43,10 @@ {% endif %} {% if field|is_choice_field %} <div class="col-answer col-lg-8 col-xl-7 my-auto d-flex"> - <div class="vote-inputs tab-row {{ field.field.widget.attrs.choices.cssClass }} btn-group btn-group-toggle" data-toggle="buttons"> + <div class="vote-inputs tab-row {{ field.field.widget.attrs.choices.cssClass }} btn-group" data-bs-toggle="buttons"> {% for choice, color in field|zip:field.field.widget.attrs.choices.colors %} - <label class="btn btn-sm vote-btn vote-btn-{{ color }} d-flex{% if field.value == choice.data.value %} active{% endif %}{% if field.errors %} choice-error{% endif %}"> - <input id="{{ choice.id_for_label }}" class="tab-selectable num-selectable" name="{{ choice.data.name }}" type="radio" value="{{ choice.data.value }}" autocomplete="off"{% if field.value == choice.data.value %} checked{% endif %}{% if preview %} disabled{% endif %}/> + <input id="{{ choice.id_for_label }}" class="tab-selectable num-selectable btn-check" name="{{ choice.data.name }}" type="radio" value="{{ choice.data.value }}" autocomplete="off"{% if field.value == choice.data.value %} checked{% endif %}{% if preview %} disabled{% endif %}/> + <label for="{{ choice.id_for_label }}" class="btn btn-sm vote-btn vote-btn-{{ color }} d-flex{% if field.value == choice.data.value %} active{% endif %}{% if field.errors %} choice-error{% endif %}"> <span class="m-auto vote-btn-text">{{ choice.choice_label|linebreaksbr }} {{ choice.id }}</span> </label> {% endfor %}