diff --git a/src/main.ts b/src/main.ts index 304c610..ef5087e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,18 +4,52 @@ import { start } from "@thi.ng/hdom"; // stateless component w/ params // the first arg is an auto-injected context object // (not used here, see dedicated section in readme further below) -const greeter = (_: any, name: string) => ["h1.title", "hello ", name]; +const greeter = (_: any, name: string) => ["h1.title", "Hello ", name]; -// component w/ local state -const counter = (i = 0) => { - return () => ["button", { onclick: () => (i++) }, `clicks: ${i}`]; -}; +// Syntax explanation: +// ["b", "Hello"] === Hello +// ["div", ["b", "Hello"]] ===
Hello
+// ["div.foo#bar"] ==
+ +const onSubmit = (e: Event) => { + console.log("You tried to submit this form!", e) + e.preventDefault() +} + +const uploadForm = (_: any) => + ["section", + ["h2", "Upload new image"], + ["form", {"onsubmit": onSubmit}, + ["input", {"type": "file", "name": "image"}], + ["input", {"type": "submit", "value": "Upload"}]]] + +const imageHasBeenUploaded = false + +const previousImage = (_: any) => + ["p", "Nice pics!"] + +const noImageMessage = (_: any) => + ["p", "Start by picking an image to upload. It will be shown on the connected e-ink displays within the next hour."] + +const overview = (_: any) => + ["section.overview", + imageHasBeenUploaded ? previousImage : noImageMessage, + uploadForm] + +const timeline = (_: any) => + ["section.timeline", + ["h2", "Recent Activity"], + ["ul", + ["li", "Hannes uploaded an image", ["em", "Jan 14 2021"]], + ["li", "Arne uploaded an image", ["em", "Jan 12 2021"]], + ["li", "Hannes uploaded an image", ["em", "Jan 12 2021"]], + ["li.special", "You uploaded an image", ["em", "Jan 1 2021"]]]] const app = () => { - // initialization steps - // ... - // root component is just a static array - return ["div#app", [greeter, "world"], counter(), counter(100)]; + return ["main#app", + [greeter, "Pau"], + [overview], + [timeline]]; }; // start RAF update & diff loop diff --git a/src/style.css b/src/style.css index 0b14c27..d8bd6f8 100644 --- a/src/style.css +++ b/src/style.css @@ -5,11 +5,20 @@ body { } body { - font-family: Avenir, Helvetica, Arial, sans-serif; + font-family: Helvetica, Arial, sans-serif; line-height: 1.2; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - text-align: center; color: #2c3e50; - margin-top: 60px; + padding: 24px; +} + +.timeline ul li.special { + background: rgba(180,20,220,.2) +} + +.timeline ul li em { + padding-left: .6em; + font-size: 80%; + font-style: normal }