Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-09 03:04:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

Printview columns (#572)

Browse Source 
* 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
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/Recipe/PrintView.vue
View File

@ -31,7 +31,7 @@
<vue-markdown :source="recipe.description"> </vue-markdown> <vue-markdown :source="recipe.description"> </vue-markdown>
<h2>{{ $t("recipe.ingredients") }}</h2> <h2>{{ $t("recipe.ingredients") }}</h2>
<ul> <ul>
<li v-for="(ingredient, index) in recipe.recipeIngredient" :key="index"> <li v-for="(ingredient, index) in recipe.recipeIngredient" :key="index" >
<v-icon> <v-icon>
{{ $globals.icons.checkboxBlankOutline }} {{ $globals.icons.checkboxBlankOutline }}
</v-icon> </v-icon>
@ -67,6 +67,7 @@ export default {
components: { components: {
RecipeTimeCard, RecipeTimeCard,
VueMarkdown, VueMarkdown,
}, },
props: { props: {
recipe: Object, recipe: Object,
@ -102,6 +103,13 @@ h3 {
ul { ul {
padding-left: 1rem; 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 { li {