Browse Source

HTML: implement nested ingredients list

Théophile Bastian 9 months ago
parent
commit
6c37d85ff6
4 changed files with 34 additions and 13 deletions
  1. 3 13
      layouts/partials/ingredients.html
  2. 23 0
      layouts/partials/ingredients_ul.html
  3. 5 0
      scss/style.scss
  4. 3 0
      static/css/style.css

+ 3 - 13
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>

+ 23 - 0
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>

+ 5 - 0
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;

+ 3 - 0
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; }