From 6c37d85ff6721109517f74bfd3c29578c601966e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9ophile=20Bastian?= <contact@tobast.fr>
Date: Mon, 18 Jan 2021 19:18:34 +0100
Subject: [PATCH] HTML: implement nested ingredients list

---
 layouts/partials/ingredients.html    | 16 +++-------------
 layouts/partials/ingredients_ul.html | 23 +++++++++++++++++++++++
 scss/style.scss                      |  5 +++++
 static/css/style.css                 |  3 +++
 4 files changed, 34 insertions(+), 13 deletions(-)
 create mode 100644 layouts/partials/ingredients_ul.html

diff --git a/layouts/partials/ingredients.html b/layouts/partials/ingredients.html
index 98cad70..a5a2f43 100644
--- a/layouts/partials/ingredients.html
+++ b/layouts/partials/ingredients.html
@@ -10,18 +10,8 @@
     </div>
     {{- end }}
 
-    <ul>
-    {{ range $.Param "ingredients" }}
-    <li>
-      <span class="ingred-qt">{{ with .qt }}{{ . | markdownify }}{{ end }}</span>
-      {{ with .article -}}
-      {{ . | markdownify -}}
-      {{- if substr . -1 1 | eq "'" -}}{{ else }} {{ end -}}
-      {{/* ^^^ No space only if article ends with an apostrophe */}}
-      {{- end -}}
-      <span class="ingred-name">{{ .name | markdownify }}</span>
-    </li>
-    {{ end }}
-    </ul>
+    {{ with $.Param "ingredients" -}}
+    {{ partial "ingredients_ul.html" . }}
+    {{- end }}
   </div>
 </div>
diff --git a/layouts/partials/ingredients_ul.html b/layouts/partials/ingredients_ul.html
new file mode 100644
index 0000000..674c026
--- /dev/null
+++ b/layouts/partials/ingredients_ul.html
@@ -0,0 +1,23 @@
+<ul>
+{{- range . }}
+  {{ if isset . "catname" }}
+</ul>
+
+<h2>{{ .catname | markdownify }}</h2>
+
+  {{ partial "ingredients_ul.html" .ingredients }}
+<ul>
+
+  {{ else }}
+  <li>
+    <span class="ingred-qt">{{ with .qt }}{{ . | markdownify }}{{ end }}</span>
+    {{ with .article -}}
+    {{ . | markdownify -}}
+    {{- if substr . -1 1 | eq "'" -}}{{ else }} {{ end -}}
+    {{/* ^^^ No space only if article ends with an apostrophe */}}
+    {{- end -}}
+    <span class="ingred-name">{{ .name | markdownify }}</span>
+  </li>
+  {{ end }}
+{{ end -}}
+</ul>
diff --git a/scss/style.scss b/scss/style.scss
index 79ba1a4..41ccbd8 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -89,6 +89,11 @@ body {
     font-weight: bold;
   }
 
+  h2 {
+    font-size: 1em;
+    font-weight: bold;
+  }
+
   .ingred-portions {
     text-align: right;
     font-style: italic;
diff --git a/static/css/style.css b/static/css/style.css
index 36c0872..f327781 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -66,6 +66,9 @@ body {
   #ingredients .ingred-title {
     font-size: 1.3em;
     font-weight: bold; }
+  #ingredients h2 {
+    font-size: 1em;
+    font-weight: bold; }
   #ingredients .ingred-portions {
     text-align: right;
     font-style: italic; }