Printview columns (#572)

* Printview with multiple columns, depending on list length.

* Printview with multiple columns, depending on list length.
This commit is contained in:
zierbeek 2021-06-20 07:53:21 +02:00 committed by GitHub
parent 3714baf5d6
commit eaf4565aa7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

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