From 717452d2f20feb2701dbf0914ebfcad3d45ec87c Mon Sep 17 00:00:00 2001
From: Ian Gulliver <flamingcow@gmail.com>
Date: Mon, 12 Jun 2017 22:28:42 +0000
Subject: [PATCH] Tag styling

---
 tagslice.css | 28 ++++++++++++++++++++++------
 tagslice.js  | 15 ++++++++++-----
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/tagslice.css b/tagslice.css
index d5ed30f..b3194f2 100644
--- a/tagslice.css
+++ b/tagslice.css
@@ -1,11 +1,12 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');
+@import url('https://fonts.googleapis.com/css?family=Roboto');
 
 :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);
+	--white: rgb(255,255,255);
+	--lightgrey: rgb(233,233,233);
+	--darkgrey: rgb(188,188,188);
 	--blue: rgb(50,153,187);
 }
 
@@ -38,14 +39,29 @@ tagsection {
 
 	border-bottom: 1px solid var(--orange);
 
-	flex-direction: column
+	flex-direction: column;
 }
 
-tagsectiontitle {
+tag {
 	display: block;
 
+	padding: 3px;
+
+	border: 1px solid var(--darkgrey);
+	border-radius: 8px;
+
+	background-color: var(--lightgrey);
 	color: var(--blue);
-	font-weight: 500;
+	font-family: 'Roboto';
+	font-size: small;
+	text-align: center;
+
+	cursor: move;
+	user-select: none;
+}
+
+tag.placeholder {
+	opacity: 0.7;
 }
 
 objectlist {
diff --git a/tagslice.js b/tagslice.js
index 3c6f622..67bdfa3 100644
--- a/tagslice.js
+++ b/tagslice.js
@@ -23,15 +23,16 @@ class TagSlice {
 
 	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)')
+		this.tagInclude_ = this.buildTagSection_(taglist, 'include');
+		this.tagExclude_ = this.buildTagSection_(taglist, 'exclude');
+		this.tagSortAsc_ = this.buildTagSection_(taglist, 'sort ⇣')
+		this.tagSortDesc_ = this.buildTagSection_(taglist, 'sort ⇡')
 	}
 
 	buildTagSection_(container, title) {
 		let tagsection = this.createElement_(container, 'tagsection');
-		let tagsectiontitle = this.createElement_(tagsection, 'tagsectiontitle', title);
+		this.buildTag_(tagsection, title).classList.add('placeholder');
+		return tagsection;
 	}
 
 	buildObjectList_(container) {
@@ -39,6 +40,10 @@ class TagSlice {
 		container.appendChild(objectlist);
 	}
 
+	buildTag_(container, name) {
+		return this.createElement_(container, 'tag', name);
+	}
+
 	loadJson_() {
 		let xhr = new XMLHttpRequest();
 		xhr.open('GET', 'tagslice.json');