still under construction
This commit is contained in:
@@ -18,9 +18,9 @@
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="./dist/bundle.css" />
|
||||
<link rel="stylesheet" href="./dist/app.css" />
|
||||
<title>Hello</title>
|
||||
<script src="./dist/bundle.js"></script>
|
||||
<script src="./dist/app.js"></script>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
|
||||
@@ -18,9 +18,9 @@
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="./dist/bundle.css" />
|
||||
<link rel="stylesheet" href="./dist/app.css" />
|
||||
<title>Hello</title>
|
||||
<script src="./dist/bundle.js"></script>
|
||||
<script src="./dist/app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible">
|
||||
|
||||
@@ -29,6 +29,6 @@
|
||||
"scripts": {
|
||||
"start": "webpack serve",
|
||||
"build": "webpack",
|
||||
"dist": "cp ./dist/*.css ./dist/*.js ../app/src/main/resources/static"
|
||||
"dist": "cp ./dist/*.css ./dist/*.js ../app/src/main/resources/assets"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -51,12 +51,12 @@ main article {
|
||||
pre {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.2;
|
||||
word-wrap: normal;
|
||||
//word-wrap: normal;
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
//padding: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
//white-space: nowrap;
|
||||
|
||||
&.scrollable {
|
||||
max-height: 280px;
|
||||
@@ -160,7 +160,7 @@ main article {
|
||||
pre > code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
white-space: pre;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
img {
|
||||
|
||||
@@ -1,73 +1,85 @@
|
||||
import {MDCRipple} from '@material/ripple';
|
||||
import {MDCDrawer} from "@material/drawer";
|
||||
import {MDCTopAppBar} from "@material/top-app-bar";
|
||||
import {MDCTextField} from '@material/textfield';
|
||||
import {MDCList} from '@material/list';
|
||||
import {MDCMenu} from '@material/menu';
|
||||
import autoInit from '@material/auto-init';
|
||||
import { MDCRipple } from "@material/ripple";
|
||||
import { MDCDrawer } from "@material/drawer";
|
||||
import { MDCTopAppBar } from "@material/top-app-bar";
|
||||
import { MDCTextField } from "@material/textfield";
|
||||
import { MDCList } from "@material/list";
|
||||
import { MDCMenu } from "@material/menu";
|
||||
import autoInit from "@material/auto-init";
|
||||
|
||||
const App = {
|
||||
appBar:null,
|
||||
drawer:null,
|
||||
init: function(){
|
||||
autoInit();
|
||||
document.querySelectorAll('.mdc-list-item').forEach(function(item){
|
||||
new MDCRipple(item);
|
||||
});
|
||||
document.querySelectorAll('.mdc-button').forEach(function(item){
|
||||
new MDCRipple(item);
|
||||
});
|
||||
document.querySelectorAll('.mdc-list').forEach(function(item){
|
||||
new MDCList(item);
|
||||
});
|
||||
document.querySelectorAll('.mdc-text-field').forEach(function(item){
|
||||
new MDCTextField(item);
|
||||
});
|
||||
appBar: null,
|
||||
drawer: null,
|
||||
|
||||
this.initDrawer();
|
||||
init: function () {
|
||||
autoInit();
|
||||
document.querySelectorAll(".mdc-list-item").forEach(function (item) {
|
||||
new MDCRipple(item);
|
||||
});
|
||||
document.querySelectorAll(".mdc-button").forEach(function (item) {
|
||||
new MDCRipple(item);
|
||||
});
|
||||
document.querySelectorAll(".mdc-list").forEach(function (item) {
|
||||
new MDCList(item);
|
||||
});
|
||||
document.querySelectorAll(".mdc-text-field").forEach(function (item) {
|
||||
new MDCTextField(item);
|
||||
});
|
||||
|
||||
this.appBar = MDCTopAppBar.attachTo(document.querySelector('#layout-content > header'));
|
||||
this.appBar.setScrollTarget(document.querySelector('#layout-content > #layout-main'));
|
||||
this.appBar.listen('MDCTopAppBar:nav', () => {
|
||||
this.drawer.open = !this.drawer.open;
|
||||
});
|
||||
//document.querySelectorAll('.mdc-top-app-bar--fixed-adjust').forEach(function(item){
|
||||
// item.style.marginTop = this.appBar.;
|
||||
//});
|
||||
this.initDrawer();
|
||||
|
||||
const menu = new MDCMenu(document.querySelector('.mdc-menu'));
|
||||
document.querySelector('#btn-overflow').addEventListener('click', function(){
|
||||
menu.open = true;
|
||||
});
|
||||
this.appBar = MDCTopAppBar.attachTo(
|
||||
document.querySelector("#layout-content > header")
|
||||
);
|
||||
this.appBar.setScrollTarget(
|
||||
document.querySelector("#layout-content > #layout-main")
|
||||
);
|
||||
this.appBar.listen("MDCTopAppBar:nav", () => {
|
||||
this.drawer.open = !this.drawer.open;
|
||||
});
|
||||
//document.querySelectorAll('.mdc-top-app-bar--fixed-adjust').forEach(function(item){
|
||||
// item.style.marginTop = this.appBar.;
|
||||
//});
|
||||
|
||||
console.log('hello world.');
|
||||
window.addEventListener('resize', this.initDrawer);
|
||||
},
|
||||
|
||||
initDrawer: function(){
|
||||
const drawerElement = document.querySelector('#layout-drawer');
|
||||
if (document.body.offsetWidth>600){
|
||||
drawerElement.classList.remove('mdc-drawer--modal');
|
||||
drawerElement.classList.add('mdc-drawer--dismissible');
|
||||
try {
|
||||
document.removeChild(document.querySelector('mdc-drawer-scrim'));
|
||||
} catch (ex){ }
|
||||
const menu = new MDCMenu(document.querySelector(".mdc-menu"));
|
||||
document
|
||||
.querySelector("#btn-overflow")
|
||||
.addEventListener("click", function () {
|
||||
menu.open = true;
|
||||
});
|
||||
|
||||
} else {
|
||||
drawerElement.classList.add('mdc-drawer--modal');
|
||||
drawerElement.classList.remove('mdc-drawer--dismissible');
|
||||
const scrimElement = document.createElement('div');
|
||||
scrimElement.classList.add('mdc-drawer-scrim');
|
||||
drawerElement.parentNode.insertBefore(scrimElement, drawerElement.nextSibling);
|
||||
}
|
||||
//this.initEditor();
|
||||
//this.initHighlightJs();
|
||||
|
||||
this.drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
|
||||
if (document.body.offsetWidth>600) {
|
||||
this.drawer.open = true;
|
||||
}
|
||||
}
|
||||
console.log("hello world.");
|
||||
window.addEventListener("resize", this.initDrawer);
|
||||
},
|
||||
|
||||
initDrawer: function () {
|
||||
const drawerElement = document.querySelector("#layout-drawer");
|
||||
if (document.body.offsetWidth > 600) {
|
||||
drawerElement.classList.remove("mdc-drawer--modal");
|
||||
drawerElement.classList.add("mdc-drawer--dismissible");
|
||||
try {
|
||||
document.removeChild(document.querySelector("mdc-drawer-scrim"));
|
||||
} catch (ex) {}
|
||||
} else {
|
||||
drawerElement.classList.add("mdc-drawer--modal");
|
||||
drawerElement.classList.remove("mdc-drawer--dismissible");
|
||||
const scrimElement = document.createElement("div");
|
||||
scrimElement.classList.add("mdc-drawer-scrim");
|
||||
drawerElement.parentNode.insertBefore(
|
||||
scrimElement,
|
||||
drawerElement.nextSibling
|
||||
);
|
||||
}
|
||||
|
||||
this.drawer = MDCDrawer.attachTo(document.querySelector(".mdc-drawer"));
|
||||
if (document.body.offsetWidth > 600) {
|
||||
this.drawer.open = true;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
App.init();
|
||||
});
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
App.init();
|
||||
});
|
||||
|
||||
@@ -38,11 +38,6 @@ module.exports = [
|
||||
{
|
||||
entry: {
|
||||
app: ["./src/app.scss", "./src/app.js"],
|
||||
//editor: [
|
||||
// "./node_modules/easymde/src/css/easymde.css",
|
||||
// "./node_modules/easymde/src/js/easymde.js",
|
||||
//],
|
||||
//hljs: ["./node_modules/highlight.js/lib/index.js"],
|
||||
},
|
||||
output: {
|
||||
filename: "[name].js",
|
||||
|
||||
Reference in New Issue
Block a user