Merge pull request #1723 from vekunz/feature/optimize_printing

Fix some issues to improve the print output

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) {

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>
+
+@media print {
+  input.custom-spin-input {
+    background-color: transparent !important;
+    border: none !important;
+  }
+}
+</style>

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>

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>