lynnesbian/recipe-site
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_includes/ingredients.html
View file

@ -5,6 +5,6 @@
<{{tag}}>Ingredients</{{tag}}> <{{tag}}>Ingredients</{{tag}}>
<ul> <ul>
{% for item in page.ingredients -%} {% 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 -%} {% endfor -%}
</ul> </ul>

1
_layouts/default.html
View file

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

5
_layouts/recipe.html
View file

@ -33,8 +33,9 @@ layout: default
<h2> Subrecipes </h2> <h2> Subrecipes </h2>
{% for subrecipe in site.subrecipes -%} {% for subrecipe in site.subrecipes -%}
{%- if subrecipe.parents contains id -%} {%- if subrecipe.parents contains id -%}
<div class='subrecipe' id='sr-{{ subrecipe.name | downcase | url_encode }}'> {%- assign srid = "sr-" | append: subrecipe.name | downcase | url_encode -%}
<h3>{{ subrecipe.name }}</h3> <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'> <div class='subrecipe-output'>
{{ subrecipe.output }} {{ subrecipe.output }}
</div> </div>

17
style.css
View file

@ -24,6 +24,23 @@ body div {
height: min-content; 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 { ul {
list-style-type: "- "; list-style-type: "- ";
} }