Merge pull request #1917 from laws-africa/boostrapv5

Bootstrap v5

VERSION

@@ -1 +1 @@
-18.0.0
+19.0.0

bluebell_migration/templates/indigo_api/work_bb_migration.html

@@ -15,8 +15,8 @@ <h4>Bluebell Migration</h4>
         <li>
           <a href="{% url 'bb_migrate_document' frbr_uri=doc.frbr_uri doc_id=doc.id %}">
             {{ doc }}
-            {% if doc.deleted %}<span class="badge badge-info">deleted</span>{% endif %}
-            {% if doc.must_migrate %}<span class="badge badge-warning">must migrate</span>{% endif %}
+            {% if doc.deleted %}<span class="badge text-bg-info">deleted</span>{% endif %}
+            {% if doc.must_migrate %}<span class="badge text-bg-warning">must migrate</span>{% endif %}
           </a>
         </li>
       {% endfor %}

bluebell_migration/templates/indigo_api/work_bb_migration_doc.html

@@ -12,7 +12,7 @@
   <div class="container-fluid pt-3 pb-5">
     <h4>
       {% if doc.deleted %}
-        #{{ doc.pk }} {{ doc.title }} <span class="badge badge-info">deleted</span>
+        #{{ doc.pk }} {{ doc.title }} <span class="badge text-bg-info">deleted</span>
       {% else %}
         <a href="{% url 'document' doc_id=doc.pk %}">#{{ doc.pk }} {{ doc.title }}</a>
       {% endif %}
@@ -29,7 +29,7 @@ <h4>
 
       <ul class="nav nav-tabs mb-3">
         <li class="nav-item">
-          <a class="nav-link active" href="#stability" data-toggle="tab">
+          <a class="nav-link active" href="#stability" data-bs-toggle="tab">
             Stability check
             {% if stability_passed %}
               <i class="fa fa-check-circle text-success"></i>
@@ -40,7 +40,7 @@ <h4>
         </li>
 
         <li class="nav-item">
-          <a class="nav-link" href="#content-fingerprint" data-toggle="tab">
+          <a class="nav-link" href="#content-fingerprint" data-bs-toggle="tab">
             Content fingerprint check
             {% if content_fingerprint_passed %}
               <i class="fa fa-check-circle text-success"></i>
@@ -51,7 +51,7 @@ <h4>
         </li>
 
         <li class="nav-item">
-          <a class="nav-link" href="#validation" data-toggle="tab">
+          <a class="nav-link" href="#validation" data-bs-toggle="tab">
             Validation
             {% if validates %}
               <i class="fa fa-check-circle text-success"></i>
@@ -62,15 +62,15 @@ <h4>
         </li>
 
         <li class="nav-item">
-          <a class="nav-link" href="#migrated-xml" data-toggle="tab">Original vs migrated XML</a>
+          <a class="nav-link" href="#migrated-xml" data-bs-toggle="tab">Original vs migrated XML</a>
         </li>
 
         <li class="nav-item">
-          <a class="nav-link" href="#migrated-unparsed" data-toggle="tab">Original vs migrated unparsed</a>
+          <a class="nav-link" href="#migrated-unparsed" data-bs-toggle="tab">Original vs migrated unparsed</a>
         </li>
 
         <li class="nav-item">
-          <a class="nav-link" href="#migrated-quality" data-toggle="tab">Re-parsed XML vs migrated XML</a>
+          <a class="nav-link" href="#migrated-quality" data-bs-toggle="tab">Re-parsed XML vs migrated XML</a>
         </li>
       </ul>
 

indigo/settings.py

@@ -284,7 +284,7 @@
                 'bower_components/underscore/underscore-min.js',
                 'bower_components/backbone/backbone.js',
                 'bower_components/backbone.stickit/backbone.stickit.js',
-                'lib/bootstrap-4.3.1/dist/js/bootstrap.bundle.min.js',
+                'lib/bootstrap-5.3.2/dist/js/bootstrap.bundle.min.js',
                 'lib/bootstrap-select/js/bootstrap-select.min.js',
                 'bower_components/handlebars/handlebars.min.js',
                 'bower_components/moment/min/moment.min.js',

indigo_app/js/components/TaxonomyTOC.vue

@@ -70,7 +70,7 @@ export default {
 
       if (tocItem.item.data.count !== undefined && !action.querySelector('.badge')) {
         const count = document.createElement('div');
-        count.className = 'badge bg-light';
+        count.className = 'badge text-bg-light';
         count.innerText = (tocItem.item.data.count || '0') + (tocItem.item.children ? `/${tocItem.item.data.total}` : '');
         action.appendChild(count);
       }

indigo_app/js/timestamps.js

@@ -1,16 +1,18 @@
 import { DateTime } from 'luxon';
-
 export function relativeTimestamps (root) {
   // show timestamps as relative times
-  for (const el of (root || document).querySelectorAll('.time-ago[data-timestamp]')) {
-    const ts = DateTime.fromISO(el.getAttribute('data-timestamp'));
+  const elements = (root || document).querySelectorAll('.time-ago[data-timestamp]');
 
+  elements.forEach((el) => {
+    const ts = DateTime.fromISO(el.getAttribute('data-timestamp'));
     el.innerText = ts.toRelative();
+
     if (!el.getAttribute('title')) {
-      el.setAttribute('title', ts.toLocaleString(DateTime.DATETIME_FULL));
-      $(el).tooltip();
+      el.dataset.bsToggle = 'tooltip';
+      el.dataset.bsPlacement = 'top';
+      el.dataset.bsTitle = ts.toLocaleString(DateTime.DATETIME_FULL);
     }
-  }
+  });
 }
 
 function tickTock () {

indigo_app/static/javascript/indigo.js

@@ -72,9 +72,9 @@ function bootstrapIndigo(exports) {
   $.fn.datepicker.defaults.autoclose = true;
 
   // tooltips
-  $('[title]:not(.notooltip)').tooltip({
-    container: 'body',
-    placement: 'auto',
+  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"], [title]:not(.notooltip)'))
+  tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
   });
 
   // stash the query string params, if any

indigo_app/static/javascript/indigo/views/annotations.js

@@ -101,7 +101,7 @@
       this.$el
           .find('.button-container')
           .append('<button class="btn btn-primary btn-sm save">Save</button>')
-          .append('<button class="btn btn-outline-secondary btn-sm unedit float-right">Cancel</button>')
+          .append('<button class="btn btn-outline-secondary btn-sm unedit float-end">Cancel</button>')
           .end()
           .find('.content')
           .replaceWith($textarea);