From cee091893a2d9d9aad26959dab095e71bc43b895 Mon Sep 17 00:00:00 2001 From: Linus Lee Date: Thu, 24 Sep 2020 06:42:23 -0400 Subject: [PATCH] Nail down basic app styles / layout --- static/css/main.css | 151 +++++++++++++++++++++++++++++++++++++++++++- static/js/lang.js | 4 +- static/js/main.js | 73 +++++++++++++++++---- 3 files changed, 212 insertions(+), 16 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index 696faf6..8bb8b6d 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -5,12 +5,13 @@ html { font-size: 18px; } -/* layout */ +/* resets */ html, body { --block-accent-color: #e02345; margin: 0; + background: #f8f5f5; } main { @@ -26,9 +27,157 @@ h3 { font-family: var(--ff-tabloid); font-weight: normal; color: var(--block-accent-color); + margin: .5rem 0; } +p { + margin-top: .5em; + margin-bottom: 1em; +} + +button { + font-size: 1em; +} + +code, input, textarea { font-family: var(--ff-mono); } + +/* layout */ + +header, +footer { + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 3em; +} + +nav { + margin: .8em 0; +} + +nav a { + color: var(--block-accent-color); + margin: 0 1em; +} + +header .subtitle { + font-size: 1.2em; +} + +header .lang.block { + --block-background-color: #000; + + font-size: 1.4em; + font-family: var(--ff-tabloid); + font-weight: normal; + color: #fff; + display: inline-block; /* for transforms */ + transform: rotate(-10deg); + pointer-events: none; +} + +.editor { + display: flex; + flex-direction: column; + position: relative; + margin-bottom: 3em; +} + +.editor .code, +.editor .output, +.editor .errors { + width: 100%; + padding: .5em 1em; + border-bottom: 3px solid var(--block-text-color); + box-sizing: border-box; +} + +.editor > :last-child { + border-bottom: 0; +} + +.editor.block { + padding: 0; +} + +.editor .controls { + position: absolute; + top: -24px; + right: 0; + width: 100%; + box-sizing: border-box; + padding: 0 1em; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; +} + +.editor .output { + min-height: 5em; + display: flex; + flex-direction: column; + align-items: flex-start; + line-height: 1.5em; +} + +.editor .output .output-line { + width: 100%; +} + +.editor .code { + padding: 0; + position: relative; +} + +.editor .errors { + color: var(--block-accent-color); +} + +.filler, +textarea.editor-input { + font-family: var(--ff-mono); + font-size: 1em; + line-height: 1.3em; + padding: .5em 1em; + border: 0; + width: 100%; + box-sizing: border-box; + overflow-y: auto; + resize: none; + white-space: nowrap; +} + +textarea.editor-input { + position: absolute; + background: var(--block-background-color); + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +textarea.editor-input:focus { + outline: none; + background: #f8f8f8; +} + +.filler p { + margin: 0; + padding: 0; + word-wrap: break-word; + white-space: pre-wrap; +} + +.output .no-output { + color: #777; +} + +footer a { + color: var(--block-accent-color); +} diff --git a/static/js/lang.js b/static/js/lang.js index 4d17b48..08e1499 100644 --- a/static/js/lang.js +++ b/static/js/lang.js @@ -47,7 +47,7 @@ class Reader { */ class Wordifier { constructor(str) { - this.reader = new Reader(str); + this.reader = new Reader(str.trim()); this.tokens = []; } wordify() { @@ -83,7 +83,7 @@ class Wordifier { } this.reader.dropWhitespace(); } - return this.tokens.slice(1); + return this.tokens; } wordifyString(endChar) { let acc = ''; diff --git a/static/js/main.js b/static/js/main.js index b6aa634..3815538 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,5 +1,4 @@ -const PROG_DEFAULT = ` -DISCOVER HOW TO factorial WITH n +const PROG_DEFAULT = `DISCOVER HOW TO factorial WITH n WE SAID WHAT IF n IS ACTUALLY 0 WE SAID @@ -16,6 +15,18 @@ YOU WON'T WANT TO MISS result PLEASE LIKE AND SUBSCRIBE`; +const HEADLINES = [ + `You Won't Believe What This Programming Language Can Do!`, + `The Best Programming Language You Haven't Heard Of (It Will Surprise You!)`, + `Shocking New Programming Language Bewilders Programmers at Google and Facebook!`, + `Programmer Who Made Everything Now Predicts the Next Big Language!`, + `The Secret Programming Language Every 10x Programmer Recommends!`, +]; + +function randomHeadline() { + return HEADLINES[~~(Math.random() * HEADLINES.length)]; +} + const { Component, } = window.Torus; @@ -28,6 +39,10 @@ class Editor extends Component { this.errors = ''; this.handleRun = () => this.eval(); + this.handleReset = () => { + this.prog = PROG_DEFAULT; + this.render(); + } this.handleInput = evt => { this.prog = evt.target.value; this.render(); @@ -35,12 +50,13 @@ class Editor extends Component { } eval() { this.output = ''; + this.errors = ''; try { const tokens = tokenize(this.prog); const nodes = new Parser(tokens).parse(); const env = new Environment({ print: s => { - this.output += s.toString(); + this.output += s.toString() + '\n'; this.render(); }, }); @@ -53,23 +69,31 @@ class Editor extends Component { compose() { return jdom`
+ ${this.prog === PROG_DEFAULT ? null : + jdom``}
-
-
-
- ${this.output.split('\n').map(line => jdom`${line}`)} -
-
- ${this.errors.split('\n').map(line => jdom`${line}`)} -
+
+ ${this.output ? this.output + .split('\n') + .map(line => jdom`${line}`) + : jdom`No output.`}
+ ${this.errors ? jdom`
+ ${this.errors.split('\n').map(line => jdom`${line}`)} +
` : null}
`; } } @@ -80,9 +104,32 @@ class App extends Component { } compose() { return jdom`
-

Tabloid

-

The Clickbait Headline Programming Language

+
+

${randomHeadline()}

+ +

+ Tabloid: The Clickbait Headline Programming Language +

+
${this.editor.node} +

What?

+

But why?

+

Does it actually work?

+
`; } }