Replace checkmark with strikethrough for recipe ingredients

CHANGELOG.md

@@ -13,6 +13,8 @@
   [#1767](https://github.com/nextcloud/cookbook/pull/1767) @lneugebauer
 - Show info for empty cookbook or categories in recipe overview
   [#1866](https://github.com/nextcloud/cookbook/pull/1866) @seyfeb
+- Replace checkmark with strikethrough for recipe ingredients
+  [#1908](https://github.com/nextcloud/cookbook/pull/1908) @j0hannesr0th
 
 ### Fixed
 - Fix translation string to not contain quotes

src/components/RecipeIngredient.vue

@@ -6,9 +6,8 @@
         }"
         @click="toggleDone"
     >
-        <div class="checkmark" :class="{ done: isDone }">✔</div>
         <div class="ingredient">
-            <VueShowdown :markdown="displayIngredient" />
+            <VueShowdown :markdown="formattedIngredient" flavor="github" />
         </div>
         <span v-if="!ingredientHasCorrectSyntax" class="icon-error" />
     </li>
@@ -44,6 +43,11 @@ export default {
             }
             return this.ingredient
         },
+        formattedIngredient() {
+            return this.isDone
+                ? `~~${this.displayIngredient}~~`
+                : `**${this.displayIngredient}**`
+        },
     },
     methods: {
         isHeader() {
@@ -69,37 +73,12 @@ li {
     list-style-type: none;
 }
 
-.unindented {
-    position: relative;
-    left: -1.25em;
-}
-
-li > .checkmark {
-    display: inline;
-    visibility: hidden;
-}
-
-li > .done {
-    visibility: visible;
-}
-
-li:hover > .checkmark {
-    color: var(--color-primary-element);
-    opacity: 0.5;
-    visibility: visible;
-}
-
 li > .ingredient {
     display: inline;
     padding-left: 1em;
-    margin-left: 0.3em;
     text-indent: -1em;
 }
 
-.ingredient:deep(a) {
-    text-decoration: underline;
-}
-
 li > span.icon-error {
     margin-left: 0.3em;
 }