expandable sections

public/app.css

@@ -5,3 +5,6 @@ td,th {
 th {
 	background:lightgrey;
 }
+h2 {
+	display:inline;
+}

src/components/show_category.vue

@@ -23,40 +23,42 @@
 </script>
 
 <template>
-	<h2>Show Category</h2>
+	<details>
-	<select @change="change">
+		<summary><h2>Show Category</h2></summary>
-		<option v-for="category in categories" v-bind:value="category.id">
+		<select @change="change">
-			{{category.instrument}}
+			<option v-for="category in categories" v-bind:value="category.id">
-			:
+				{{category.instrument}}
-			{{category.category}}
+				:
-		</option>
+				{{category.category}}
-	</select>
+			</option>
-	<table>
+		</select>
-		<thead>
+		<table>
-			<tr>
+			<thead>
-				<th>id</th>
+				<tr>
-			<th>description</th>
+					<th>id</th>
-			<th>seconds</th>
+				<th>description</th>
-			<th>comments</th>
+				<th>seconds</th>
-			<th>created at</th>
+				<th>comments</th>
-			<th>category id</th>
+				<th>created at</th>
-			<th>category</th>
+				<th>category id</th>
-			<th>instrument</th>
+				<th>category</th>
-		</tr>
+				<th>instrument</th>
-		</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>
+			</thead>
-	</table>
+			<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>

src/components/summary.vue

@@ -16,27 +16,29 @@
 </script>
 
 <template>
-	<h2>Summary</h2>
+	<details>
-	<table>
+		<summary><h2>Summary</h2></summary>
-		<thead>
+		<table>
-			<tr>
+			<thead>
-				<th>category id</th>
+				<tr>
-				<th>category</th>
+					<th>category id</th>
-				<th>chunks practiced</th>
+					<th>category</th>
-				<th>instrument</th>
+					<th>chunks practiced</th>
-				<th>weight</th>
+					<th>instrument</th>
-			</tr>
+					<th>weight</th>
-		</thead>
+				</tr>
-		<tbody>
+			</thead>
-			<tr v-for="category in categories">
+			<tbody>
-				<td>{{category.category_id}}</td>
+				<tr v-for="category in categories">
-				<td>{{category.category}}</td>
+					<td>{{category.category_id}}</td>
-				<td>{{category.chunks_practiced}}</td>
+					<td>{{category.category}}</td>
-				<td>{{category.instrument}}</td>
+					<td>{{category.chunks_practiced}}</td>
-				<td>{{category.weight}}</td>
+					<td>{{category.instrument}}</td>
-			</tr>
+					<td>{{category.weight}}</td>
-		</tbody>
+				</tr>
-	</table>
+			</tbody>
+		</table>
+	</details>
 </template>
 
 <style scoped>