Upgrade to Bootstrap v5

Gemfile

@@ -28,7 +28,7 @@ gem 'active_storage_validations', '~> 1.1.3'
 
 # Assets
 gem 'jquery-rails', '~> 4.4.0'
-gem 'bootstrap-sass', '~> 3.4'
+gem 'bootstrap', '~> 5.3.3'
 gem 'sassc-rails', '~> 2.1.2'
 gem 'select2-rails', '~> 4.0.13'
 

Gemfile.lock

@@ -110,9 +110,9 @@ GEM
     bindex (0.8.1)
     bootsnap (1.18.4)
       msgpack (~> 1.2)
-    bootstrap-sass (3.4.1)
-      autoprefixer-rails (>= 5.2.1)
-      sassc (>= 2.0.0)
+    bootstrap (5.3.3)
+      autoprefixer-rails (>= 9.1.0)
+      popper_js (>= 2.11.8, < 3)
     builder (3.3.0)
     byebug (11.1.3)
     capybara (3.40.0)
@@ -261,6 +261,7 @@ GEM
     pg_search (2.3.7)
       activerecord (>= 6.1)
       activesupport (>= 6.1)
+    popper_js (2.11.8)
     prawn (2.5.0)
       matrix (~> 0.4)
       pdf-core (~> 0.10.0)
@@ -448,7 +449,7 @@ DEPENDENCIES
   activeadmin (~> 2.14)
   aws-sdk-s3 (~> 1.94)
   bootsnap (~> 1.12)
-  bootstrap-sass (~> 3.4)
+  bootstrap (~> 5.3.3)
   byebug (~> 11.0)
   capybara (~> 3.29)
   database_cleaner (~> 2.0)

app/assets/config/manifest.js

@@ -1,3 +1,4 @@
 //= link_tree ../images
+//= link_tree ../fonts
 //= link_directory ../stylesheets .css
 //= link_directory ../javascripts .js

app/assets/javascripts/application.js

@@ -6,6 +6,16 @@ $(document).on('click', 'a[data-popup]', function(event) {
   window.open($(this).attr('href'), 'popup', 'width=800,height=600');
 });
 
+$(document).on('click', 'a[data-remote][data-bs-toggle="modal"]', async function(event) {
+  event.preventDefault();
+  const url = event.currentTarget.href;
+  const target = event.currentTarget.dataset.bsTarget;
+  const response = await fetch(url);
+  const html = await response.text();
+
+  document.querySelector(target).querySelector('.modal-content').innerHTML = html;
+});
+
 $(document).on('click', 'span.show-password', function(event) {
   event.preventDefault();
 

app/assets/javascripts/application/avatar.js

@@ -1,8 +1,7 @@
 $(function () {
   $('#avatar-js').on("change", () => {
-    $('#dialog').modal({
-      show: true
-    });
+    const modal = new bootstrap.Modal(document.getElementById('dialog'));
+    modal.show();
 
     preview_image_modal();
 

app/assets/javascripts/application/tags.js

@@ -22,6 +22,8 @@ $(function() {
         $('.alpha_tag_list').html(data);
       }
     });
+    document.querySelector('.switch-tags-js .active').classList.remove('active');
+    document.querySelector(`.switch_${type == 'user' ? 'member' : type}-js`).classList.add('active');
   }
 
   $('#tags-js').select2({

app/assets/javascripts/libs.js

@@ -1,6 +1,7 @@
 //= require jquery2
 //= require jquery_ujs
 //= require vendor/jquery.validate
+//= require popper
 //= require bootstrap
 //= require vendor/highcharts
 //= require vendor/highcharts-exporting

app/assets/stylesheets/active_admin.scss

@@ -5,9 +5,7 @@ $table-stripe-color: #f5f5f5;
 @import "active_admin/mixins";
 @import "active_admin/base";
 @import "select2";
-@import "bootstrap-sprockets";
-@import "bootstrap/variables";
-@import "bootstrap/glyphicons";
+@import "application/glyphicons";
 
 .global_stats_panel div {
   display: flex;