From 390cf235deb31bcda99347cdf09cd93ffdb6de46 Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Thu, 15 Dec 2022 15:37:18 +0100
Subject: [PATCH] firmware/bootloaderInstructions: Keep counting instructions.

This ensures the instruction step counter does not reset after a heading.
---
 .../BootloaderInstructions.tsx                  |  6 +++---
 .../bootloaderInstructions.scss                 | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/firmware/bootloaderInstructions/BootloaderInstructions.tsx b/src/firmware/bootloaderInstructions/BootloaderInstructions.tsx
index 31ed8c55..b89c08a2 100644
--- a/src/firmware/bootloaderInstructions/BootloaderInstructions.tsx
+++ b/src/firmware/bootloaderInstructions/BootloaderInstructions.tsx
@@ -209,7 +209,7 @@ const BootloaderInstructions: React.VoidFunctionComponent<
             <p>
                 <strong>{i18n.translate('prepare.start')}</strong>
             </p>
-            <ol>
+            <ol className="firstList">
                 <li>
                     {i18n.translate(
                         hubHasUSB(hubType) ? 'prepare.usb' : 'prepare.batteries',
@@ -230,7 +230,7 @@ const BootloaderInstructions: React.VoidFunctionComponent<
             <p>
                 <strong>{i18n.translate('step.start')}</strong>
             </p>
-            <ol>
+            <ol className="continuedList">
                 {/* City hub has power issues and requires disconnecting motors/sensors */}
                 {hubType === Hub.City && (
                     <li
@@ -322,7 +322,7 @@ const BootloaderInstructions: React.VoidFunctionComponent<
                     <p>
                         <strong>{i18n.translate('connect.start')}</strong>
                     </p>
-                    <ol>
+                    <ol className="continuedList">
                         <li>
                             {i18n.translate('connect.clickConnectAndFlash', {
                                 flashButton: <strong>{flashButton}</strong>,
diff --git a/src/firmware/bootloaderInstructions/bootloaderInstructions.scss b/src/firmware/bootloaderInstructions/bootloaderInstructions.scss
index 1bfe0556..7c13eff8 100644
--- a/src/firmware/bootloaderInstructions/bootloaderInstructions.scss
+++ b/src/firmware/bootloaderInstructions/bootloaderInstructions.scss
@@ -11,3 +11,20 @@
     display: block;
     margin: 0 auto;
 }
+
+// Only first ol should reset.
+ol.firstList {
+    counter-reset: listCounter 0;
+}
+
+// Increment on each li, no matter which list.
+ol.firstList li,
+ol.continuedList li {
+    counter-increment: listCounter;
+}
+
+// Use counter value to set marker, no matter which list.
+ol.firstList li::marker,
+ol.continuedList li::marker {
+    content: counter(listCounter, decimal) '. ';
+}