I tried to implement the metronic admin theme I bought in my RailsApp.
Everything works great, but when I click on a link the whole UI isn't working. I think it's a JavaScript Problem.
What I did:
* copy assets:
* copy `/metronic_v5.0.3/metronic_v5.0.3/theme/src/vendors/flaticon` to `vendor/assets/metronic/flaticon`
* copy `/metronic_v5.0.3/metronic_v5.0.3/theme/src/vendors/metronic/fonts` to `vendor/assets/metronic/fonts`
* copy `/metronic_v5.0.3/metronic_v5.0.3/theme/src/vendors/metronic/css` to `vendor/assets/metronic/css`
* copy `/metronic_v5.0.3/metronic_v5.0.3/theme/src/vendors/line-awesome` to `vendor/assets/metronic/line-awesome`
* copy `/metronic_v5.0.3/metronic_v5.0.3/theme/dist/html/demo3/assets/demo/demo3/base/style.bundle.css` to `vendor/assets/metronic/theme/style.bundle.css`
* copy `/metronic_v5.0.3/metronic_v5.0.3/theme/dist/html/demo3/assets/demo/demo3/base/scripts.bundle.js` to `vendor/assets/metronic/theme/scripts.bundle.js`
* copy `/metronic_v5.0.3/metronic_v5.0.3/theme/dist/html/default/assets/vendors/base/fonts/font-awesome` to `vendor/assets/metronic/font-awesome`
* copy `/metronic_v5.0.3/metronic_v5.0.3/theme/dist/html/default/assets/vendors/base/vendors.bundle.css` to `vendor/assets/metronic/theme/vendors.bundle.css`
* copy `/metronic_v5.0.3/metronic_v5.0.3/theme/dist/html/default/assets/vendors/base/vendors.bundle.js` to `vendor/assets/metronic/theme/vendors.bundle.js`
* copy images:
* copy `/metronic_v5.0.3/metronic_v5.0.3/theme/dist/html/demo3/assets/app/media/img/bg/bg-2.jpg` to `app/assets/images/metronic/bg-2.jpg`
* copy `/metronic_v5.0.3/metronic_v5.0.3/theme/dist/html/demo3/assets/demo/demo3/media/img/logo/logo.png` to `app/assets/images/metronic/bg-2.jpg`
* install third party:
* cd `/metronic_v5.0.3/metronic_v5.0.3/tools`
* run `npm install && bower install`
* run `$(which gulp) --prod`
* copy `/metronic_v5.0.3/metronic_v5.0.3/tools/bower_components/malihu-custom-scrollbar-plugin` to `vendor/assets/metronic/bower_components/malihu-custom-scrollbar-plugin`
my application.scss:
@import "bootstrap";
// Metronic
@import "theme/vendors.bundle.css";
@import "theme/style.bundle.css";
@import "css/styles.css";
@import "flaticon/css/flaticon.css";
@import "line-awesome/css/line-awesome.min.css";
@import "bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css";
and my application.js:
//= require rails-ujs
//= require jquery3
//= require jquery.turbolinks
//= require popper
//= require bootstrap
// Metronic
//= require theme/vendors.bundle.js
//= require theme/scripts.bundle.js
//= require bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js
//= require turbolinks
//= require_tree .
I find several solutions with this code:
$( document ).on('turbolinks:load', function() {
// your code
}
But what should I use for 'your code'. I can't reload on the block the whole theme/vendors.bundle.js and require theme/scripts.bundle.js or?
If anyone can help me it would be nice.
