Migrate from Bootstrap 4.5 to Bootstrap 5.3

Author: salzig

.gitignore

@@ -22,3 +22,4 @@ Vagrantfile
 .ruby-gemset
 passenger.*
 .byebug_history
+.sass-cache

Gemfile

@@ -30,7 +30,7 @@ gem 'validate_url'
 gem 'whitelabel'
 
 # assets
-gem 'bootstrap', '~> 4.5'
+gem 'bootstrap', '~> 5.3'
 gem 'font-awesome-rails'
 gem 'sass-rails'
 gem 'uglifier'

Gemfile.lock

@@ -79,14 +79,11 @@ GEM
       logger
       rack
     ast (2.4.2)
-    autoprefixer-rails (10.4.19.0)
-      execjs (~> 2)
     base64 (0.2.0)
     bigdecimal (3.1.9)
     bindex (0.8.1)
-    bootstrap (4.6.2.1)
-      autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.16.1, < 2)
+    bootstrap (5.3.5)
+      popper_js (>= 2.11.8, < 3)
     builder (3.3.0)
     byebug (11.1.3)
     childprocess (5.1.0)
@@ -267,7 +264,7 @@ GEM
     partially_useful (6.0.0)
       railties (>= 4.1)
     pg (1.4.6)
-    popper_js (1.16.1)
+    popper_js (2.11.8)
     pry (0.15.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -442,7 +439,7 @@ DEPENDENCIES
   addressable
   administrate
   appsignal
-  bootstrap (~> 4.5)
+  bootstrap (~> 5.3)
   byebug
   dalli
   decent_exposure

app/assets/javascripts/application.js

@@ -5,13 +5,12 @@
  */
 //= require jquery
 //= require jquery_ujs
-//= require bootstrap
+//= require popper
+//= require bootstrap-sprockets
 //= require vendor/jquery.collapser
-//= require navi
 //= require utility
 //= require custom
 //= require map
-//= require dropdown
 
 $(function() {
   Utility.disable();

app/assets/javascripts/navi.js

@@ -19,6 +19,9 @@ $border: 1px solid $border-color
 $border-radius: calc(0.25rem - 1px)
 $ruby-red: #C81B47
 
+.fa
+  color: $title-color
+
 @mixin userimage($size)
   width: $size
   height: $size

app/assets/stylesheets/application.sass

@@ -1,53 +1,54 @@
 nav.navbar.sticky-top.navbar-expand-lg#nav
   .label
-    = link_to(root_path(anchor: :on_ruby), class: 'navbar-brand pl-4') do
+    = link_to(root_path(anchor: :on_ruby), class: 'navbar-brand ps-4') do
       = image_tag("labels/#{Whitelabel[:label_id]}.png", title: title, class: "d-inline-block align-bottom label")
       .d-none.d-sm-inline.d-md-inline.d-lg-none= I18n.tw('name')
 
-  button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation")
+  button.navbar-toggler(type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation")
     = fa_icon('bars', class: 'fa-fw')
 
   #navbarSupportedContent.collapse.navbar-collapse
-    ul.navbar-nav.mr-auto.justify-content-center.flex-fill
+    ul.navbar-nav.me-auto.justify-content-center.flex-fill
       - [:events, :topics, :people, :locations].each do |section|
-        li.nav-item.ml-4
+        li.nav-item.ms-4
           = link_to(root_path(anchor: section), class: 'nav-link') do
             = fa_icon(section, class: 'fa-fw', text: t("main.#{section}"))
 
-    ul.navbar-nav.ml-auto
-      li.nav-item.dropdown.pr-4
+    ul.navbar-nav.ms-auto
+      li.nav-item.dropdown.pe-4
         - if signed_in?
-          a(class="nav-link btn btn-light dropdown-toggle" href="#" id="loginDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false")
-            = user_image(current_user)
-            = t('login.profile')
-          .dropdown-menu.dropdown-menu-right(aria-labelledby="loginDropdown")
-            = link_to(user_path(current_user), class: 'dropdown-item') do
-              = fa_icon('eye', class: 'fa-fw', text: t("login.show_profile"))
-
-            = link_to(edit_user_path(current_user), class: 'dropdown-item') do
-              = fa_icon('edit', class: 'fa-fw', text: t("login.edit_profile"))
-
-            = link_to(destroy_session_path(current_user), class: 'dropdown-item') do
-              = fa_icon('times', class: 'fa-fw', text: t("login.logout"))
-
-            - if current_user.admin?
-              = link_to('/admin', class: 'dropdown-item') do
-                = fa_icon('lock', class: 'fa-fw', text: 'Community-Admin')
-            - if current_user.super_admin?
-              = link_to('/super_admin', class: 'dropdown-item') do
-                = fa_icon('lock', class: 'fa-fw', text: 'Super-Admin')
+          .dropdown
+            a.btn.btn-light.dropdown-toggle.nav-link(href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false")
+              = user_image(current_user)
+              = t('login.profile')
+            ul.dropdown-menu.dropdown-menu-right(aria-labelledby="loginDropdown")
+              li= link_to(user_path(current_user), class: 'dropdown-item') do
+                = fa_icon('eye', class: 'fa-fw', text: t("login.show_profile"))
+
+              li= link_to(edit_user_path(current_user), class: 'dropdown-item') do
+                = fa_icon('edit', class: 'fa-fw', text: t("login.edit_profile"))
+
+              li= link_to(destroy_session_path(current_user), class: 'dropdown-item') do
+                = fa_icon('times', class: 'fa-fw', text: t("login.logout"))
+
+              - if current_user.admin?
+                li= link_to('/admin', class: 'dropdown-item') do
+                  = fa_icon('lock', class: 'fa-fw', text: 'Community-Admin')
+              - if current_user.super_admin?
+                li= link_to('/super_admin', class: 'dropdown-item') do
+                  = fa_icon('lock', class: 'fa-fw', text: 'Super-Admin')
 
         - else
-          a(class="nav-link btn btn-primary dropdown-toggle" href="#" id="loginDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false")
+          a(class="nav-link btn btn-primary dropdown-toggle" href="#" id="loginDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false")
             =  t('login.login')
           .dropdown-menu.dropdown-menu-right(aria-labelledby="loginDropdown")
             - login_providers.each do |provider|
               = button_to(label_auth_url(provider), class: 'dropdown-item') do
                 = fa_icon(icon_for_provider(provider), class: 'fa-fw', text: t("login.#{provider}_login"))
 
 
-      li.nav-item.dropdown.pr-4
-        a(class="nav-link btn btn-light dropdown-toggle" href="#" id="localeDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false")
+      li.nav-item.dropdown.pe-4
+        a(class="nav-link btn btn-light dropdown-toggle" href="#" id="localeDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false")
           = t("languages.#{I18n.locale}")
         .dropdown-menu.dropdown-menu-right(aria-labelledby="localeDropdown")
           - I18n.available_locales.each do |locale|

app/views/application/_nav.slim

@@ -1,13 +1,13 @@
-span.badge.badge-card-header.mr-2
+span.badge.badge-card-header.me-2
   = fa_icon('calendar', text: link_to(l(event.date, format: :long), event_path(event, format: :ics)))
 - if event.location.present? && !event.location.virtual?
-  span.badge.badge-card-header.mr-2
+  span.badge.badge-card-header.me-2
     = fa_icon('map-marker', text: link_to(event.location.address, '#route', title: event.location.address))
-  span.badge.badge-card-header.mr-2
+  span.badge.badge-card-header.me-2
     = fa_icon('external-link', text: link_to_external_route(event.location))
 - if Whitelabel[:coc].present?
-  span.badge.badge-card-header.mr-2
+  span.badge.badge-card-header.me-2
     = fa_icon('file-text-o', text: link_to('Code of Conduct', Whitelabel[:coc], target: '_blank'))
 - if event.github_issue?
-  span.badge.badge-card-header.mr-2
+  span.badge.badge-card-header.me-2
     = fa_icon('github', text: link_to('Github Planning Issue', github_issue_url(event.github_issue), target: '_blank'))

app/views/events/_badges.slim

@@ -1,3 +1,4 @@
-.card-columns
-  - users.each do |user|
-    = render(user)
+.container.my-4
+  .row.row-cols-1.row-cols-md-3
+    - users.each do |user|
+      .col= render(user)

app/views/users/_list.slim

@@ -1,9 +1,9 @@
-.card
-  .card-body
+.card.my-2
+  .card-body.position-relative
     .pull-left
       - if user.organizer?
-        span.badge.badge-card-header.badge-organizer
-          = fa_icon('star', text: 'Organizer')
+        span.position-absolute.ms-5.top-0.translate-middle.badge.p-2.text-bg-light.border.border-light.rounded-border
+          = fa_icon "star", text: "Organizer"
       = link_to(user) do
         = user_image(user, image_class: 'card-img-topic')