moifort / generator-jhipster-bootstrap-material-design

Add material design to your JHipster application

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Need to update for Bootstrap 4/Jhipster 4

lancescape opened this issue · comments

I see this generator is dead... but just want to add some notes...

So For all Using Jhipster 4.12.1 and above... aka Bootstrap 4 with Angular... and want to install Angular Material Design...  here is what you need to know.

first off... it doesn't work fully (for me yet).. but it is close... and I'm not expert at anything Bootstrap/Material/etc. so you may be able to make it work fully
What does NOT work
the menu drop-downs... they menu drop downs work... but they are invisible... you can over on invisible links, they work... even copying the code from an MDB example  straight in will not work... so jhipster is overriding something.. Id dont know what.
there are formatting issues you will need to fix naturally.
Naturally the jhipster MDM generator does not work since it is Bootstrap 3 and a dead project
https://www.npmjs.com/package/generator-jhipster-bootstrap-material-design
HOW TO GET IT (ALMOST) working

If you are css and not scss you will need to witch in your .yo-rc.json... and do all that.
you will have to follow the instructions to yarn install MDB, and hammerjs, and chart.js

app.module.ts

import { NgModule, Injector, NO_ERRORS_SCHEMA } from '@angular/core';
schemas: [ NO_ERRORS_SCHEMA ],

tsconfig.json

add in the "include:    "node_modules/angular-bootstrap-md/**/*.ts"

vendor.scss  -- THIS IS IMPORTANT FOR JHIPSTER--

`/* after changing this file run 'yarn run webpack:build' */
$fa-font-path: '~font-awesome/fonts';
// Images Path for angular-bootstrap-md
$image-path: '../../../../../node_modules/angular-bootstrap-md/img' !default;
// Fonts Path for angular-bootstrap-md
$roboto-font-path: "../../../../../node_modules/angular-bootstrap-md/font/roboto/" !default;

/***************************
put Sass variables here:
eg $input-color: red;
****************************/
// Override Boostrap variables
@import "bootstrap-variables";
// Import Bootstrap source files from node_modules
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/font-awesome/scss/font-awesome';
@import 'node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap';
@import 'node_modules/angular-bootstrap-md/scss/mdb-free';

/* jhipster-needle-scss-add-vendor JHipster will add new css style */
`
angular-cli.json  - - IS NOT USED BY JHIPSTER... but you can add this for fun... it does nothing

add in the styles:
 "../../../node_modules/font-awesome/scss/font-awesome.scss",
    "../../../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "../../../node_modules/angular-bootstrap-md/scss/mdb-free.scss",

add in the scripts
    "../../../node_modules/chart.js/dist/Chart.js",
    "../../../node_modules/hammerjs/hammer.min.js"

It looks great on most pages... so close.

ISSUE NavBar problem - you can do a quick fix by changing the opacity in the _dropdowns.scss but the real problem is in the fade-in transition... which is above my front end knowedge

//material dropdown animation
.dropdown.show {
.dropdown-menu {
display: block;
opacity: 1;
transition: 0.55s;
}
.fadeInDropdown {
opacity: 1;
}
}

next problem is MODAL SCROLLING......