From 6db791d5bbf515c9f82fc6623a453d5217d04e80 Mon Sep 17 00:00:00 2001 From: Alex Kotov Date: Wed, 10 Mar 2021 14:52:53 +0500 Subject: [PATCH] Add Bootstrap --- app/assets/stylesheets/application.css | 15 --------------- app/javascript/packs/application.js | 9 +++++++++ app/javascript/stylesheets/application.scss | 1 + app/views/layouts/application.html.erb | 2 +- config/webpack/environment.js | 8 ++++++++ package.json | 3 +++ yarn.lock | 15 +++++++++++++++ 7 files changed, 37 insertions(+), 16 deletions(-) delete mode 100644 app/assets/stylesheets/application.css create mode 100644 app/javascript/stylesheets/application.scss diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css deleted file mode 100644 index d05ea0f..0000000 --- a/app/assets/stylesheets/application.css +++ /dev/null @@ -1,15 +0,0 @@ -/* - * This is a manifest file that'll be compiled into application.css, which will include all the files - * listed below. - * - * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's - * vendor/assets/stylesheets directory can be referenced here using a relative path. - * - * You're free to add application-wide styles to this file and they'll appear at the bottom of the - * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS - * files in this directory. Styles in this file should be added after the last require_* statement. - * It is generally better to create a new file per style scope. - * - *= require_tree . - *= require_self - */ diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index f710851..15e423b 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -3,11 +3,20 @@ // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. +import '../stylesheets/application' + import Rails from "@rails/ujs" import Turbolinks from "turbolinks" import * as ActiveStorage from "@rails/activestorage" import "channels" +import 'bootstrap' + Rails.start() Turbolinks.start() ActiveStorage.start() + +document.addEventListener("turbolinks:load", () => { + $('[data-toggle="tooltip"]').tooltip() + $('[data-toggle="popover"]').popover() +}) diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss new file mode 100644 index 0000000..19b0ca9 --- /dev/null +++ b/app/javascript/stylesheets/application.scss @@ -0,0 +1 @@ +@import "~bootstrap/scss/bootstrap"; diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 2bfdd8d..73eb155 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -6,7 +6,7 @@ <%= csrf_meta_tags %> <%= csp_meta_tag %> - <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> + <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> diff --git a/config/webpack/environment.js b/config/webpack/environment.js index d16d9af..35902be 100644 --- a/config/webpack/environment.js +++ b/config/webpack/environment.js @@ -1,3 +1,11 @@ const { environment } = require('@rails/webpacker') +const webpack = require('webpack') + +environment.plugins.append('Provide', new webpack.ProvidePlugin({ + $: 'jquery', + jQuery: 'jquery', + Popper: ['popper.js', 'default'], +})) + module.exports = environment diff --git a/package.json b/package.json index 45ef0ef..e00eb9b 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,9 @@ "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "5.2.1", + "bootstrap": "^4.6.0", + "jquery": "^3.6.0", + "popper.js": "^1.16.1", "turbolinks": "^5.2.0" }, "version": "0.1.0", diff --git a/yarn.lock b/yarn.lock index e9373cc..0898418 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1526,6 +1526,11 @@ boolbase@^1.0.0, boolbase@~1.0.0: resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= +bootstrap@^4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7" + integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" @@ -4044,6 +4049,11 @@ jest-worker@^26.5.0: merge-stream "^2.0.0" supports-color "^7.0.0" +jquery@^3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470" + integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw== + js-base64@^2.1.8: version "2.6.4" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4" @@ -5221,6 +5231,11 @@ pnp-webpack-plugin@^1.6.4: dependencies: ts-pnp "^1.1.6" +popper.js@^1.16.1: + version "1.16.1" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" + integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ== + portfinder@^1.0.26: version "1.0.28" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"