diff options
| author | Patrick Spek <p.spek@tyil.nl> | 2022-04-23 13:00:38 +0200 |
|---|---|---|
| committer | Patrick Spek <p.spek@tyil.nl> | 2022-04-23 13:00:38 +0200 |
| commit | 7ca5b93fb2c1499edbacc132926f79278e550d1f (patch) | |
| tree | 1dcfd6fd2ded6c5808b968b0458246da457ab559 | |
| parent | 3da114a29eb81c1f4f38d56229a94dfc82ff9cd3 (diff) | |
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.html | 21 |
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> |