Adding bootstrap 4.1 using yarn + webpack

assets/css/app.scss

@@ -1,4 +1,4 @@
-@import '~bootstrap-sass/assets/stylesheets/bootstrap';
+@import "~bootstrap/scss/bootstrap";
 @import '~chosen-js/chosen.css';
 @import "~font-awesome/scss/font-awesome.scss";
 @import '~flag-icon-css/sass/flag-icon.scss';

assets/js/app.js

@@ -3,18 +3,19 @@ import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/pu
 
 Routing.setRoutingData(routes);
 
-var homeUrl = Routing.generate('home');
+var homePublicUrl = Routing.generate('home') + 'public/';
 var legacyIndex = Routing.generate('legacy_index');
-var main = Routing.generate('legacy_main', {'name' : 'statusonline.png'});
+var mainUrl = Routing.generate('legacy_main', {'name' : '/'});
 var webAjax = Routing.generate('web.ajax');
 
-/*console.log(homeUrl);
+console.log(homePublicUrl);
 console.log(legacyIndex);
-console.log(main);*/
+console.log(mainUrl);
+console.log(webAjax);
 
 var ajax_url = webAjax + 'chat.ajax.php';
-var online_button = '<img src="' + homeUrl + 'public/img/statusonline.png">';
-var offline_button = '<img src="' + homeUrl + 'public/img/statusoffline.png">';
+var online_button = '<img src="' + homePublicUrl + 'img/statusonline.png">';
+var offline_button = '<img src="' + homePublicUrl + 'img/statusoffline.png">';
 /*var connect_lang = '{{ "ChatConnected"|get_lang }}';
 var disconnect_lang = '{{ "ChatDisconnected"|get_lang }}';*/
 
@@ -336,7 +337,7 @@ $(function() {
         });
     });
 
-    $("#notifications").load(_p.web_ajax + "online.ajax.php?a=get_users_online");
+    $("#notifications").load(webAjax + "online.ajax.php?a=get_users_online");
 });
 
 $(window).resize(function() {
@@ -536,7 +537,7 @@ if (typeof CKEDITOR !== 'undefined') {
     plugins.forEach(function (plugin) {
         CKEDITOR.plugins.addExternal(
             plugin,
-            main + 'javascript/ckeditor/plugins/' + plugin + '/'
+            mainUrl + 'javascript/ckeditor/plugins/' + plugin + '/'
         );
     });
 
@@ -601,7 +602,8 @@ function doneResizing() {
     }
 }
 
-function addMainEvent(elm, evType, fn, useCapture) {
+function addMainEvent(elm, evType, fn, useCapture)
+{
     if (elm.addEventListener) {
         elm.addEventListener(evType, fn, useCapture);
         return true;

assets/js/vendor.js

@@ -11,7 +11,7 @@ require("webpack-jquery-ui/css");
 
 // JS is equivalent to the normal "bootstrap" package
 // no need to set this to a variable, just require it
-require("bootstrap-sass");
+require("bootstrap");
 require("chosen-js");
 require("mediaelement");
 // require("font-awesome-webpack"); already added manually in main.scss

package.json

@@ -6,9 +6,10 @@
   "devDependencies": {
     "@symfony/webpack-encore": "^0.19",
     "babel-preset-react": "^6.24.1",
-    "bootstrap-sass": "^3.3.7",
+    "bootstrap": "^4.1.3",
     "copy-webpack-plugin": "^4.3.1",
     "node-sass": "^4.5.3",
+    "popper.js": "^1.14.4",
     "sass-loader": "^6.0.7",
     "webpack": "^3.0"
   },
@@ -25,7 +26,7 @@
     "fullcalendar": "3.1.0",
     "highlight.js": "^9.12.0",
     "image-map-resizer": "^1.0.3",
-    "jquery": "^3.0",
+    "jquery": "^3.3.1",
     "jquery-ui-timepicker-addon": "^1.6.3",
     "jquery.scrollbar": "^0.2.11",
     "jsplumb": "^2.6.9",

src/ThemeBundle/Resources/views/Layout/head.html.twig

@@ -38,7 +38,7 @@
 {% set message_link = '' %}
 
 <link rel="stylesheet" href="{{ asset('build/vendor.css') }}"/>
-<link rel="stylesheet" href="{{ asset('build/css/base.css') }}"/>
+<link rel="stylesheet" href="{{ asset('build/css/app.css') }}"/>
 <link rel="stylesheet" href="{{ asset('build/css/themes/'~ theme ~'/default.css') }}"/>
 <link rel="stylesheet" media="print" href="{{ asset('build/css/print.css') }}"/>
 
@@ -83,7 +83,6 @@
                 {{ js }}
             {% endfor %}
         {% endautoescape %}
-        {#{% include '@ChamiloTheme/Layout/header.js.twig' %}#}
     {% endblock %}
 
     {#'@MopaBootstrapBundle/Resources/public/js/eyecon-bootstrap-datepicker.js'#}

webpack.config.js

@@ -19,7 +19,7 @@ Encore
     .addEntry('vendor', './assets/js/vendor.js')
     .addEntry('app', './assets/js/app.js')
     // read main.scss -> output as web/build/css/base.css
-    .addStyleEntry('css/base', './assets/css/main.scss')
+    .addStyleEntry('css/app', './assets/css/app.scss')
     .addStyleEntry('css/editor', './assets/css/editor.css')
     .addStyleEntry('css/print', './assets/css/print.css')
     .addStyleEntry('css/scorm', './assets/css/scorm.css')
@@ -33,7 +33,7 @@ Encore
     //.enableVersioning() // hashed filenames (e.g. main.abc123.js)
 ;
 
-var chamiloThemes = [
+var themes = [
     'academica',
     'baby_orange',
     'beach',
@@ -65,7 +65,7 @@ var chamiloThemes = [
 ];
 
 // Add Chamilo themes
-chamiloThemes.forEach(function (theme) {
+themes.forEach(function (theme) {
     Encore
         .addStyleEntry('css/themes/'+theme+'/default', './assets/css/themes/'+theme+'/default.css')
     ;

yarn.lock

@@ -1036,14 +1036,14 @@ bootstrap-daterangepicker@^2.1.30:
     jquery ">=1.10"
     moment "^2.9.0"
 
-bootstrap-sass@^3.3.7:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498"
-
 bootstrap-select@^1.12.4:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/bootstrap-select/-/bootstrap-select-1.13.1.tgz#f59c02926fb5ac6356b9d1cdbc5384c2f013d9ba"
 
+bootstrap@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.3.tgz#0eb371af2c8448e8c210411d0cb824a6409a12be"
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3458,7 +3458,7 @@ jquery.scrollbar@^0.2.11:
   version "0.2.11"
   resolved "https://registry.yarnpkg.com/jquery.scrollbar/-/jquery.scrollbar-0.2.11.tgz#e91bd4a97d83859463024d26e730dc36676ab59d"
 
-jquery@>=1.10, jquery@>=1.2.3, jquery@>=1.6.0, jquery@>=2.0.0, jquery@^3.0, jquery@^3.2.1:
+jquery@>=1.10, jquery@>=1.2.3, jquery@>=1.6.0, jquery@>=2.0.0, jquery@^3.2.1, jquery@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
 
@@ -4591,6 +4591,10 @@ pkg-up@^1.0.0:
   dependencies:
     find-up "^1.0.0"
 
+popper.js@^1.14.4:
+  version "1.14.4"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6"
+
 portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"