Merge pull request #1756 from codebar/convert-alerts-to-bootstrap-5

Convert alerts to Bootstrap 5

app/assets/javascripts/application.js

@@ -71,7 +71,4 @@ $(function() {
   });
 
   $('[data-bs-toggle="tooltip"]').tooltip();
-
-  const myCarousel = document.querySelector("#testimonials-carousel");
-  new bootstrap.Carousel(myCarousel);
 });

app/assets/stylesheets/_bootstrap-custom.scss

@@ -36,7 +36,7 @@ $enable-negative-margins: true;
 @import "bootstrap/alert";
 // @import "bootstrap/progress";
 @import "bootstrap/list-group";
-// @import "bootstrap/close";
+@import "bootstrap/close";
 // @import "bootstrap/toasts";
 @import "bootstrap/modal";
 @import "bootstrap/tooltip";

app/views/layouts/_messages.html.haml

@@ -2,17 +2,13 @@
   - unless (name.eql?('notice') && @suppress_notices) || (name.eql?('warning') && @suppress_warnings)
     - name = name.eql?('notice') ? 'info' : name
     - if msg.is_a?(String)
-      %div{ 'data-alert': '', class: "alert-box #{name}" }
-        .row
-          .large-12
-            = link_to '#', class: 'close' do
-              ×
-            = content_tag :div, msg.html_safe
+      .alert.alert-dismissible.fade.show.mb-0{ 'data-alert': '', class: "alert-#{name}", role: 'alert' }
+        = content_tag :div, msg.html_safe
+        %button.close{ type: 'button', 'data-dismiss': 'alert', 'aria-label': 'Close' }
+          %span{ 'aria-hidden': 'true'} ×
     - elsif msg.is_a?(Array)
       - msg.each do |message|
-        %div{ 'data-alert': '', class: "alert-box #{name}" }
-          .row
-            .large-12
-              = link_to '#', class: 'close' do
-                ×
-              = content_tag :span, message.html_safe
+        .alert.alert-dismissible.fade.show.mb-0{ 'data-alert': '', class: "alert-#{name}", role: 'alert' }
+          = content_tag :span, message.html_safe
+          %button.close{ type: 'button', 'data-dismiss': 'alert', 'aria-label': 'Close' }
+            %span{ 'aria-hidden': 'true'} ×

app/views/members/_testimonials.html.haml

@@ -1,10 +1,10 @@
-.carousel.slider#testimonials-carousel
+.carousel.slider{ 'data-ride': 'carousel' }
   .carousel-inner
     - @testimonials.each_with_index do |testimonial, index|
       .carousel-item{ class: ('active' if index === 0) }
         %blockquote
           %p= testimonial.text
           %footer.clearfix
-            = image_tag(testimonial.member.avatar(32), class: 'th radius left', alt: testimonial.member.name)
+            = image_tag(testimonial.member.avatar(32), class: 'rounded-circle ml-2', alt: testimonial.member.name)
             %cite.left
               = testimonial.member.full_name