From 98713282b5905b71dde869c2c9f2aa38f8351eb8 Mon Sep 17 00:00:00 2001
From: Ian Gulliver <flamingcow@gmail.com>
Date: Thu, 15 Jun 2017 04:30:49 +0000
Subject: [PATCH] Display sections for cards

---
 tagslice.css | 28 +++++++++++++++++++++-------
 tagslice.js  |  7 ++++++-
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/tagslice.css b/tagslice.css
index 7922c13..a2f0d6c 100644
--- a/tagslice.css
+++ b/tagslice.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:400');
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,600');
 
 :root {
 	/* Highly approximate color names from our pallette */
@@ -18,6 +18,7 @@ tagList {
 	height: 100%;
 
 	background-color: var(--white);
+	color: var(--darkgrey);
 	font-family: 'Roboto';
 }
 
@@ -61,13 +62,26 @@ cardTitle::selection {
 	background: transparent;
 }
 
-cardText {
+cardDetail {
 	display: none;
-
-	color: var(--darkgrey);
-	margin-top: 0.5rem;
+	flex-direction: column;
 }
 
-card.expanded cardText {
-	display: block;
+card.expanded cardDetail {
+	display: flex;
+}
+
+cardSection {
+	display: flex;
+	flex-direction: column;
+
+	margin-top: 1rem;
+}
+
+cardSectionTitle {
+	font-weight: 600;
+}
+
+cardSectionText {
+	margin-top: 0.2rem;
 }
diff --git a/tagslice.js b/tagslice.js
index fa5229e..253e98f 100644
--- a/tagslice.js
+++ b/tagslice.js
@@ -29,7 +29,12 @@ class TagSlice {
 		title.addEventListener('click', () => {
 			elem.classList.toggle('expanded');
 		});
-		this.createElement_(elem, 'cardText', object['description']);
+		let detail = this.createElement_(elem, 'cardDetail');
+		for (let sectionName in object['content']) {
+			let section = this.createElement_(detail, 'cardSection');
+			this.createElement_(section, 'cardSectionTitle', sectionName);
+			this.createElement_(section, 'cardSectionText', object['content'][sectionName]);
+		}
 	}
 
 	parseHash_() {