diff --git a/app/app.html b/app/app.html index be09420..63393a1 100644 --- a/app/app.html +++ b/app/app.html @@ -1 +1,6 @@ -
App running
\ No newline at end of file + +
+
col1
+
col2
+
+
\ No newline at end of file diff --git a/app/app.less b/app/app.less index 99a6c65..c300b66 100644 --- a/app/app.less +++ b/app/app.less @@ -1,3 +1,34 @@ -body { - background: aqua; +html, body, body > * { + margin: 0; + width: 100%; + height: 100%; +} + +.flex-horiz { + display: flex; + flex-direction: row; + height: 100%; +} + +.flex-vert { + display: flex; + flex-direction: column; + height: 100%; +} + + +.flex-horiz > *, .flex-vert > * { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 1px; +} + +.flex-horiz .flex-shrink, .flex-vert .flex-shrink { + flex-grow: 0; + flex-shrink: 1; +} + +.flex-horiz .flex-grow, .flex-vert .flex-grow { + flex-grow: 1; + flex-shrink: 0; } \ No newline at end of file diff --git a/app/boot.ts b/app/boot.ts index 160754a..6147d10 100644 --- a/app/boot.ts +++ b/app/boot.ts @@ -1,7 +1,10 @@ import './app.less'; import bootHtml from './app.html'; +import { AppRoot } from './elements/app-root/app-root'; -var appEle = document.createElement("app-root"); +window.customElements.define('app-root', AppRoot); + +var appEle = document.createElement("div"); appEle.innerHTML = bootHtml; document.body.appendChild(appEle); \ No newline at end of file diff --git a/app/elements/_base.ts b/app/elements/_base.ts new file mode 100644 index 0000000..990f448 --- /dev/null +++ b/app/elements/_base.ts @@ -0,0 +1,18 @@ +export class BaseElement extends HTMLElement { + private _hasConnectedCallback: boolean = false; + connectedCallback() { + + if (!this._hasConnectedCallback) { + this.onInit(); + } + else { + this.onUpdate(); + } + + this._hasConnectedCallback = true; + + } + + onInit() { } + onUpdate() { } +} \ No newline at end of file diff --git a/app/elements/app-root/app-root.less b/app/elements/app-root/app-root.less new file mode 100644 index 0000000..c96ceab --- /dev/null +++ b/app/elements/app-root/app-root.less @@ -0,0 +1,5 @@ +app-root { + width: 100%; + height: 100%; + display: block; +} \ No newline at end of file diff --git a/app/elements/app-root/app-root.ts b/app/elements/app-root/app-root.ts new file mode 100644 index 0000000..fca92ba --- /dev/null +++ b/app/elements/app-root/app-root.ts @@ -0,0 +1,12 @@ +import { BaseElement } from "../_base"; +import './app-root.less'; + +export class AppRoot extends BaseElement { + onInit(): void { + console.log("APP ROOT INIT"); + } + + onUpdate(): void { + console.log("APP ROOT UPDATE"); + } +} \ No newline at end of file diff --git a/static/logo.png b/static/logo.png new file mode 100644 index 0000000..9220189 Binary files /dev/null and b/static/logo.png differ