From 095befd9b725cb4a581dd48e67801db750a159f9 Mon Sep 17 00:00:00 2001
From: Veit Kunz <git@veit-kunz.de>
Date: Thu, 14 Apr 2022 14:26:36 +0200
Subject: [PATCH] Fix some issues to improve the print output

---
 cookbook/static/themes/tandoor.min.css       |  3 ++-
 vue/src/components/CustomInputSpinButton.vue | 22 +++++++++++++++-----
 vue/src/components/IngredientComponent.vue   |  2 +-
 vue/src/components/IngredientsCard.vue       |  2 +-
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/cookbook/static/themes/tandoor.min.css b/cookbook/static/themes/tandoor.min.css
index f329e4e87..6b49a5f04 100644
--- a/cookbook/static/themes/tandoor.min.css
+++ b/cookbook/static/themes/tandoor.min.css
@@ -9548,7 +9548,8 @@ a.text-dark:focus, a.text-dark:hover {
 @media print {
     *, :after, :before {
         text-shadow: none !important;
-        box-shadow: none !important
+        box-shadow: none !important;
+        background-color: transparent !important;
     }
 
     a:not(.btn) {
diff --git a/vue/src/components/CustomInputSpinButton.vue b/vue/src/components/CustomInputSpinButton.vue
index 37eb42e97..597d92e45 100644
--- a/vue/src/components/CustomInputSpinButton.vue
+++ b/vue/src/components/CustomInputSpinButton.vue
@@ -1,25 +1,24 @@
 // code taken from https://github.com/bootstrap-vue/bootstrap-vue/issues/4977#issuecomment-740215609 and modified
 <template>
   <b-input-group>
-    <b-input-group-prepend>
+    <b-input-group-prepend class="d-print-none">
       <b-button variant="outline-primary" class="py-0 px-2" size="sm" @click="valueChange(value - 1)">
         <b-icon icon="dash" font-scale="1.6" />
       </b-button>
     </b-input-group-prepend>
 
     <b-form-input
-      style="text-align: right; border-width: 0px; border: none; padding: 0px; padding-left: 0.5vw; padding-right: 8px; width: 50px"
       variant="outline-primary"
       :size="size"
       :value="value"
       type="number"      
       min="0"
-      class="border-secondary text-center"
+      class="custom-spin-input"
       number
       @update="valueChange"
     />
 
-    <b-input-group-append>
+    <b-input-group-append class="d-print-none">
       <b-button variant="outline-primary" class="py-0 px-2" size="sm" @click="valueChange(value + 1)">
         <b-icon icon="plus" font-scale="1.6" />
       </b-button>
@@ -71,6 +70,12 @@ export default {
 </script>
 
 <style scoped>
+input.custom-spin-input {
+  text-align: center;
+  width: 50px;
+  border-radius: 0 !important;
+}
+
 /* Remove up and down arrows inside number input */
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
@@ -83,4 +88,11 @@ input::-webkit-inner-spin-button {
 input[type=number] {
   -moz-appearance: textfield;
 }
-</style>
\ No newline at end of file
+
+@media print {
+  input.custom-spin-input {
+    background-color: transparent !important;
+    border: none !important;
+  }
+}
+</style>
diff --git a/vue/src/components/IngredientComponent.vue b/vue/src/components/IngredientComponent.vue
index 79d8c443a..9cc044489 100644
--- a/vue/src/components/IngredientComponent.vue
+++ b/vue/src/components/IngredientComponent.vue
@@ -7,7 +7,7 @@
         </template>
 
         <template v-else>
-            <td class="d-print-non" v-if="detailed && !show_shopping" @click="done">
+            <td class="d-print-none" v-if="detailed && !show_shopping" @click="done">
                 <i class="far fa-check-circle text-success" v-if="ingredient.checked"></i>
                 <i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i>
             </td>
diff --git a/vue/src/components/IngredientsCard.vue b/vue/src/components/IngredientsCard.vue
index 229e554ff..52b09e3fb 100644
--- a/vue/src/components/IngredientsCard.vue
+++ b/vue/src/components/IngredientsCard.vue
@@ -6,7 +6,7 @@
                     <h4 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}</h4>
                 </div>
                 <div class="col col-md-6 text-right" v-if="header">
-                    <h4>
+                    <h4 class="d-print-none">
                         <i v-if="show_shopping && ShoppingRecipes.length > 0" class="fas fa-trash text-danger px-2" @click="saveShopping(true)"></i>
                         <i v-if="show_shopping" class="fas fa-save text-success px-2" @click="saveShopping()"></i>
                         <i class="fas fa-shopping-cart px-2" @click="getShopping()"></i>