From eaf4565aa747a38e29f674f2b21f1acb26f66bb6 Mon Sep 17 00:00:00 2001
From: zierbeek <58994651+zierbeek@users.noreply.github.com>
Date: Sun, 20 Jun 2021 07:53:21 +0200
Subject: [PATCH] Printview columns (#572)

* Printview with multiple columns, depending on list length.

* Printview with multiple columns, depending on list length.
---
 frontend/src/components/Recipe/PrintView.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Recipe/PrintView.vue b/frontend/src/components/Recipe/PrintView.vue
index bc092e29d1d8..a3b36e8e9da4 100644
--- a/frontend/src/components/Recipe/PrintView.vue
+++ b/frontend/src/components/Recipe/PrintView.vue
@@ -31,7 +31,7 @@
       <vue-markdown :source="recipe.description"> </vue-markdown>
       <h2>{{ $t("recipe.ingredients") }}</h2>
       <ul>
-        <li v-for="(ingredient, index) in recipe.recipeIngredient" :key="index">
+        <li v-for="(ingredient, index) in recipe.recipeIngredient" :key="index" >
           <v-icon>
             {{ $globals.icons.checkboxBlankOutline }}
           </v-icon>
@@ -67,6 +67,7 @@ export default {
   components: {
     RecipeTimeCard,
     VueMarkdown,
+
   },
   props: {
     recipe: Object,
@@ -102,6 +103,13 @@ h3 {
 
 ul {
   padding-left: 1rem;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-flow: wrap column;
+  flex-flow: wrap column;
+  max-height: 300px;
+  column-gap: 25px;
 }
 
 li {