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

removed (hid) the checkboxes on method steps since they looked bad

Browse source
This commit is contained in:
Lynne Megido 2020-03-06 05:01:59 +10:00
parent ebcb267739
commit 641fbd7c74
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
3 changed files with 24 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_includes/method.html
View file

@ -8,7 +8,7 @@
<ol class='method' data-cb-prefix='{{ prefix }}'>
{% assign i = 1 -%}
{%- for item in page.method -%}
<li><input id='{{ prefix }}-{{ i }}' class='method-checkbox' data-number='{{ i }}' type='checkbox'><label for='{{ prefix }}-{{ i }}'>{{ item }}</label></li>
<li><label for='{{ prefix }}-{{ i }}'>{{ item }}</label><input id='{{ prefix }}-{{ i }}' class='method-checkbox' data-number='{{ i }}' type='checkbox'></li>
{% assign i = i | plus: 1 -%}
{%- endfor %}
</ol>

11
assets/script.js
View file

@ -10,16 +10,21 @@ window.onload = function () {
if (this.checked) {
// check everything before this - if you've done step 6, you've done steps 1-5
for (i = num - 1; i > 0; i--) {
dgel(`${prefix}-${i}`).checked = true;
cb = dgel(`${prefix}-${i}`);
cb.checked = true;
cb.parentElement.classList.add("checked");
}
} else {
// uncheck everything after this - you can't have done step 8 if you haven't done step 4
console.log(num + 1);
for (i = num + 1; i <= max; i++) {
console.log(i);
dgel(`${prefix}-${i}`).checked = false;
cb = dgel(`${prefix}-${i}`);
cb.checked = false;
cb.parentElement.classList.remove("checked");
}
}
this.parentElement.classList.toggle("checked");
}
})
}

19
assets/style.css
View file

@ -114,10 +114,13 @@ a:not(.recipe-listing):hover {
ul {
list-style-type: "- ";
padding-left: 20px;
}
ol {
padding-left: 30px;
}
ul, ol {
list-style-position: inside;
padding-left: 10px;
list-style-position: outside;
}
li {
padding: 1px 0;
@ -167,7 +170,11 @@ a.recipe-listing {
border-top: thin black solid;
}
.method li input[type=checkbox]:checked + label {
.method li input[type=checkbox] {
display: none;
}
.method li.checked {
color: grey;
text-decoration: line-through;
}
@ -239,7 +246,11 @@ footer, .subtle {
li {
padding: 0;
}
input[type="checkbox"], footer {
.method li.checked {
text-decoration: none;
color: black;
}
footer {
display: none;
}
h1.scrolling {