From 641fbd7c74bc8693502c196da1f4582030c72867 Mon Sep 17 00:00:00 2001
From: Lynne <lynne@bune.city>
Date: Fri, 6 Mar 2020 05:01:59 +1000
Subject: [PATCH] removed (hid) the checkboxes on method steps since they
 looked bad

---
 _includes/method.html |  2 +-
 assets/script.js      | 11 ++++++++---
 assets/style.css      | 19 +++++++++++++++----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/_includes/method.html b/_includes/method.html
index 98683b0..81fcfc8 100644
--- a/_includes/method.html
+++ b/_includes/method.html
@@ -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>
diff --git a/assets/script.js b/assets/script.js
index fc82593..6db2c90 100644
--- a/assets/script.js
+++ b/assets/script.js
@@ -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");
 		}
 	})
 }
diff --git a/assets/style.css b/assets/style.css
index a5ae6bc..79784ee 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -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 {