From 7ca5b93fb2c1499edbacc132926f79278e550d1f Mon Sep 17 00:00:00 2001
From: Patrick Spek <p.spek@tyil.nl>
Date: Sat, 23 Apr 2022 13:00:38 +0200
Subject: Use labels and input ids

Thanks sircmpwn for the feedback.

This allows the user to click on the labels in order to check the
checkboxes associated with them. This should improve usability.
---
 layouts/recipes/single.html | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/layouts/recipes/single.html b/layouts/recipes/single.html
index 36981ce..01b0bd2 100644
--- a/layouts/recipes/single.html
+++ b/layouts/recipes/single.html
@@ -39,29 +39,30 @@
 				</tr>
 			</thead>
 			<tbody>
-			{{- range .Params.ingredients }}
+			{{- range $i, $ingredient := .Params.ingredients }}
 				<tr>
 					<td>
-						<input type="checkbox">
+						<input id="ingredient{{ $i }}" type="checkbox">
 					</td>
-					<td>{{ .label }}</td>
+					<td><label for="ingredient{{ $i }}">{{ .label }}</label></td>
 					{{- if .unit }}
-					<td data-unit="{{ .unit }}" data-amount="{{ .amount }}">{{ .amount }}</td>
-					<td data-unit="{{ .unit }}">{{ .unit }}</td>
+					<td data-unit="{{ $ingredient.unit }}" data-amount="{{ $ingredient.amount }}">{{ .amount }}</td>
+					<td data-unit="{{ $ingredient.unit }}">{{ $ingredient.unit }}</td>
 					{{- else }}
-					<td colspan="2">{{ .amount }}</td>
+					<td colspan="2">{{ $ingredient.amount }}</td>
 					{{- end }}
 				</tr>
 			{{- end }}
 			</tbody>
 		</table>
 		<h2>Instructions</h2>
-		{{- range .Params.stages }}
-			<h3>{{ .label }}</h3>
+		{{- range $i, $stage := .Params.stages }}
+			<h3>{{ $stage.label }}</h3>
 			<ol>
-			{{- range .steps }}
+			{{- range $j, $step := $stage.steps }}
 				<li>
-					<input type="checkbox"> {{ . | $.Page.RenderString }}
+					<input id="stage{{ $i }}-step{{ $j }}" type="checkbox">
+					<label for="stage{{ $i }}-step{{ $j }}">{{ $step | $.Page.RenderString }}</label>
 				</li>
 			{{- end }}
 			</ol>
-- 
cgit v1.1