form changes

evap/contributor/templates/contributor_evaluation_form.html

@@ -32,19 +32,19 @@
             <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>
@@ -52,7 +52,7 @@
                     </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>
                     </div>

evap/evaluation/templates/bootstrap_form_field.html

 {% 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>

evap/evaluation/templates/bootstrap_form_pill_group.html

-<div class="form-group d-md-flex">
+<div class="mb-3 d-md-flex">
     <div class="col-md-2">
         <div class="nav nav-pills btn-switch btn-group-vertical float-right" role="tablist">
             {% for field in fields %}

evap/evaluation/templates/confirmation_text_modal.html

@@ -13,7 +13,7 @@
                 <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>

evap/evaluation/templates/contact_modal.html

@@ -24,15 +24,15 @@
                 <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>

evap/evaluation/templates/evaluation_form_general_questionnaires.html

 <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 %}

evap/evaluation/templates/navbar.html

@@ -96,7 +96,7 @@
             <li class="nav-item btn-switch-navbar my-auto">
                 <div class="btn-group">
                     {% for language_code, language_name in languages %}
-                        <form class="form-inline" method="post" action="{% url 'evaluation:set_lang' %}">
+                        <form 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 }}')"
@@ -111,13 +111,13 @@
                 {% if user.has_staff_permission %}
                     <li class="nav-item btn-switch-navbar my-auto pl-2">
                         <div class="btn-group">
-                            <form class="form-inline" method="post" action="{% url 'staff:exit_staff_mode' %}">
+                            <form 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')">
                                     <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" 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')">
                                     <span id="span-enter-staff-mode" class="fas fa-briefcase"></span>

evap/staff/templates/staff_email_preview_form.html

@@ -7,12 +7,12 @@
             <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="mb-3 d-flex">
+                <div class="form-label pe-4">
                     <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">
                             {% trans 'Plain Text' %}

evap/staff/templates/staff_evaluation_email.html

@@ -17,7 +17,7 @@
                             {% 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">
+                                        <div class="mb-3 d-flex">
                                             {% include 'bootstrap_form_field_label.html' with field=field class='col-md-2' %}
                                             <div class="col-md-7{% if field.errors %} is-invalid{% endif %}">
                                                 <div class="btn-group btn-group-toggle mb-1" data-toggle="buttons">

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;
 }
\ No newline at end of file
-
-/* 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: shade-color($light-gray, 20%);
-    }
-
-    &:checked:hover ~ .form-check-label::before {
-        background-color: shade-color($evap-dark-blue, 20%);
-    }
-
-    &: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;
-    }
-}

evap/static/scss/evap.scss

@@ -95,7 +95,7 @@ body {
     }
 }
 
-.card-body .form-group:last-of-type {
+.card-body .mb-3:last-of-type {
     margin-bottom: 0;
 }