From b4c47692082ddb5571b3d59c29ecfa1529c27226 Mon Sep 17 00:00:00 2001 From: Matteo Pagliazzi Date: Thu, 16 Nov 2017 21:59:55 +0100 Subject: [PATCH] fix: correctly handle bootstrap variables --- gulp/gulp-bootstrap.js | 36 ------------------- gulp/gulp-build.js | 2 +- gulpfile.js | 1 - package.json | 2 +- website/client/app.vue | 1 - website/client/assets/scss/bootstrap.scss | 8 +++++ .../client/assets/scss/bootstrap_config.scss | 17 --------- website/client/assets/scss/index.scss | 2 ++ website/client/components/inventory/item.vue | 1 + 9 files changed, 13 insertions(+), 57 deletions(-) delete mode 100644 gulp/gulp-bootstrap.js create mode 100644 website/client/assets/scss/bootstrap.scss delete mode 100644 website/client/assets/scss/bootstrap_config.scss diff --git a/gulp/gulp-bootstrap.js b/gulp/gulp-bootstrap.js deleted file mode 100644 index e0043d0cd8..0000000000 --- a/gulp/gulp-bootstrap.js +++ /dev/null @@ -1,36 +0,0 @@ -import gulp from 'gulp'; -import fs from 'fs'; - -// Copy Bootstrap 4 config variables from /website /node_modules so we can check -// them into Git - -const BOOSTRAP_NEW_CONFIG_PATH = 'website/client/assets/scss/bootstrap_config.scss'; -const BOOTSTRAP_ORIGINAL_CONFIG_PATH = 'node_modules/bootstrap/scss/_custom.scss'; - -// https://stackoverflow.com/a/14387791/969528 -function copyFile (source, target, cb) { - let cbCalled = false; - - function done (err) { - if (!cbCalled) { - cb(err); - cbCalled = true; - } - } - - let rd = fs.createReadStream(source); - rd.on('error', done); - let wr = fs.createWriteStream(target); - wr.on('error', done); - wr.on('close', () => done()); - rd.pipe(wr); -} - -gulp.task('bootstrap', (done) => { - // use new config - copyFile( - BOOSTRAP_NEW_CONFIG_PATH, - BOOTSTRAP_ORIGINAL_CONFIG_PATH, - done, - ); -}); diff --git a/gulp/gulp-build.js b/gulp/gulp-build.js index b79b1abcca..4ea14e1694 100644 --- a/gulp/gulp-build.js +++ b/gulp/gulp-build.js @@ -23,7 +23,7 @@ gulp.task('build:common', () => { gulp.task('build:server', ['build:src', 'build:common']); // Client Production Build -gulp.task('build:client', ['bootstrap'], (done) => { +gulp.task('build:client', (done) => { webpackProductionBuild((err, output) => { if (err) return done(err); console.log(output); // eslint-disable-line no-console diff --git a/gulpfile.js b/gulpfile.js index 59188792bc..bda94d34cd 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -11,7 +11,6 @@ require('babel-register'); if (process.env.NODE_ENV === 'production') { // eslint-disable-line no-process-env require('./gulp/gulp-apidoc'); // eslint-disable-line global-require require('./gulp/gulp-build'); // eslint-disable-line global-require - require('./gulp/gulp-bootstrap'); // eslint-disable-line global-require } else { require('glob').sync('./gulp/gulp-*').forEach(require); // eslint-disable-line global-require require('gulp').task('default', ['test']); // eslint-disable-line global-require diff --git a/package.json b/package.json index 44e26ab0da..3a883a6ebe 100644 --- a/package.json +++ b/package.json @@ -148,7 +148,7 @@ "test:nodemon": "gulp test:nodemon", "coverage": "COVERAGE=true mocha --require register-handlers.js --reporter html-cov > coverage.html; open coverage.html", "sprites": "gulp sprites:compile", - "client:dev": "gulp bootstrap && node webpack/dev-server.js", + "client:dev": "node webpack/dev-server.js", "client:build": "gulp build:client", "client:unit": "cross-env NODE_ENV=test karma start test/client/unit/karma.conf.js --single-run", "client:unit:watch": "cross-env NODE_ENV=test karma start test/client/unit/karma.conf.js", diff --git a/website/client/app.vue b/website/client/app.vue index 16e2ce31c0..b81f340cd9 100644 --- a/website/client/app.vue +++ b/website/client/app.vue @@ -359,7 +359,6 @@ export default { - diff --git a/website/client/assets/scss/bootstrap.scss b/website/client/assets/scss/bootstrap.scss new file mode 100644 index 0000000000..fc701daed6 --- /dev/null +++ b/website/client/assets/scss/bootstrap.scss @@ -0,0 +1,8 @@ +// Bootstrap variables override https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss +$grid-gutter-width: 24px; + +// Bootstrap and its default variables +@import 'node_modules/bootstrap/scss/bootstrap'; + +// Bootstrap Vue styles +@import 'node_modules/bootstrap-vue/dist/bootstrap-vue'; \ No newline at end of file diff --git a/website/client/assets/scss/bootstrap_config.scss b/website/client/assets/scss/bootstrap_config.scss deleted file mode 100644 index 96a7836938..0000000000 --- a/website/client/assets/scss/bootstrap_config.scss +++ /dev/null @@ -1,17 +0,0 @@ -// Custom variables for Bootstrap 4 - - -// See here https://github.com/twbs/bootstrap/issues/22458 -// why it's not enough to just override $grid-gutter-width-base. -// -// Basically you have to copy here every variable from _variables.scss -// that uses a custom variable. -$grid-gutter-width-base: 24px; -$grid-gutter-widths: ( - xs: $grid-gutter-width-base, - sm: $grid-gutter-width-base, - md: $grid-gutter-width-base, - lg: $grid-gutter-width-base, - xl: $grid-gutter-width-base -); -$card-deck-margin: ($grid-gutter-width-base / 2); \ No newline at end of file diff --git a/website/client/assets/scss/index.scss b/website/client/assets/scss/index.scss index c6a4f538a2..88df7bf699 100644 --- a/website/client/assets/scss/index.scss +++ b/website/client/assets/scss/index.scss @@ -1,3 +1,5 @@ +@import './bootstrap'; + // Variables and Functions @import './utils'; @import './colors'; diff --git a/website/client/components/inventory/item.vue b/website/client/components/inventory/item.vue index a1f905d4ed..f188b2f272 100644 --- a/website/client/components/inventory/item.vue +++ b/website/client/components/inventory/item.vue @@ -17,6 +17,7 @@ div(v-else) :target="itemId", triggers="hover", :placement="popoverPosition", + :preventOverflow="false", ) slot(name="popoverContent", :item="item")