Migracja Bootstrapa do wersji 5 (#1366)

Podsumowanie większości modyfikacji, w zasadniczej części odpowiadających analogicznym zmianom w Bootstrapie: * _Namespacing_ atrybutów (zamiana `data-{toggle,trigger,content,dismiss,target}` na odpowiednio `data-bs-{toggle,trigger,content,dismiss,target}`) oraz zmiennych SCSS (`--red` → `--bs-red` itd.) * Zmiana nomenklatury klas `{float,text}-left` → `{float,text}-start`, `{float,text}-right` → `{float,text}-end`, `ml-X` → `ms-X`, `mr-X` → `me-X` itd. * Zastąpienie dedykowanych klas stylujących `badge-X` (wycofanych) przez bardziej ogólne `bg-X` i ew. `text-Y`, podobnie w nagłówkach niektórych tabel efekt wycofanej `thead-dark` daje teraz `table-dark`. * Zamiana rozmiarów `display-{1,3}` (mocno przedefiniowanych) na odpowiednio `display-{5,6}` (nowo wprowadzone). * Przebudowanie kilku typowych elementów (wycofany `jumbotron` buduje się w BS5 z bardziej ogólnych klas, `accordion` składa się z elementów `accordion-item` a nie `card`, przycisk do zamykania modali w całości zdefiniowany jest stylami i nie potrzeba podawać jego zawartości). * Usunięcie wycofywanych klas `form-row` (zamiana na `row`), `input-group-{append,prepend}` itd. * Okazjonalne poprawki marginesów, które przestały dobrze wyglądać. * Wykorzystanie `bootstrap-print-css` (nowa zależność) dla zachowania styli do druku wycofanych w BS5. * Przekonfigurowanie `fullcalendar`. * Poprawki w kilku kawałkach JS, które przestały działać – w wyborze sali do rezerwacji, wyświetlaniu pytania o zgodę na przetwarzanie danych, i dymkach dla grup z autozapisem. Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: KaMaCH12 <51365804+KaMaCH12@users.noreply.github.com> Co-authored-by: Bartosz Cieślik <Bartosz-lab@users.noreply.github.com> Co-authored-by: Bogusz Kaszowski <bkaszowski@users.noreply.github.com> Co-authored-by: Cezary Świtała <MusicFreak456@users.noreply.github.com> Co-authored-by: Karolina Lubczańska <lubczanska@users.noreply.github.com> Co-authored-by: Hello, Yes, This Is Dog <lgpawel@users.noreply.github.com>
iiuni · Oct 6, 2023 · e630b44 · e630b44
1 parent 86e162d
commit e630b44
Show file tree

Hide file tree

Showing 73 changed files with 604 additions and 460 deletions.
diff --git a/zapisy/apps/common/assets/main/expose_libs.ts b/zapisy/apps/common/assets/main/expose_libs.ts
@@ -1,13 +1,15 @@
 import $ from "jquery";
 import Popper from "popper.js";
+import * as bootstrap from "bootstrap";
 
 (window as any).$ = $;
 (window as any).jQuery = $;
 (window as any).Popper = Popper;
 
-import "bootstrap";
-
-$(function () {
-  // Enable Bootstrap popovers on entire site.
-  $('[data-toggle="popover"]').popover();
+window.addEventListener("load", () => {
+  Array.from(document.querySelectorAll('[data-bs-toggle="popover"]')).map(
+    function (popoverTriggerEl) {
+      return new bootstrap.Popover(popoverTriggerEl);
+    }
+  );
 });
diff --git a/zapisy/apps/common/assets/main/index.scss b/zapisy/apps/common/assets/main/index.scss
@@ -1,5 +1,6 @@
 @import "variables";
 @import "~bootstrap/scss/bootstrap";
+@import "~bootstrap-print-css/css/bootstrap-print";
 
 @page {
   size: auto;
@@ -17,24 +18,102 @@ footer {
   margin-top: auto;
   padding-top: 5rem;
   .container-fluid {
-    background-color: var(--light);
     padding: 1rem 0;
     p {
       margin: 0.5rem 0;
     }
   }
 }
 
+.form-group {
+  margin-bottom: 1rem !important;
+}
+
+.form-group > label {
+  margin-bottom: 0.5rem;
+}
+
+.custom-select {
+  @extend .form-select !optional;
+}
+
+.nav-link:hover {
+  text-decoration: none;
+}
+
+.btn:hover,
+.btn:focus,
+.page-link:hover,
+.page-link:focus {
+  text-decoration: none;
+}
+
+.btn-link {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.btn-link:hover,
+.btn-link:focus {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+.btn-outline-info:hover,
+.btn-outline-info:active {
+  color: white !important;
+}
+
 a {
   cursor: pointer;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a.badge {
+  text-decoration: none;
+}
+
+a.badge:hover {
+  color: #fff;
+}
+
+a.bg-secondary:hover,
+a.bg-secondary:focus {
+  background-color: #545b62 !important;
+}
+
+a.bg-info:hover,
+a.bg-info:focus {
+  background-color: #117a8b !important;
+}
+
+a.bg-success:hover,
+a.bg-success:focus {
+  background-color: #00401e !important;
+}
+
+a.bg-info:focus {
+  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
+}
+
+a.bg-success:focus {
+  box-shadow: 0 0 0 0.2rem rgba(0, 115, 54, 0.5);
+}
+
+a.bg-secondary:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
 }
 
 @media print {
   // Some browsers do not handle printing layouts with flexbox. This should be
   // fixed in Bootstrap.
   // https://github.com/twbs/bootstrap/issues/26781
-  .row,
-  .form-row {
+  .row {
     display: block;
   }
 }
@@ -93,6 +172,9 @@ div.top .topbar .inline-inputs label {
 #sidebar {
   @media (max-width: 992px) {
     #sidebar-inner {
+      /* :after will position itself against nearest positioned parent, so we
+       * need to ensure that it will be this sidebar */
+      position: relative;
       overflow-y: hidden;
 
       &.folded {
@@ -102,9 +184,7 @@ div.top .topbar .inline-inputs label {
         &:after {
           position: absolute;
           display: block;
-          // Height of the card footer.
-          bottom: 1.5em;
-          left: 0;
+          bottom: 0;
           height: 50%;
           width: 100%;
           content: "";
@@ -139,6 +219,7 @@ div.loginbox {
 
 #system_menu {
   width: 100%;
+  padding: unset;
   ul#main-menu-list {
     flex-wrap: nowrap;
     overflow-x: auto;
@@ -170,17 +251,17 @@ colgroup col.table-info-type {
 // Required field marker in forms.
 .asteriskField {
   padding-left: 0.25em;
-  color: var(--red);
+  color: var(--bs-red);
 }
 
 // News items on the main page and the news page.
 .od-news-item {
   margin: 2rem 0;
   padding: 4rem;
-  background: var(--light);
+  background: var(--bs-light);
 
   .od-news-date {
-    color: var(--dark);
+    color: var(--bs-dark);
     font-style: italic;
     display: block;
     @media (min-width: 992px) {
@@ -204,3 +285,7 @@ colgroup col.table-info-type {
     transition: transform 250ms;
   }
 }
+
+.background-gray {
+  background-color: $gray-200;
+}
diff --git a/zapisy/apps/common/assets/markdown/render-markdown.scss b/zapisy/apps/common/assets/markdown/render-markdown.scss
@@ -2,8 +2,8 @@
 // because H1 used in the markdown description should not be larger than h2
 // before it.
 
-// We are importing Boostrap variables to relate our font sizes to those from
-// Boostrap.
+// We are importing Bootstrap variables to relate our font sizes to those from
+// Bootstrap.
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 

diff --git a/zapisy/apps/effects/templates/effects.html b/zapisy/apps/effects/templates/effects.html
@@ -2,7 +2,7 @@
     <th>Zrealizowane grupy efektów kształcenia</th>
     <td>
         {% for effect in effects %}
-            <span class="badge badge-info mr-2">{{ effect }}</span>
+            <span class="badge bg-info me-2">{{ effect }}</span>
         {% endfor %}
     </td>
 </tr>
diff --git a/zapisy/apps/enrollment/courses/templates/courses/base.html b/zapisy/apps/enrollment/courses/templates/courses/base.html
@@ -3,13 +3,13 @@
 
 {% block sidebar %}
     <div class="dropdown">
-        <div class="btn-group btn-block mb-3">
+        <div class="btn-group btn-block mb-3 w-100">
             <button class="btn btn-light" disabled>
                 <strong>Semestr {{ semester }}</strong>    
             </button>
             <button class="btn btn-light dropdown-toggle dropdown-toggle-split"
                     href="#" role="button" id="semester-dropdown" 
-                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <span class="sr-only"></span>
             </button>
 

diff --git a/zapisy/apps/enrollment/courses/templates/courses/course_parts/course_head.html b/zapisy/apps/enrollment/courses/templates/courses/course_parts/course_head.html
@@ -6,10 +6,10 @@ <h1 class="d-inline-block">
         <small class="text-muted">{{ course.semester.get_short_name }}</small>
     </h1>
     <div class="btn-group" role="group" aria-label="Basic example">
-        <a class="btn btn-sm btn-outline-info float-right align-bottom" href="{% url 'course-student-list' course.slug %}">Lista</a>
+        <a class="btn btn-sm btn-outline-info float-end align-bottom" href="{% url 'course-student-list' course.slug %}">Lista</a>
         {% if user.is_staff or course.owner == request.user.employee %}
             {% if course.semester.is_current_semester %}
-                <a class="btn btn-sm btn-outline-info float-right align-bottom" href="{% url 'proposal-edit' course.offer.slug %}">Edytuj</a>
+                <a class="btn btn-sm btn-outline-info float-end align-bottom" href="{% url 'proposal-edit' course.offer.slug %}">Edytuj</a>
             {% endif %}
         {% endif %}
     </div>
@@ -71,7 +71,7 @@ <h1 class="d-inline-block">
             <th scope="row">Tagi</th>
             <td>
                 {% for tag in course.tags.all %}
-                    <span class="badge badge-success mr-2">{{ tag }}</span>
+                    <span class="badge bg-success me-2">{{ tag }}</span>
                 {% endfor %}
             </td>
         </tr>
@@ -81,7 +81,7 @@ <h1 class="d-inline-block">
             <th>Grupy efektów kształcenia</th>
             <td>
                 {% for effect in course.effects.all %}
-                    <span class="badge badge-info mr-2">{{ effect }}</span>
+                    <span class="badge bg-info me-2">{{ effect }}</span>
                 {% endfor %}
             </td>
         </tr>

diff --git a/zapisy/apps/enrollment/courses/templates/courses/course_parts/groups_section.html b/zapisy/apps/enrollment/courses/templates/courses/course_parts/groups_section.html
@@ -4,15 +4,15 @@
 <div class="table-responsive tutorial">
     <h3 class="d-inline-block">{{ class_type|decode_class_type_plural }}
     </h3>
-    <a class="btn btn-sm btn-outline-info float-right align-bottom" href="{% url 'class-type-student-list' course.slug class_type %}">Lista</a>
+    <a class="btn btn-sm btn-outline-info float-end align-bottom" href="{% url 'class-type-student-list' course.slug class_type %}">Lista</a>
     {% if class_type in waiting_students %}
-        <span class="badge badge-danger d-inline-block align-text-bottom ml-2">
+        <span class="badge bg-danger d-inline-block align-text-bottom ms-2">
             Niezapisanych&mdash;oczekujących
-            <span class="badge badge-light">{{ waiting_students|lookup:class_type }}</span>
+            <span class="badge text-dark bg-light">{{ waiting_students|lookup:class_type }}</span>
         </span>
     {% endif %}
     <table class="table table-bordered text-center">
-        <thead class="thead-dark">
+        <thead class="table-dark">
             <tr>
                 <th>Prowadzący</th>
                 <th scope="col">Termin zajęć</th>
@@ -42,7 +42,7 @@ <h3 class="d-inline-block">{{ class_type|decode_class_type_plural }}
                         {% endif %}
                         <br>
                         {% for tag, tooltip in group.get_extra_tags %}
-                            <span class="badge badge-secondary" {% if tooltip %}title="{{ tooltip }}"{% endif %}>{{ tag }}</span>
+                            <span class="badge bg-secondary" {% if tooltip %}title="{{ tooltip }}"{% endif %}>{{ tag }}</span>
                         {% endfor %}
                     </td>
                     <td>
@@ -90,8 +90,8 @@ <h3 class="d-inline-block">{{ class_type|decode_class_type_plural }}
                             </form>
                             {% elif group.auto_enrollment %}
                             <div class="d-inline-block"
-                                 data-toggle="popover" data-trigger="hover" tabindex="0"
-                            data-content="Grupa z auto-zapisem. Stan tej grupy
+                                 data-bs-toggle="popover" data-bs-trigger="hover" tabindex="0"
+                                 data-bs-content="Grupa z auto-zapisem. Stan tej grupy
                                           jest automatycznie synchronizowany z innymi grupami
                                           tego przedmiotu. Zapisz się do innych grup, a
                                           automatycznie się w niej znajdziesz.">
@@ -131,4 +131,4 @@ <h3 class="d-inline-block">{{ class_type|decode_class_type_plural }}
         <p><strong>UWAGA!</strong>
             Wyższa liczba oznacza wyższy priorytet, po zapisaniu do grupy zostajemy usunięci z kolejek o niższym priorytecie.
         </p>
-    </div>
+    </div>
diff --git a/zapisy/apps/enrollment/courses/templates/courses/group.html b/zapisy/apps/enrollment/courses/templates/courses/group.html
@@ -63,7 +63,7 @@ <h3>Lista osób zapisanych na przedmiot:</h3>
                 + 
                 <span title="Miejsca gwarantowane dla grupy {{gs.role.name}}.">
                     {{ gs.limit }}
-                    <span class="badge badge-dark">{{ gs.role.name }}</span>
+                    <span class="badge bg-dark">{{ gs.role.name }}</span>
                 </span>
             {% endfor %}
         </p>

diff --git a/zapisy/apps/enrollment/courses/templates/courses/students_list.html b/zapisy/apps/enrollment/courses/templates/courses/students_list.html
@@ -26,7 +26,7 @@
             <td>{{ student.semestr }}</td>
             <td>
                 {% for tag in student.guaranteed %}
-                    <span class="badge badge-dark">{{ tag }}</span>
+                    <span class="badge bg-dark">{{ tag }}</span>
                 {% endfor %}
             </td>
         </tr>

diff --git a/zapisy/apps/enrollment/timetable/assets/components/CourseFilter.vue b/zapisy/apps/enrollment/timetable/assets/components/CourseFilter.vue
@@ -75,7 +75,7 @@ export default Vue.extend({
             filterKey="tags-filter"
             property="tags"
             :allLabels="allTags"
-            onClass="badge-success"
+            onClass="bg-success"
             ref="tags-filter"
           />
         </div>
@@ -93,7 +93,7 @@ export default Vue.extend({
             filterKey="effects-filter"
             property="effects"
             :allLabels="allEffects"
-            onClass="badge-info"
+            onClass="bg-info"
             ref="effects-filter"
           />
         </div>
@@ -154,7 +154,7 @@ export default Vue.extend({
   }
 }
 
-// Follows the Bootstrap 4 media query breakpoint.
+// Follows the Bootstrap 5 media query breakpoint.
 @media (max-width: 767px) {
   .col-md + .col-md {
     border-top: 1px solid rgba(0, 0, 0, 0.1);

diff --git a/zapisy/apps/enrollment/timetable/assets/components/TermControls.vue b/zapisy/apps/enrollment/timetable/assets/components/TermControls.vue
@@ -190,7 +190,7 @@ export default class TermControlsComponent extends TermControlsProps {
 }
 
 // For devices with large screens where days are displayed one below another.
-// Bootstrap's convention: https://getbootstrap.com/docs/4.5/layout/overview/#containers
+// Bootstrap's convention: https://getbootstrap.com/docs/5.0/layout/containers/
 @media (max-width: 992px) {
   .controls {
     position: absolute;

diff --git a/zapisy/apps/enrollment/timetable/assets/components/filters/LabelsFilter.vue b/zapisy/apps/enrollment/timetable/assets/components/filters/LabelsFilter.vue
@@ -107,7 +107,7 @@ export default Vue.extend({
       href="#"
       v-for="l in allLabelIds"
       class="badge"
-      v-bind:class="[selected[l] ? onClass : 'badge-secondary']"
+      v-bind:class="[selected[l] ? onClass : 'bg-secondary']"
       @click.prevent="toggle(l)"
     >
       {{ allLabels[l] }}

diff --git a/zapisy/apps/enrollment/timetable/assets/components/filters/SelectFilter.vue b/zapisy/apps/enrollment/timetable/assets/components/filters/SelectFilter.vue
@@ -75,7 +75,7 @@ export default Vue.extend({
 
 <template>
   <div class="input-group mb-2">
-    <select class="custom-select" v-model="selected">
+    <select class="form-select" v-model="selected">
       <option selected :value="undefined">-- {{ placeholder }} --</option>
       <option v-for="[k, o] of options" :value="k">
         {{ o }}

diff --git a/zapisy/apps/enrollment/timetable/assets/components/filters/TextFilter.vue b/zapisy/apps/enrollment/timetable/assets/components/filters/TextFilter.vue
@@ -78,14 +78,12 @@ export default Vue.extend({
       v-model="pattern"
       :placeholder="placeholder"
     />
-    <div class="input-group-append">
-      <button
-        class="btn btn-outline-secondary"
-        type="button"
-        @click="pattern = ''"
-      >
-        &times;
-      </button>
-    </div>
+    <button
+      class="btn btn-outline-secondary"
+      type="button"
+      @click="pattern = ''"
+    >
+      &times;
+    </button>
   </div>
 </template>