From d295eb45ca9eda23beae31ef1778bdd80f89db84 Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Wed, 22 Mar 2023 16:08:25 -0400
Subject: [PATCH] expandable sections

---
 public/app.css                   |  3 ++
 src/components/show_category.vue | 68 ++++++++++++++++----------------
 src/components/summary.vue       | 44 +++++++++++----------
 3 files changed, 61 insertions(+), 54 deletions(-)

diff --git a/public/app.css b/public/app.css
index a30b632..6dafa03 100644
--- a/public/app.css
+++ b/public/app.css
@@ -5,3 +5,6 @@ td,th {
 th {
 	background:lightgrey;
 }
+h2 {
+	display:inline;
+}
diff --git a/src/components/show_category.vue b/src/components/show_category.vue
index 0e873ba..d4f64d4 100644
--- a/src/components/show_category.vue
+++ b/src/components/show_category.vue
@@ -23,40 +23,42 @@
 </script>
 
 <template>
-	<h2>Show Category</h2>
-	<select @change="change">
-		<option v-for="category in categories" v-bind:value="category.id">
-			{{category.instrument}}
-			:
-			{{category.category}}
-		</option>
-	</select>
-	<table>
-		<thead>
-			<tr>
-				<th>id</th>
-			<th>description</th>
-			<th>seconds</th>
-			<th>comments</th>
-			<th>created at</th>
-			<th>category id</th>
-			<th>category</th>
-			<th>instrument</th>
-		</tr>
-		</thead>
-		<tbody>
-			<tr v-for="session in categorySessions">
-				<td>{{session.id}}</td>
-				<td>{{session.description}}</td>
-				<td>{{session.seconds}}</td>
-				<td>{{session.comments}}</td>
-				<td>{{session.created_at}}</td>
-				<td>{{session.category_id}}</td>
-				<td>{{session.category}}</td>
-				<td>{{session.instrument}}</td>
+	<details>
+		<summary><h2>Show Category</h2></summary>
+		<select @change="change">
+			<option v-for="category in categories" v-bind:value="category.id">
+				{{category.instrument}}
+				:
+				{{category.category}}
+			</option>
+		</select>
+		<table>
+			<thead>
+				<tr>
+					<th>id</th>
+				<th>description</th>
+				<th>seconds</th>
+				<th>comments</th>
+				<th>created at</th>
+				<th>category id</th>
+				<th>category</th>
+				<th>instrument</th>
 			</tr>
-		</tbody>
-	</table>
+			</thead>
+			<tbody>
+				<tr v-for="session in categorySessions">
+					<td>{{session.id}}</td>
+					<td>{{session.description}}</td>
+					<td>{{session.seconds}}</td>
+					<td>{{session.comments}}</td>
+					<td>{{session.created_at}}</td>
+					<td>{{session.category_id}}</td>
+					<td>{{session.category}}</td>
+					<td>{{session.instrument}}</td>
+				</tr>
+			</tbody>
+		</table>
+	</details>
 </template>
 
 <style scoped>
diff --git a/src/components/summary.vue b/src/components/summary.vue
index c2f95e3..8182426 100644
--- a/src/components/summary.vue
+++ b/src/components/summary.vue
@@ -16,27 +16,29 @@
 </script>
 
 <template>
-	<h2>Summary</h2>
-	<table>
-		<thead>
-			<tr>
-				<th>category id</th>
-				<th>category</th>
-				<th>chunks practiced</th>
-				<th>instrument</th>
-				<th>weight</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr v-for="category in categories">
-				<td>{{category.category_id}}</td>
-				<td>{{category.category}}</td>
-				<td>{{category.chunks_practiced}}</td>
-				<td>{{category.instrument}}</td>
-				<td>{{category.weight}}</td>
-			</tr>
-		</tbody>
-	</table>
+	<details>
+		<summary><h2>Summary</h2></summary>
+		<table>
+			<thead>
+				<tr>
+					<th>category id</th>
+					<th>category</th>
+					<th>chunks practiced</th>
+					<th>instrument</th>
+					<th>weight</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="category in categories">
+					<td>{{category.category_id}}</td>
+					<td>{{category.category}}</td>
+					<td>{{category.chunks_practiced}}</td>
+					<td>{{category.instrument}}</td>
+					<td>{{category.weight}}</td>
+				</tr>
+			</tbody>
+		</table>
+	</details>
 </template>
 
 <style scoped>