From 7f74e844f52a2daa1cbc1ce1a05e2e0e523bd685 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Sun, 19 Apr 2020 21:08:58 +0200 Subject: [PATCH] Replace Bootstrap 3 with Bootstrap 4 --- Gemfile | 3 +-- Gemfile.lock | 13 ++++++------ .../javascripts/application.js.erb.coffee | 3 ++- app/assets/stylesheets/application.css.scss | 9 +++------ app/assets/stylesheets/base.css.scss | 6 +++--- app/assets/stylesheets/scss/user.scss | 20 +++++++++---------- 6 files changed, 25 insertions(+), 29 deletions(-) diff --git a/Gemfile b/Gemfile index 88ed7c93..6c69ac18 100644 --- a/Gemfile +++ b/Gemfile @@ -19,8 +19,7 @@ gem 'jbuilder', '~> 2.10' gem 'bcrypt', '~> 3.1.7' gem 'haml', '~> 5.0' -gem 'bootstrap-sass', '~> 3.4.0' -gem 'bootswatch-rails' +gem 'bootstrap', '~> 4.4', '>= 4.4.1' gem 'sweetalert-rails' gem 'will_paginate' gem 'will_paginate-bootstrap' diff --git a/Gemfile.lock b/Gemfile.lock index b21f3cef..698918cc 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -79,16 +79,15 @@ GEM erubi (>= 1.0.0) rack (>= 0.9.0) bindex (0.8.1) - bootstrap-sass (3.4.1) - autoprefixer-rails (>= 5.2.1) - sassc (>= 2.0.0) + bootstrap (4.4.1) + autoprefixer-rails (>= 9.1.0) + popper_js (>= 1.14.3, < 2) + sassc-rails (>= 2.0.0) bootstrap3-datetimepicker-rails (4.7.14) momentjs-rails (>= 2.8.1) bootstrap_form (4.4.0) actionpack (>= 5.0) activemodel (>= 5.0) - bootswatch-rails (3.3.5) - railties (>= 3.1) brakeman (4.8.1) buftok (0.2.0) builder (3.2.4) @@ -331,6 +330,7 @@ GEM capybara (>= 2.1, < 4) cliver (~> 0.3.1) websocket-driver (>= 0.2.0) + popper_js (1.16.0) pry (0.13.1) coderay (~> 1.1) method_source (~> 1.0) @@ -527,10 +527,9 @@ DEPENDENCIES bcrypt (~> 3.1.7) bcrypt_pbkdf (>= 1.0, < 2.0) better_errors - bootstrap-sass (~> 3.4.0) + bootstrap (~> 4.4, >= 4.4.1) bootstrap3-datetimepicker-rails (~> 4.7.14) bootstrap_form - bootswatch-rails brakeman byebug capistrano (~> 3.8) diff --git a/app/assets/javascripts/application.js.erb.coffee b/app/assets/javascripts/application.js.erb.coffee index b135cf66..b19d70d3 100644 --- a/app/assets/javascripts/application.js.erb.coffee +++ b/app/assets/javascripts/application.js.erb.coffee @@ -1,8 +1,9 @@ -#= require jquery +#= require jquery3 #= require jquery_ujs #= require jquery.turbolinks #= require jquery.arctic_scroll #= require turbolinks +#= require popper #= require bootstrap #= require nprogress #= require nprogress-turbolinks diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 85e898c5..4b60bbf4 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -16,7 +16,7 @@ $font-family-serif: Georgia, "DejaVu Serif", "Times New Roman", Times, ser $font-family-monospace: "PragmataPro", Monaco, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace; $font-family-base: $font-family-sans-serif; -$font-size-base: 14px; +$font-size-base: 1rem; $font-size-large: ceil(($font-size-base * 1.25)); // ~18px $font-size-small: ceil(($font-size-base * 0.85)); // ~12px @@ -27,6 +27,7 @@ $font-size-h4: ceil(($font-size-base * 1.25)); // ~18px $font-size-h5: $font-size-base; $font-size-h6: ceil(($font-size-base * 0.85)); // ~12px +$gray: #e2e2e2; $brand-primary: #5e35b1; $navbar-inverse-bg: #5e35b1; $navbar-inverse-link-color: #ffffff; @@ -44,19 +45,15 @@ $navbar-inverse-toggle-hover-bg: #512da8; $navbar-inverse-toggle-icon-bar-bg: #7e57c2; $navbar-inverse-toggle-border-color: #512da8; -@import "bootswatch/cosmo/variables"; - @import "bootstrap"; -body { padding-top: $navbar-height; } +body { padding-top: 50px; } @import 'bootstrap-datetimepicker'; .remove-native-picker::-webkit-calendar-picker-indicator{ display: none } -@import "bootswatch/cosmo/bootswatch"; - @import "base"; @import "font-awesome"; diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss index 54ea3ee1..4c5c3eb6 100644 --- a/app/assets/stylesheets/base.css.scss +++ b/app/assets/stylesheets/base.css.scss @@ -107,7 +107,7 @@ body { } .j2-delete { - color: $brand-danger; + color: theme-color('danger'); text-decoration: none; } @@ -115,7 +115,7 @@ body { margin-bottom: 0px; } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .j2-col-reset { padding-left: 0px; padding-right: 0px; @@ -277,7 +277,7 @@ body { } .colored-icon:before { - color: $brand-primary; + color: theme-color('primary'); } .colored-icon { diff --git a/app/assets/stylesheets/scss/user.scss b/app/assets/stylesheets/scss/user.scss index 0f0adbfb..781ad48d 100644 --- a/app/assets/stylesheets/scss/user.scss +++ b/app/assets/stylesheets/scss/user.scss @@ -42,8 +42,8 @@ } .profile--panel .panel-heading { - color: $brand-primary; - border-bottom: 2px solid $brand-primary; + color: theme-color('primary'); + border-bottom: 2px solid theme-color('primary'); background-color: #fff; text-transform: uppercase; } @@ -53,15 +53,15 @@ } .inbox--panel .panel-heading { - color: $brand-info; - border-bottom: 2px solid $brand-info; + color: theme-color('info'); + border-bottom: 2px solid theme-color('info'); background-color: #fff; text-transform: uppercase; } .warning--panel .panel-heading { - color: $brand-danger; - border-bottom: 2px solid $brand-danger; + color: theme-color('danger'); + border-bottom: 2px solid theme-color('danger'); background-color: #fff; text-transform: uppercase; } @@ -87,11 +87,11 @@ color: #fff; } -$colours: danger $brand-danger, +$colours: danger theme-color('danger'), default #BBB, - success $brand-success, - warning $brand-warning, - primary $brand-primary, + success theme-color('success'), + warning theme-color('warning'), + primary theme-color('primary'), info #2980b9; @each $colour in $colours {