Update to Bootstrap 5

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

@@ -130,9 +130,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)
     capybara (3.40.0)
       addressable
@@ -289,7 +289,8 @@ GEM
     parser (3.3.5.0)
       ast (~> 2.4.1)
       racc
-    pg (1.5.8)
+    pg (1.5.7)
+    popper_js (2.11.8)
     psych (5.1.2)
       stringio
     public_suffix (6.0.1)
@@ -497,7 +498,7 @@ DEPENDENCIES
   aws-sdk-s3
   babosa
   bootsnap (>= 1.1.0)
-  bootstrap-sass
+  bootstrap (~> 5.3.0)
   capybara
   chart-js-rails
   chartkick

app/assets/javascripts/sprockets.coffee

@@ -12,15 +12,14 @@
 #
 #= require jquery
 #= require jquery_ujs
-#= requite moment
+#= require moment
 #= require Chart.bundle
 #= require chartkick
-#= require bootstrap
 #= require jquery-tablesorter/jquery.tablesorter
 #= require_tree .
 
 $ ->
-  $('[data-toggle="tooltip"]').tooltip()
-
-  $('.tablesorter').tablesorter
-    textAttribute: 'data-sort-value'
+  tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  console.log(tooltipTriggerList)
+  tooltipList = Array.from(tooltipTriggerList).map (tooltipTriggerEl) =>
+    new bootstrap.Tooltip(tooltipTriggerEl)

app/assets/stylesheets/application.scss

@@ -5,7 +5,31 @@
 @import 'font-awesome';
 
 // Partials
-@import 'partials/panel_with_nav_tabs';
 @import 'partials/footer';
-@import 'partials/wrap';
 @import 'partials/tablesorter';
+
+
+.card-table {
+  overflow: hidden;
+  > .table {
+    margin-bottom: 0;
+
+    th:first-child, td:first-child {
+      border-left: none;
+    }
+
+    th:last-child, td:last-child {
+      border-right: none;
+    }
+
+    tr:first-child, tr:first-child,
+    tr:first-child th, tr:first-child td {
+      border-top: none;
+    }
+
+    tr:last-child, tr:last-child,
+      tr:last-child th, tr:last-child td {
+      border-bottom: none;
+    }
+  }
+}

app/assets/stylesheets/modules/_variables.scss

@@ -1 +1 @@
-$font-size-base: 16px;
+//$font-size-base: 16px;

app/assets/stylesheets/partials/_footer.scss

