Adding app content

codaxy · Jun 16, 2021 · feeaa1b · feeaa1b
1 parent 2085775
commit feeaa1b
Show file tree

Hide file tree

Showing 38 changed files with 1,195 additions and 3 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,17 @@
+root = true
+
+[*.js]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+
+[*.ts]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+
+[*.scss]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/node_modules/
+/dist/
diff --git a/LICENSE → LICENSE.md b/LICENSE → LICENSE.md
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Codaxy
+Copyright (c) 2021 Codaxy d.o.o.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,2 +1,17 @@
-# cxjs-app-template-basic
-Basic CxJS application template
+# Basic application template for CxJS
+
+To start the application, run:
+
+```bash
+npm start
+```
+
+To build the application, run:
+
+```bash
+npm run build
+```
+
+### License 
+
+[MIT](./License.md)
diff --git a/app/components/Hamburger.scss b/app/components/Hamburger.scss
@@ -0,0 +1,41 @@
+.hamburger {
+    $size: 20px;
+    $icon-size: 16px;
+    $thickness: 2px;
+    $color: rgba(255, 255, 255, 0.8);
+
+    display: block;
+    position: relative;
+    width: $size;
+    height: $size;
+    margin-right: 1rem;
+    flex-shrink: 0;
+
+    &:after,
+    &:before {
+        background-color: $color;
+        transition: all 0.2s linear;
+        content: " ";
+        display: block;
+        position: absolute;
+        height: $thickness;
+        left: ($size - $icon-size) / 2;
+        right: ($size - $icon-size) / 2;
+        top: ($size/2) - ceil($thickness/2);
+    }
+    &:before {
+        box-shadow: $color 0 (-$icon-size/2 + $thickness);
+    }
+    &:after {
+        box-shadow: $color 0 ($icon-size/2) - $thickness;
+    }
+
+    &.open {
+        &:before {
+            box-shadow: $color 0 (-$icon-size/2 + $thickness + 3px);
+        }
+        &:after {
+            box-shadow: $color 0 ($icon-size/2 - $thickness - 3px);
+        }
+    }
+}
diff --git a/app/components/index.scss b/app/components/index.scss
@@ -0,0 +1 @@
+@import "Hamburger";
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <title>Cx App</title>
+</head>
+
+<body>
+    <div id="app">
+    </div>
+</body>
+
+</html>
diff --git a/app/index.js b/app/index.js
@@ -0,0 +1,23 @@
+import {Store} from "cx/data";
+import {Url, History, Widget, startHotAppLoop} from "cx/ui";
+import {Timing, Debug} from "cx/util";
+
+//css
+import "./index.scss";
+
+//store
+const store = new Store();
+
+//routing
+Url.setBaseFromScript("app*.js");
+History.connect(store, "url");
+
+//debug
+Widget.resetCounter();
+Timing.enable("app-loop");
+Debug.enable("app-data");
+
+//app loop
+import Routes from "./routes";
+
+startHotAppLoop(module, document.getElementById("app"), store, Routes);
diff --git a/app/index.scss b/app/index.scss
@@ -0,0 +1,8 @@
+$cx-include-global-rules: true;
+
+@import "~cx/src/variables";
+@import "~cx/src/index";
+
+@import "components/index";
+@import "layout/index";
+@import "routes/index";
diff --git a/app/layout/Controller.js b/app/layout/Controller.js
@@ -0,0 +1,16 @@
+import { Controller } from "cx/ui";
+
+export default class extends Controller {
+    onInit() {
+        this.store.init("layout.aside.open", window.innerWidth >= 800);
+
+        this.addTrigger("navigation", ["url"], () => {
+            if (window.innerWidth < 800)
+                this.store.set("layout.aside.open", false);
+        });
+    }
+
+    onMainClick(e, { store }) {
+        if (window.innerWidth < 800) store.set("layout.aside.open", false);
+    }
+}
diff --git a/app/layout/index.js b/app/layout/index.js
@@ -0,0 +1,60 @@
+import { Link } from "cx/widgets";
+import { ContentPlaceholder } from "cx/ui";
+import Controller from "./Controller";
+
+export default (
+    <cx>
+        <div
+            controller={Controller}
+            class={{
+                layout: true,
+                nav: { bind: "layout.aside.open" }
+            }}
+        >
+            <main class="main" onMouseDownCapture="onMainClick">
+                <ContentPlaceholder />
+            </main>
+            <header class="header">
+                <i
+                    class={{
+                        hamburger: true,
+                        open: { bind: "layout.aside.open" }
+                    }}
+                    onClick={(e, { store }) => {
+                        store.toggle("layout.aside.open");
+                    }}
+                />
+                <ContentPlaceholder name="header" />
+            </header>
+            <aside class="aside">
+                <h1>Cx App</h1>
+                <dl>
+                    <dt>App</dt>
+                    <dd>
+                        <Link href="~/" url-bind="url">
+                            Home
+                        </Link>
+                    </dd>
+                    <dd>
+                        <Link href="~/dashboard" url-bind="url">
+                            Dashboard
+                        </Link>
+                    </dd>
+                    <dd>
+                        <Link href="~/about" url-bind="url">
+                            About
+                        </Link>
+                    </dd>
+                </dl>
+                <dl>
+                    <dt>Admin</dt>
+                    <dd>
+                        <Link href="~/users" url-bind="url" match="prefix">
+                            Users
+                        </Link>
+                    </dd>
+                </dl>
+            </aside>
+        </div>
+    </cx>
+);
diff --git a/app/layout/index.scss b/app/layout/index.scss
@@ -0,0 +1,112 @@
+$header-color: #a73232;
+$aside-width: 260px;
+$small-device-width: 800px;
+
+#app,
+.layout {
+    height: 100%;
+}
+
+.header {
+    padding: 1.5em;
+    background: $header-color;
+    position: fixed;
+    transition: all 0.2s linear;
+    left: 0;
+    top: 0;
+    right: 0;
+    box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.26);
+    display: flex;
+    align-items: center;
+
+    h2 {
+        line-height: 1;
+        font-size: 1.5rem;
+        margin: 0;
+        color: white;
+    }
+
+    .layout.nav & {
+        transform: translateX($aside-width);
+        @media screen and (min-width: $small-device-width) {
+            left: $aside-width;
+            transform: none;
+        }
+    }
+}
+
+.aside {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: $aside-width;
+    background: white;
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0.26);
+    font-size: 13px;
+
+    transform: translateX(-300px);
+    transition: transform 0.2s linear;
+
+    .layout.nav & {
+        transform: none;
+    }
+
+    h1 {
+        line-height: 3rem;
+        margin: 0;
+        padding: 0.5em;
+        text-align: center;
+        box-shadow: 0 0 1px rgba(0, 0, 0, 0.26);
+        text-transform: uppercase;
+        font-size: 1.5rem;
+    }
+
+    dt {
+        padding: 0.5rem 0.5rem 0.5rem 2rem;
+        font-weight: bold;
+    }
+
+    dl .cxb-link {
+        padding: 0.5rem;
+        display: block;
+        color: inherit;
+
+        &.cxs-active {
+            color: $header-color;
+        }
+    }
+}
+
+.main {
+    padding: 5.5rem 1rem 1rem;
+    transition: all 0.2s linear;
+    height: 100%;
+    box-sizing: border-box;
+    display: block;
+
+    .layout.nav & {
+        transform: translateX($aside-width);
+        @media screen and (min-width: $small-device-width) {
+            margin-left: $aside-width;
+            transform: none;
+        }
+    }
+}
+
+h3 {
+    color: $header-color;
+}
+
+p {
+    max-width: 40em;
+}
+
+.cxb-section.cxm-card {
+    background: white;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.26);
+    border-radius: 1px;
+}
+
+.layout.nav {
+}
diff --git a/app/polyfill.js b/app/polyfill.js
@@ -0,0 +1,3 @@
+import "core-js/stable";
+import "regenerator-runtime/runtime";
+import 'whatwg-fetch';
diff --git a/app/routes/_template/Controller.js b/app/routes/_template/Controller.js
@@ -0,0 +1,5 @@
+export default {
+    onInit() {
+
+    }
+}
diff --git a/app/routes/_template/index.js b/app/routes/_template/index.js
@@ -0,0 +1,9 @@
+//import { HtmlElement } from "cx/widgets";
+
+import Controller from "./Controller";
+
+export default (
+    <cx>
+        <div controller={Controller} />
+    </cx>
+);
diff --git a/app/routes/_template/index.scss b/app/routes/_template/index.scss
@@ -0,0 +1 @@
+
diff --git a/app/routes/about/index.js b/app/routes/about/index.js
@@ -0,0 +1,34 @@
+import { Link, Section } from "cx/widgets";
+
+export default (
+    <cx>
+        <h2 putInto="header">About</h2>
+        <Section mod="well" title="Cx App">
+            <p ws>
+                This is an application generated using Cx CLI. It's just a
+                skeleton that provides a basic layout and a couple of demo
+                pages.
+            </p>
+
+            <h6>Layout</h6>
+            <p ws>
+                This is a simple responsive layout with a side navigation that
+                is initially closed on screens less than a 1000px wide.
+            </p>
+
+            <h6>Dashboard Page</h6>
+            <p ws>
+                A really simple dashboard with hardcoded data. It's there just
+                to remind you that CxJS offers a nice charting package that can
+                be used to build dashboards.
+            </p>
+
+            <h6>Users Page</h6>
+            <p ws>
+                A sample admin page demonstrating CRUD operations and search
+                functionality.
+            </p>
+            <Link href="~/">Back</Link>
+        </Section>
+    </cx>
+);
diff --git a/app/routes/about/index.scss b/app/routes/about/index.scss
@@ -0,0 +1 @@
+