More style, create dom, better class structure

2017-06-12 20:08:32 +00:00
parent d34120be72
commit c55664813f
3 changed files with 60 additions and 2 deletions
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
  <script src="tagslice.js"></script>
 </head>
 <body>
-  <div id="container"></div>
+  <div id="container" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 0;"></div>
  <script>
 new TagSlice(document.getElementById('container'));
  </script>
--- a/tagslice.css
+++ b/tagslice.css
@@ -0,0 +1,37 @@
+:root {
+	/* Highly approximate color names from our pallette */
+	--orange: rgb(255,153,0);
+	--black: rgb(66,66,66);
+	--white: rgb(233,233,233);
+	--grey: rgb(188,188,188);
+	--blue: rgb(50,153,187);
+}
+
+outer {
+	display: flex;
+
+	width: 100%;
+	height: 100%;
+
+	background-color: var(--white);
+
+	flex-direction: row;
+}
+
+taglist {
+	display: block;
+
+	padding: 5px;
+
+	border-right: 2px solid var(--orange);
+
+	flex-shrink: 0;
+}
+
+objectlist {
+	display: block;
+
+	padding: 5px;
+
+	flex-grow: 1;
+}
--- a/tagslice.js
+++ b/tagslice.js
@@ -2,12 +2,33 @@

 class TagSlice {
 	constructor(container) {
+		this.buildDom_(container);
+		this.loadJson_();
+	}
+
+	buildDom_(container) {
+		let outer = document.createElement('outer');
+		container.appendChild(outer);
+
+		let taglist = document.createElement('taglist');
+		outer.appendChild(taglist);
+		taglist.innerText = 'tag!';
+
+		let objectlist = document.createElement('objectlist');
+		outer.appendChild(objectlist);
+	}
+
+	loadJson_() {
 		let xhr = new XMLHttpRequest();
 		xhr.open('GET', 'tagslice.json');
 		xhr.responseType = 'json';
 		xhr.onload = () => {
-			console.log(xhr.response);
+			this.onJsonLoad_(xhr.response);
 		};
 		xhr.send();
 	}
+
+	onJsonLoad_(response) {
+		console.log('foo', response);
+	}
 }