gallery: make it possible to collapse tag spaces

2 files changed, 17 insertions, 12 deletions

diff --git a/public/gallery.js b/public/gallery.js
index 01439f7..decb197 100644
--- a/public/gallery.js
+++ b/public/gallery.js
@@ -472,13 +472,15 @@ let ViewBar = {
 			m('ul', ViewModel.paths.map(path =>
 				m('li', m(ViewBarPath, {path})))),
 			m('h2', "Tags"),
-			Object.entries(ViewModel.tags).map(([space, tags]) => [
-				m("h3", m(m.route.Link, {href: `/tags/${space}`}, space)),
-				m("ul.tags", Object.entries(tags)
-					.sort(([t1, w1], [t2, w2]) => (w2 - w1))
-					.map(([tag, score]) =>
-						m(ScoredTag, {space, tagname: tag, score}))),
-			]),
+			Object.entries(ViewModel.tags).map(([space, tags]) =>
+				m('details[open]', [
+					m('summary', m("h3",
+						m(m.route.Link, {href: `/tags/${space}`}, space))),
+					m("ul.tags", Object.entries(tags)
+						.sort(([t1, w1], [t2, w2]) => (w2 - w1))
+						.map(([tag, score]) =>
+							m(ScoredTag, {space, tagname: tag, score}))),
+				])),
 		])
 	},
 }
@@ -609,13 +611,14 @@ let SearchRelated = {
 	view(vnode) {
 		return Object.entries(SearchModel.related)
 			.sort((a, b) => a[0].localeCompare(b[0]))
-			.map(([space, tags]) => [
-				m('h2', space),
+			.map(([space, tags]) => m('details[open]', [
+				m('summary', m('h2',
+					m(m.route.Link, {href: `/tags/${space}`}, space))),
 				m('ul.tags', tags
 					.sort((a, b) => (b.score - a.score))
 					.map(({tag, score}) =>
 						m(ScoredTag, {space, tagname: tag, score}))),
-			])
+			]))
 	},
 }
 
diff --git a/public/style.css b/public/style.css
index 7fd0079..9acf10b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -24,13 +24,15 @@ a { color: inherit; }
 .header .activity { padding: .25rem .5rem; align-self: center; color: #fff; }
 .header .activity.error { color: #f00; }
 
+summary h2, summary h3 { display: inline-block; }
+
 .sidebar { padding: .25rem .5rem; background: var(--shade-color);
 	border-right: 1px solid #ccc; overflow: auto;
 	min-width: 10rem; max-width: 20rem; flex-shrink: 0; }
 .sidebar input { width: 100%; box-sizing: border-box; margin: .5rem 0;
 	font-size: inherit; }
 .sidebar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; }
-.sidebar ul { margin: .5rem 0; padding: 0; }
+.sidebar ul { margin: 0; padding: 0; }
 
 .sidebar .path { margin: .5rem -.5rem; }
 .sidebar .path li { margin: 0; padding: 0; }
@@ -81,7 +83,7 @@ img.thumbnail, .thumbnail.missing { box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
 .viewbar { padding: .25rem .5rem; background: #eee;
 	border-left: 1px solid #ccc; min-width: 20rem; overflow: auto; }
 .viewbar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; }
-.viewbar h3 { margin: 0.25em 0; padding: 0; font-size: 1.1rem; }
+.viewbar h3 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.1rem; }
 .viewbar ul { margin: 0; padding: 0 0 0 1.25em; list-style-type: "- "; }
 .viewbar ul.tags { padding: 0; list-style-type: none; }
 .viewbar li { margin: 0; padding: 0; }