From c9a6ec4d3942820eb03a7e92da5f2f80db32e139 Mon Sep 17 00:00:00 2001
From: Ian Gulliver <flamingcow@gmail.com>
Date: Mon, 12 Jun 2017 20:23:51 +0000
Subject: [PATCH] More skeleton

---
 tagslice.css | 26 +++++++++++++++++++++++---
 tagslice.js  | 33 +++++++++++++++++++++++++++------
 2 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/tagslice.css b/tagslice.css
index cd23982..d5ed30f 100644
--- a/tagslice.css
+++ b/tagslice.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');
+
 :root {
 	/* Highly approximate color names from our pallette */
 	--orange: rgb(255,153,0);
@@ -14,18 +16,36 @@ outer {
 	height: 100%;
 
 	background-color: var(--white);
+	font-family: 'Roboto';
 
 	flex-direction: row;
 }
 
 taglist {
-	display: block;
-
-	padding: 5px;
+	display: flex;
 
 	border-right: 2px solid var(--orange);
 
 	flex-shrink: 0;
+
+	flex-direction: column;
+}
+
+tagsection {
+	display: flex;
+
+	padding: 5px;
+
+	border-bottom: 1px solid var(--orange);
+
+	flex-direction: column
+}
+
+tagsectiontitle {
+	display: block;
+
+	color: var(--blue);
+	font-weight: 500;
 }
 
 objectlist {
diff --git a/tagslice.js b/tagslice.js
index 6c985fc..3c6f622 100644
--- a/tagslice.js
+++ b/tagslice.js
@@ -6,16 +6,37 @@ class TagSlice {
 		this.loadJson_();
 	}
 
+	createElement_(container, tagName, text) {
+		let elem = document.createElement(tagName);
+		container.appendChild(elem);
+		if (text) {
+			elem.innerText = text;
+		}
+		return elem;
+	}
+
 	buildDom_(container) {
-		let outer = document.createElement('outer');
-		container.appendChild(outer);
+		let outer = this.createElement_(container, 'outer');
+		this.buildTagList_(outer);
+		this.buildObjectList_(outer);
+	}
 
-		let taglist = document.createElement('taglist');
-		outer.appendChild(taglist);
-		taglist.innerText = 'tag!';
+	buildTagList_(container) {
+		let taglist = this.createElement_(container, 'taglist');
+		this.tagInclude_ = this.buildTagSection_(taglist, 'Include');
+		this.tagExclude_ = this.buildTagSection_(taglist, 'Exclude');
+		this.tagSortAsc_ = this.buildTagSection_(taglist, 'Sort (ascending)')
+		this.tagSortDesc_ = this.buildTagSection_(taglist, 'Sort (descending)')
+	}
 
+	buildTagSection_(container, title) {
+		let tagsection = this.createElement_(container, 'tagsection');
+		let tagsectiontitle = this.createElement_(tagsection, 'tagsectiontitle', title);
+	}
+
+	buildObjectList_(container) {
 		let objectlist = document.createElement('objectlist');
-		outer.appendChild(objectlist);
+		container.appendChild(objectlist);
 	}
 
 	loadJson_() {