Migrate Cookie Policy page to Bootstrap 5 classes

Gemfile

@@ -12,6 +12,7 @@ gem 'delayed_job'
 gem 'delayed_job_active_record'
 gem 'font-awesome-rails'
 gem 'foundation-rails', '5.5.3.2'
+gem 'bootstrap', '~> 5.0.0.alpha1'
 gem 'friendly_id'
 gem 'haml'
 gem 'high_voltage'
@@ -34,6 +35,7 @@ gem 'simple_form'
 gem 'turbolinks'
 gem 'uglifier', '>= 1.3.0'
 gem 'will_paginate'
+gem 'sprockets-rails', '3.2.1'
 
 gem 'icalendar'
 gem 'tzinfo-data'

Gemfile.lock

@@ -41,10 +41,16 @@ GEM
       public_suffix (>= 2.0.2, < 5.0)
     arel (6.0.4)
     ast (2.4.1)
+    autoprefixer-rails (10.0.1.0)
+      execjs
     better_errors (2.7.1)
       coderay (>= 1.0.0)
       erubi (>= 1.0.0)
       rack (>= 0.9.0)
+    bootstrap (5.0.0.alpha1)
+      autoprefixer-rails (>= 9.1.0)
+      popper_js (>= 1.14.3, < 2)
+      sassc-rails (>= 2.0.0)
     builder (3.2.4)
     bullet (6.1.0)
       activesupport (>= 3.0.0)
@@ -213,6 +219,7 @@ GEM
     pg (0.20.0)
     pickadate-rails (3.5.6.0)
       railties (>= 3.1.0)
+    popper_js (1.16.0)
     premailer (1.11.1)
       addressable
       css_parser (>= 1.6.0)
@@ -396,6 +403,7 @@ PLATFORMS
 DEPENDENCIES
   acts-as-taggable-on (~> 5.0)
   better_errors
+  bootstrap (~> 5.0.0.alpha1)
   bullet
   capybara
   carrierwave
@@ -452,8 +460,10 @@ DEPENDENCIES
   sass-rails (~> 5.0.1)
   shoulda-matchers (~> 4.3)
   simple_form
+  sprockets-rails (= 3.2.1)
   simplecov
   simplecov-lcov
+  sprockets-rails (= 3.2.1)
   stripe
   turbolinks
   tzinfo-data

app/assets/javascripts/application.js

@@ -10,6 +10,8 @@
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
 //
+//= require popper
+//= require bootstrap
 //= require jquery
 //= require jquery_ujs
 //= require jquery-ui
@@ -51,19 +53,4 @@ $(function(){
   $('#member_lookup_id').chosen().change(function(e) {
     $('#view_profile').attr('href', '/admin/members/' + $(this).val())
   });
-
-  // Prevent tabbing through side menu links when menu is hidden.
-  // This somewhat hacky approach is required because Foundation doesn't
-  // allow us to modify the functionality directly :(
-  var $menuContainer = $('.off-canvas-wrap');
-  var $menuLinks = $('.left-off-canvas-menu').find('a');
-  var toggleMenuLinkTabindex = function() {
-    // Use rAF to delay the call a frame, to wait until the class has been updated:
-    window.requestAnimationFrame(function(){
-      var menuIsVisible = $menuContainer.hasClass('move-right');
-      $menuLinks.attr('tabindex', menuIsVisible ? 0 : -1);
-    });
-  };
-  toggleMenuLinkTabindex();
-  $(document).on('click', toggleMenuLinkTabindex);
 });

app/assets/stylesheets/_bootstrap-custom.scss

@@ -0,0 +1,50 @@
+/*!
+ * Bootstrap v5.0.0-alpha1 (https://getbootstrap.com/)
+ * Copyright 2011-2020 The Bootstrap Authors
+ * Copyright 2011-2020 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+// scss-docs-start import-stack
+// Configuration
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+@import "bootstrap/utilities";
+
+// Layout & components
+@import "bootstrap/root";
+@import "bootstrap/reboot";
+@import "bootstrap/type";
+@import "bootstrap/images";
+@import "bootstrap/containers";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+// @import "bootstrap/forms";
+@import "bootstrap/buttons";
+@import "bootstrap/transitions";
+@import "bootstrap/dropdown";
+// @import "bootstrap/button-group";
+@import "bootstrap/nav";
+@import "bootstrap/navbar";
+@import "bootstrap/card";
+// @import "bootstrap/breadcrumb";
+// @import "bootstrap/pagination";
+@import "bootstrap/badge";
+@import "bootstrap/alert";
+// @import "bootstrap/progress";
+@import "bootstrap/list-group";
+// @import "bootstrap/close";
+// @import "bootstrap/toasts";
+// @import "bootstrap/modal";
+// @import "bootstrap/tooltip";
+// @import "bootstrap/popover";
+// @import "bootstrap/carousel";
+@import "bootstrap/spinners";
+
+// Helpers
+@import "bootstrap/helpers";
+
+// Utilities
+@import "bootstrap/utilities/api";
+// scss-docs-end import-stack

app/assets/stylesheets/application.css → app/assets/stylesheets/application.scss

@@ -17,6 +17,25 @@
  *= require pickadate/classic.time
  *= require chosen
  *= require jquery-ui
- *= require pagination
- *= require animations
  */
+
+@import "partials/colors";
+@import "partials/links";
+@import "partials/margins";
+@import "partials/layout";
+@import "partials/hero";
+@import "partials/events";
+@import "partials/social_media";
+@import "partials/member_note";
+@import "partials/attendances";
+@import "partials/admin_workshop";
+@import "partials/sponsors";
+@import "partials/organisers";
+@import "partials/jobs";
+@import "partials/star-rating";
+@import "partials/event";
+@import "partials/workshop";
+
+$primary: $dark-codebar-blue !default;
+
+@import "bootstrap-custom";

app/assets/stylesheets/foundation_and_overrides.scss

@@ -1332,20 +1332,10 @@ table thead tr td {
   border-bottom: 1px solid rgb(34, 34, 34);
 }
 
-.top-bar-section li:not(.has-form):hover a span  {
-  text-decoration: underline;
-  text-decoration-skip: ink;
-}
-
-.top-bar-section li:not(.has-form):hover a .highlight  {
-  text-decoration-color: currentColor;
-}
-
 .highlight {
   color: $secondary-color;
 }
 
-
 blockquote {
   background: $white;
   border-radius: 5px;

app/assets/stylesheets/main.scss

@@ -1,23 +1,3 @@
-@import 'partials/colors';
-@import 'partials/links';
-@import 'partials/margins';
-@import 'partials/layout';
-@import 'partials/card';
-@import 'partials/hero';
-@import 'partials/events';
-@import 'partials/social_media';
-@import 'partials/chapter';
-@import 'partials/member_note';
-@import 'partials/attendances';
-@import 'partials/admin_workshop';
-@import 'partials/sponsors';
-@import 'partials/organisers';
-@import 'partials/jobs';
-@import 'partials/star-rating';
-@import 'partials/event';
-@import 'partials/workshop';
-@import 'partials/admin_member';
-
 .row-spaced {
   padding-bottom: 20px;
 }

app/assets/stylesheets/partials/_colors.sass

@@ -2,6 +2,8 @@ $codebar-green: #19f3be
 $codebar-pink: #ff036a
 $codebar-blue: #4bafff
 
+$dark-codebar-blue: #006cc2
+
 $main-stroke: #f2f2f4
 $navigation-gray: #fdfdfd
 $navigation-gray-separators: #dddedd