Add basic layout

adonis0147 · Mar 3, 2017 · c8db564 · c8db564
1 parent c8a5174
commit c8db564
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
+node_modules
 tags
diff --git a/index.html b/index.html
@@ -3,10 +3,16 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
+		<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css" media="screen" charset="utf-8">
+		<link rel="stylesheet" href="./static/css/view.css" type="text/css" media="screen" charset="utf-8">
 		<title>Profile Viewer</title>
 	</head>
 	<body>
-		<h1>Hello, world!</h1>
+		<div id="sidebar"></div>
+		<div id="content">
+			<svg id="blackboard"></svg>
+		</div>
 	</body>
+	<script src="./script/view.js" charset="utf-8"></script>
 </html>
 
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "profile-viewer",
   "version": "0.1.0",
   "description": "Profile viewer for behavior tree",
-  "main": "main.js",
+  "main": "./script/main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -18,6 +18,7 @@
   "homepage": "https://github.com/adonis0147/profile-viewer#readme",
   "dependencies": {
     "bootstrap": "^3.3.7",
+    "d3": "^4.7.1",
     "jquery": "^3.1.1"
   }
 }
diff --git a/main.js → script/main.js b/main.js → script/main.js
@@ -5,7 +5,7 @@ let win
 
 function createWindow() {
 	win = new BrowserWindow({width: 800, height: 600})
-	win.loadURL(path.join('file://', __dirname, 'index.html'))
+	win.loadURL(path.join('file://', __dirname, '..', 'index.html'))
 }
 
 app.on('ready', createWindow)

diff --git a/script/view.js b/script/view.js
@@ -0,0 +1,28 @@
+const d3 = require('d3')
+
+var blackboard = d3.select('#blackboard')
+
+init()
+
+function init() {
+	initBlackboard()
+	registerEvent()
+}
+
+function initBlackboard() {
+	var min_width = blackboard.style('width')
+	var min_height = blackboard.style('height')
+
+	blackboard.style('min-width', min_width)
+	blackboard.style('min-height', min_height)
+}
+
+function registerEvent() {
+	d3.select(window).on('resize', () => {
+		console.log('Windows was resized to ' +
+				blackboard.style('width') +
+				' x ' +
+				blackboard.style('height'))
+	})
+}
+
diff --git a/static/css/view.css b/static/css/view.css
@@ -0,0 +1,43 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 0;
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+#sidebar {
+	background-color: #CCF;
+	padding: 10px;
+	width: 200px;
+	flex: none;
+}
+
+#content {
+	background-color: #CFC;
+	padding: 10px;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+svg {
+	border: 1px solid #0E0;
+	flex-grow: 1;
+	width: 100%;
+	height: 100%;
+}
+