Use CSS for step counter

what-to-click · Feb 24, 2023 · 27c830b · 27c830b
1 parent 77a9467
commit 27c830b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 15 deletions.
diff --git a/extension/firefox/content/page.html b/extension/firefox/content/page.html
@@ -186,16 +186,18 @@
       box-sizing: border-box;
       padding-top: 1em;
       border-top: 1px dashed gray;
-
+      counter-increment: step;
     }
 
     .steps .index {
       font-size: 2rem;
       font-weight: bold;
     }
 
-    .steps .index::after {
-      content: ".";
+    .steps .index::before {
+      font-size: 3rem;
+      font-weight: bold;
+      content: counter(step) ". ";
     }
 
     .step-image {
@@ -251,6 +253,7 @@
       margin-top: .8rem;
       resize: none;
       font-size: 1rem;
+      box-sizing: border-box;
     }
 
     .text-content>.content[readonly] {

diff --git a/extension/firefox/content/page/dom/editor.js b/extension/firefox/content/page/dom/editor.js
@@ -1,14 +1,4 @@
 export function deleteStep(index = -1) {
   const step = document.querySelector(`[wtc-step-index="${index}"]`);
   step.remove();
-  recountIndexes();
-}
-
-function recountIndexes() {
-  const steps = document.querySelectorAll('.step');
-  let index = 1;
-  for (const step of steps) {
-    step.querySelector('.index').innerText = index;
-    index++;
-  }
 }
diff --git a/extension/firefox/content/page/dom/init.js b/extension/firefox/content/page/dom/init.js
diff --git a/extension/firefox/manifest.json b/extension/firefox/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "What-to-click",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Create how-to documentation in seconds.",
   "icons": {
     "48": "icons/record.png"