@@ -1,3 +1,25 @@
+$footer-height: 120px;
+$footer-padding: 20px;
+
+html,
+body {
+  height: 100%;
+}
+
+@include media-breakpoint-up(sm) {
+  .wrap-body {
+    height: auto;
+    margin-bottom: -($footer-height + $footer-padding);
+    min-height: 100%;
+    padding-bottom: $footer-height + $footer-padding;
+  }
+
+  .wrap-footer {
+    height: $footer-height;
+    width: 100%;
+  }
+}
+
 .page-footer {
   background-color: #f8f8f8;
   border-top: 1px solid #e7e7e7;

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/_service_definitions.slim

@@ -0,0 +1,10 @@
+table.table.table-bordered.table-striped
+  thead
+    tr
+      th Service Name
+      th Description
+  tbody
+    - service_definitions.find_each do |service_definition|
+      tr
+        td= service_definition.raw_data['service_name']
+        td= service_definition.raw_data['description']

app/views/cities/index.html.slim

@@ -1,37 +1,37 @@
 ruby:
   provide(:meta_title) { "Open311 Status - 311 API monitoring and analysis" }
-.well
+.well.mb-3
   strong
     | 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.mb-3
+  .card-header
+    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
-  .table-responsive
-    table.table.table-condensed.table-bordered.table-striped.tablesorter(data-controller="cities")
-      thead
-        tr
-          th Endpoint
-          th Services
-          th Requests
-          th Request Types
-          th data-sorter='false'
-            | Submitted requests
-            span.label.label-info< 48 hours
-          th Total
-          th Min/Hour
-          th Max/Hour
-          th Avg/Hour
-      tbody
-        = render partial: 'city_row_content', layout: 'city_row', collection: @cities, as: :city
+.card.card-default.mb-3.card-table
+  table.table.table-sm.table-bordered.table-striped.tablesorter(data-controller="cities")
+    thead
+      tr
+        th Endpoint
+        th Services
+        th Requests
+        th Request Types
+        th data-sorter='false'
+          | Submitted requests
+          span.badge.badge-info< 48 hours
+        th Total
+        th Min/Hour
+        th Max/Hour
+        th Avg/Hour
+    tbody
+      = render partial: 'city_row_content', layout: 'city_row', collection: @cities, as: :city
 
 h3 Recent Service Requests
-.panel.panel-default
+.card.card-default.card-table
   = render 'service_requests', service_requests: @service_requests
-.text-center
-  = link_to "View all Service Requests", requests_path, class: 'btn btn-default'
+
+.text-center.mt-3
+  = link_to "View all Service Requests", requests_path, class: 'btn btn-outline-dark'

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,33 +6,24 @@ ruby:
 
 h1= @city.name
 
-.panel.panel-default
-  .panel-heading
-    h3.panel-title Service Requests created during previous 48 hours
-  .panel-body
+.card.card-default.mb-3
+  .card-header
+    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
-      li.active role="presentation"
-        a href="#service_requests" aria-controls="service_requests" role="tab" data-toggle="tab"
+.card.mb-3
+  .card-header
+    ul.nav.nav-tabs.card-header-tabs
+      li.nav-item role="presentation"
+        button class="nav-link active" id="service-requests-tab" data-bs-toggle="tab" data-bs-target="#service-requests-contents" type="button" role="tab" aria-controls="service-requests-contents" aria-selected="false"
           | Service Requests
-      li role="presentation"
-        a href="#service_definitions" aria-controls="service_definitions" role="tab" data-toggle="tab"
+      li.nav-item role="presentation"
+        button class="nav-link" id="service-definitions-tab" data-bs-toggle="tab" data-bs-target="#service-definitions-contents" type="button" role="tab" aria-controls="service-definitions-contents" aria-selected="false"
           | Service Definitions
-  .panel-body.tab-content
-    div role="tabpanel" class="tab-pane active" id="service_requests"
-      = render 'service_requests', service_requests: @service_requests
-
-    div role="tabpanel" class="tab-pane" id="service_definitions"
-      table.table.table-bordered.table-striped
-        thead
-          tr
-            th Service Name
-            th Description
-        tbody
-          - @city.service_definitions.find_each do |service_definition|
-            tr
-              td= service_definition.raw_data['service_name']
-              td= service_definition.raw_data['description']
+  .card-body
+    .tab-content
+      div class="tab-pane show active" id="service-requests-contents" role="tabpanel" aria-labelledby="service-requests-tab" tabindex="0"
+        = render 'service_requests', service_requests: @service_requests
+      div class="tab-pane" id="service-definitions-contents" role="tabpanel" aria-labelledby="home-tab" tabindex="0"
+        = render 'service_definitions', service_definitions: @city.service_definitions

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.erb

@@ -0,0 +1,24 @@
+<nav class="navbar navbar-expand-lg bg-body-tertiary mb-3">
+  <div class="container">
+    <%= link_to 'Open311 Status', root_path, class: 'navbar-brand' %>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="nav navbar-nav ms-auto">
+        <li class="nav-item">
+          <%= link_to about_path, class: "nav-link" do %>
+            <%= fa_icon 'question-circle' %>
+            About
+          <% end %>
+        </li>
+        <li class="nav-item">
+          <%= link_to github_url, target: '_blank', rel: 'noopener', class: "nav-link" do %>
+            <%= fa_icon 'github-alt' %>
+            Github
+          <% end %>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>