Update to Bootstrap 5

Fixes #296

Gemfile

@@ -11,7 +11,7 @@ gem 'autoprefixer-rails'
 gem 'aws-sdk-s3'
 gem 'babosa'
 gem 'bootsnap', '>= 1.1.0', require: false
-gem 'bootstrap-sass'
+gem 'bootstrap', '~> 5.3.0'
 gem 'chart-js-rails'
 gem 'chartkick'
 gem 'coffee-rails'

Gemfile.lock

@@ -135,8 +135,9 @@ GEM
     bindex (0.8.1)
     bootsnap (1.18.3)
       msgpack (~> 1.2)
-    bootstrap-sass (3.4.1)
-      autoprefixer-rails (>= 5.2.1)
+    bootstrap (5.3.0)
+      autoprefixer-rails (>= 10.4.0)
+      popper_js (>= 2.11.6)
       sassc (>= 2.0.0)
     builder (3.3.0)
     capybara (3.40.0)
@@ -296,6 +297,7 @@ GEM
       ast (~> 2.4.1)
       racc
     pg (1.5.7)
+    popper_js (2.11.8)
     pry (0.14.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -510,7 +512,7 @@ DEPENDENCIES
   aws-sdk-s3
   babosa
   bootsnap (>= 1.1.0)
-  bootstrap-sass
+  bootstrap
   capybara
   chart-js-rails
   chartkick

app/assets/javascripts/sprockets.coffee

@@ -15,12 +15,12 @@
 #= requite moment
 #= require Chart.bundle
 #= require chartkick
-#= require bootstrap
+#= require bootstrap-sprockets
 #= require jquery-tablesorter/jquery.tablesorter
 #= require_tree .
 
 $ ->
-  $('[data-toggle="tooltip"]').tooltip()
+  $('[data-bs-toggle="tooltip"]').tooltip()
 
   $('.tablesorter').tablesorter
     textAttribute: 'data-sort-value'

app/assets/stylesheets/application.scss

@@ -1,7 +1,7 @@
 @import 'modules/variables';
 
 /* Vendors */
-@import 'bootstrap';
+@import 'bootstrap/scss/bootstrap';
 @import 'font-awesome';
 
 // Partials

app/views/cities/_city_row_content.slim

@@ -6,10 +6,10 @@ td
 - if city.service_list_status.present?
   td data-sort-value="#{status.http_code}-#{status.duration_ms}-#{status.error_message}"
     .text-center
-      a(class="btn btn-xs btn-#{ status.label_class }"
+      a(class="btn btn-sm btn-#{ status.label_class }"
         href=city.api.services_url
         rel='noopener nofollow'
-        data={ toggle: 'tooltip' }
+        data={ bs_toggle: 'tooltip' }
         title=status.description)= status.title
       br
       small
@@ -23,10 +23,10 @@ td
 - if city.service_requests_status.present?
   td data-sort-value="#{status.http_code}-#{status.duration_ms}-#{status.error_message}"
     .text-center
-      a(class="btn btn-xs btn-#{ status.label_class }"
+      a(class="btn btn-sm btn-#{ status.label_class }"
         href=city.api.requests_url
         rel='noopener nofollow'
-        data={ toggle: 'tooltip' }
+        data={ bs_toggle: 'tooltip' }
         title=status.description)= status.title
       br
       small

app/views/cities/index.html.slim

@@ -5,15 +5,15 @@ ruby:
     | Scanning #{@cities.size} Open311 endpoints every 10 minutes.
       For endpoint information visit the <a href="http://wiki.open311.org/GeoReport_v2/Servers" rel="noopener">Open311 Wiki</a>.
 
-.panel.panel-default
-  .panel-heading
-    h3.panel-title Service Requests created during previous 48 hours
-  .panel-body
+.card.card-default
+  .card-heading
+    h3.card-title Service Requests created during previous 48 hours
+  .card-body
     = line_chart @cities.map { |city| { name: city.name, data: city.bucketed_service_requests } }
 
-.panel.panel-default
+.card.card-default
   .table-responsive
-    table.table.table-condensed.table-bordered.table-striped.tablesorter(data-controller="cities")
+    table.table.table-sm.table-bordered.table-striped.tablesorter(data-controller="cities")
       thead
         tr
           th Endpoint
@@ -22,7 +22,7 @@ ruby:
           th Request Types
           th data-sorter='false'
             | Submitted requests
-            span.label.label-info< 48 hours
+            span.badge.badge-info< 48 hours
           th Total
           th Min/Hour
           th Max/Hour
@@ -31,7 +31,7 @@ ruby:
         = render partial: 'city_row_content', layout: 'city_row', collection: @cities, as: :city
 
 h3 Recent Service Requests
-.panel.panel-default
+.card.card-default
   = render 'service_requests', service_requests: @service_requests
 .text-center
   = link_to "View all Service Requests", requests_path, class: 'btn btn-default'

app/views/cities/requests/show.html.slim

@@ -7,8 +7,8 @@ ruby:
 
 h2.h4
   => service_request.city.name
-  - label_class = service_request.status == 'open' ? 'label-warning' : 'label-success'
-  span.label(class=label_class)= service_request.status.presence&.capitalize
+  - badge_class = service_request.status == 'open' ? 'badge-warning' : 'badge-success'
+  span.badge(class=badge_class)= service_request.status.presence&.capitalize
   small<= time_ago_in_words(service_request.requested_datetime).capitalize
 
 h1(style='margin-top: 0')= service_request.raw_data['service_name']

app/views/cities/show.html.slim

@@ -6,22 +6,22 @@ ruby:
 
 h1= @city.name
 
-.panel.panel-default
-  .panel-heading
-    h3.panel-title Service Requests created during previous 48 hours
-  .panel-body
+.card.card-default
+  .card-heading
+    h3.card-title Service Requests created during previous 48 hours
+  .card-body
     = line_chart [{ name: city.name, data: city.service_requests.group_by_hour(:requested_datetime, range: 2.days.ago..Time.current).count }]
 
-.panel.panel-default.with-nav-tabs
-  .panel-heading
-    ul.nav.nav-tabs.nav-justified
+.card.card-default.with-nav-tabs
+  .card-heading
+    ul.nav.nav-pills.nav-justified
       li.active role="presentation"
-        a href="#service_requests" aria-controls="service_requests" role="tab" data-toggle="tab"
+        a href="#service_requests" aria-controls="service_requests" role="tab" data-bs-toggle="tab"
           | Service Requests
       li role="presentation"
-        a href="#service_definitions" aria-controls="service_definitions" role="tab" data-toggle="tab"
+        a href="#service_definitions" aria-controls="service_definitions" role="tab" data-bs-toggle="tab"
           | Service Definitions
-  .panel-body.tab-content
+  .card-body.tab-content
     div role="tabpanel" class="tab-pane active" id="service_requests"
       = render 'service_requests', service_requests: @service_requests
 

app/views/layouts/_footer.html.slim

@@ -1,8 +1,8 @@
 .container
   .row
-    .col-sm-6
+    .col-md-6
       p <strong>Open311 Status</strong> monitors and aggregates the status of dozens of Open311 API endpoints, providing benchmarks and comparative insights.
-    .col-sm-6
+    .col-md-6
       ul
         li
           | Learn more about the <strong>Open311 API</strong> at

app/views/layouts/_messages.html.slim

@@ -1,7 +1,7 @@
-/ Rails flash messages styled for Bootstrap 3.0
+/ Rails flash messages styled for Bootstrap 5.0
 - flash.each do |name, msg|
   - if msg.is_a?(String)
-    div class="alert alert-#{name.to_s == 'notice' ? 'success' : 'danger'}"
-      button.close "aria-hidden"="true" "data-dismiss"="alert" type="button" ×
+    div class="alert alert-#{name.to_s == 'notice' ? 'success' : 'danger'} alert-dismissible fade show" role="alert"
+      button.close "aria-hidden"="true" "data-bs-dismiss"="alert" type="button" ×
       div id="flash_#{name}"
         = msg

app/views/layouts/_navigation.html.slim

@@ -1,14 +1,14 @@
-nav.navbar.navbar-default
-  .container
+nav.navbar.navbar-expand-lg.navbar-light.bg-light
+  .container-fluid
     .navbar-header
-      button.navbar-toggle(data-target=".navbar-collapse" data-toggle="collapse" type="button")
+      button.navbar-toggler(data-target=".navbar-collapse" data-bs-toggle="collapse" type="button")
         span.sr-only Toggle navigation
         span.icon-bar
         span.icon-bar
         span.icon-bar
       = link_to 'Open311 Status', root_path, class: 'navbar-brand'
     .collapse.navbar-collapse
-      ul.nav.navbar-nav.navbar-right
+      ul.nav.navbar-nav.ms-auto
         li= link_to about_path
           => fa_icon 'question-circle'
           | About

app/views/layouts/application.html.slim

@@ -16,7 +16,7 @@ html lang='en'
       header
         = render 'layouts/navigation'
       main role="main"
-        .container
+        .container-fluid
           = render 'layouts/messages'
           = yield
     footer.page-footer.wrap-footer