Migrate from Bootstrap 4.5 to Bootstrap 5.3

.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/stylesheets/application.sass

@@ -8,7 +8,7 @@ $link-decoration: underline
 
 $background: white
 $container-background: image-url('whitey.png') left top repeat
-$title-color: black
+$title-color: #555
 $font: Raleway, sans-serif
 $base-font-size: 0.8em
 $nav-font-size: 1.2em
@@ -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
@@ -50,18 +53,13 @@ $ruby-red: #C81B47
     repeat: no-repeat
     position: $x $y
 
-.btn-primary
-  background-color: #666
-
-a.btn
-  text-decoration: none
-
 body
   background: image-url('whitey.png') left top repeat
 
 .badge-card-header
   background-color: $white
   border: 1px solid $border-color
+  color: $title-color
 .badge-organizer
   position: absolute
   margin-top: -30px

app/views/application/_nav.slim

@@ -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
+nav.navbar.sticky-top.navbar-expand-lg.navbar-light.bg-light#nav
+  .label.navbar-brand
+    = 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.border-0(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(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="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/events/_badges.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/_info.slim

@@ -1,5 +1,5 @@
-.row.card-title
-  .col-lg-9
+.d-flex.card-title
+  .flex-fill
     h2= link_to_event(event)
     small.text-muted
       = t("show.hosted_by")
@@ -9,7 +9,7 @@
         =< link_to_location(event.location)
       = ", #{l(event.date, format: :long)}"
 
-  .col-lg-3
+  div
     = participation_link(event, link_class: 'btn btn-primary btn-block')
     = remote_url_link(event, link_class: 'btn btn-primary btn-block')
 

app/views/events/_topics.slim

@@ -1,21 +1,22 @@
 - if event.topics.present?
   h3.card-title= t("main.topics")
 
-  .card-deck
+  .row.row-cols-1.row-cols-md-2.g-4
     - event.topics.each do |topic|
-      .card
-        .card-header
-          .pull-left
-            = link_to(topic.user) do
-              = user_image(topic.user, image_class: 'card-img-topic-header')
-          = link_to_user(topic.user)
-        .card-body
-          h5.card-title= link_to_topic(topic)
-          .card-text.collapser== markdown(topic.description)
-        - if topic.materials.present?
-          ul.list-group.list-group-flush
-            - topic.materials.each do |material|
-              li.list-group-item= link_to_material(material)
-        .card-footer
-          small.text-muted
-            = link_to t('topic.likes', count: topic.likes.count), topic
+      .col
+        .card.h-100
+          .card-header
+            .pull-left
+              = link_to(topic.user) do
+                = user_image(topic.user, image_class: 'card-img-topic-header')
+            = link_to_user(topic.user)
+          .card-body
+            h5.card-title= link_to_topic(topic)
+            .card-text.collapser== markdown(topic.description)
+          - if topic.materials.present?
+            ul.list-group.list-group-flush
+              - topic.materials.each do |material|
+                li.list-group-item= link_to_material(material)
+          .card-footer
+            small.text-muted
+              = link_to t('topic.likes', count: topic.likes.count), topic

app/views/users/_list.slim

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

app/views/users/_user.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')
 

app/views/users/index.slim

@@ -1,6 +1,6 @@
-= section_box :people do
-  .card-columns
+.container= section_box :people do
+  .row.row-cols-1.row-cols-md-3
     - users.each do |user|
-      = render(user)
+      .col= render(user)
 
   = paginate(users)

config/initializers/assets.rb

@@ -13,3 +13,5 @@
 # folder are already added.
 # Rails.application.config.assets.precompile += %w( admin.js admin.css )
 Rails.application.config.assets.precompile += %w[labels/*]
+
+Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)