use JS to show/hide subrecipes
Some checks failed
continuous-integration/drone/push Build is failing

This commit is contained in:
Lynne Megido 2020-03-01 16:47:33 +10:00
parent f07860b1d4
commit 5f19345653
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
4 changed files with 22 additions and 3 deletions

View file

@ -5,6 +5,6 @@
<{{tag}}>Ingredients</{{tag}}>
<ul>
{% for item in page.ingredients -%}
<li>{{ item[0] }} {%- if item[2] %} {{ item[2] }} of {% endif %} {{ item[1] }}</li>
<li>{{ item[0] }} {%- if item[2] %} {{ item[2] }} of {% endif -%} {{ item[1] }}</li>
{% endfor -%}
</ul>

View file

@ -4,6 +4,7 @@
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='/style.css'>
<script async src='/script.js'></script>
<title>{{ page.title }}</title>
</head>

View file

@ -33,8 +33,9 @@ layout: default
<h2> Subrecipes </h2>
{% for subrecipe in site.subrecipes -%}
{%- if subrecipe.parents contains id -%}
<div class='subrecipe' id='sr-{{ subrecipe.name | downcase | url_encode }}'>
<h3>{{ subrecipe.name }}</h3>
{%- assign srid = "sr-" | append: subrecipe.name | downcase | url_encode -%}
<div class='subrecipe' id='{{ srid }}'>
<div class='subrecipe-heading'><h3>{{ subrecipe.name }}</h3><span class='subrecipe-toggle show' onclick="subrecipe_toggle('{{ srid }}');"></span></div>
<div class='subrecipe-output'>
{{ subrecipe.output }}
</div>

View file

@ -24,6 +24,23 @@ body div {
height: min-content;
}
.subrecipe-heading h3 {
display: inline-block;
}
.subrecipe-toggle {
margin-left: 10px;
}
.subrecipe-toggle::after {
font-style: italic;
}
.subrecipe .subrecipe-toggle::after {
content: "Show";
}
.subrecipe.open .subrecipe-toggle::after {
content: "Hide";
}
ul {
list-style-type: "- ";
}