summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPatrick Spek <p.spek@tyil.nl>2022-04-23 13:00:38 +0200
committerPatrick Spek <p.spek@tyil.nl>2022-04-23 13:00:38 +0200
commit7ca5b93fb2c1499edbacc132926f79278e550d1f (patch)
tree1dcfd6fd2ded6c5808b968b0458246da457ab559
parent3da114a29eb81c1f4f38d56229a94dfc82ff9cd3 (diff)
downloadblog-7ca5b93fb2c1499edbacc132926f79278e550d1f.tar.gz
blog-7ca5b93fb2c1499edbacc132926f79278e550d1f.tar.bz2
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.
-rw-r--r--layouts/recipes/single.html21
1 files 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>