From e227d384d2d2aec17a1681ed7e4489a4cc9ef319 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 10:04:06 -0700
Subject: [PATCH] Refactor boardPage: Move page frame layout to code

---
 html-templates/index.ejs             |  6 ------
 html-templates/page.ejs              | 17 ++---------------
 src/client/boardPage.tsx             | 27 ++++++++++++++++++++++++++-
 src/client/boardsPage.ts             |  8 +++++++-
 src/client/components/pageHeader.tsx | 16 ++++++++++++++++
 src/static/main.css                  | 14 +++++---------
 6 files changed, 56 insertions(+), 32 deletions(-)
 create mode 100644 src/client/components/pageHeader.tsx
diff --git a/html-templates/index.ejs b/html-templates/index.ejs
index 024e53969..85f4fd368 100644
--- a/html-templates/index.ejs
+++ b/html-templates/index.ejs
@@ -24,12 +24,6 @@
 			<a href="boards">All Boards</a>
 		</p>
 	</main>
-
-	<footer id="footer">
-	</footer>
-
-	<div id="overlay">
-	</div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/html-templates/page.ejs b/html-templates/page.ejs
index 6766463bd..36c86ecf4 100644
--- a/html-templates/page.ejs
+++ b/html-templates/page.ejs
@@ -11,21 +11,8 @@
 	<link rel="stylesheet" href="/colors.css">
 </head>
 
-<body class="container">
-	<header id="header">
-		<a href="/">OCTO</a>
-	</header>
-
-	<main id="main">
-	</main>
-
-	<footer id="footer">
-	</footer>
-
-	<div id="overlay">
-	</div>
-
-	<div id="modal">
+<body>
+	<div id="octo-tasks-app">
 	</div>
 </body>
 
diff --git a/src/client/boardPage.tsx b/src/client/boardPage.tsx
index 8bb1334e3..6e6c2a6f2 100644
--- a/src/client/boardPage.tsx
+++ b/src/client/boardPage.tsx
@@ -6,6 +6,7 @@ import { CardTree } from "./cardTree"
 import { BoardComponent } from "./components/boardComponent"
 import { CardDialog } from "./components/cardDialog"
 import { FilterComponent } from "./components/filterComponent"
+import { PageHeader } from "./components/pageHeader"
 import { TableComponent } from "./components/tableComponent"
 import { FlashMessage } from "./flashMessage"
 import { Mutator } from "./mutator"
@@ -46,6 +47,8 @@ class BoardPage implements IPageController {
 			return
 		}
 
+		this.layoutPage()
+
 		this.boardId = queryString.get("id")
 		this.viewId = queryString.get("v")
 
@@ -89,6 +92,23 @@ class BoardPage implements IPageController {
 		this.render()
 	}
 
+	private layoutPage() {
+		const root = Utils.getElementById("octo-tasks-app")
+		root.innerText = ""
+
+		const header = root.appendChild(document.createElement("div"))
+		header.id = "header"
+
+		const main = root.appendChild(document.createElement("div"))
+		main.id = "main"
+
+		const overlay = root.appendChild(document.createElement("div"))
+		overlay.id = "overlay"
+
+		const modal = root.appendChild(document.createElement("div"))
+		modal.id = "modal"
+	}
+
 	render() {
 		const { octo, boardTree } = this
 		const { board, activeView } = boardTree
@@ -96,11 +116,16 @@ class BoardPage implements IPageController {
 
 		const rootElement = Utils.getElementById("main")
 
+		ReactDOM.render(
+			<PageHeader />,
+			Utils.getElementById("header")
+		)
+
 		if (board) {
 			Utils.setFavicon(board.icon)
 		} else {
 			ReactDOM.render(
-				<div>Loading...</div>,
+				<div className="page-loading">Loading...</div>,
 				rootElement
 			)
 			return
diff --git a/src/client/boardsPage.ts b/src/client/boardsPage.ts
index ee5a3c15b..b37603446 100644
--- a/src/client/boardsPage.ts
+++ b/src/client/boardsPage.ts
@@ -16,7 +16,13 @@ class BoardsPage {
 	constructor() {
 		// This is a placeholder page
 
-		const mainPanel = Utils.getElementById("main")
+		const root = Utils.getElementById("octo-tasks-app")
+		root.innerText = ""
+
+		// Header
+		root.appendChild(Utils.htmlToElement(`<div class="page-header"><a href="/">OCTO</a></div`))
+
+		const mainPanel = root.appendChild(document.createElement("div"))
 
 		this.boardsPanel = mainPanel.appendChild(document.createElement("div"))
 
diff --git a/src/client/components/pageHeader.tsx b/src/client/components/pageHeader.tsx
new file mode 100644
index 000000000..9bea99ca6
--- /dev/null
+++ b/src/client/components/pageHeader.tsx
@@ -0,0 +1,16 @@
+import React from "react"
+
+type Props = {
+}
+
+class PageHeader extends React.Component<Props> {
+	render() {
+		return (
+			<div className="page-header">
+				<a href="/">OCTO</a>
+			</div>
+		)
+	}
+}
+
+export { PageHeader }
diff --git a/src/static/main.css b/src/static/main.css
index e4952a5c9..9dc77aa1c 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -36,7 +36,7 @@ hr {
 	margin-bottom: 8px;
 }
 
-header {
+.page-header {
 	font-size: 18px;
 	font-weight: bold;
 	background-color: #eeeeee;
@@ -44,16 +44,12 @@ header {
 	padding: 10px 20px;
 }
 
-header a {
+.page-header a {
 	color: #505050;
 }
 
-main {
-	padding: 10px 20px;
-}
-
-footer {
-	padding: 10px 20px;
+.page-loading {
+	margin: 50px auto;
 }
 
 .title, h1 {
@@ -67,7 +63,7 @@ footer {
 /* OCTO */
 
 .octo-frame {
-	padding: 10px 50px 50px 50px;
+	padding: 10px 95px 50px 95px;
 	min-width: 1000px;
 }
 
