From 3a44fc389e83f07a147870345a7562b2133df3d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Lecour?= Date: Tue, 20 Aug 2019 00:03:24 +0200 Subject: [PATCH] move styles to webpack --- app/frontend/scss/_variables.scss | 15 ----------- app/frontend/scss/index.js | 4 --- app/javascript/packs/application.js | 26 +++++++++---------- app/javascript/stylesheets/_custom.scss | 15 +++++++++++ .../stylesheets/application.scss} | 7 +++-- .../stylesheets}/components/callouts.scss | 0 .../stylesheets}/components/checks.scss | 0 .../components/notifications.scss | 0 .../stylesheets}/components/users.scss | 0 .../stylesheets}/icons.scss | 0 .../stylesheets}/layout.scss | 6 ++++- config/webpack/environment.js | 5 ++-- package.json | 5 ++-- yarn.lock | 7 ++++- 14 files changed, 46 insertions(+), 44 deletions(-) delete mode 100644 app/frontend/scss/_variables.scss delete mode 100644 app/frontend/scss/index.js create mode 100644 app/javascript/stylesheets/_custom.scss rename app/{frontend/scss/index.scss => javascript/stylesheets/application.scss} (55%) rename app/{frontend/scss => javascript/stylesheets}/components/callouts.scss (100%) rename app/{frontend/scss => javascript/stylesheets}/components/checks.scss (100%) rename app/{frontend/scss => javascript/stylesheets}/components/notifications.scss (100%) rename app/{frontend/scss => javascript/stylesheets}/components/users.scss (100%) rename app/{frontend/scss => javascript/stylesheets}/icons.scss (100%) rename app/{frontend/scss => javascript/stylesheets}/layout.scss (99%) diff --git a/app/frontend/scss/_variables.scss b/app/frontend/scss/_variables.scss deleted file mode 100644 index 954eccf..0000000 --- a/app/frontend/scss/_variables.scss +++ /dev/null @@ -1,15 +0,0 @@ -// Copyright (C) 2018 Colin Darie , 2018 Evolix -// License: GNU AGPL-3+ (see full text in LICENSE file) - -$input-placeholder-color: #b9bbbb; -$enable-rounded: false; -$theme-colors: ( - "primary": #118b83, //light-green - "secondary": #013d3a, //dark-green - "tertiary": #be0c04, //red - "quaternary": #d6b20e, // yellow - "success": #118b83, //light-green - "warning": #F6AE2D, - "danger": #be0c04, //red - "info": #2E86AB, -); diff --git a/app/frontend/scss/index.js b/app/frontend/scss/index.js deleted file mode 100644 index 15c6e9b..0000000 --- a/app/frontend/scss/index.js +++ /dev/null @@ -1,4 +0,0 @@ -// Copyright (C) 2018 Colin Darie , 2018 Evolix -// License: GNU AGPL-3+ (see full text in LICENSE file) - -import './index.scss'; diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index f232272..2430c3f 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -6,27 +6,25 @@ // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. -// -// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate -// layout file, like app/views/layouts/application.html.erb -import Rails from 'rails-ujs'; -import Turbolinks from 'turbolinks'; +require("@rails/ujs").start() +require("turbolinks").start() +// require("@rails/activestorage").start() +// require("channels") -import 'bootstrap/js/dist/collapse'; -import 'bootstrap/js/dist/dropdown'; -import 'bootstrap/js/dist/button'; -import 'bootstrap/js/dist/tooltip'; - -import '../scss'; +import 'bootstrap' +import '../stylesheets/application' import checkValidationInitialize from '../components/check_validation'; -Rails.start() -Turbolinks.start() - document.addEventListener("turbolinks:load", () => { $('[data-toggle="tooltip"]').tooltip(); checkValidationInitialize(); }); +// Uncomment to copy all static images under ../images to the output folder and reference +// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) +// or the `imagePath` JavaScript helper below. +// +// const images = require.context('../images', true) +// const imagePath = (name) => images(name, true) diff --git a/app/javascript/stylesheets/_custom.scss b/app/javascript/stylesheets/_custom.scss new file mode 100644 index 0000000..bf60bbb --- /dev/null +++ b/app/javascript/stylesheets/_custom.scss @@ -0,0 +1,15 @@ +// Copyright (C) 2018 Colin Darie , 2018 Evolix +// License: GNU AGPL-3+ (see full text in LICENSE file) + +$input-placeholder-color: #b9bbbb; +$enable-rounded: false; +$theme-colors: ( + "primary": #118b83, //light-green + "secondary": #013d3a, //dark-green + "tertiary": #be0c04, //red + "quaternary": #d6b20e, //yellow + "success": #118b83, //light-green + "warning": #F6AE2D, //orange + "danger": #be0c04, //red + "info": #2E86AB, //light-blue +); diff --git a/app/frontend/scss/index.scss b/app/javascript/stylesheets/application.scss similarity index 55% rename from app/frontend/scss/index.scss rename to app/javascript/stylesheets/application.scss index 20ea0ae..9f5913a 100644 --- a/app/frontend/scss/index.scss +++ b/app/javascript/stylesheets/application.scss @@ -1,10 +1,9 @@ -// Copyright (C) 2018 Colin Darie , 2018 Evolix -// License: GNU AGPL-3+ (see full text in LICENSE file) - -@import '_variables'; +@import '_custom'; @import '~bootstrap/scss/bootstrap'; + @import 'layout'; @import 'icons'; + @import 'components/callouts'; @import 'components/users'; @import 'components/checks'; diff --git a/app/frontend/scss/components/callouts.scss b/app/javascript/stylesheets/components/callouts.scss similarity index 100% rename from app/frontend/scss/components/callouts.scss rename to app/javascript/stylesheets/components/callouts.scss diff --git a/app/frontend/scss/components/checks.scss b/app/javascript/stylesheets/components/checks.scss similarity index 100% rename from app/frontend/scss/components/checks.scss rename to app/javascript/stylesheets/components/checks.scss diff --git a/app/frontend/scss/components/notifications.scss b/app/javascript/stylesheets/components/notifications.scss similarity index 100% rename from app/frontend/scss/components/notifications.scss rename to app/javascript/stylesheets/components/notifications.scss diff --git a/app/frontend/scss/components/users.scss b/app/javascript/stylesheets/components/users.scss similarity index 100% rename from app/frontend/scss/components/users.scss rename to app/javascript/stylesheets/components/users.scss diff --git a/app/frontend/scss/icons.scss b/app/javascript/stylesheets/icons.scss similarity index 100% rename from app/frontend/scss/icons.scss rename to app/javascript/stylesheets/icons.scss diff --git a/app/frontend/scss/layout.scss b/app/javascript/stylesheets/layout.scss similarity index 99% rename from app/frontend/scss/layout.scss rename to app/javascript/stylesheets/layout.scss index e532b05..e533371 100644 --- a/app/frontend/scss/layout.scss +++ b/app/javascript/stylesheets/layout.scss @@ -5,6 +5,10 @@ @import '~bootstrap/scss/_variables'; @import '~bootstrap/scss/mixins/_breakpoints'; +h2 { + color: red; +} + /* * === GENERAL === */ @@ -146,7 +150,7 @@ a.navbar-item.navbar-link { .row { height: 100%; } - + .homepage-img { border: 1px solid map-get($theme-colors, secondary); } diff --git a/config/webpack/environment.js b/config/webpack/environment.js index ceb0013..bc36d30 100644 --- a/config/webpack/environment.js +++ b/config/webpack/environment.js @@ -1,12 +1,11 @@ -const webpack = require('webpack') const { environment } = require('@rails/webpacker') +const webpack = require('webpack') environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Popper: ['popper.js', 'default'], - Util: "exports-loader?Util!bootstrap/js/dist/util", + // Util: "exports-loader?Util!bootstrap/js/dist/util", })) - module.exports = environment diff --git a/package.json b/package.json index 803b338..4bcf663 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,11 @@ "dependencies": { "@rails/ujs": "^6.0.0-alpha", "@rails/webpacker": "^4.0.7", - "bootstrap": "^4.3.1", + "bootstrap": "4.3.1", "exports-loader": "^0.7.0", "jquery": "^3.4.1", - "popper.js": "^1.15.0" + "popper.js": "^1.15.0", + "turbolinks": "^5.2.0" }, "version": "0.1.0", "devDependencies": { diff --git a/yarn.lock b/yarn.lock index ccef2a5..4ed4530 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1282,7 +1282,7 @@ 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.3.1: +bootstrap@4.3.1: version "4.3.1" resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac" integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag== @@ -6692,6 +6692,11 @@ tunnel-agent@^0.6.0: dependencies: safe-buffer "^5.0.1" +turbolinks@^5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/turbolinks/-/turbolinks-5.2.0.tgz#e6877a55ea5c1cb3bb225f0a4ae303d6d32ff77c" + integrity sha512-pMiez3tyBo6uRHFNNZoYMmrES/IaGgMhQQM+VFF36keryjb5ms0XkVpmKHkfW/4Vy96qiGW3K9bz0tF5sK9bBw== + tweetnacl@^0.14.3, tweetnacl@~0.14.0: version "0.14.5" resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"