fix: correctly handle bootstrap variables

gulp/gulp-bootstrap.js

@@ -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,
-  );
-});

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

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

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",

website/client/app.vue

@@ -359,7 +359,6 @@ export default {
 </script>
 
 <style src="intro.js/minified/introjs.min.css"></style>
-<style src="bootstrap/scss/bootstrap.scss" lang="scss"></style>
 <style src="assets/scss/index.scss" lang="scss"></style>
 <style src="assets/css/sprites/spritesmith-largeSprites-0.css"></style>
 <style src="assets/css/sprites/spritesmith-main-0.css"></style>

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';

website/client/assets/scss/bootstrap_config.scss

@@ -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);

website/client/assets/scss/index.scss

@@ -1,3 +1,5 @@
+@import './bootstrap';
+
 // Variables and Functions
 @import './utils';
 @import './colors';

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")
 </template>